AI 커리어 트윈 포트폴리오: 지능형 어시스턴트와 함께하는 인터랙티브 포트폴리오

Source: Dev.to

이 작품은 Google AI가 주관하는 New Year, New You 포트폴리오 챌린지를 위한 제출물입니다

나에 대하여

저는 VIT Bhopal University에서 AI/ML을 전공하고 있는 3학년 학생 Mansaa Kohli이며, 지능형 헬스케어 솔루션 구축에 열정을 가지고 있습니다. 이 포트폴리오를 통해 단순한 이력서를 넘어, 기술과 문제 해결에 대한 저의 접근 방식을 보여주는 경험을 만들고 싶었습니다.

포트폴리오

실시간 데모:

AI 채팅 기능을 사용해 제 작업을 인터랙티브하게 알아보세요!

제작 과정

기술 스택

• 프론트엔드: HTML5, CSS3, Vanilla JavaScript
• 백엔드: Node.js / Express (지능형 응답 제공)
• 디자인: 유리 모피즘과 애니메이션을 적용한 커스텀 CSS
• 배포: 전 세계 접근성을 위한 Vercel

주요 기능

• AI 커리어 트윈: 상황에 맞는 응답을 제공하는 인터랙티브 채팅 시스템
• 모던 디자인: 그라디언트 배경과 유리 모피즘 효과
• 반응형 레이아웃: 모바일, 태블릿, 데스크톱 모두에서 정상 작동
• 인터랙티브 요소: 애니메이션 스킬 바, 부드러운 스크롤, 호버 효과
• 성능 최적화: 최소한의 의존성으로 빠른 로딩

개발 프로세스

1. 디자인 단계: 와이어프레임 작성 및 사용자 경험 기획
2. 구현 단계: 시맨틱 HTML과 최신 CSS로 컴포넌트 구축
3. AI 시스템: 지능형 응답 로직 구현
4. 테스트 단계: 크로스‑브라우저 및 디바이스 테스트
5. 배포 단계: 클라우드 호스팅 설정 및 최적화

가장 자랑스러운 점

• AI 채팅 기능: 제 작업에 대한 맞춤형 응답을 제공하는 인터랙티브 어시스턴트
• 시각 디자인 구현: 유리 모피즘 효과와 부드러운 애니메이션을 통해 전문적이고 현대적인 미학 구현
• 문제 해결 여정: 배포 과정에서의 난관 극복 및 Vercel, 고급 CSS 애니메이션 등 새로운 기술 습득
• 완전한 솔루션: 아이디어 구상부터 배포까지, 엔드‑투‑엔드 개발 역량을 보여주는 풀스택 포트폴리오 구축
• 학습 경험: 새로운 기술에 도전하고, 진심으로 자랑스러운 결과물을 만든 경험

도전 과제와 해결책

• 도전 과제: 외부 API 없이 매력적인 AI 응답 만들기
  해결책: 패턴 매칭 기반의 지식 시스템 구축
• 도전 과제: 브라우저 간 복잡한 CSS 애니메이션 구현
  해결책: 광범위한 테스트와 폴백 구현
• 도전 과제: 배포 파이프라인 설정
  해결책: 여러 플랫폼을 탐색하고 성공적으로 배포

직접 체험해 보기!

AI 커리어 트윈에게 물어보세요:

• “어떤 프로젝트가 가장 자랑스러운가요?”
• “당신의 기술 스킬에 대해 알려주세요.”
• “해커톤에서 어떻게 우승했나요?”
• “당신의 커리어 목표는 무엇인가요?”
• “연구에 대해 이야기해 주세요.”

향후 개선 사항

• 동적 응답을 위한 Google Gemini API 통합
• 채팅을 위한 음성 인터페이스 추가
• 다크/라이트 테마 토글 구현
• 프로젝트 시연 영상 추가

배운 점

• 사용자 경험 디테일이 크게 영향을 미친다
• 점진적 향상을 통해 신뢰성을 확보한다
• 초기 테스트가 큰 문제를 예방한다
• 문서화가 유지보수를 용이하게 만든다