Portfolio Website

A modern personal portfolio built in Next.js that combines a responsive landing experience, reusable portfolio sections, and a custom on-site AI assistant. The site demonstrates real frontend and backend integration with a contact workflow, theme toggling, and accessible, polished UI components.

Many portfolio sites feel like static brochures and fail to showcase the engineering behind the experience. I wanted this site to be both a polished personal brand and a working technical demo with interactive features, live messaging, and maintainable architecture.

I built the portfolio as a composable Next.js app with structured sections for intro, about, projects, playground, and contact. The site uses a client-side chat widget that streams OpenAI responses from a serverless route, plus a server action that sends contact messages through Resend. That keeps secrets server-side while preserving a seamless visitor experience.

• Interactive AI assistant: client chat UI with streamed responses, site-specific context, and fallback messaging
• Contact workflow: a reusable server action sending email through Resend with submission state and user feedback
• Responsive portfolio layout: intro, about, project showcase, playground, and contact sections built with accessible Tailwind styling
• Theme toggle: persistent dark/light mode using next-themes
• Reusable UI components: Navbar, glass-panel sections, and form controls designed for consistency
• Server/client split: secure server-only routes for secrets and client hooks for interactive behavior

• Next.js App Router for server actions, dynamic API routing, and static project page generation.
• Tailwind CSS for a clean, consistent UI with dark mode and responsive layout support.
• Client/server split so chat and email features keep API keys on the backend while the frontend stays snappy.
• OpenAI streaming for the assistant to feel immediate without blocking the UI.
• Resend email API to handle contact form delivery without manual SMTP management.
• Centralized project metadata in lib/projects.ts so portfolio briefs render consistently and remain easy to update.

• Chat UX: delivering smooth streamed responses while handling network failures and API errors gracefully.
• Secret management: keeping OpenAI and Resend keys server-side while enabling live interactive features.
• Form experience: providing clear success and error feedback without full page reloads.
• Theme hydration: avoiding flashes and ensuring consistent dark/light mode behavior across renders.
• Portfolio scope: balancing a polished personal brand with a real technical showcase that visitors can explore.