# Build a Stunning Developer Portfolio Website with Next.js 16, Tailwind CSS v4 & Motion

> Build an editorial, magazine-style developer portfolio from scratch with Next.js 16, Tailwind CSS v4 and Motion. Features a day/night hero video switch, a live location + weather widget with zero API keys, an animated project carousel and full responsiveness.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/nextjs-16-developer-portfolio-website-tailwind-css-v4
- **Author:** CodeBucks
- **Published:** 2026-07-19
- **Topics:** Next.js, Tailwind CSS, Framer Motion, Animation, React Js

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=1qJEZVr6eXE)**

### Overview

In this full course, you'll build a stunning, modern **developer portfolio website** from scratch using **Next.js 16**, **Tailwind CSS v4**, and **Motion** (Framer Motion).

Instead of yet another template-looking portfolio, you'll create an **editorial, magazine-style** design: a warm cream canvas, hairline borders instead of drop shadows, light-weight display type with negative tracking, and a single restrained orange accent. On top of that sits the signature feature - a **day/night hero switch** 🌗 that swaps a live background video with fully choreographed transitions.

No paid services. No API keys. No `.env` file. If you know what a React component is, you can build this.

**Live Demo**: [nextjs-developer-portfolio-eta.vercel.app](https://nextjs-developer-portfolio-eta.vercel.app)

### What You'll Learn

- **Project setup** - scaffolding a Next.js 16 project with **Bun** and **Turbopack**.
- **Design systems in Tailwind CSS v4** - using the new CSS-first `@theme` config so one token change flows through the entire site.
- **Reusable scroll animations** - building a `Reveal` component with Motion and wiring up choreographed scroll reveals.
- **A cinematic hero** - background video, poster fallbacks, and the day/night switch that transitions the whole section at once.
- **Live location + weather with zero API keys** - server-side geolocation via Vercel geo headers (with an ipapi.co fallback in dev) plus keyless weather from Open-Meteo.
- **Animated data widgets** - an AI token-usage stat card that brings numbers to life.
- **An animated project carousel** for the Selected Work section.
- **Capabilities, Approach, Stack, About & Contact** sections - including a faux code-editor mockup for the tech stack.
- **A scroll-aware header** with a mobile menu and a smooth overlay -> solid transition.
- **Full responsiveness and accessibility**, including proper `prefers-reduced-motion` support.

### 🚀 Key Features

- 🌗 **Day/night hero switch** - one toggle swaps day and night background videos with choreographed transitions.
- 📍 **Live visitor location + real-time weather** - server-side, with **zero API keys**.
- 📊 **AI token-usage widget** - an animated stat card.
- 🎨 **Editorial design system** - warm cream canvas, hairline depth, restrained orange accent.
- 🖼 **Selected Work** - an animated project carousel.
- 🧩 **Capabilities** - powered by hand-crafted animated icons.
- 🪜 **Approach / process** section, plus a faux code-editor **Stack** section.
- 🧭 **Scroll-aware header** with a mobile menu, and a matching footer.
- 🎬 **Choreographed scroll reveals** with full `prefers-reduced-motion` support.
- 📱 **Fully responsive** and **content-centralized** - nearly all copy lives in one file, so customizing is mostly editing text.
- ▲ **Deploys to Vercel with zero config** - the location and weather widget goes live automatically.

### 🛠 Tech Stack

- **Framework:** Next.js 16 (App Router + Turbopack)
- **UI Library:** React 19
- **Language:** TypeScript
- **Styling:** Tailwind CSS v4 (CSS-first config)
- **Components:** shadcn/ui
- **Animation:** Motion (Framer Motion) via `motion/react`
- **Icons:** @phosphor-icons/react
- **Theming:** next-themes
- **Fonts:** Geist + Geist Mono
- **Weather API:** Open-Meteo (free - keyless)
- **Geolocation:** Vercel geo headers in production - ipapi.co fallback in dev
- **Package Manager:** Bun (npm / pnpm / yarn also work)

### Code Links

- **Starter Files** (follow along): [View on GitHub](https://github.com/codebucks27/nextjs-portfolio-starter-template)
- **Complete Final Source Code**: [Get it here](https://dub.sh/0fAAb9A) - use code `CODEBUCKS` for a limited-time discount.

Don't forget to ⭐ the repo if you find it helpful!

### ⚡ Prerequisites

Before you begin, make sure you have:

- **Node.js 20.9+** or **Bun 1.2+** installed.
- Basic familiarity with React components - that's genuinely all you need.
- **No API keys and no paid accounts.** The weather and location features run entirely on free, keyless services.

### 🎨 Making It Yours

The project is built to be customized without hunting through code:

- **Copy, projects and links** live in a single central `lib/content.ts` file - nav, work, capabilities, stack, and footer.
- **Colors, fonts and spacing** are design tokens in the `@theme` block of `app/globals.css`. Change one value and it flows through the whole site.
- **Hero videos, posters and project images** are swapped in `public/assets/`.
- **Site metadata** (title, description, social preview) lives in `app/layout.tsx`.

The final source code also ships with a `lib/prompts.md` file containing the exact **AI prompts** used to generate the day/night hero scene: an image-generation prompt for the day version, a follow-up prompt that converts it to golden hour, and a video-generation prompt that animates it into a subtle looping background.

### ▲ Deployment

The site deploys to **Vercel with zero configuration** - no environment variables to set. Push your copy to GitHub, import it at [vercel.com/new](https://vercel.com/new), and click **Deploy**. Once live, the location and weather widget starts working automatically, because Vercel provides the geolocation headers in production. 🌍

### Timestamps

- What We're Building (Day/Night Demo) [@00:00:00](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=0s)
- Project Setup: Starter Files, Bun & Next.js 16 [@00:01:56](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=116s)
- Design System with Tailwind CSS v4 [@00:07:10](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=430s)
- Hero Section [@00:09:34](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=574s)
- Site Header with Scroll Effect & Mobile Menu [@00:38:04](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=2284s)
- Building the Day/Night Switch [@00:49:50](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=2990s)
- Live Visitor Location & Weather Widget [@01:12:02](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=4322s)
- Token Usage Widget [@01:41:30](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=6090s)
- Practice Areas Strip [@02:09:50](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=7790s)
- Reusable Animations: Motion Setup + Reveal Component [@02:23:20](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=8600s)
- Selected Work: Animated Project Carousel [@02:28:30](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=8910s)
- Capabilities Section with Animated Icons [@03:39:30](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=13170s)
- Approach / Process Section [@03:54:31](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=14071s)
- Tech Stack: Code Editor Mockup [@04:04:50](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=14690s)
- About & Contact Section [@04:25:05](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=15905s)
- Footer [@04:47:42](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=17262s)
- Making it Mobile Responsive [@04:58:30](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=17910s)
- Outro & What's Next [@05:38:54](https://www.youtube.com/watch?v=1qJEZVr6eXE&t=20334s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._