skip to content

Portfolio Website

[completed]Next.js, TypeScript, Tailwind CSS, Verceldemo ↗

Project Overview

This very portfolio. The current iteration is Next.js 16 (App Router) deployed on Vercel — a clean break from the previous Vite + Chakra UI + Express + Docker setup that lived at the same domain through 2024 and most of 2025.

The migration was both a tech-stack swap and a visual redesign. Out went the DOOM-themed retro aesthetic; in came a minimalist mono palette inspired by lizzardxrd.vercel.app and temidara.rocks. One element survives from the old site: a period-click easter egg in the footer.

What's Here

  • Bio + project showcase rendered server-side from content/ JSON + MDX files.
  • Blog with syntax-highlighted code (Shiki + rehype-pretty-code), an auto-extracted table of contents, and next/image-routed inline images.
  • AI chatbot at the bottom-right (Gemini 2.5 Flash-Lite + a Vectra RAG index bundled at build time).
  • Three.js project scenes loaded via dynamic({ ssr: false }) on the deep-dive pages — the home page stays JS-light.
  • Live widgets — Spotify "now playing" via the Web API + refresh token; GitHub activity via the public API.
  • Guestbook + daily visitor poll persisted in Vercel KV.

Migration Notes

The legacy codebase was a monorepo: client/ (Vite + React 19 + Chakra v3), admin/ (same stack), server/ (Express 5 + Vectra + Gemini). It deployed via Docker Compose behind nginx on port 8880. The new app collapses all of that into a single Next.js project on Vercel free tier — same content, fewer moving parts, no ops burden.

Content stayed file-based: content/personal.json, content/projects.json, content/blog/*.mdx, content/projects/*.mdx. The admin panel is dev-only, gated by VERCEL_ENV !== 'production' plus a middleware 404 in production — same threat model as the old admin, simpler implementation.

What I Learned

  • App Router server components are a real productivity win for content-driven sites. Most pages are zero-JS by default.
  • Tailwind v4 + Geist is enough design system for a portfolio. Chakra UI was overkill.
  • Bundling a vector index at build time (Vectra) beats hosting one (Pinecone/Upstash) for portfolio-scale content. Redeploys are cheap; the index is ~5 MB.
  • The Vercel Hobby tier limits (10s function timeout, 250 MB function bundle) are real but workable. Enable Fluid Compute, cap LLM maxOutputTokens, and exclude *.onnx from the chat function bundle.