내 프레젠테이션 페이지에 대한 실수들

발행: (2026년 2월 2일 오전 10:22 GMT+9)
3 분 소요
원문: Dev.to

Source: Dev.to

Cover image for My stumbles to my presentation page

New Year, New You Portfolio Challenge Submission

About Me

안녕하세요! 저는 Mátyás Steiner—혹은 그의 디지털, AI‑구동 클론입니다. 현실 세계에서는 15년 이상의 경력을 가진 시니어 풀스택 개발자이자 강사이며, 반려견 3마리를 키우고 있습니다! 가르치는 일, 확장 가능한 아키텍처를 구축하는 일, 그리고 가끔은 SF 영화에 나오는 주인공이 된 듯한 상상을 즐깁니다.

이 포트폴리오는 정적인 이력서와 실제 대화 사이의 간극을 메우기 위해 만들었습니다. 제 기술을 단순히 읽는 대신, 직접 물어볼 수 있죠! 현대 웹 기술, 보안, 그리고 코드와 창의성을 결합했을 때 발생하는 일종의 “마법”에 대한 열정을 표현하고 싶었습니다.

Portfolio

(Content omitted – link to live portfolio if desired)

How I Built It

  • The Brains: Using the Google GenAI SDK with gemini-3-pro-preview to handle the conversation. It’s prompted with my actual professional bio, so it answers like me—just faster and with more accurate grammar.
  • The Beauty: For visuals, calling gemini-2.5-flash-image. It reads the chat context and generates a Studio Ghibli‑style watercolor background in real‑time. Mention “Java” and you might see a coffee shop; mention “Cloud” and expect fluffy cumulus.
  • The Skeleton: Frontend built with React (bundled with Vite) and styled with Tailwind CSS for a crisp “system online” terminal aesthetic.
  • The Muscle: Backend powered by Hono on Node.js—lightweight, fast, and handles API requests efficiently.
  • The Shield: Integrated Cloudflare Turnstile for bot protection, added rate‑limiting headers, and implemented input validation and sanitization.
  • The Cloud: Deployed on Google Cloud Run, leveraging serverless architecture.

Development tools included Google AI Studio for fine‑tuning system instructions and the Gemini CLI for scaffolding and debugging (it even helped fix environment variables).

What I’m Most Proud Of

  • The “Mood Ring” Backgrounds: Ask about “sailing” or “snowboarding” and watch the background adapt to the conversation flow, making the experience feel alive.
  • Security First: No API keys exposed in the frontend; a proper backend with rate limiting and bot protection ensures safety.
  • The Vibe: Captured a “professional but geeky” personality—more than a chatbot, it’s a character.
  • Cloud Run Deployment: Optimizing the Docker container and running it smoothly in the cloud was a satisfying win.
Back to Blog

관련 글

더 보기 »