Full Stack Case Study

Portfolio

This portfolio isn't just a static site; it's a showcase of modern web engineering. I built it to be exceptionally fast, accessible, and interactive, featuring an AI assistant that can answer questions about my background in real-time.

Technology Stack

Next.jsTypeScriptTailwind CSSFramer MotionOpenAIVercel AI SDK

System Architecture

Framework

Next.js 14 with App Router and Server Components.

Styling

Tailwind CSS with a custom design system and glassmorphism.

AI

Integration with Vercel AI SDK and OpenAI for the chatbot.

Animations

Framer Motion for premium-feel transitions and micro-interactions.

The Challenges

Creating a cohesive design that feels premium without being cluttered.

Optimizing the AI chatbot for low-latency responses.

Ensuring smooth performance across all device types and browsers.

The Solutions

Developed a custom design system using CSS variables for a unified 'Glass' theme.

Implemented stream-based AI responses to give users immediate feedback.

Utilized Next.js Image optimization and code-splitting to achieve near-perfect Lighthouse scores.

Key Results & Metrics

01

AI Chatbot integration

02

Command Palette (Cmd+K)

03

95+ Core Web Vitals score