In this beginner-friendly codelab, you will learn how to:

By the end, you'll have your own live professional portfolio powered by Google AI + Cloud Run, with simple tools for ongoing updates.

You don't need to be a developer. All you need is:

💡 Tip: Free trial credits usually cover all costs for this workshop. A portfolio site on Cloud Run typically costs only a few cents per month after free credits.

Google AI Studio Free Tier Google AI Studio offers a free tier for certain services, which covers:

Note: Beyond the free tier, charges apply based on the amount of data processed or API calls made. However, the free tier is typically sufficient for a small-scale project like generating structured data for your portfolio.

Google Cloud Run Free Tier Cloud Run also offers a generous free tier for hosting your website, including:

Tip: The free tier should cover most small-scale portfolio websites. After the free quota is exceeded, you'll incur very modest charges, typically just a few cents per month depending on usage.

billing

Duration: 20 minutes

  1. Go to Google AI Studio.
  2. Click Build → Start from a template → Choose Empty Project.
  3. Upload your CV (PDF). If you'd like, you can use this dummy CV.
  4. Use the following starter prompt:
    create a simple site based on what I have attached as my resume and give a well-designed portfolio page as an output. I want the color theme to be blue and white.
  5. Click Send Prompt and review the preview in the Preview section.
  6. If the preview isn't exactly what you want, feel free to modify the prompt to fine-tune the design and content (e.g., "Change the font to Inter and make the ‘Skills' section a four-column grid").
  7. Once you're satisfied with the design and structure, click Deploy.

Google AI Studio

Firstprompt

Firstprompt2

Optional: Try an Alternative Detailed Prompt

If you want a more complex or specific design immediately, try using this detailed prompt. It acts as a comprehensive set of instructions (a system instruction) to guide the model's output.

Situation
You are an expert web developer and UI/UX designer tasked with creating a professional portfolio website. The client needs a complete, functional website that showcases their professional background and skills in an elegant, modern design that will impress potential employers or clients.

Task
Create a simple, well-designed portfolio website with the following specifications:
- Build a complete HTML/CSS website structure
- Design a professional portfolio page layout
- Implement a blue and white color scheme throughout
- Ensure the design is visually appealing and modern
- Make the site responsive and user-friendly
- Include all relevant sections typically found in a professional portfolio

Objective
Develop a sophisticated, professional online presence that effectively showcases the individuals qualifications, experience, and skills in a visually striking format that stands out to potential employers or clients.

Knowledge
- Use a black and yellow color palette as the primary design theme
- The design should be "fancy" — incorporate modern design elements such as clean typography, proper spacing, subtle animations or hover effects, and professional styling
- Include standard portfolio sections: header/navigation, about section, experience/work history, skills, projects (if applicable), and contact information
- Ensure the website is responsive and works well on both desktop and mobile devices
- Use modern web development best practices for clean, semantic HTML and efficient CSS
- Consider incorporating subtle design elements like gradients, shadows, or modern card-based layouts to enhance the visual appeal
- The assistant should extract and organize information from the provided resume to populate the website content, ensuring all professional details are accurately represented and well-structured for web presentation.

second prompt

Now, we're going to deploy this portfolio site to Cloud Run.

  1. Click Deploy button
  2. Select your Google Cloud project. If you don't have a project, create one.
  3. Choose your billing account (you'll need to select or set up billing if it's not already done). Once the billing is set up, proceed to the next step.
  4. Click Deploy app.

Cloud Run Deploy

Your live site URL will appear once deployment is complete.

💡 Cost note: Cloud Run charges only when your site is visited. Free tier covers ~2 million requests per month.

Cloud Run Deploy2

Option A: GitHub Integration (Automatic)

  1. Connect your repo your portfolio project to GitHub.
  2. In Google Cloud Run Services, click Connect repo → Set up with cloud build.
  3. Connect your GitHub repo and configure a trigger on new commits.
  4. Each time you update your CV or design and push changes, Cloud Run auto-redeploys.

Cloud build

Option B: Manual Updates

  1. Open Cloud Run Console.
  2. Select your service → Source.
  3. Go to the file and click Edit source.
  4. Each time you update you can save and click redeploy.

Manual Update
  1. Register a domain (Google Domains or your provider).
  2. Verify ownership in Google Search Console (add a TXT record in DNS).
  3. In Cloud Run Console, go to Custom Domains → Add Mapping.
  4. Enter your domain, link it to your service, and follow DNS instructions.
  5. Cloud Run automatically provisions SSL certificates (HTTPS).

Domain Mapping2

Domain Mapping

Domain Mapping1

💡 Note: DNS changes may take several minutes (sometimes hours) to propagate. Be patient.

Congratulations! You now have:

You can extend your portfolio by:

Show me what you've built! If you got creative, don't hold back — I'd love to see it : LinkedIn