Next.js-Creative-Portfolio-Website

The Next.js Creative Portfolio Website is an open-source portfolio template and tutorial codebase that builds an interactive 3D portfolio site using Next.js, Three.js, and Tailwind CSS. The repository contains the final code from a YouTube tutorial by codebucks27 (DevDreaming), with a live demo hosted on Vercel.

What is the Next.js Creative Portfolio Website?

The Next.js Creative Portfolio Website is a portfolio template built with Next.js 16.2, React 19, and Tailwind CSS 4, featuring interactive 3D models created with Three.js, @react-three/fiber 9, and @react-three/drei 10. It includes four main pages — Home, About, Projects, and Contact — plus a responsive mobile layout. The template takes project content, profile details, and contact form submissions as input and outputs a live, animated portfolio site ready for deployment.

Key Features

• 3D interactive models — Three.js wizard models ("Tim Mckee - Boy Wizard", "Stylized wizard hat", "Wizard Staff") are imported as JSX via gltfjsx and rendered with @react-three/fiber; client-side wrappers named *Client.jsx comply with Next.js 15+ server component rules.
• Contact form with EmailJS — The Contact page uses react-hook-form for validation and @emailjs/browser 4.4 to send emails directly from the browser without a backend.
• Framer Motion animations — Framer Motion 12 drives page transitions and scroll-triggered UI animations throughout the site.
• Tailwind CSS 4 styling — Utility-first CSS uses the @import "tailwindcss" directive and keeps a legacy tailwind.config.js via the @config directive.
• Integrated stats widgets — GitHub ReadMe Stats, skill icons, and streak stats are embedded to display developer coding metrics.
• Sonner notifications — Toast-style feedback is provided by the sonner 2 library.
• Bun package manager — The project uses Bun (bun install, bun dev) and checks in bun.lock instead of package-lock.json.
• Current dependency stack — A 2026 upgrade moved the template to Next.js 16.2 with Turbopack, React 19, Tailwind 4, ESLint 9 with flat config, and the lint script changed from next lint to eslint ..

Who is it for?

• Developers learning Next.js and Three.js — They can follow the linked YouTube tutorial or study the final code to see how 3D models integrate with a modern Next.js app and the app router.
• Creative professionals and freelancers — Designers, artists, and developers who want an interactive, 3D-heavy portfolio to present projects, an about bio, and a contact channel.
• Open-source contributors — Anyone who wants to fork the repository, customize the 3D assets, or extend the contact form and stats integrations for their own site.

What can you do with the Next.js Creative Portfolio Website?

• Showcase your work: Replace the sample projects and AI-generated images (created with Playground AI) with your own content to publish a personal portfolio with a wizard-themed 3D aesthetic.
• Learn modern React architecture: Explore how the code splits client components marked "use client" from server components and uses Turbopack for faster builds.
• Set up email notifications: Plug your own EmailJS credentials into the react-hook-form driven contact form to receive messages without a dedicated mail server.

How does it work?

Clone or download the repository, install dependencies with bun install, then start the development server with bun dev and open http://localhost:3000. For the original pre-upgrade code (Next.js 14, React 18, Tailwind 3, npm), check out commit 3b313c4 from the git history.

FAQ

Do I need a backend to run the contact form?

No, the contact form uses EmailJS directly from the browser, so emailing works without your own server. You will need an EmailJS account and to configure your service ID and template.

What package manager does this project use?

The repository is configured for Bun. Install Bun, then run bun install and bun dev. The original tutorial code used npm and is preserved in a git commit.

How do I get the 3D models?

The models are linked under "Resources Used in This Project": "Tim Mckee - Boy Wizard", "Stylized wizard hat", and "Wizard Staff", each with a Creative Commons Attribution license from Sketchfab. They are converted to JSX with Gltf JSX.

Can I deploy this to Vercel?

Yes, the repository includes a live demo at a Vercel URL, and the project is a standard Next.js app ready for Vercel deployment.