Tools
Tools: How I Redesigned My Portfolio with Google Gemini (and Where the AI Actually Let Me Down)
2026-03-01
0 views
admin
What I Built with Google Gemini ## What I Learned ## Google Gemini Feedback ## What's next Built with Google Gemini: Writing Challenge This is a submission for the Built with Google Gemini: Writing Challenge A few months ago I entered DEV's New Year, New You Portfolio Challenge and decided to rebuild my portfolio from scratch. The brief: use Google AI's tools, deploy to Cloud Run, make it yours. The result is "Brutalist/Industrial" (original submission post). The aesthetic intentionally rejects the clean, white-space-heavy look that most developer portfolios default to. Exposed grids, heavy typography with the SCHABO typeface, cursor-reactive background cells, a mathematically generated DNA helix that assembles and deconstructs as you scroll. The whole thing runs on Astro with React islands, GSAP for animations, and OGL (a lightweight WebGL library) for a metaballs footer effect. The most interesting part, at least for this challenge, was the Gemini integration I shipped as actual product features rather than just development tooling: Pitch Generator: paste any job description into it, and it pulls from a structured knowledge base of my work to generate a tailored pitch explaining why I'm a fit. Not a boilerplate cover letter, a specific one. Interactive Assistant: a terminal-style interface that answers questions about my stack and recommends relevant projects based on what the visitor is looking for. It uses RAG with my portfolio data as the knowledge base, served through Google Genkit with Zod-validated flows and server-side rendering via Astro's Node adapter. Both features run on Gemini 2.5 Flash. I wanted to demonstrate that AI in a portfolio doesn't have to mean a chatbot that says "Hi! I'm Ore's assistant." It can be a tool that does something useful for the person looking at your work. I also used Google Antigravity as my primary AI coding pair throughout the build, and Nano Banana Pro to generate and iterate on imagery to match the industrial art direction. Google Antigravity handled things I would have spent hours on otherwise: refactoring the original Codegrid template (raw HTML/CSS/JS with a sci-fi theme) into Astro and React components, writing the sine wave math for the DNA helix, catching performance regressions in the WebGL loop. On the engineering side, it was often genuinely good. Give it a clear, bounded problem ("make this GSAP ScrollTrigger reversible on scroll-up") and it would produce something workable on the first or second attempt. The design side was a different story, and this was the biggest surprise. What I didn't anticipate was how little the AI could help with actual creative direction. I had a clear concept (Industrial/Brutalist, raw, engineering-first) but when I tried to use it to develop the visual language, I kept getting suggestions that were technically fine and aesthetically inert. Gradient proposals that belonged on a SaaS landing page. Color palettes that were "safe." Layout ideas that could have come from any template. The AI wasn't wrong. It just had no sense of what I was going for, and no amount of prompting about "brutalism" or "industrial aesthetic" closed that gap. I ended up doing all the design decision-making myself and using the AI to execute those decisions, not to arrive at them. The real skill I walked away with is knowing which problems to hand off and which to hold. Bounded, well-specified engineering problems: hand off. Open-ended creative decisions that require taste: hold. My biggest gripe isn't dramatic. No hallucinated APIs, no rate limit crises. The problem was subtler: outputs were consistently competent and consistently generic until I provided so much direction that I might as well have specified the answer in the prompt. For the Pitch Generator, early iterations produced pitches that were accurate but read like they were assembled from a template. "Ore is a skilled full-stack engineer with experience in X, Y, and Z..." Fine. Forgettable. I spent a lot of time refining the system prompt and knowledge base schema to push the outputs toward something that actually sounded like how I'd pitch myself in a real conversation. What worked well was the Genkit integration. The type-safe flows with Zod schemas made it straightforward to build production-ready AI features without treating the model as a black box. Server-side rendering through Astro's Node adapter kept API keys secure without any awkward workarounds. That part of the experience was genuinely smooth. The lesson on the friction side: Gemini rewards precision. Vague prompts produce vague results. When I described exactly what I wanted (the tone, the structure, specific things to emphasize) the quality went up meaningfully. But that precision requires you to already know what good looks like, which means the model can't substitute for taste, only for execution once the taste is established. The portfolio is staying live and I plan to keep building on the AI features. The Pitch Generator currently takes a job description and outputs a pitch; I want to add a follow-up mode where the visitor can ask it to emphasize particular aspects of my background, making it more of a back-and-forth tool than a one-shot output. The Interactive Assistant's knowledge base is static right now, a JSON structure I maintain manually. I want to connect it to a proper database so I can update it as I ship new projects without redeploying. I'm also looking at adding project search using embeddings instead of keyword matching, so someone can describe what they're trying to build and get back relevant work from my portfolio rather than having to browse everything. The DNA helix math, the Genkit integration, the Cloud Run deployment pipeline: all of it benefited from AI assistance. The decision to build an industrial portfolio that looks nothing like other portfolios? That one was mine. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse
how-totutorialguidedev.toaimlservernodedatabase