← Back to portfolio

Under the hood

How this portfolio is built

A deliberate product-style portfolio: static-first delivery, serverless contact, motion with accessibility fallbacks, and content driven from a single data layer.

Tech stack & rationale

  • Next.js 15

    App Router, static generation, API routes for contact

  • React 19

    Modern concurrent features and lean client islands

  • TypeScript

    End-to-end types for content and API contracts

  • Tailwind CSS 4

    Token-based theming via CSS variables

  • Framer Motion

    Consistent motion language with reduced-motion respect

  • Vercel

    Edge CDN, serverless functions, preview deployments

Folder structure

src/
├── app/              # Routes (/, /architecture, /playground, /api/contact)
├── components/       # UI sections + CommandPalette + playground
├── data/             # portfolio.ts, single source of truth
└── types/            # Shared TypeScript models

CI / CD

  • →Push to main → Vercel auto-deploy
  • →Preview URL per pull request
  • →Environment variables for SMTP (Production + Preview)
  • →Static pages pre-rendered at build time

API strategy

POST /api/contact, validates input, sends mail via Nodemailer + Gmail SMTP. Secrets never touch the client.

Open system playground