This Portfolio
The Problem
As a Machine Learning Engineer, I needed a centralized hub to host my research, projects, and a “digital garden” (Noggin) to document my learning process. Traditional portfolio sites felt too static, and heavy SPA frameworks like Next.js felt like overkill for a content-heavy site.
The goal was to build a site that was blazingly fast, inherently static, yet highly interactive when it needed to be. It also needed to reflect a “Gen-Z Hacker” aesthetic: minimalist, terminal-inspired, with hidden easter eggs.
The Architecture
To achieve sub-100ms load times while retaining the ability to render complex interactive demos (like ML model visualizers), I utilized an Island Architecture approach.
> [Interactive] Technology Architecture
> Astro
Astro was chosen as the core framework for its content-driven architecture and zero-JS by default approach. This ensures the portfolio loads blazingly fast, while still allowing complex React components to be hydrated exactly when needed using the Island architecture.
The Implementation
1. Zero-JS by Default
The entire layout, routing, and Markdown parsing is handled server-side by Astro at build time. The client receives pure HTML/CSS unless a component is explicitly marked with client:load. Even complex architecture diagrams are written as pure Markdown and rendered client-side using an injected Mermaid.js renderer to keep the bundle size minimal.
2. Local-First Keystatic CMS
Because the site is hosted statically on GitHub Pages (which doesn’t support SSR Node servers), standard dynamic CMS platforms were a poor fit. Instead, I integrated Keystatic in a local-only configuration. During npm run dev, it provides a Notion-like UI that strictly adheres to the Astro Content Collection Zod schemas, writing directly to the .mdx files. In production builds, the CMS is stripped out entirely, ensuring zero impact on the live site’s performance.
3. Asymmetric Bento Box UI & Mobile Optimizations
The homepage features a custom, asymmetric “Bento Box” grid designed to highlight flagship projects (like the GraphContext MCP). While the aesthetic is terminal-inspired, the UX is built for modern devices: we neutralized “sticky hovers” using @media (hover: hover) queries and expanded interactive elements to 44x44px touch targets with active:scale-95 micro-animations.
4. Paginated Digital Garden
To future-proof the “Noggin” (my digital garden) against performance degradation as content scales, the routing uses Astro’s native paginate() to statically generate pages (10 posts per page), complete with dynamic sub-routing for tag-based filtering (/noggin/category/[tag]/[page]).
The Result
The resulting application is a highly optimized, fully responsive, zero-JS default static site hosted on GitHub Pages. It serves as both a resume and a sandbox for testing new frontend optimization techniques.