Project Antigravity
Building a Future-Ready portfolio with AI-Collaboration. A case study on merging 25 years of design experience with Gemini 3 Pro and Claude Sonnet.
The Mission
Escaping the Template Trap
It started with a proposal generated by Google Stitch, which I began implementing in Google Studio. While these tools offered a quick start, providing a solid initial structure, I quickly realized their limitations.
I switched to "Project Anti-Gravity"—a custom workflow driven by Gemini 3 Pro and Claude Sonnet—to regain granular control over every pixel and interaction, transforming a standard site into a high-performance web experience.
50%
Efficiency Boost
3.5s
Time to Deploy
100%
Custom Code
AI-Driven Workflow
This isn't just about using ChatGPT to write copy. This is a symbiotic development process leveraging specific AI models for their unique strengths.
Gemini 3 Pro: The Architect
Gemini acted as the structural engineer. It handled the heavy lifting of boilerplate code, Tailwind configuration, and rapid iteration of HTML structures. Its massive context window allowed it to "hold" the entire project in memory.
- Scaffolding & Layouts
- Refactoring Legacy CSS
Claude Sonnet: The Logician
When logic became complex—like the "Footer Reveal" calculation or the i18n JSON structure—Claude stepped in. Its nuance in reasoning helped solve edge cases that pure brute force couldn't.
- Complex JS Logic
- Content Refinement
Efficiency
Traditional vs. AI-Augmented Workflow
4 Weeks → 4 Days. The velocity of collaborative intelligence.
Process
Usage & Adaptation
Google Stitch
The absolute baseline. A stitched visual reference that served as the starting point for the entire project.
Google AI Studio
Rapidly generating boilerplate and testing structures.
Anti-Gravity
Final coding, refinement, and logic implementation.
The Human Touch
Iconography & Identity
AI generates code, but it doesn't understand heritage. The branding of this site is a direct nod to my industrial roots.
egg The "Easter Egg"
The Language Switcher icon isn't generic. It's a modernized vector adaptation of the classic WinCC OA symbol—a subtle nod to the automation systems I've spent decades designing for.
draw Affinity Designer
No "generated" assets here. Every SVG was manually crafted in Affinity Designer for pixel-perfect alignment on any display density.
bolt Speed & Utility: Material Symbols
While branding elements are custom, utility icons come from Google's Material Symbols. This allowed us to iterate interfaces instantly, matching font weights perfectly via CSS.
Refinement
Motion Compositing
Grok generated the motion path, but the text and icons were gibberish. I had to redraw the interface in Affinity and manually composite it in Cavalry to match the perspective.
Grok 2 Generation
Great motion concept, but nonsense text and broken UI elements.
Cavalry + Affinity
Interface redrawn in Affinity, then composited in Cavalry to match the 3D perspective.
Under the Hood
The System
The biggest challenge? German. The language of compound words. Designing a system that breaks gracefully on mobile while maintaining the "Swiss Style" grid on desktop required strict discipline.
Palette
Typography
Responsive Logic
- Mobile Flex / Stack
- Desktop Grid (12-col)
- Text Wrap break-word
Quality Assurance
Beyond the Happy Path
A portfolio is software. And software must be tested. Throughout the development, I treated this project not as "art," but as a product.
- check_circle Cross-Browser Verification: Validated on Chrome, Safari, and Firefox.
- check_circle Stress Testing: Deliberately breaking layouts with long German strings (e.g., "Benutzeroberfläche").
- check_circle Performance: Lighthouse scores of 95+ via asset optimization.
> Init Project Anti-Gravity...
> Loading Modules... [OK]
> Verifying Responsive Grid... [OK]
> Checking German Translations... [OK]
> Ready to Deploy_