How I used AI to build a portfolio defined by visual craft and performance

The starting point

I wanted a custom portfolio with smooth animations and responsive polish. While many designers turn to Framer, it has a steep learning curve and a recurring subscription just to publish. Instead of defaulting to another heavy, paid software suite, I saw an opportunity to rethink the build process.

The constraint

Rather than investing in multiple paid AI tools, I set a deliberate creative boundary: rely only on tools I already had for free: Figma, Gemini, Google Antigravity (an AI coding tool), and Cloudflare for hosting. To achieve fluid motion and fast performance without bloated templates, I had Antigravity build the foundation with Astro and Tailwind CSS, using JavaScript for custom animations. I treated these limits not as a handicap, but as an experiment in resourcefulness to see how far pure design taste could push a lean setup.

Zero manual code

My rule was strict: write zero code. Over eight years in product design gave me an intuitive grasp of layouts and responsive systems, but I am not an engineer. Committing to zero code pushed me to be a clearer creative director, guiding the build entirely through everyday language, visual feedback, and precise critique.

Visual ground truth

Instead of using plugins or vague prompts, I shared screenshots and exact values from Figma for fonts, colors, and spacing. This gave the AI a clear target, so the first build matched my design down to the pixel.

Responsive across devices

Antigravity generated the initial layout fast, but layouts don’t adapt to smaller screens on their own. I stepped in to test and adjust the design across mobile, tablet, and desktop, making sure the layout felt natural on every screen.

Global theme tokens

To keep the site consistent, I had Antigravity turn my design rules into a shared design system using Tailwind CSS tokens and reusable Astro components. This locked in my colors, fonts (Instrument Serif and Figtree), and card shapes across every page.

Content and asset preparation

Preparing content was just as critical as building the UI. I structured each case study as a clean markdown document so copy could be edited without touching layout code. For media, I used Gemini to create contextual backgrounds for device mockups and set up automated scripts to fit screen recordings neatly into device frames.

Interaction bugs

When building interactive components like the project carousel, trackpad gestures caused cards to jump vertically and drift unpredictably. Static layouts were easy for the AI to generate, but explaining interaction bugs in plain English without an engineering vocabulary was tricky.

Resolving the bugs

Instead of writing code, I used a back-and-forth process between two AI tools. I described the glitchy behaviors in plain English to Gemini, had it debug the logic, and fed the suggested fixes back into Antigravity. I tested it live on my laptop and iPhone to make sure the interactions worked smoothly across every browser.

To turn tight constraints into an engaging reader experience, I approached the portfolio as an editorial product. I structured the narrative around focused single-scroll views and recognizable visual anchors, using AI as a collaborative design partner to achieve fluid cross-device polish with zero manual code.