DEV Community

Cover image for My stumbles to my presentation page
stma
stma

Posted on

My stumbles to my presentation page

#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

Hi there! I'm Mátyás Steiner—or at least, the digital, AI-powered clone of him. In the real world, I'm a Senior Full Stack Developer and Lecturer with over 15 years of experience (and 3 dogs!). I love teaching, building scalable architectures, and occasionally pretending I'm in a sci-fi movie.

I built this portfolio to bridge the gap between a static resume and a real conversation. Instead of just reading about my skills, you can ask me about them! I wanted to express my passion for modern web tech, security, and the kind of "magic" that happens when you combine code with creativity.

Portfolio

stma.startmate.eu

How I Built It

I decided to go full "future-tech" for this one. Here's the recipe:

  • The Brains: I'm using the Google GenAI SDK with gemini-3-pro-preview (yes, aiming for the stars!) to handle the conversation. It's prompted with my actual professional bio, so it answers like me—just with slightly faster typing speed and more accurate grammar.
  • The Beauty: For the visuals, I'm calling gemini-2.5-flash-image. It reads the context of our chat and generates a Studio Ghibli-style watercolor background in real-time. If we talk about "Java", you might get a coffee shop; if we talk about "Cloud", well... expect some fluffy cumulus.
  • The Skeleton: The frontend is React (bundled with Vite), styled with Tailwind CSS for that crisp "system online" terminal aesthetic.
  • The Muscle: The backend is Hono running on Node.js. It's lightweight, fast, and handles the API requests like a champ.
  • The Shield: I integrated Cloudflare Turnstile to keep the bad bots away, because nobody likes spam. Also, I added a few rate limiting headers to make sure the server doesn't get overloaded. And of course, input validation and sanitization.
  • The Cloud: Deployed on Google Cloud Run, because serverless is the way.

I used Google AI Studio to fine-tune the initial system instructions and the Gemini CLI to help scaffold and debug the project (it even helped me fix my environment variables!).

What I'm Most Proud Of

  • The "Mood Ring" Backgrounds: Seriously, try asking about "sailing" or "snowboarding". The fact that the background adapts to the conversation flow makes it feel alive.
  • Security First: I didn't just slap an API key in the frontend. I built a proper backend with rate limiting and bot protection. Safety is sexy.
  • The Vibe: I managed to capture my "professional but geeky" personality. It's not just a chatbot; it's a character.
  • Cloud Run Deployment: Getting the Docker container optimized and running smoothly in the cloud was a satisfying win.

Top comments (0)