Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codebucks27/nextjs-creative-portfolio-starter-code-files
Interactive 3D Portfolio Website with Next.js, Three.js & Tailwind CSS | Checkout the tutorial link ⚡
https://github.com/codebucks27/nextjs-creative-portfolio-starter-code-files
ai-images emailjs framer-motion nextjs portfolio portfolio-website react-hook-form sonner tailwindcss threejs
Last synced: 3 days ago
JSON representation
Interactive 3D Portfolio Website with Next.js, Three.js & Tailwind CSS | Checkout the tutorial link ⚡
- Host: GitHub
- URL: https://github.com/codebucks27/nextjs-creative-portfolio-starter-code-files
- Owner: codebucks27
- Created: 2024-03-02T12:16:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T07:08:15.000Z (3 months ago)
- Last Synced: 2024-11-08T07:50:33.144Z (about 2 months ago)
- Topics: ai-images, emailjs, framer-motion, nextjs, portfolio, portfolio-website, react-hook-form, sonner, tailwindcss, threejs
- Language: JavaScript
- Homepage: https://next-js-creative-portfolio-website.vercel.app/
- Size: 20 MB
- Stars: 89
- Watchers: 2
- Forks: 52
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Creative Portfolio Tutorial: Build Amazing Portfolio Website with Next.js, Three.js, and Tailwind CSS 🔥
![GitHub stars](https://img.shields.io/github/stars/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files?style=social&logo=ApacheSpark&label=Stars)
![GitHub forks](https://img.shields.io/github/forks/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files?style=social&logo=KashFlow&maxAge=3600)
![Github Followers](https://img.shields.io/github/followers/codebucks27.svg?style=social&label=Follow)This repository contains **starter code** for Next.js Creative Portfolio website built using Next.js and Three.js.
For Demo checkout following link👇:
[Nextjs Creative Portfolio Website Demo](https://next-js-creative-portfolio-website.vercel.app/)Final Code👇:
➡ Link 💚: [Nextjs Creative Portfolio Website Final Code](https://github.com/codebucks27/Next.js-Creative-Portfolio-Website)If you want to learn how to create it please follow below tutorial👇:
➡ Tutorial Link 💚: [Personal Portfolio Website with Next.js, Three.js & Tailwind CSS Tutorial](https://youtu.be/T5t46vuW8fo)
[![YouTube Video Views](https://img.shields.io/youtube/views/T5t46vuW8fo
)](https://youtu.be/T5t46vuW8fo)💚 Checkout my personal website [DevDreaming](https://devdreaming.com)
---
# ⭐DO NOT FORGET TO STAR THIS REPO⭐
---## Images of The Portfolio Website:
#### Home
![Nextjs Creative Portfolio Website](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/Home-desktop.png)#### About
![Nextjs Creative Portfolio Website About Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/About-desktop-full.png)#### Projects
![Next.js Creative Portfolio Website Projects Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/Projects-desktop.png)#### Contact
![Next.js Creative Portfolio Website Contact Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/Contact-desktop.png)#### Mobile Version
![Next.js Creative Portfolio Website Contact Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/Home-mobile.png)
![Next.js Creative Portfolio Website Contact Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/About-mobile.png)
![Next.js Creative Portfolio Website Contact Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/Projects-mobile.png)
![Next.js Creative Portfolio Website Contact Page](https://github.com/codebucks27/Nextjs-Creative-Portfolio-Starter-Code-Files/blob/main/website%20images/Contact-mobile.png)## Resources Used in This Project
#### 3D Models
- ["Tim Mckee - Boy Wizard"](https://skfb.ly/6YATu) by [elbertwithane is licensed under Creative Commons Attribution ](http://creativecommons.org/licenses/by/4.0/).
- ["Stylized wizard hat"](https://skfb.ly/ozxOQ) by [Enkarra is licensed under Creative Commons Attribution](http://creativecommons.org/licenses/by/4.0/).
- ["Wizard Staff"](https://skfb.ly/6QYZw) by [Toymancer Studio is licensed under Creative Commons Attribution](http://creativecommons.org/licenses/by/4.0/).#### AI Images
- Created with the help of [Playground AI](https://playgroundai.com/)
#### Github Stats & Details
- [Github ReadMe Stats](https://github.com/anuraghazra/github-readme-stats)
- [Skills Icons](https://github.com/tandpfun/skill-icons)
- [Github Readme Streak Stats](https://github.com/denvercoder1/github-readme-streak-stats)#### Development Resources
- Fonts from [Google Fonts](https://fonts.google.com/)
- Icons from [Lucide Icons](https://lucide.dev/)
- Notifications from [Sonner](https://sonner.emilkowal.ski/)
- Form created using [react-hook-form](https://react-hook-form.com/)
- Animations using [framer-motion](https://www.framer.com/motion/)
- Emails using [Emailjs](https://www.emailjs.com/)
- Convert 3d models to JSX using [Gltf JSX](https://github.com/pmndrs/gltfjsx)#### Audio
- Music by Shiden Beats Music from Pixabay
---
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, install the dependencies and run the development server:
```bash
npm run install # to install all dependenciesnpm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.