Brutalist / Industrial: Creative Developer Portfolio

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

About Me

I am Ore Adeleye (also known as thaumatin), a Full Stack Engineer and Creative Technologist based in Nigeria.

Using code as a medium for creative exploration, I specialize in architecting systems that are not only resilient in logic but also fluid in presentation. My work sits at the intersection of technical performance and immersive design, treating every codebase as a living environment waiting to be optimized and explored.

Portfolio

https://portfolio-947306688997.europe-west1.run.app

How I Built It

For this portfolio, I wanted to create a digital representation of my "Core Philosophy": that technical decisions directly shape creative outcomes.

Tech Stack

• Astro: Chosen for its incredible performance and "island architecture," ensuring the site loads instantly while still supporting rich interactivity.
• React: Used for managing complex UI state specifically where needed.
• GSAP (GreenSock Animation Platform): The engine behind the fluid motion, scroll-triggered reveals, and the complex DNA sequence animation.
• OGL: A minimal WebGL library used for high-performance visual effects that don't weigh down the browser.
• Lenis: For that buttery smooth scrolling experience that ties the whole narrative together.

Design Decisions

The technical backbone of this site is based on a template by Codegrid, originally designed with a futuristic space exploration theme.

My goal was to completely overhaul the art direction, pivoting from "Sci-Fi" to Industrial/Brutalist. I stripped away the space motifs and rebuilt the aesthetic to reflect a raw, engineering-first mindset.

Google AI Tools

This entire portfolio was a deep collaboration with Google's AI ecosystem. I operated as the Creative Director, while the AI tools acted as my production studio and engineering team.

1. Nano Banana Pro: I used this to generate and edit almost all the imagery on the site. It allowed me to rapidly iterate on the visual assets to match my new art direction.
2. Google Antigravity: My primary AI pair programmer. Antigravity was instrumental throughout the development process, helping me:
   • Refactor the Core: Modifying the raw HTML, CSS, JS from the original template to Astro/React components to support my new features.
   • Generate Complex Logic: Writing the mathematical logic for the DNA helix animation and ensuring it was responsive.
   • Debug & Optimize: Identifying performance bottlenecks in the WebGL and animation loops.
3. Gemini & Antigravity (Brainstorming): Before writing a single line of code, I used these models to brainstorm the "Industrial/Brutalist" concept.

What I'm Most Proud Of

I am most proud of how I balanced high-fidelity visuals with raw performance. By using Astro's island architecture, I was able to deliver a site that feels like a heavy, high-end WebGL experience but loads with the speed of a static HTML page.

1. The Interactive Background Grid:
   Instead of a simple image, I built a logic-driven grid system that calculates the exact number of 60px blocks needed to fill the viewport and uses a distance-based algorithm (Math.sqrt) to trigger highlight "clusters" around the cursor.

2. Electric Card Borders:
   I avoided heavy image assets for the UI borders. Instead, I used complex CSS clip-path polygons and linear-gradient hacks to create "electric," industrial-style framing for the cards. This delivers a sharp, resolution-independent aesthetic that scales perfectly on any device.

3. Fluid Typography & Motion:
   Typography is the layout. I used the SCHABO typeface and aggressive CSS clamp() functions to ensure headings scale mathematically with the viewport. This is paired with GSAP SplitText animations that trigger character-by-character reveals, making the text feel alive.

4. DNA Synthesis Section:
   A centerpiece of the "Profile" page. It's not a video or GIF, but a mathematically generated SVG code. I used JavaScript to calculate sine waves for the strands and animate them with GSAP ScrollTrigger. The animations are fully reversible: scrolling down assembles the helix, while scrolling up deconstructs it, creating a seamless playback loop.

5. Footer OGL Animation:
   For the footer, I integrated OGL (a minimal WebGL library) to create a "Metaballs" effect. It adds a subtle, organic liquid motion to the bottom of the page, contrasting the rigid grid structure above without the heavy overhead of Three.js.

6. Polished Micro-interactions:
   Every interaction was audited for "feel."

   • Lenis Scroll: Implemented for that heavy, inertial scrolling feel.
   • Magnetic Buttons: Hover effects that use ::before and ::after pseudo-elements to animate borders and lines, responding physically to user intent.
   • Mobile Optimizations: Custom logic to disable complex scroll triggers on mobile and replace them with performant, touch-friendly slide transitions.

This portfolio represents a ceiling-break for me, proving that "Brutalist" doesn't have to mean "boring," and "High-Performance" doesn't have to mean "clunky."