Building a Fluid, Minimalist Portfolio
Source: Dev.to
New Year, New You Portfolio Challenge Submission
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
(Portfolio showcase omitted for brevity)
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: Used Gemini in Google AI Studio to scaffold the initial UI components and generate logic for custom animations. Core card templates were taken from the Flash UI project, extracting the CSS and JavaScript for a custom bento‑style gallery.
- Component Prototyping: Isolated and refined Flash UI components in CodePen before final integration.
- Nano Banana Pro 🍌: Regenerated project cover images, turning static previews into cinematic scenes that match the portfolio’s monochrome aesthetic.
- Google Cloud Run ☁️: Deployed via a Docker build with a “Scale‑to‑Zero” strategy using Knative service definitions, enforcing strict resource limits for a high‑performance, cost‑neutral footprint.
- Serverless Communication: Built a custom contact system using Google Apps Script as a middleware API. Messages are sent directly to Google Sheets and trigger email notifications, providing a database‑free messaging solution.
Performance Optimisation
- GSAP Scroll‑Driven Logic: Implemented GSAP for scrubbed transitions, linking animation progress directly to scroll offset for a tactile, user‑driven UI motion.
- Direct DOM Manipulation: Tracked mouse coordinates with
useRefand native event listeners, bypassing the Virtual DOM to maintain a consistent 60 FPS. - Lazy Video Loading: HLS streams are initialized only when cards enter an active or hover state.
- Resource Constraints: Optimised the build for sub‑256 MB memory footprints to stay within the Google Cloud always‑free tier.
What I’m Most Proud Of ༄
The “Monochrome‑to‑Motion” Strategy
Reduced cognitive noise by using a monochrome interface where generative elements are present but never distracting. Gallery items animate from static grayscale to cinematic motion on hover/focus, toggling CSS filters based on cursor proximity.
Mux Video Integration
Offloaded all looping videos to Mux, enabling adaptive bitrate streaming. This keeps the “Motion” phase fluid regardless of connection speed and shifts high‑bitrate processing to the client’s GPU for zero‑lag playback.
Tablet‑First Approach
Components respond to focus and active states, providing a “tap‑to‑reveal” behavior on tablets that mimics the hover effect on desktops.
Conclusion: Orchestrating the Transition ⛏
This refactor represents my shift toward a more intentional way of building—complexity refined through a minimalist lens. It’s not just about what the tools can do, but how we choose to present them.