Living Bento Portfolio
High-Performance Personal Brand
V2 (Current)
Project Overview
This website isn't just a container for projects; it is a project itself. "V2" was built to solve the limitations of my previous static portfolio by moving to a dynamic, server-side rendered architecture.
The goal was to create a "Living Design"—one that feels organic and responsive. This was achieved through the custom "Living Ray" background engine, which uses physics-based interpolation to follow user interaction, blending the stability of a Bento Grid with fluid motion.
Technical Strategy
Component Architecture
Separate "Client Islands" (Contact Form, Living Ray) from "Server Components" (Projects, Layout) to minimize bundle size and maximize First Contentful Paint (FCP).
Advanced SEO Engine
Implmented dynamic sitemap.xml generation, robots.txt, and injected JSON-LD Structured Data to explicitly define the "Professional Service" schema for Google indexing.
Analytics & Telemetry
Integrated Vercel Analytics for privacy-friendly real-time visitor tracking and path conversion analysis without heavy third-party scripts.
The "Living" Design System
Bento Grid Layout
A modular, responsive grid system that adapts hierarchy based on screen size (CSS Grid + Flexbox).
Glassmorphism 3.0
Multi-layered blur effects (backdrop-filter) with subtle border gradients to create depth without clutter.
Fluid Typography
Utilization of Outfit (Headings) and Inter (Body) via next/font for zero layout shift.
Mobile-First Dock
A Mac-style floating bottom navigation dock for mobile users, improving reachability on modern large phones.
Evolution from V1
Legacy V1
Static HTML/CSS, no routing, poor mobile UX, generic Bootstrap feel.
Current V2
Next.js App Router, Server Actions, Framer Motion, 100/100 Lighthouse Score.
Key Features
- Server-Side Rendering
- Organic 'Living Ray' Background
- Dynamic Contact Form
- Resume-Focused SEO
- Dark Mode First
- Modular Bento UI