포트폴리오: 시작

Three.js, Vercel 및 고급 웹 기능을 처음 다룬 v0 개념 증명입니다.

데모 링크

개요

• 역할: 개발자 (첫 시도)
• 기술 스택: React, Three.js, Framer Motion, Vercel
• 주요 결과: 처음으로 3D 웹 개발 및 배포를 배우는 혼란을 성공적으로 이겨냈습니다.
• 요약: 이것은 나의 "v0" 포트폴리오였습니다. Three.js, Vercel, 무거운 UI 애니메이션을 처음으로 실험해 본 프로젝트였습니다. 임베디드 챗봇과 3D 랜딩 카드와 같은 야심 찬 기능이 포함되어 있었지만, UI/UX는 혼란스러웠음을 인정합니다. 이것은 나의 첫 시도에 대한 가공되지 않은 증거로 자랑스럽게 남아 있습니다.

문제

• 과제: 복잡한 최신 웹 기술(3D 렌더링, 배포 파이프라인, 인터랙티브 위젯)을 한 번에 처음부터 배우고 구현하려 했습니다.
• 대상: 나 자신. 남에게 보여주기 위한 세련된 작품이 아니라 개인적인 샌드박스로 의도되었습니다.
• 제약 사항: 엄청난 학습 곡선으로 인해 심각한 성능 병목 현상이 발생하고 응집력 있는 UI/UX 디자인이 부족했습니다.

접근 방식 및 결정

• 아키텍처: 최적화되지 않은 Framer Motion 프리미티브와 원자적 CSS에 크게 의존하는 모듈식 React 설정입니다.
• 주요 결정: 작동 방식을 확인하기 위해 찾을 수 있는 모든 멋진 기능(자기 버튼, 드래그 가능한 도크, 3D 카드)을 하나의 프로젝트에 넣기로 결정했습니다.
• 트레이드오프: 순수한 기술적 실험이라는 명목 하에 단순성, 성능 및 사용자 경험을 완전히 희생했습니다.
• 데이터 흐름: 표준 React 컨텍스트를 통해 처리되었지만 겹치는 애니메이션 상태와 최적화되지 않은 3D 렌더링으로 인해 크게 느려졌습니다.

주요 결과 및 영향

• 결과: 기능적으로는 결함이 있지만 현재 내 작업의 기반을 마련해 준 매우 교육적인 샌드박스입니다.
• 영향: 웹 성능과 관련하여 하지 말아야 할 것을 정확히 가르쳐 주었습니다.

기술 심층 분석

• 주목할 만한 세부 사항: 모핑 전환, 라이브 시계 및 사용자 지정 커서가 있는 고급 모달 시스템을 시도하여 모두 동시에 실행했습니다.
• 검증: 테스트는 순전히 가공되지 않은 수동 시각적 검사(시행착오)를 통해 수행되었습니다.
• 최적화: 거의 존재하지 않습니다. 성능은 끊임없는 롤러코스터였습니다.
• 코드 품질: 확실히 나의 최고 작품은 아닙니다. 순전히 학습을 위한 혼란스러운 환경이었습니다.

회고

• 앞으로의 방향: 무거운 애니메이션을 맹목적으로 결합하면 성능이 파괴된다는 것을 배웠습니다. 나의 다음 반복은 성능과 깔끔한 UX에 엄격하게 중점을 둡니다.
• 성공 요인: 이것은 나의 "첫 시도의 증거"로 서 있습니다.
• 교훈: 성능과 깔끔한 UX는 화려하지만 최적화되지 않은 3D 기능을 쌓는 것보다 무한히 가치 있습니다.

나의 기여

• 설계 및 엔지니어링: 시행착오를 통해 모든 UI/UX, 3D 효과 및 인터랙티브 기능을 설계하고 구현했습니다.
• 애니메이션 및 인터랙티비티: 사용자 지정 Framer Motion 프리미티브를 구축했습니다.
• 콘텐츠 레이어: MDX를 통합했습니다.
• 기술 문서화: 초기 아키텍처 과제를 문서화하기 위해 프로젝트를 아카이브했습니다.

프로젝트 아키텍처

이 프로젝트는 모듈식이지만 과부하가 많이 걸린 React 컴포넌트 시스템을 사용했습니다.

• 컴포넌트 구성:
  • ui/, core/, motion-primitives/: 재사용 가능한 원자적 컴포넌트
  • 블로그 및 프로젝트용 MDX 콘텐츠
• 상태 관리: 컨텍스트 기반 테마 관리.
• 통합: Framer Motion, Radix UI, Tailwind CSS, cmdk.

데모 미리보기

이 페이지는 원본 v0 빌드를 문서화합니다. 보관된 라이브 데모를 보려면 archivedportfolio.franzdomingo.dev를 방문하십시오.

• 플랫폼 뷰: 웹 (반응형)
• 제공되는 기능:
  • 최적화되지 않은 3D 랜딩 카드 및 인터랙티브 UI
  • 임베디드 챗봇

호스팅 참고 사항:
쇼케이스 프로젝트로 보관되었습니다. 훨씬 더 깔끔하고 업데이트된 포트폴리오는 현재 portfolio.franzdomingo.dev에서 활성화되어 있습니다.