ProjectsSeptember 29, 2026

Interactive portfolio with static delivery

Built with
  • Next.js
  • React
  • JavaScript
Interactive portfolio with static delivery: illustrated cover

System architecture

Component and data flow diagramNext.js project to Static export: Build project. Static export to Static hosting: Export files. Static hosting to Browser: Serve assets. Browser to Portfolio client: Hydrate UI. Portfolio client to Interaction hooks: Attach effects.BUILD TIME ABOVE / BROWSER BELOWBuild projectExport filesServe assetsHydrate UIAttach effectsNext.js projectApp Router + metadataStatic exportBuild HTML / JS / CSSStatic hostingAssets + optional basePathInteraction hooksScroll / rain / audioPortfolio clientMenu + section stateBrowserLoad / hydrate
Swipe horizontally to inspect the diagram.The inspected project uses static export and browser-side interaction hooks. It does not require a persistent Next.js server for its exported pages.
A portfolio needs to explain work clearly, navigate smoothly between sections and remain straightforward to deploy. This repository explores an interactive presentation with static delivery. The App Router page renders a client-side Portfolio component. That component composes the hero, skills, projects, timeline, credentials, contact and footer sections. Mobile-menu state lives in the parent; navigation receives the current section and scroll state from dedicated hooks. An IntersectionObserver-based reveal hook finds reveal elements, adds their visible class and stops observing each one after it appears. Other hooks separate navigation scrolling, section tracking and atmospheric effects from the content components. Content and path helpers live in library modules. The Next configuration enables static export and supports a configurable base path and asset prefix. Images are configured as unoptimized for this export path. The repository also includes metadata routes and a GitHub Pages workflow; its README describes Vercel Analytics and Speed Insights integration. Static output is portable and needs no application server for page delivery. It also means server-only request features need another service if added later. The client-side composition makes shared interactions convenient but broadens the hydration boundary. The reveal hook keeps movement separate from content, although timer cleanup and a no-JavaScript visibility fallback are worth checking. Decorative audio and canvas effects need their own accessibility and performance budget. This is a separate portfolio implementation, not another client product. Its source demonstrates component composition and static deployment configuration. No traffic, conversion or performance score is claimed here. I would keep content server-rendered where possible, isolate interactive islands, test reduced-motion behaviour and validate deployment under both root and subpath hosting. Those checks protect the reading experience while preserving the visual character.

Related projects

Let’s talk about the engineering

I’m open to software engineering roles across backend, platform, and data teams. Get in touch to discuss the architecture, trade-offs, or how this experience could help your team.
Get in touch