Developer Portfolio
Modern Next.js portfolio with MDX project pages, Turnstile-protected contact form, and integrated AI chat
Try It
A performance-focused portfolio built with Next.js 15 and React 19 — structured project storytelling, a verified contact workflow, and an embedded AI chat.
The Problem
Most developer portfolios are either over-engineered with unnecessary animations, or under-designed with basic HTML. I wanted something in between — professional, fast, and just interactive enough to stand out without sacrificing load times.
What It Does
Project Case Studies
Projects are authored in MDX with frontmatter metadata. The system automatically generates SEO metadata, renders a card grid on the home page, creates individual /projects/[slug] routes, and processes Markdown with syntax highlighting.
Contact Workflow
Protected by Cloudflare Turnstile (CAPTCHA alternative) with Resend for email delivery:
- User fills out form (name, email, message)
- Turnstile challenge validates client-side
- Server verifies token with Cloudflare API
- Message sent via Resend to configured inbox
- Confirmation email sent to user
- Rate limiting prevents spam (10 messages/hour/IP)
Additional Features
- Cal.com integration — Floating booking button for scheduling calls
- Pronunciation helper — Audio playback for name pronunciation
- AI chat — Embedded Fastman chat for interactive Q&A
- Social links — GitHub, LinkedIn, Discord with custom icons
- Tech stack icons — Visual representation of core technologies
Technical Architecture
Frontend
Next.js 15 (App Router) — React Server Components for reduced client JS. Server Actions for form handling. Automatic code splitting and lazy loading.
React 19 — Concurrent rendering, useActionState, useFormStatus, enhanced Suspense boundaries.
Tailwind CSS v4 — Utility-first styling with custom UI primitives. class-variance-authority for component variants. tailwind-merge for className composition.
Contact & Verification
Cloudflare Turnstile — Invisible CAPTCHA alternative. Privacy-focused (no Google tracking). Server-side token verification.
Resend Email API — Reliable delivery with template support and bounce handling.
Content Management
MDX — Markdown with JSX component support. @next/mdx for Next.js integration. Frontmatter metadata extraction for automatic SEO and routing.
Key Decisions
Why Next.js 15? — The App Router's RSC architecture reduces client-side JavaScript significantly. Most of the site is server-rendered, with only interactive elements hydrated on the client.
Why MDX for Projects? — Best of both worlds: Markdown's simplicity for writing, plus the ability to embed custom React components when needed.
Why Turnstile over reCAPTCHA? — More privacy-friendly (no Google tracking), better UX (often invisible), and free for unlimited verifications.
Performance
Code Splitting
├── Optional libraries excluded unless explicitly enabled
├── Route-based splitting via App Router
└── React.lazy() + Suspense for heavy components
Image Optimization
├── All images through next/image
├── Automatic WebP conversion
├── Lazy loading with blur placeholders
└── Responsive srcset generation
Font Loading
├── System font stack as fallback
├── font-display: swap for custom fonts
└── Subset fonts to reduce file size
Tech Stack
| Layer | Tech |
|---|---|
| Framework | Next.js 15 (App Router) |
| UI | React 19 + Server Components |
| Styling | Tailwind CSS v4 |
| Content | MDX with dynamic imports |
| Contact | Cloudflare Turnstile + Resend |
| Scheduling | Cal.com Embed |
| Animation | Framer Motion |
| Icons | Lucide React |
| Deploy | Vercel (Edge Runtime) |
Challenges Solved
Turnstile Integration — Needed custom error handling for token expiration (90s timeout), network failures during verification, and race conditions between widget load and form submit.
Rate Limiting — In-memory rate limiting with a Map-based store. Works for serverless but won't scale across regions — production should migrate to Redis or KV store.
Contact Form UX — Clear feedback at every step: loading state during submission, success confetti animation, error messages with retry option, email confirmation for peace of mind.
Lessons Learned
MDX frontmatter makes content management feel like a CMS without the overhead. Define your project metadata schema early.
Turnstile verification is surprisingly easy compared to reCAPTCHA. Less code, better UX, no tracking.
React Server Components dramatically reduce client JavaScript when used correctly. Most pages ship zero JS.
Form UX matters more than form validation. Clear feedback builds trust. Users should never wonder "did it work?"