web-portfolio/
    ├── public/             # 정적 자원 (favicon 등)
    ├── src/
    │   ├── assets/             # 이미지, 음악 등 미디어 파일
    │   │   ├── images/             # <Home>, <About> 등 디자인 이미지
    │   │   └── music/              # 배경 음악 파일
    │   ├── components/         # 재사용 가능한 UI 컴포넌트
    │   │   ├── layout/             # 고정 UI 요소
    │   │   │   ├── Navbar.jsx          # 상단 행성, 섹션 메뉴, 반짝이
    │   │   │   ├── MusicBar.jsx        # 좌측 상단 뮤직바 (재생/일시정지)
    │   │   │   ├── Map.jsx       # 좌측 하단 지도 (모달 오픈)
    │   │   │   └── Compass.jsx         # 우측 하단 나침반 (섹션 이동)
    │   │   ├── common/             # 공용 컴포넌트
    │   │   │   └── Modal.jsx           # 지도 클릭 시 나타날 SNS 모달
    │   │   └── sections/           # 메인 페이지의 각 섹션
    │   │       ├── Home.jsx
    │   │       ├── About.jsx
    │   │       ├── Traits.jsx
    │   │       └── Highlights.jsx
    │   ├── pages/              # 라우팅 단위 페이지
    │   │   ├── Main.jsx            # Home~Highlights가 포함된 스크롤 페이지
    │   │   └── Experience.jsx      # 별도의 Experience 페이지
    │   ├── styles/             # CSS 스타일 파일
    │   │   ├── global.css          # 전역 스타일 및 초기화
    │   │   └── layout.css          # 고정 요소 및 레이아웃 스타일
    │   ├── App.jsx             # React Router 설정
    │   └── main.jsx            # 엔트리 포인트
    ├── index.html
    └── package.json