Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 ⚡

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 dependencies

npm 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.