DEV Community

sandromirr
sandromirr

Posted on

Interactive Portfolio with Profile-Grounded Gemini Chat

#devchallenge #googleaichallenge #portfolio #gemini

--labels dev-tutorial=devnewyear2026

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

About Me

I’m Sandro, a Senior Software Engineer based in Tbilisi, Georgia. I specialise in backend-heavy systems with clean architecture, search, and messaging. Over 6+ years, I’ve shipped scalable .NET services, built search-heavy platforms, and taught programming fundamentals, algorithms, and data structures.

Portfolio

My portfolio runs on Cloud Run and pairs a React single-page layout with a Gemini-powered “Career Chat” that answers questions using my own profile data.

Embed your Cloud Run deployment here: https://portfolio-app-707441303278.europe-west1.run.app/

How I Built It

  • Stack: React 18 + Vite on the client; Node.js (ESM) + Express on the server; CSS for theming; Google Generative AI (Gemini) for the chat.
  • UX: Light/dark theme toggle with localStorage persistence; split layout with a chat panel and a resume panel; cards for About, Experience, Projects, Skills, and Contact.
  • Gemini “Career Chat”: The client posts messages and chat history to /api/career-gemini; the server injects my profile (from profile.json) into a system prompt so answers stay grounded in my data.
  • API: Express with CORS and JSON parsing; uses @google/generative-ai and the gemini-3-flash-preview model. In production, the server also serves the built React app from dist when present.
  • Config: .env expects GOOGLE_API_KEY and optional PORT (defaults to 8080). Profile content is editable in profile.json, so updating the portfolio data does not require code changes.

What I'm Most Proud Of

  • A grounded Gemini chat that only answers from my curated profile data—no fluff, just my real skills and projects.
  • A split layout that keeps the chat visible beside the resume cards, so you can explore and converse at the same time.
  • Light/dark theming that persists and stays legible, making the portfolio comfortable in any setting.
  • A single-container, Cloud Run–ready setup where Express serves both the API and the built client.
  • Data-only updates: I can change my story by editing profile.json without touching code.

Top comments (0)