Skip to content

Full-Stack case study

Developer Portfolio

Next.js portfolio with live code statistics, case studies and an AI assistant

Full-StackDeployedLive demo (opens in a new tab)Source code (opens in a new tab)
Commits
22

in the repository

Build window
135 days

4 Jun 2026 to 16 Oct 2026

Lines of code
1,536

hand-written source

Technologies
6

in the stack

01

Overview

A multi-page Next.js portfolio with case studies for every project, live GitHub and LeetCode statistics, a command palette, a repository explorer and an AI assistant that answers questions about my work.

Goal. Give recruiters one fast, searchable place to see my projects, skills and code activity.

My role

Solo developer

02

What it does

  • 01Case studies with architecture diagrams for every project
  • 02Command palette and site-wide search across projects, repositories, skills and notes
  • 03Live GitHub and LeetCode statistics, cached for speed
  • 04Repository explorer with category and language filters
  • 05AI assistant that answers questions about my work
  • 06Validated contact form, SEO metadata and a Vercel-ready build
03

Architecture

BROWSERSERVER (VERCEL)EXTERNALNext.js pagesStatic, dark UICommand paletteCtrl/Cmd+K searchAPI routesgithub, leetcode, chatData filesProjects, skills, timelineGitHub APICached 1 hourLeetCodeCachedGroqChat completions
Pages and the palette read the same data files; API routes call external services server-side so keys stay private and responses are cached.
04

Engineering decisions

One content source

Pages, search and the AI assistant all read the same structured data, so they never disagree.

Server-side secrets

The Groq key never reaches the browser; the chat route validates input and rate-limits requests.

Resilient live data

External APIs are called server-side and cached; if one is down, the page degrades gracefully.

05

Tech stack

  • Next.js
  • React
  • Tailwind CSS
  • Framer Motion
  • Groq API
  • Vercel
06

Timeline

  1. 4 Jun 2026

    Portfolio v1

    Navbar, about, LeetCode stats, contact form, footer and README on the first day.

  2. 31 Aug 2026

    Content updates

    Resume and project updates.

  3. 19 Oct 2026

    Redesign

    Multi-page portfolio with case studies, a command palette, a repository explorer and an AI assistant.

07

Scope and next steps

  • LeetCode statistics rely on LeetCode's unofficial GraphQL endpoint.

Next project

Centralized LMS