Overview
The portfolio platform you are browsing right now. Originally built as a Vite SPA, it was migrated to Next.js App Router to achieve server-side rendering, instant search engine indexability, zero-CLS layout stability, and comprehensive SEO/AEO/GEO optimization. Features an interactive HTML5 particle canvas, seamless dark/light theme switching, and structured JSON-LD schemas.
Problem & Approach
Engineering portfolios frequently rely on generic templates, lack technical depth, suffer from poor Core Web Vitals, and are invisible to modern answer engines and LLM search agents.
Built with Next.js App Router and TypeScript, implementing an evidence-based dossier structure with detailed case studies, semantic HTML5 tags, Schema.org graph markup, and responsive UI components.
System Architecture
- Framework
- Next.js App Router with React Server Components and Turbopack compiler.
- Styling & Tokens
- Tailwind CSS custom dark variants, glassmorphism blur layers, and CSS keyframe animations.
- SEO & Discoverability
- Automated sitemap.xml, robots.txt, OpenGraph card generation, and JSON-LD structured data.
Features & Deliverables
- 01Next.js App Router ArchitectureImplemented
Server-rendered HTML with static generation for high-speed delivery and Core Web Vitals optimization.
- 02Interactive Canvas Particle EngineImplemented
Custom HTML5 Canvas particle system responsive to mouse movement and dark/light color schemes.
- 03Comprehensive SEO, AEO & GEO MarkupImplemented
Structured Schema.org JSON-LD (Person, ProfilePage, ItemList, SoftwareApplication) and llms.txt.
- 04Dynamic next-themes IntegrationImplemented
Zero-flash dark/light mode toggling with custom CSS variables and Tailwind variant support.
Technical Challenges
ProblemHydration mismatch issues between server-rendered HTML and client-specific theme / canvas states.
Resolution:Dynamically imported the canvas engine with ssr: false and implemented mounted state gating for the next-themes provider to guarantee zero hydration errors.
ProblemAchieving optimal Core Web Vitals while rendering complex interactive graphics.
Resolution:Isolated canvas execution outside the main React re-render cycle using requestAnimationFrame and decoupled particle ticks from DOM updates.
Contributions & Takeaways
My Contributions
- Engineered complete Next.js migration from previous Vite architecture.
- Designed and authored all responsive UI components, animations, and typography tokens.
- Implemented structured data schemas and technical SEO recommendations.
- Created reusable case study layout system and dynamic project routes.
Key Learnings
- Evidence-based case studies create significantly stronger technical credibility than simple bullet points.
- Decoupling heavy canvas rendering from React state avoids unnecessary component re-renders.
Interested in discussing this project or working together?
Get in touch