DEV Community

Cover image for New Year, New Me: Building My Portfolio with Google AI

New Year, New Me: Building My Portfolio with Google AI

New Year, New You Portfolio Challenge Submission

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

About me

I work at the unique intersection of AI, art, and design: I design AI & 3D fashion and study at Parsons School of Design, exploring how AI can reshape fashion and creative workflows. As a Google Developer Expert (GDE) in AI and Cloud, I regularly contribute to open source projects.

For this challenge, I wanted to build a portfolio that breaks down the silos between my "developer" life and my "artist & designer" life, and also being a leader in the Google Developers communities. Usually, developers have a GitHub, and designers have a Behance. I needed one space that could showcase both my code and designs.

My goal with the portfolio site is to: 1) Showcase my multi-dimensional skillsets 2) Explore how I can quickly prototype with Google's GenAI tools.

Portfolio

How I built it

I built my portfolio website using various Google AI tools:

Step 1. NotebookLM - first I explored the rules and brainstorm ideas by giving NotebookLM the links to the "New Year, New You Portfolio Challenge", my 2025 Year in Review blog post, and a few of my YouTube videos.
Step 2. Stitch - I started a few iteration of UI / UX design in Stitch, then I selected a UI design to export the code to Google AI Studio.
Step 3. Google AI Studio - I spent a few hours coding there and deployed my portfolio to Cloud Run by pressing the rocket icon.
Step 4. Antigravity - I downloaded the code from Google AI Studio and integrated it into my repo as a functional web application using Antigravity. In addition, I'd like to move from prototyping to on-going development including backend code.
Step 5. I mapped the Cloud Run app URL to a custom domain margaretmz.me.

Throughout the entire process I used Gemini to guide me in tools, processes, brainstorm design and help write this blog post.

The tech stack

  • Framework: React (for a modular, component-based UI).
  • Deployment: Google Cloud Run. I deployed directly from Google AI Studio, which allowed me to go from a local prototype to a live, scalable HTTPS URL in minutes without managing servers.
  • Antigravity - while I could deploy to Cloud Run with one button click from Google AI Studio, it was lacking a lot of fine control of deployment which I could in Antigravity.
  • Assets: I set up a dedicated GitHub repository (/portfolio) acting as a Content Delivery Network (CDN) for my assets, serving "Web Quality" (600x800) images to keep the Cloud Run container lightweight and fast.

The "hybrid" license

One of the interesting challenges was intellectual property. As an open-source advocate, I wanted to share my code, but as a designer, I would like to protect my artwork. I implemented a Hybrid Licensing model:

  • The Code: Licensed under Apache 2.0 (Open Source).
  • The Art: Licensed under CC BY-NC-ND 4.0 (Creative Commons), protecting the original fashion sketches while allowing the community to learn from the repository structure.

Design decisions

Being a designer, I want to emphasize the aesthetics of design and I would like to have my portfolio to look fashion-forward and editorial.

Instead of the standard "About" and "Projects" tabs, I structured my portfolio site around the three dimensions of my skills and it's so happened that I'm also a 3D artist. I used Gemini to help me refine this information architecture so it tells a story rather than just listing links:

  1. Engineer (AI & Fashion): Showcasing technical skills building AI fashion projects
  2. Creative (Art & Design): Highlighting visual design: fashion, graphic and motion design.
  3. Leader (GDE & Community): Focusing on community contribution, early access and product test (of Google AI products), and speaking engagements.

What I'm most proud of

I am most proud of the fact that I put together my portfolio within 2 days, with limited web development knowledge. It was also great that I successfully deployed to Cloud Run in Google AI Studio with just a single button click. I was also able to transition the code successfully from Google AI Studio to Antigravity and deploy to a new Cloud Run service.

What's next?

Now that I have a beautiful portfolio website deployed to Cloud Runfrom Google AI Studio, and transitioned the code to Antigravity. I plan to code the backend adding a few interactive features with Gemini and generative media models on Google Cloud.

This post only contains a high-level overview of how I built my portfolio website. Stay tuned for more in-depth tutorials on Stitch, Google AI Studio, Gemini CLI and Antigravity!

Top comments (0)