Vedant Misra

How this site was built

Portfolio Architecture

This portfolio is itself a demonstration of modern full-stack engineering. Below is a breakdown of every architectural decision — why it was made, what it replaced, and how it fits together. Useful context for anyone evaluating the technical depth behind the work.

STACK OVERVIEW — TERMINAL
FrameworkNext.js 16 (App Router)SSR, API routes for AI chat, next/image optimization
LanguageTypeScriptType-safe data layer eliminates an entire class of runtime errors
StylesTailwind CSS v4CSS-first design token system replaces 4,882 lines of legacy CSS
AnimationsFramer MotionReplaces Swiper.js + jQuery for carousels, modals, and page transitions
ContentMDX via next-mdx-remoteAuthor project case studies and blog posts as Markdown files
AIGroq API (server-side only)llama-3.3-70b-versatile; API key stays in Vercel env vars, never in browser
IconsLucide ReactTree-shakeable SVG components replace the 570 KB Font Awesome bundle
DeploymentVercel via GitHub ActionsAPI routes require a live server; Vercel is free for personal projects
EmailResendReplaces broken PHP mailer; server-side only, no secrets in frontend
AI ASSISTANT — TERMINAL

The chat widget connects to a Next.js API route (/api/chat) that calls the Groq API server-side. The API key is stored in Vercel environment variables and never shipped to the browser. If no key is configured, the route returns mock responses automatically — the UI always works.

$ cat api/chat/route.ts

Browser → ChatWidget.tsx (client component)

→ POST /api/chat (Next.js API route)

→ Groq SDK (server-side only)

→ llama-3.3-70b-versatile

← 256-token response

← JSON { reply: string }

Browser ← renders message

No RAG, no embeddings. The system prompt is assembled from src/data/ai-context.ts — plain text strings covering skills, experience, projects, and contact info. Keeping the context small and structured produces more accurate, concise answers than a full-document retrieval approach for a portfolio use case.

CONTENT SYSTEM — TERMINAL

All content lives in TypeScript data files and MDX files — never hardcoded in components. Adding a new project means creating one .mdx file and one entry in src/data/projects.ts. No component changes required.

src/data/projects.ts

Project[] — listing metadata, metrics, links

src/data/experience.ts

Experience[] — all 6 work entries

src/data/education.ts

EducationEntry[] — institutions + modal content

src/data/skills.ts

SkillCategory[] — 8 skill groups

src/content/projects/*.mdx

Full case study prose for each project

src/content/blog/*.mdx

Blog posts with frontmatter metadata

BUILD PHASES — TERMINAL
01

Scaffolding

Next.js project, Tailwind design tokens, CRT globals.css, asset migration

02

Core Sections

One-page scroll (8 sections), dot pagination, all section components

03

Content System

MDX for 5 project case studies and 3 blog stubs, /projects + /blog routes

04

API Layer

Groq AI chat route (mock + real), Resend contact form route

05

Polish

WCAG AA audit, Lighthouse optimization, SEO metadata, sitemap

PERFORMANCE & ACCESS — TERMINAL
▸next/image for automatic WebP conversion and responsive srcsets
▸CSS-only CRT scanlines (no JavaScript overhead)
▸Dynamic import for ChatWidget (excluded from SSR bundle)
▸generateStaticParams for all MDX routes — pre-rendered at build time
▸WCAG AA: focus rings on all interactive elements, ARIA labels, alt text
▸Zero border-radius via CSS global rule — no per-component overrides needed
Next.js 16React 19TypeScriptTailwind v4Framer MotionMDXGroq APIVercelResendLucide