🔥Antigravity를 사용해 Awwwards 스타일 포트폴리오를 만들었어요🌀

Source: Dev.to

위에 제공된 내용만으로는 번역할 텍스트가 없습니다. 번역을 원하는 본문을 함께 제공해 주시면 한국어로 번역해 드리겠습니다.

Introduction

이것은 Google AI가 제시한 New Year, New You Portfolio Challenge에 대한 제출물입니다.

저는 Kiran Naragund이며, 풀스택 개발자이자 오픈소스 기여자이며, 웹에서 무언가를 만드는 것을 진심으로 즐기는 사람입니다. 이 포트폴리오는 제 여정을 보여줍니다—학력, 직업 경험, 오픈소스 작업, 프로젝트, 그리고 개발자로서 배우고 성장하는 과정에서 수행한 다양한 실험들.

배포

The site is deployed on Google Cloud Run.

⚠️ Note: 최상의 경험을 위해 포트폴리오를 데스크톱 또는 노트북에서 확인하세요. 일부 애니메이션 및 인터랙션은 큰 화면에 맞게 설계되었습니다.

도구 및 기술

• React.js with Vite – 빠른 개발 및 성능
• Tailwind CSS – 스타일링 및 테마링
• GSAP와 Framer Motion – 애니메이션 및 페이지 전환
• Lenis – 부드러운 스크롤링
• Chart.js – 오픈‑소스 활동 시각화
• 몇 가지 shadcn/ui 컴포넌트

디자인 프로세스

완벽한 디자인보다 실험을 통해 프로젝트를 시작했습니다. 사이트는 섹션별로 구축되었으며, 애니메이션을 테스트하고, 레이아웃을 깨뜨리고, 요소를 제거하고, 다시 구축했습니다. 여러 차례의 재디자인을 거쳐 현재 상태에 이르렀습니다.

모든 콘텐츠(경험, 교육, 인증, 기술, 오픈‑소스 데이터)는 구조화된 데이터 파일을 통해 관리되어 사이트를 쉽게 업데이트하고 확장할 수 있습니다.

테마

라이트와 다크 모드만 제공하는 대신, 10가지 다른 테마를 구현했습니다:

• Light
• Dark
• Purple
• Ocean
• Forest
• Sunset
• Rose
• Midnight
• Coffee
• Mint

각 테마는 색상, SVG, UI 요소를 일관되게 업데이트합니다. 제가 개인적으로 가장 좋아하는 테마는 White와 Rose입니다.

다양한 테마 때문에 정적인 이미지는 어울리지 않아, 활성화된 테마에 따라 동적으로 적용되는 맞춤형 SVG를 만들어 시각적 일관성을 유지했습니다.

Animations & Interactions

• 일부 애니메이션은 큰 화면에서는 놀라울 정도로 멋졌지만 작은 화면에서는 압도적으로 느껴졌습니다(예: “What I Do” 섹션의 SVG 모션 경로). 저는 작은 뷰포트에서 요소를 선택적으로 숨겨 경험을 깔끔하게 유지합니다.
• 전통적인 로더 대신 애니메이션 페이지 전환을 추가하여 탐색에 장난스러운 느낌을 주었습니다.
• 맞춤형 Google‑스타일 로더 애니메이션이 사이트를 재미있게 소개합니다.
• 라우트 기반 페이지 전환 애니메이션이 각 섹션마다 다른 메시지를 표시합니다.
• 맞춤형 애니메이션 커서가 보다 부드러운 상호작용을 제공합니다.

오픈 소스 섹션

기본 GitHub 기여 그래프를 표시하는 대신, 방문자가 탐색할 수 있는 전용 Open Source 섹션을 만들었습니다:

• 내가 기여한 조직
• 내가 만든 풀 리퀘스트
• 내가 작업한 이슈
• 시간에 따른 기여 활동

이렇게 하면 내 오픈‑소스 작업이 투명해지고 GitHub을 여기저기 옮겨 다닐 필요 없이 이해하기 쉬워집니다.

개발 워크플로우

• Antigravity IDE는 대부분의 개발에 사용되었습니다.
• plan.md 파일은 아이디어, 페이지 구조, 애니메이션 계획 및 개선 사항 메모와 함께 지속적으로 업데이트되었습니다.
• IDE 내부에서 계획, 리팩토링 및 더 나은 컴포넌트 또는 애니메이션 구조 탐색을 위해 다양한 AI 모델을 전환했습니다.
• Gemini Nano Banana는 프로젝트 섹션의 목업을 생성했습니다.

이러한 도구들은 더 빠르게 반복하고 프로세스를 원활하게 유지하는 데 도움이 되었습니다.

하이라이트 및 자랑스러운 순간

• 복잡한 SVG 경로와 타임라인 기반 애니메이션을 위해 GSAP를 배우고 사용했습니다.
• 맞춤형 구글 스타일 로더 애니메이션을 만들었습니다.
• 섹션별 고유 메시지를 포함한 라우트 기반 페이지 전환 애니메이션을 추가했습니다.
• 맞춤형 애니메이션 커서를 구축했습니다.
• 10개의 일관된 테마를 가진 완전한 테마 인식 디자인 시스템을 개발했습니다.
• 정적 GitHub 그래프 대신 실제 데이터와 차트를 사용해 오픈소스 기여를 보여주었습니다.
• 사용자를 압도하지 않으면서 사이트를 인터랙티브하고 시네마틱하게 만들었습니다.

회고

이 포트폴리오를 만들면서 나는 편안한 영역을 크게 벗어나게 되었고, 이전에 해본 적 없는 일들을 시도하게 되었습니다. 이를 통해 인내심을 배웠습니다: 많이 실험하고, 자주 부수면서, 작은 디테일이 제품의 느낌을 완전히 바꿀 수 있다는 것을 깨달았습니다.

완벽하지는 않지만 솔직합니다. 이것은 내가 생각하고, 만들고, 배우는 방식을 보여주며, 그래서 나에게 특별합니다.

읽어 주셔서 감사합니다. 여러분의 피드백을 듣고 싶습니다! 🙌