WarriorOS: React, Gemini, 및 Cloud Run을 사용한 현대적인 터미널 포트폴리오 구축
Source: Dev.to
이것은 Google AI가 주최한 새해, 새로운 당신 포트폴리오 챌린지에 대한 제출물입니다.
About Me
Hi everyone! I’m Ankush Singh Gandhi, a software engineer and the “Warrior Who Codes.” I specialize in full‑stack development, system design, and building interactive web experiences.
하지만 저는 단순히 코더가 아닙니다—열정적인 기술 작가이자 평생 학습자이기도 합니다. 지난 몇 년간 Dev.to에 올린 제 글은 48 000회 이상의 조회수를 기록했으며, 커뮤니티 토론에 기여한 공로로 LinkedIn에서 컴퓨터 과학 분야 Top Voice로 선정된 바 있습니다. 시스템 설계 블로그와 엔지니어링 사례 연구를 탐독하는 것을 정말 좋아합니다.
이 포트폴리오의 목표는 이중성을 반영하는 무언가를 만드는 것이었습니다: 제 프로젝트를 보여주는 동시에 제가 만들고 소비하는 콘텐츠를 위한 “Interactive Hub” 역할을 하는 공간. 레트로 터미널 미학과 현대적인 고성능 UI를 결합해 제 이야기를 전달합니다.
Source:
진화: WarriorOS (v4.0) vs. 원본
⚠️ NOTE: 진행 중
이 프로젝트는 현재 활발히 개발 중입니다. 새로운 WarriorOS 버전의 실시간 미리보기를 보고 있습니다.
이 프로젝트는 내 원래 포트폴리오 warriorwhocodes.com 를 완전히 재구현한 것입니다. 원본 사이트도 잘 작동했지만, 정적인 쇼케이스에서 살아 숨 쉬는 운영 체제로 개인 사이트의 한계를 넓히고 싶었습니다.
⚠️ 중요한 시청 경험 권장 사항
아래에 사이트를 삽입했지만, 새 창에서 포트폴리오를 여는 것을 강력히 선호하고 권장합니다. 복잡한 터미널 단축키, 호버 효과, 몰입형 UI는 iframe 내부보다 직접 열었을 때 최적의 경험을 제공합니다.
1. 새로운 아키텍처 (WarriorOS)
- 상태: 활발한 개발 중 🚧
- 초점: 터미널 우선 네비게이션, AI 통합, “One‑Shot” 학습 모듈.
2. 원본 포트폴리오 (레거시)
- 상태: 안정적 (v3.0)
- 초점: 표준 시각적 쇼케이스.
Warrior Who Codes – Ankush Singh Gandhi
Python, Django, Flask 및 클라우드 시스템을 전문으로 하는 백엔드 및 소프트웨어 개발자. 현대 웹 앱 및 Flutter 기반 모바일 앱도 구축합니다.
How I Built It
I built WarriorOS (my portfolio) using a modern tech stack centered purely on offering a seamless user experience, accelerated by Google’s AI tools.
Tech Stack
- Frontend: React (Vite), Tailwind CSS, Framer Motion for animations.
- Deployment: Google Cloud Run (Dockerized Nginx container).
- AI Integration: Google Gemini API.
- Development Partner: Built using Antigravity, Google’s advanced agentic coding assistant.
Building with Antigravity & Gemini
This project didn’t just use AI features; it was built with AI. I used Antigravity (powered by Gemini) to pair‑program the entire WarriorOS.
- Rapid Prototyping: The agent iterated on the complex “Terminal Button” UI until it matched my exact vision—down to the pixel‑perfect glow effects.
- Deployment Automation: The agent handled containerization with Docker and the Cloud Run deployment commands, saving me hours of configuration time.
Google Gemini API Integration (The “New You” Feature)
I integrated the Gemini API directly into the site to create an AI Expert & Companion. More than a chatbot, this feature embodies my philosophy on Modern Content Writing: The AI + Human Symbiosis.
The Mindset: Evolution of Technical Learning
In the past, technical writing was static: you wrote a blog, someone read it, and if they got stuck they had to leave the site to Google the answer. I believe the future of content is interactive and adaptive.
- Human Role: Curate the structure, roadmap, and core insights (the human experience).
- AI Role: Gemini acts as the personalized expert that fills in the gaps for each individual reader.
By embedding Gemini directly into my “One‑Shot” roadmap pages, I’ve transformed static documentation into a dynamic learning session. The user doesn’t just read about Redis; they can ask, “How would this caching strategy apply to my specific e‑commerce app?” and get an instant, context‑aware answer without leaving the portfolio.
Gemini은 어디에 통합되어 있나요?
“One‑Shot” 라이브러리
- Library 섹션으로 이동하여 任意의 “One‑Shot” 로드맵(예: Redis, System Design)을 엽니다.
- 화면에 “Expert Mode” 버튼이 떠 있습니다.
- 버튼을 클릭하면 AI가 해당 로드맵의 정확한 컨텍스트를 사전 프롬프트로 받아 채팅 창이 열립니다. AI는 사용자가 Redis를 공부하고 있음을 알고 전문 데이터베이스 전문가처럼 행동합니다.
전역 AI 어시스턴트
- 사이트 전체에서 AI는 내 포트폴리오의 가이드 역할을 합니다. 프로젝트 아키텍처를 설명하거나, 사용자의 관심사에 따라 읽어야 할 블로그 포스트를 제안하거나, About Me 섹션에 나열된 기술에 대해 퀴즈를 내줄 수도 있습니다.
활성 회상 퀴즈
- Expert 창 안에서 “Quiz Mode” 로 전환할 수 있습니다. Gemini는 현재 보고 있는 콘텐츠를 기반으로 빠른 속도의 질문을 생성해 실시간으로 이해도를 확인하도록 도와줍니다.
# What I'm Most Proud Of글로벌 터미널 시스템
터미널을 가짜 GIF로 만들고 싶지 않았습니다. 이것은 완전한 기능을 갖춘 글로벌 네비게이션 CLI입니다. 사이트 어디에 있든 버튼을 눌러 다음과 같은 명령을 입력할 수 있습니다:
system.archive_access→ 즉시 내 라이브러리/블로그 섹션으로 이동합니다.system.profile_bio→ About Me 섹션으로 바로 이동합니다.python→ 시뮬레이션된 Python 환경을 실행합니다 (import antigravity를 시도해 보세요!).
전체 웹사이트 네비게이션을 파일 시스템처럼 취급하여 파워 유저에게 더 빠른 탐색 방법을 제공합니다.
”One‑Shot” 학습 모듈
콘텐츠 제작에 대한 열정을 반영하여 Redis, Django ORM, MySQL과 같은 주제에 대한 인터랙티브 로드맵 페이지를 만들었습니다. 단순히 “Redis를 안다”고 말하는 대신, 구조화된 치트 시트와 가이드를 통해 내가 아는 것을 보여주고, AI 전문가가 방문자에게 언제든지 개념을 설명해 줍니다.
원활한 클라우드 배포
앱을 Docker화하고 Google Cloud Run에서 실행하게 된 것은 큰 성공이었습니다. 사이트가 즉시 로드되고 기본적으로 HTTPS로 보안되며, 내 블로그 글이 바이럴하면 자동으로 확장될 수 있습니다.
WarriorOS를 커뮤니티와 공유하게 되어 기쁩니다. 이는 글을 쓰는 단계에서 시작해 제 작업을 위한 전체 운영 체제를 구축하게 된 여정을 나타냅니다.
즐거운 코딩 되세요! 🚀