Personal freelance developer landing page. Dark, modern, animated. Doubles as a Gig 5–style landing page demo for the developer-portfolio template service.
Stack: Next.js 14 · TypeScript · Tailwind CSS · Framer Motion · lucide-react
A complete, production-grade freelance developer landing page in a single Next.js app. Used as the public marketing site for Nguyen Luu Chuong — and reusable as a template for any freelance developer.
- Nav — Sticky on scroll, glass backdrop blur when active.
- Hero — Animated entrance, status pill, gradient headline, 3 CTA buttons, tech stack subline.
- Stats — 4 quick metrics that build instant trust.
- Services — 4 service cards matching the seller's actual gigs (Bug Fix, React Component, Node Automation, AI Integration). Each links to a real Fiverr gig.
- Portfolio — 3 case-study cards with live demos, GitHub links, and tech stacks.
- Process — 4-step delivery workflow (brief → quote → build → ship).
- FAQ — 5 common-question accordion. Smooth open/close.
- CTA — Final conversion section with 2 buttons.
- Footer — Brand, social icons, copyright.
- Dark mode native — Pure dark theme, no toggle. Subtle grid + radial gradient backgrounds.
- Smooth animations — Framer Motion entrance, CSS transitions for hover, animated gradient on hero headline.
- Mobile responsive — Works from 320px to ultra-wide.
- Performance — Static export, Lighthouse 95+ on all metrics.
- Accessible — Semantic HTML, ARIA labels on icon buttons, keyboard-navigable FAQ.
- Typography — Inter via
next/fontfor clean web typography.
npm install
npm run devOpen http://localhost:3000.
Search-and-replace these values in components:
| Value to replace | Find in |
|---|---|
Nguyen Luu Chuong |
All components |
leninug (GitHub handle) |
nav.tsx, hero.tsx, portfolio.tsx, footer.tsx |
lnin88 (Fiverr handle) |
nav.tsx, services.tsx, cta.tsx, footer.tsx |
| Service descriptions | services.tsx |
| Portfolio items | portfolio.tsx |
| FAQ items | faq.tsx |
For brand color, edit tailwind.config.ts → theme.extend.colors.accent. The current scheme is indigo (500) with purple-to-pink gradient accents.
developer-portfolio/
├── app/
│ ├── globals.css # Tailwind + utilities (grid background, gradient text)
│ ├── layout.tsx # Inter font, metadata, OpenGraph
│ └── page.tsx # Composes all section components
├── components/
│ ├── nav.tsx # Sticky nav with scroll-aware glass effect
│ ├── hero.tsx # Animated hero with Framer Motion
│ ├── stats.tsx # 4-metric strip
│ ├── services.tsx # 4 service cards
│ ├── portfolio.tsx # 3 work cards with live + code buttons
│ ├── process.tsx # 4-step process grid
│ ├── faq.tsx # Accordion FAQ (client component)
│ ├── cta.tsx # Final CTA section
│ └── footer.tsx # Brand + social icons
├── lib/
│ └── utils.ts # cn() helper
└── docs/
└── screenshot.png # README image
Consistent visual tokens:
- Background:
#0a0a0f(near-black) - Cards:
border-white/10+bg-white/[0.02](subtle elevation) - Hover: Lift 4px + indigo border glow
- Text hierarchy: White →
text-white/70→text-white/60→text-white/40 - Accent: Indigo 400 with purple-pink gradient
- Typography: Inter, tight tracking on headings
npm install -g vercel
vercel --prodNo environment variables. Pure static deploy.
MIT — see LICENSE. Feel free to fork this for your own developer portfolio. A credit link in the footer is appreciated but not required.
@leninug — full-stack developer focused on React, TypeScript, and AI integrations. Available for freelance work on Fiverr.