← Blog

Building this website

My website is an evolution of who I want to show and tell. It has gone through a lot of iterations to find the balance between art, narrative, and a real reading experience.

First entry Website story GenAI + real craft

It all started with me thinking: "How can I explain ALL I have done?" The reality is that I have done so many things that at this point it's hard to show and tell. I think it's also cool to show what I can build.

The brand: who am I + what I have built

It took me some time to come up with a name. I did not want my portfolio to be just my name and my last name. I have a very common set of both — plus it felt boring and not in line with what I was trying to show.

A chatbot suggesting website names and handles, grouped as 'The Tech and Product Focus', 'The Vibe and Flow State', and 'The Classic Professional'. — Brainstorming a name with AI — dozens of handles across every version of me.

I wanted it to show my engineering skills. I went through many names, my nicknames, and other potential ways of calling my site. It was hard to find domains that weren't already taken.

One day, in one of my classes, I thought about Andrea builds. I did a fast domain search and found andreabuilds.com available. I went to Cloudflare and bought it immediately.

The building

I did not want to use a prebuilt website. For many reasons — I wanted it to be unique to me, I wanted to code it, and I wanted to test how far vibe coding could get me.

I took advantage of Cloudflare being very open to self-development, and of how I could host it on my GitHub, like many other AI researchers do.

I started pivoting ideas with AI chatbots — giving them what I was thinking, idea-dumping, and asking for PRDs and TRDs based on our conversations.

A chatbot conversation producing a combined PRD + Technical Requirements Document, with a 'Oh the things you have built prd trd' DOCX ready to download. — Turning idea-dumps into a combined PRD + Technical Requirements doc.

I wanted it to be an interactive video game that moved along the timeline of what I have built and showed my journey. I wanted it to be inspired by the Dr. Seuss book Oh, the Places You'll Go!, and my initial title was: "Oh, the Things You Have Built." I even generated a picture of me among all the places I'd go.

An illustrated portrait of Andrea in a Dr. Seuss-inspired landscape with rolling hills, a treehouse, and hot air balloons. — "Oh, the Things You Have Built" — the first, video-game direction.

I wanted to mix GenAI with real art, and vibe coding with real coding. And add stop-motion pictures through the journey.

A sprite sheet of 30 hand-drawn poses of the same character walking, running, jumping, and celebrating — a slow-motion study for stop-motion animation. — A 30-pose character sequence, meant to animate as stop-motion through the site.

Very cool! But extremely hard to follow as a reader. Yes, it showed my capacity for building, but it was also slow, and the user experience was terrible.

So I iterated — again testing the creative capabilities of different AI models to help me ideate and figure out what I actually liked and wanted.

An AI design plan proposing a 'builder's field notebook' concept, with a grid-paper homepage hero mockup reading 'I mix humans and deep tech into an optimistic future.' — One iteration: a "builder's field notebook" concept, grid paper and all.

We ended up thinking of a blog-type site, and less of a video game. But the vibe-coded initial draft still wasn't capturing my essence.

So I thought again. Who am I, what do I like, what do I enjoy?

I ended up remembering one of my favorite painters: Rachel Ruysch. I thought about how much I love flowers, and how I could show my journey as a more "static" display — still using art, still using narrative and other interactive tools. It has gone through many iterations to adapt to multiple screens.

The prompt behind the blooming peony "Using the provided reference image as the definitive design reference, generate Frame 1 of a five-frame blooming sequence of the same peony. The provided reference image represents Frame 5 (the fully bloomed flower). Your task is to generate an earlier stage of the same flower while preserving perfect continuity. This must be unmistakably the same botanical specimen throughout the sequence. Preserve exactly: identical stem curvature and proportions, identical leaf count, shape, size, and placement, identical unopened side bud, identical camera angle, identical composition and framing, identical scale, identical lighting direction, identical colors, identical painterly brushwork, identical botanical realism. Nothing except the opening of the main blossom should change. The flower should appear to bloom by naturally unfolding its existing petals. Do not redesign the flower, change petal count, rotate the blossom, alter the stem, move the leaves, or modify the side bud. Paint in the style of a 17th–18th century Dutch botanical oil painting, inspired by Rachel Ruysch and Maria Sibylla Merian. Old-master realism with exquisite botanical detail, soft natural light from the upper left, subtle painterly brushwork, delicate craquelure texture, museum-quality botanical illustration. Isolated on a fully transparent background (true alpha channel). No shadows. No background. No additional flowers. No insects. No text. Portrait orientation. Very high resolution PNG. Frame 1: the main blossom is a tight peony bud, approximately 10% open. Only the outermost guard petals have begun to separate slightly. The center is completely hidden. The blossom is compact and significantly smaller than the final bloom while remaining attached to the exact same stem."

I did not want my website to look generic, but I also didn't want it overcrowded with animations and scrolly features.

At some point I remembered how MySpace was this super personalized way of showing your profile, and I decided I wanted to go back to the golden days. Show nice things. I even wanted to add a "what I'm listening to" feature via the Spotify API, to give that vibe of visiting a retro profile.

Two design explorations side by side: a pink page with a painted tulip and text, and a bee-framed stationery layout. — Design explorations toward the flowery, personal direction the site landed on.

Creating each stop-motion flower, positioning it in the right place, thinking about what would look cool and interesting — that has taken me longer than building the website itself with coding tools. I've had to use GenAI image generators, Photoshop, and other manual tools to design and paint my flowers.

It has been an amazing journey in taste, and in understanding that with AI tools you can build fast — but thinking, being creative, and making something personal takes time.

The trap of over-engineering is real, too. I could build forever, but would that make it the best? Be prepared to read my next post: "Just because you can doesn't mean you should" — on how GenAI tools have made product taste and an understanding of users and problems more important than ever.