내 포트폴리오가 변신했어요
Source: Dev.to
이것은 Google AI가 제시한 새해, 새로운 당신 포트폴리오 챌린지 제출물입니다.
소개
Hello everyone, I’m Rachit Khurana, a Full Stack Developer who loves building things that live on the internet. Currently, I’m an Intern at Hyathi Technologies where I work on cutting‑edge cloud solutions, and I’m also the creator of BossAI — a productivity app that helps users work smarter.
저는 확장 가능한 웹 애플리케이션을 만드는 일과 새로운 기술을 탐구하는 데 열정을 가지고 있습니다. 제 경험은 React와 Next.js 같은 프론트엔드 프레임워크부터 Django, FastAPI, Golang 같은 백엔드 기술까지 다양합니다. 저는 “FAFO”라는 철학을 실천하며, 끊임없이 실험하고 직접 해보면서 배우고 있습니다.
포트폴리오
어떻게 만들었는지
(추가 세부 정보가 제공되지 않았습니다.)
Tech Stack
이 포트폴리오는 최신의, 성능 중심 기술 스택으로 구축되었습니다:
- Framework: TanStack Start와 React 19 — 초고속 SSR 및 원활한 라우팅 제공
- Styling: TailwindCSS 4.0 — 유틸리티‑퍼스트 스타일링
- Animations: Framer Motion + GSAP — 부드럽고 영화 같은 애니메이션
- 3D Graphics: Three.js와 @react-three/fiber — 인터랙티브 3D 요소
- Smooth Scrolling: Lenis — 부드러운 스크롤 경험 제공
- Typography: Google Fonts의 Outfit, Space Grotesk, Syne
- Deployment: Google Cloud Run — 확장 가능하고 컨테이너화된 호스팅
전체 코드베이스는 오픈 소스이며, GitHub에서 확인할 수 있습니다!
개발 과정
나는 이전에 Next.js로 포트폴리오를 만들었고(여기서 확인), 완전히 새롭고 처음부터 재설계하고 싶었다. 나는 Antigravity IDE에서 Gemini 3 Pro에 내 기존 포트폴리오를 다음 프롬프트와 함께 입력했다:
“This is my portfolio. Change it fully. Make it look modern, and unique yet minimalistic. Make it as unique as possible. I don’t want it to look vibe coded. It should feel like a professional company designed it. Feel free to use any third‑party tools/libraries. Also make it from scratch. I don’t wanna use Next.js at all now. Rebuild it using TanStack Start.”
그 뒤로 모든 작업은 반복 프롬프트를 통해 진행되었다. 나는 Gemini와 함께 여러 가지 미학과 디자인 방향을 탐색하면서 색상 구성, 애니메이션 스타일, 레이아웃 등을 다양하게 시도했고, 결국 과학‑판타지 느낌의 홀로그래픽 디자인에 최종적으로 도달했다.
AI 도움을 특히 크게 받은 부분은 다음과 같다:
- 복잡한 CSS 애니메이션 및 전환 생성
- 패럴랙스 효과와 부드러운 스크롤 동작 구현
- 반응형 디자인에서 발생하는 까다로운 엣지 케이스 디버깅
워크플로우는 매우 효율적이었다: 내가 원하는 것을 설명하면 Gemini가 구현하고, 우리는 결과가 내 비전과 일치할 때까지 함께 다듬어 나갔다.
내가 가장 자랑스러운 것
현대적이고 미니멀한 디자인
이 포트폴리오에서 현대적인 미학을 구현한 것이 정말 자랑스럽습니다. 디자인은 다음을 결합합니다:
- 홀로그래픽 요소: 프로필 사진을 위한 사이버펑크 영감의 유리 컨테이너, 애니메이션 테두리, 스캔라인 효과, 그리고 떠다니는 애니메이션
- 오로라 배경: 눈에 거슬리지 않으면서 깊이를 더해주는 미묘하고 애니메이션된 그라디언트 배경
- 글라스 모피즘: 프리미엄 느낌을 주는 전체적인 서리 유리 효과
- 부드러운 마이크로 애니메이션: 모든 인터랙션에 적용된 정교한 전환 효과
숨겨진 이스터 에그
이 포트폴리오를 만들면서 가장 재미있었던 부분 중 하나는 여러 개의 숨겨진 이스터 에그를 사이트 곳곳에 추가한 것이었습니다. Gemini의 도움을 받아, 호기심 많은 방문자들이 사이트를 탐색하고 상호작용할 때 보상을 받을 수 있는 여러 서프라이즈를 빠르게 구현했습니다.
모두 공개해서 재미를 망치지는 않을게요—포트폴리오에 직접 방문해서 찾아보세요! 일부는 키보드 입력과 연관되어 있고, 일부는 인내심을 요구하며, 또 다른 것들은 눈에 띄게 숨겨져 있습니다. 즐거운 사냥 되세요!