ProjectsSeptember 29, 2026

Interactive portfolio with static delivery

View source
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.

The problem

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.

Architecture

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.

Trade-offs

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.

Result and next steps

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.

Source code

Related projects

Algorithms in Python and Java: illustrated coverExplore project ↗
Learning project

Algorithms in Python and Java

Understand how data structures and algorithm choices change the cost of solving a problem.

Result & scope
A public learning collection covering graphs, dynamic programming, trees, searching and more.
  • Python
Read case study View source
Bookstore: catalogue, cart and orders: illustrated coverExplore project ↗
Personal prototype

Bookstore: catalogue, cart and orders

Connect a browsable book catalogue to a shopping cart and persisted orders.

Result & scope
An e-commerce prototype with server-calculated order totals; authentication remains unfinished.
  • React
  • Node.js
  • MongoDB
Read case study View source

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