This Portfolio

The Problem

A resume lists what you have done; it does not show how you think or build. I wanted a portfolio a recruiter remembers that proves I can ship a polished, interactive 3D experience end to end, and that still loads fast and reads clearly on a phone or a laptop with integrated graphics.

My Role

Designer and developer (solo). Owned the concept, the 3D scene and shaders, the interface, accessibility, the performance budget, the content architecture and deployment.

The Approach

• Built the experience in two acts: a gated 'Human + AI' intro video (a robotic hand and a human hand reaching toward a spark), then, after Enter, a live React Three Fiber beach behind HTML sections, so only one heavy layer ever runs.
• Drove the whole story from scroll position. A single sun state maps scroll to golden hour, sunset, afterglow, blue hour and night, and the sky, clouds, sea glitter, key light and environment map all read it, so the lighting always matches the sky. A hand-rolled camera rig eases between six scroll keyframes.
• Wrote custom GLSL for the sky (sun disc that sinks behind the sea line, afterglow, Belt of Venus, crescent moon and stars) and the ocean (Gerstner swells, planar reflection, sun glitter, turquoise shallows and shore foam), and built the islands, palms, props, sea turtles, crabs, dolphins, sailboats and the lighthouse procedurally in code, with no downloaded 3D models.
• Designed a visionOS-style Liquid Glass interface with a macOS-style Dock, an Interface switch that hides the chrome but keeps the content, and an opt-in ambient music switch. All content, including these case studies, lives in typed data files and is statically generated at build time.

Key Decisions

• An adaptive quality ladder instead of one fixed setting. Integrated GPUs, phones and low-memory devices start on a lighter tier; a performance monitor steps down (fewer pixels, then no post-processing or cast shadows, then a coarser sea) when the frame rate drops, and never climbs back to a rung that was already too slow, so it does not oscillate.
• A static fallback that is part of the design, not an error page. A pre-rendered still of the beach paints first, with the sunset-to-night fade done in CSS from the scroll position. The WebGL canvas fades in over it once its shaders compile, and the still takes over again if WebGL is missing, the context is lost, or the device cannot keep up.
• Dark smoked glass instead of light frosted glass. Light panels washed out over the bright sunset, so the glass is a dark tint with white ink and a soft halo, and the tint lightens only once the sky is dark. I checked text contrast from pixels at every scroll stop rather than trusting the design tokens.
• Measuring before claiming. I found that an earlier frame-rate test never actually scrolled the page (smooth scrolling swallowed the scroll calls), so every number I report comes from a harness that forces a real full-page scroll.

Impact & Results

• Lighthouse desktop: 99 Performance, 100 Accessibility, 100 SEO on the production build.
• 60 fps at rest at the top, middle and end of the page in desktop, low-tier laptop and CPU-throttled iPhone tests, and 50 to 60 fps during a full-page scroll in 10 seconds, far faster than a person scrolls.
• WCAG AA text contrast on the glass at every scroll stop from golden hour to night, on phone, tablet and desktop viewports, with reduced-motion, reduced-transparency and increased-contrast modes.
• Live at marcoayuste.com on Vercel, with JSON-LD structured data and an llms.txt for AI search.

The Stack

What I Learned

• The concept came from gated 'enter the experience' sites like messenger.abeto.co and from the Creation of Adam as a metaphor for a human and an AI reaching toward each other, which became the intro. Committing to one strong central metaphor early made every later design call easier to judge.
• Performance is a design constraint, not a cleanup step. Deciding up front that the scene must degrade by tier and fall back to a still meant phones and work laptops got a real experience instead of a stutter.
• Measure the thing the visitor does. A benchmark that never moved the page reported a smooth 60 fps; a real scroll told a different story and pointed at the actual main-thread cost.
• Compositing is a feature: a bright bloom on a transparent canvas blanks out, so the canvas is opaque and the scene draws its own sky. Reading the renderer's model beat fighting it.