Next.js Creative Portfolio Tutorial: Build Amazing Portfolio Website with Next.js, Three.js, and Tailwind CSS 🔥

        

This repository contains final code for Next.js Creative Portfolio website built using Next.js and Three.js.

For Demo checkout following link👇: Nextjs Creative Portfolio Website Demo

---

✨ Checkout my brand new Saas application -> AI Headshot Generator

---

Starter Code Files👇: ➡ Link 💚: Nextjs Creative Portfolio Website Starter Code

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

💚 Checkout my personal website DevDreaming

---

⭐DO NOT FORGET TO STAR THIS REPO⭐

---

Images of The Portfolio Website:

Home

About

Projects

Contact

Mobile Version

Resources Used in This Project

3D Models

• "Tim Mckee - Boy Wizard" by elbertwithane is licensed under Creative Commons Attribution .
• "Stylized wizard hat" by Enkarra is licensed under Creative Commons Attribution.
• "Wizard Staff" by Toymancer Studio is licensed under Creative Commons Attribution.

AI Images

• Created with the help of Playground AI

Github Stats & Details

• Github ReadMe Stats
• Skills Icons
• Github Readme Streak Stats

Development Resources

• Fonts from Google Fonts
• Icons from Lucide Icons
• Notifications from Sonner
• Form created using react-hook-form
• Animations using framer-motion
• Emails using Emailjs
• Convert 3d models to JSX using Gltf JSX

Audio

• Music by Shiden Beats Music from Pixabay

---

This is a Next.js project bootstrapped with create-next-app.

Getting Started

This repo now uses Bun as the package manager. Install Bun, then:

bun install   # install all dependencies
bun dev       # start the dev server

Open http://localhost:3000 with your browser to see the result.

2026 Dependency Upgrade

The project has been refreshed to run on the latest stable versions of every major dependency. Headline changes:

• Next.js 14.2 → 16.2 (Turbopack builds, removal of next lint — replaced with eslint .)
• React / React DOM 18 → 19
• Tailwind CSS 3 → 4 (new @tailwindcss/postcss plugin, @import "tailwindcss" + @config directive in globals.css to keep the existing JS config)
• @react-three/fiber 8 → 9 and @react-three/drei 9 → 10 (React 19 compatible)
• framer-motion 11 → 12, three 0.162 → 0.184, sonner 1 → 2, @emailjs/browser 4.2 → 4.4, react-hook-form, lucide-react, sharp all bumped to latest
• ESLint 8 → 9 with flat config (eslint.config.mjs) and eslint-config-next 16
• Package manager: switched from npm to Bun — package-lock.json removed, bun.lock checked in

Code changes required by the upgrade

• Next.js 15+ disallows dynamic(..., { ssr: false }) inside Server Components, so the three model imports (Wizard, HatModel, Staff) are now wrapped in tiny *Client.jsx files marked "use client".
• globals.css switched from @tailwind base/components/utilities to @import "tailwindcss" + @config "../../tailwind.config.js" (legacy JS config kept as-is via the v4 @config directive).
• postcss.config.js now uses @tailwindcss/postcss instead of the tailwindcss PostCSS plugin.
• .eslintrc.json replaced with eslint.config.mjs (flat config) using eslint-config-next/core-web-vitals.
• package.json lint script changed from next lint to eslint ..

Want the original tutorial code?

The pre-upgrade version (Next.js 14, React 18, Tailwind 3, npm) is preserved in git history. To check it out locally:

git checkout 3b313c4   # last commit before the upgrade

Or browse it on GitHub: commit 3b313c4.