사례

디자이너 포트폴리오2

프로젝트 시작10월 3일 오후 11:50바로 개발 시작

개발 내용

디자이너 포트폴리오를 만드는데 디자인과 스타일에 3D적용해서 아주 화려하게 만들어줘.
컬러는 블루 계통으로

실행과정19개 작업

파일 목록

파일 읽기

파일 목록

파일 읽기

프로젝트 구조를 파악했습니다. 디자이너 포트폴리오를 3D 효과(틸트 카드, 플로팅 큐브/오빗, 마우스 패럴랙스, 유리질감 글래스모피즘)와 블루 컬러로 화려하게 만들겠습니다.

계획

**데이터 구조** (이후 DB/백엔드 연동 시 그대로 사용):
- `profile` — 이름·역할·소개·연락처·통계
- `skills` — 역량명·숙련도·아이콘
- `projects` — 제목·분야·연도·설명·태그·커버 그라디언트
- `experience` — 기간·역할·회사·설명
- `tools` — 사용 툴 목록

이제 화면을 임시 데이터로 구현합니다.

파일 수정

파일 생성

계획

로그 확인

파일 목록

로그 확인

미리보기 로그의 오류는 App.jsx를 먼저 쓴 뒤 CSS를 쓰는 사이의 일시적 해소 실패였고, 지금은 두 파일 모두 존재합니다. 다만 히어로 마우스 글로우의 좌표 계산에 버그가 있어 수정합니다.

파일 수정

로그 확인

계획

실행결과 · 3분 9초 소요

디자이너 포트폴리오를 만들었습니다. 미리보기에 반영되어 있습니다.

**만든 것**
- **블루 3D 테마** — 딥네이비 배경 위에 파란 오로라/그리드/글로우가 흐르고, 마우스를 따라다니는 빛 효과
- **3D 요소** — 마우스 움직임에 따라 기울어지는 틸트 카드(히어로·프로젝트), 회전하는 3D 큐브, 공전하는 오빗 링, 떠다니는 배지, 스크롤 패럴랙스
- **섹션 구성** — 고정 내비게이션 · 히어로 · 툴 마퀴 배너 · About(통계·스킬바) · Projects(6개 틸트 카드) · Experience(타임라인) · Contact · 푸터
- 스크롤 진행 바, 등장 애니메이션, 글래스모피즘 등 화려한 디테일 포함

**참고** — 지금 화면의 이름·소개·프로젝트·스킬 등은 모두 **예시 데이터**입니다. 원하시면 실제 내용(이름, 경력, 작품명·설명, 연락처 등)을 알려주세요. 바로 교체해 드리고, 이후 원하시면 Go API + MySQL로 내용을 DB에서 관리하도록 연동하겠습니다.

✅ 파일 4개 수정

565.1원 사용

이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다

2-c26d1e.glidev.ai

↗