Key Achievements
- Redesigned the entire application interface to follow a strict minimal aesthetic, utilizing clean borders, deep #111 typography, and generous whitespace instead of heavy shadows and canvas noise.
- Implemented a mathematical Golden Ratio (1:1.618) layout for the hero section, perfectly balancing the introductory typography with an interactive, responsive role diagram.
- Engineered an interactive SVG Hero diagram that dynamically reorganizes its nodes based on viewport size (Top on mobile, Left on desktop) and drives the main page state via hover interactions.
- Developed a custom glassmorphism 'cloud' scroll fade mask at the viewport base to provide a premium, organic reading experience.
- Maintained high performance utilizing Next.js App Router, combining statically generated pages, dynamic MDX blog routing, and headless CMS integration via the GitHub API.
- Set up Nodemailer integration with Gmail for secure contact form delivery via serverless API routes.
- Incorporated SEO best practices including precise meta tags, OG images, dynamic sitemap, robots.txt, and comprehensive structured data.
Technologies
Project Details
This iteration of my portfolio represents a major shift towards intentional minimalism. I wanted to strip away visual clutter—like heavy drop shadows and full-screen 3D canvas effects—to focus entirely on pure readability, content hierarchy, and typography.
A key design challenge was balancing the hero introductory section layout across both desktop and mobile environments. I solved this by implementing a strict Golden Ratio (61.8% to 38.2%) layout pattern. The biographical text sits comfortably in the larger golden block, while an interactive SVG role diagram is constrained exactly within the golden minor block.
The interactive diagram doesn't just look good; it acts as an elegant state driver. By utilizing custom geometry calculations, the nodes branch to perfectly fit the viewport constraints. Hovering over its icons instantly dynamically updates the main screen text in real-time, creating a cohesive, living interface without relying on messy overlapping popup labels.
Under the hood, the infrastructure remains a robust Next.js application, utilizing the GitHub API as a headless CMS for blog posts, natively parsing MDX, and maintaining peak Lighthouse performance scores alongside full SEO and syndication capabilities.
Gallery
