Nhat Khanh — Portfolio

Personal portfolio website for Hong Nhat Khanh, a Front-End / Full-Stack Developer specializing in React and Next.js.

Live: nhatkhanhcm2001.vercel.app (update with your domain)

---

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Language	JavaScript (ES2022+)
Styling	Tailwind CSS 3
Animations	Framer Motion 11
UI Primitives	Radix UI (Dialog, Select, Tabs, Tooltip, Sheet, …)
Icons	React Icons 5 + Lucide React
Carousel	Swiper 11
Font	JetBrains Mono via next/font

---

Pages

Route	Description
/	Hero, stats, tech stack, services preview, featured work, CTA
/services	Detailed service cards, "My Process" steps
/work	Project showcase with Swiper carousel, animated project details
/resume	Experience timeline, education, animated skill progress bars
/contact	Contact form, contact info cards, social links

---

Project Structure

nk-portfolio/
├── app/
│   ├── globals.css          # Tailwind base + custom utilities (.text-gradient, .bg-gradient, .text-outline)
│   ├── layout.jsx           # Root layout — JetBrains Mono font, Header, StairTransition
│   ├── page.jsx             # Home page
│   ├── services/page.jsx
│   ├── work/page.jsx
│   ├── resume/page.jsx
│   └── contact/page.jsx
├── components/
│   ├── Header.jsx           # Logo + responsive nav
│   ├── Nav.jsx              # Desktop navigation (active-link highlight)
│   ├── MobileNav.jsx        # Radix Sheet drawer for mobile
│   ├── Photo.jsx            # Animated profile photo with rotating SVG ring
│   ├── Social.jsx           # GitLab / GitHub / Facebook icon links
│   ├── Stairs.jsx           # 6-step stair wipe animation
│   ├── StairTransition.jsx  # AnimatePresence wrapper for page transitions
│   └── ui/                  # Radix-based components (Button, Input, Card, Tabs, …)
├── public/
│   └── assets/
│       ├── avt-removebg-preview.png
│       ├── skills/          # SVG tech icons (js, react, next, tailwind, css, html)
│       └── work/            # Project screenshots (Frame1–3.png)
├── lib/
│   └── utils.js             # cn() helper (clsx + tailwind-merge)
├── tailwind.config.js
├── next.config.mjs
└── package.json

---

Design Tokens

Token	Value
Background (primary)	#1c1c22
Accent	#00ff99 / hover #00e187
Gradient	Purple #a855f7 → Pink #ec4899
Font	JetBrains Mono (100–800)

Custom Tailwind utilities defined in globals.css:

.text-gradient  /* purple-to-pink gradient text */
.bg-gradient    /* purple-to-pink gradient background */
.text-outline   /* transparent outlined text (used for project numbers) */

---

Getting Started

Prerequisites

• Node.js 18+
• npm / yarn / pnpm

Install & Run

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm run start

Lint

npm run lint

---

Key Features

• Page transitions — Stair-wipe animation using Framer Motion AnimatePresence with mode="wait"; a bg-primary overlay covers the page during navigation to prevent flash of old content
• Scroll-triggered animations — All sections use useInView (Framer Motion) so elements animate in as the user scrolls
• Typewriter effect — Hero role text cycles through four titles with a blinking cursor (pure useState + useEffect, no external library)
• Floating particles — 14 deterministic floating dots in the hero (stable array, no Math.random() during render to avoid hydration mismatch)
• Animated skill bars — Progress bars fill from 0 → percentage on scroll into view
• Experience timeline — Vertical glowing accent line with dot markers
• Project carousel — Swiper with AnimatePresence transitions on the info panel (number, title, description, chips animate out/in on slide change)
• Image hover overlay — Project images reveal Live / GitLab CTAs on hover
• Responsive — Mobile drawer nav (<xl), stacked layouts on small screens

---

Deployment

The easiest way is Vercel:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Or connect your GitHub repository directly in the Vercel dashboard for automatic deployments on every push.

---

License

MIT — feel free to use this as a template for your own portfolio.