Google AI Studio와 Gemini를 활용한 초현대적인 애니메이션 포트폴리오 만들기

Source: Dev.to

Google AI가 주관하는 새해, 새로운 당신 포트폴리오 챌린지 제출 작품

저는 Aniruddha Adak이며, 인도 콜카타에 거주하는 풀스택 개발자이자 AI 엔지니어입니다. 현재 MAKAUT에서 컴퓨터 과학 전공 B.Tech 4학년을 재학 중이며, 사용 기술 스택은 Next.js, React, TypeScript, Python 및 머신러닝 도구들입니다.

포트폴리오 개요

저는 Google AI Studio와 Gemini 3 Flash를 사용하여 이 포트폴리오를 만들었으며, AI‑지원 개발을 보여줍니다. 이 사이트는 초현대적인 디자인에 부드러운 애니메이션, 반응형 레이아웃, 풍부한 타이포그래피를 결합합니다.

디자인 및 기능

초현대적 디자인

• 그라디언트 애니메이션 히어로 섹션과 패럴랙스 효과
• 네온 블루, 퍼플, 핑크가 강조된 다크 테마
• 모든 디바이스에서 완전 반응형

부드러운 애니메이션 및 인터랙션

• 스크롤 트리거된 섹션별 Reveal 애니메이션
• 프로젝트 카드에 호버 효과와 상세 모달
• 매끄러운 페이지 전환 및 스크롤 위치 표시기
• 기술 전문성을 시각화하는 애니메이션 스킬 바

풍부하고 현대적인 타이포그래피

• 임팩트를 위한 대형 그라디언트 스타일 헤딩
• 시각적 계층 구조를 위한 다양한 폰트 크기와 굵기
• 가독성을 위한 고대비 본문 텍스트

주요 섹션

• Hero Section – 나를 소개하는 애니메이션 그라디언트 배경
• About Me – 성과 및 경력 타임라인
• Skills – 숙련도 수준을 표시하는 애니메이션 스킬 바
• Projects – 주요 작업 전시:
  • FolioMotion – 동적 포트폴리오 템플릿
  • ContentCraft AI – AI 기반 콘텐츠 제작 플랫폼
  • MarketPulse AI – 실시간 금융 인텔리전스 에이전트
  • SupplyGuard AI – 공급망 위험 탐지 시스템
  • SkillSphere – 10개 이상의 앱을 포함한 생산성 플랫폼
• Contact – 문의를 위한 애니메이션 연락 양식

어떻게 만들었는가

기술 스택

• Google AI Studio – Gemini 3 Flash가 초기 앱 구조를 생성했습니다
• React / TypeScript – 컴포넌트 기반 아키텍처
• Vite – 빠른 빌드 도구 및 개발 서버
• Tailwind CSS – 커스텀 애니메이션이 포함된 최신 유틸리티 퍼스트 스타일링
• Gemini Integration – AI 기반 기능 및 콘텐츠 생성

개발 과정

1. 포트폴리오 비전을 Google AI Studio의 Copilot에 설명했습니다.
2. AI가 모듈형 React 컴포넌트와 스타일을 생성했습니다.
3. 커스텀 애니메이션 및 인터랙션으로 컴포넌트를 강화했습니다.
4. GitHub에 배포하고 Vercel에 연결했습니다.
5. main 브랜치에 푸시될 때마다 자동 배포를 설정했습니다.

제가 가장 자랑스러워하는 것

• 디자인 우수성 – 현대적인 그라디언트 디자인, 부드러운 애니메이션, 풍부한 타이포그래피.
• 성능 – Vite는 즉각적인 페이지 로드와 부드러운 상호작용을 제공합니다.
• AI‑우선 개발 – Google AI Studio를 활용해 개발을 빠르게 시작하면서도 완전한 제어를 유지했습니다.
• 포괄적인 쇼케이스 – 프로젝트, 타임라인, 스킬을 함께 보여줘 완전한 기술 스토리를 전달합니다.
• 부드러운 사용자 경험 – 모든 스크롤, 호버, 상호작용이 즐겁게 느껴집니다.

라이브 배포

• 포트폴리오:
• Inside AI Studio:
• GitHub 저장소:

주요 내용

• Google AI Studio는 빠른 프로토타이핑을 가능하게 합니다.
• Gemini 기반 코드 생성은 프로덕션 수준의 품질을 제공합니다.
• 최신 웹 디자인을 무거운 프레임워크 없이 구현할 수 있습니다.
• AI 도구와 창의적인 비전을 결합하면 뛰어난 결과를 얻을 수 있습니다.

새로운 기회와 협업을 환영합니다! LinkedIn, GitHub, 또는 Twitter에서 저와 연결해 주세요.