플러스프로젝트 배경
1) 7년차 디지털 마케터로서 경력·강의·저서·프로젝트를 하나의 사이트에 통합하기 위해 기획 2) Claude Code(바이브코딩) 방식으로 빠른 프로토타이핑과 반복 개선 실현
프로젝트 성과
실작업 2~3일 만에 풀 포트폴리오 사이트 완성
Claude Code 바이브코딩으로 기획·디자인·개발 전 과정을 1인 수행. React 19 + Tailwind CSS 4 최신 스택 적용, 10개
Framer Motion 기반 인터랙티브 UI 구현
카드 hover 슬라이드업, 타이핑 애니메이션 등 10개 컴포넌트에 걸쳐 인터랙션 적용. 정적 포트폴리오와 차별화된 사용자 경험 구현
핵심 기능
타이핑 애니메이션 Hero
useState + useEffect 기반 TypeWriter 컴포넌트. 랜덤 딜레이로 실제 타이핑처럼 자연스러운 텍스트 등장 효과 구현
진행 단계
기획 및 구조 설계
2026.03.
Claude Code로 섹션 구성·컴포넌트 구조·컬러 시스템 정의
프로젝트 상세
1) 포트폴리오 소개 - AI 마케터·교육자의 경력과 작업물을 보여주는 개인 포트폴리오 랜딩 사이트. - Claude Code(바이브코딩)로 기획부터 개발까지 실작업 2~3일 만에 완성. 2) 작업 범위 - 화면 설계, UI/UX 디자인, Front-end 개발 / 반응형 웹 (모바일·태블릿·데스크톱) 3) 주요 업무 - 타이핑 애니메이션 Hero 섹션 - 마케팅 프로젝트 카드 (hove
