DEV Community

Cover image for AI Powered Portfolio
vivek
vivek

Posted on

AI Powered Portfolio

#devchallenge #googleaichallenge #portfolio #gemini

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

Just solve hard problems and make systems simpler. This project showcases the power of Google AI Platform,
I used Google AI Studio to build my project and Google Cloud Run to deploy my portfolio app.
This platform provides an interactive experience. It allows users to engage with a professional history in real-time. Users can query specific skills, summarize career milestones, or paste a Job Description for an instant alignment analysis. The tool is powered by Google Gemini and a custom RAG (Retrieval-Augmented Generation) architecture. It transforms a resume into an active conversation.
The portfolio allows users to:
🔍 Query a resume directly.
📝 Summarize an entire career in one click.
🎯 Match a profile against any Job Description.

Portfolio

https://ai-powered-portfolio-52735644542.us-west1.run.app/

How I Built It

Prerequisite

  1. Sign up /Log in - Google Account.
  2. Enter a valid Billing (even though you will not be charged anything, this is required to proceed and use Google Services like Google Cloud Run, just make sure you set you your budget to $2 just incase)
  3. Sign up for https://aistudio.google.com/
  4. Sign up for Google Cloud Run.

Steps

  1. Open/Log in - https://aistudio.google.com/

  2. Enter following prompts -
    I am developer and I want to build a personal portfolio website hosted on google cloud run, I want build a simple website with dark and light mode, I want a context window at the center of the webpage and input prompt at the bottom of the page, I want to integrate a RAG system for my resume, find out the most effective way this is possible with Gemini API. Instead of a complex vector database, I want to pass my input context with system context as input to Gemini.

  3. Google AI did the rest of the magic for me, it create a simple react app for me to host my portfolio. I played around with minor details like changing font size and other minor detail before finalize my design.

  4. Use Google Gemini to extracted all the data from my resume ( PDF version) and format the data into the JSON which my app required as input. I gave the layout format to Google Gemini and ask it to format all the data.

  5. Build you profile into different categories like role, education, about me etc....

  6. Click Deploy App on the top right corner of the page to deploy your app directly to Google Cloud Run.

  7. Follow the prompts on the Google Cloud Run and deploy the app.

  8. Use the prompt to set the system context, this will help the LLM in creating a appropriate response format.

CORE RULES & FORMATTING:

  • Your answer MUST be in Markdown format.
  • Avoid using more than 200 words.
  • Highlight all numbers in bold (e.g., 2024, 5 years, 100%).

PERSONALITY:

  • Modern, professional, and approachable.

BEHAVIOR:

  • Be kind, concise, and practical. Use step-by-step instructions when needed.
  • If context is missing or evidence is lacking, state this clearly.
  • End your response with a kind offer to help with anything else.
    • Copy all the profile data or use prompt to enter your resume profile information back into my file (constants.ts) and made sure the formatting was all set.

What I'm Most Proud Of

This project was a total thrill—AI handled the heavy lifting, giving me the freedom to focus entirely on high-level design and creative strategy while we breezed through to a flawless deployment!

Top comments (0)