Building a technical product story that moves without hiding the evidence.

The site needed to feel spatial while keeping the career story easy to inspect.

The design direction began with a star-field experience and scroll-linked movement. The portfolio plan also required dense proof: case stories, a career arc, product principles, ownership boundaries, and routes for deeper reading.

Those goals create tension. Motion can make a page memorable, but it can also weaken hierarchy, obscure text, or make the experience inaccessible. The implementation treats the visual field as atmosphere and the semantic document as the source of truth.

Keep the expressive layer and the information layer from competing.

• Motion needed a stable reading structure. Sticky section headings and opposite-side content columns keep the evidence from scrolling underneath its label.
• Long pages needed orientation. The right-side progress rail marks major sections and intermediate movement.
• Repeated content needed density. Case briefs and experience entries are grouped rather than forced into one-item-per-screen scenes.
• The build needed graceful fallbacks. Semantic markup, a skip link, reduced-motion behavior, no-script readability, responsive layouts, and print styles preserve access outside the full visual experience.

Build the content contract first, then let the spatial system respond to scroll.

1. Use static semantic routes. The landing, Experience page, and case studies remain readable as documents and produce direct nested HTML outputs.
2. Separate visual responsibilities. Canvas renders the spatial field, CSS owns layout and sticky behavior, and focused JavaScript controllers synchronize scroll, progress, and text motion.
3. Treat content as structured evidence. Case pages share a common sequence for context, attention, approach, evidence boundaries, delivery boundaries, and reflection.
4. Design for changes in capability. Responsive rules simplify the layout on smaller screens, while reduced-motion and no-script states preserve the story when animation is unavailable or unwanted.

Implementation evidence boundary.

The build note summarizes the portfolio system now in production: Astro pages, validated JSON content, Keystatic local editing, adaptive full/lite/static runtime tiers, and a verification gate for static delivery.

The site is a shipped static portfolio system.

The site now has a working narrative system: static Astro routes, validated content contracts, responsive layouts, motion preferences, no-script content, print output, and adaptive Canvas enhancement tiers.

A portfolio is a product surface, but its claims still need product discipline.

The motion system gives the site a recognizable character; the more important design decision is keeping every result bounded by available evidence. The build note keeps visual ideas accountable to readability, runtime cost, and validation evidence.