Building a Fluid, Minimalist Portfolio

--labels dev-tutorial=devnewyear2026

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I am an AI Trainer (AIT) with a background in performance management, sales, and education. For this challenge, I developed a minimal portfolio built on a "Rule of Three" philosophy (highlighting 3 projects). I wanted to show how a focused mindset can silence the noise, moving away from over-complication, toward a minimalist approach where every transition is fluid and the interface feels almost weightless.

Portfolio

How I Built It 🐳

To achieve low latency, I focused on runtime precision, so that once the initial assets are delivered, the interaction remains fluid and the interface feels weightless.

• Google AI Studio & Flash UI: I used Gemini in Google AI Studio to scaffold the initial UI components and generate logic for custom animations. For the core card templates, I used the Flash UI project, extracting the CSS and JavaScript logic to integrate into my custom bento-style gallery.
• Component Prototyping: I used CodePen to isolate and refine the Flash UI components before final integration.
• Nano Banana Pro 🍌: This was used to regenerate project cover images, moving from static previews to cinematic scenes that align with the portfolio’s monochrome aesthetic.
• Google Cloud Run ☁️: The site is deployed via a Docker build. I implemented a "Scale-to-Zero" strategy using Knative service definitions, enforcing strict resource limits to maintain a high-performance, cost-neutral footprint.
• Serverless Communication: I built a custom contact system using Google Apps Script as a middleware API. This sends user messages directly into Google Sheets and notifies me via email, providing an easy, database-free messaging solution.

Performance Optimisation

• GSAP Scroll-Driven Logic: I implemented GSAP for "scrubbed" transitions. Linking animation progress directly to the scroll offset, creates a tactile feel where the user remains the primary conductor of the UI motion.
• Direct DOM Manipulation: Mouse coordinate tracking bypasses the Virtual DOM via useRef and native event listeners to maintain a consistent 60FPS.
• Lazy Video Loading: HLS streams are only initialised when cards enter an active or hover state.
• Resource Constraints: The build is optimised for sub-256MB memory footprints to remain within the Google Cloud always-free tier.

What I'm Most Proud Of ༄

The "Monochrome-to-Motion" Strategy

To reduce cognitive noise, I implemented a monochrome interface where generative elements are present but never distracting.

Project gallery elements only "come alive" on hover/focus, transitioning from static grayscale to cinematic motion. The CSS filter toggles state based on cursor proximity.

Mux Video Integration:
To prevent heavy assets from bottlenecking the initial load, I offloaded all looping videos to Mux. This allowed for adaptive bitrate streaming, ensuring that the "Motion" phase of the UI stays fluid regardless of the user's connection speed. By offloading these high-bitrate transitions to the client's GPU, to ensure zero-lag.

Tablet-First Approach:
Components respond to focus and active states, allowing a "tap-to-reveal" behaviour on tablets that mimics the hover effect on desktops.

Conclusion: Orchestrating the Transition ⛏

This refactor represents my transition into a more intentional way of building complexity is refined through a minimalist lens. It’s not just about what the tools can do, but how we choose to present them.