포트폴리오 웹사이트

Cursor AI를 활용해 자신의 작품과 프로젝트를 멋지게 보여주는 포트폴리오 사이트를 만들어봅시다.

프로젝트 개요

완성 모습

김개발 Portfolio
━━━━━━━━━━━━━━━━━━━━━
[홈] [프로젝트] [스킬] [연락처]

┌──────────┐ ┌──────────┐
│ Project  │ │ Project  │
│    1     │ │    2     │
└──────────┘ └──────────┘

SKILLS
HTML █████████░ 90%
CSS  ████████░░ 80%
JS   ███████░░░ 70%

1단계: 프로젝트 시작

Cursor에서 새 폴더 생성

File > Open Folder → 새 폴더 “portfolio” 생성

Cursor AI에게 첫 요청:

개인 포트폴리오 웹사이트 만들어줘.

필요한 파일:
- index.html
- style.css
- script.js
- projects.json (프로젝트 데이터)
- images/ (이미지 폴더)

기본 구조만 만들어줘.

2단계: JSON 데이터 구조 만들기

Cursor에게 요청:

projects.json 만들어줘.

각 프로젝트 정보:
- id
- 제목
- 설명 (짧은 요약)
- 상세 설명 (긴 설명)
- 카테고리 (웹, 앱, 디자인 등)
- 기술 스택 (배열: HTML, CSS, React 등)
- 이미지 URL (썸네일)
- 추가 이미지들 (배열)
- 라이브 URL (배포 링크)
- GitHub URL
- 완료 날짜
- 하이라이트 (주요 기능/성과)

6-8개 프로젝트 만들어줘.
다양한 카테고리로.

3단계: HTML 구조 만들기

Cursor에게 요청:

index.html 만들어줘.

구조:
1. 네비게이션
   - 고정 상단
   - 로고/이름
   - 메뉴 (홈, 프로젝트, 스킬, 소개, 연락처)
   - 모바일 햄버거 메뉴

2. Hero 섹션
   - 큰 제목: 이름
   - 부제: 직책/전문분야 (예: "Full-Stack Developer")
   - 짧은 소개 문구
   - CTA 버튼: "프로젝트 보기", "연락하기"
   - 프로필 사진 (원형)
   - 애니메이션 효과

3. 소개 섹션
   - "About Me"
   - 자기소개 (2-3문단)
   - 주요 강점 3가지 (아이콘 + 제목 + 설명)

4. 스킬 섹션
   - 제목: "Skills"
   - 카테고리별로 분류
     - Frontend: HTML, CSS, JavaScript, React
     - Backend: Node.js, Python
     - Tools: Git, Figma
   - 각 스킬: 이름 + 프로그레스 바 (숙련도 %)

5. 프로젝트 섹션
   - 제목: "Projects"
   - 카테고리 필터 (전체, 웹, 앱, 디자인)
   - 프로젝트 그리드
   - 각 카드:
     - 썸네일 이미지
     - 제목
     - 짧은 설명
     - 기술 스택 뱃지
     - "자세히 보기" 버튼

6. 프로젝트 상세 모달
   - 큰 이미지/갤러리
   - 전체 설명
   - 기술 스택
   - 주요 기능
   - 라이브 데모, GitHub 링크

7. 경력/교육 타임라인 (선택사항)
   - 시간순 배치
   - 회사/학교 이름
   - 기간
   - 설명

8. 연락처 섹션
   - 제목: "Contact"
   - 이메일, 전화
   - SNS 링크 (GitHub, LinkedIn, Twitter 등)
   - 간단한 문의 폼
     - 이름, 이메일, 메시지
     - 제출 버튼

9. 푸터
   - 저작권
   - SNS 아이콘
   - "맨 위로" 버튼

디자인:
- 현대적이고 미니멀
- 깔끔한 레이아웃
- 전문적인 느낌
- 반응형

4단계: CSS 스타일링

Cursor에게 요청:

style.css 만들어줘.

디자인 요구사항:
- 메인 색상: 선택 (예: #667eea - 보라/파랑 그라데이션)
- 배경: 흰색 또는 밝은 회색
- 텍스트: 어두운 회색
- 강조: 포인트 컬러

네비게이션:
- 고정 상단
- 반투명 배경 (스크롤 시)
- 그림자
- 부드러운 전환

Hero 섹션:
- 전체 화면 높이 또는 80vh
- 중앙 정렬
- 배경 그라데이션 또는 패턴
- 프로필 사진 원형, 그림자
- 타이핑 효과 또는 애니메이션

섹션 공통:
- 충분한 패딩
- 최대 너비 제한 (1200px)
- 중앙 정렬

프로젝트 카드:
- 그리드 레이아웃 (3열)
- 이미지 호버 시 확대 또는 오버레이
- 둥근 모서리
- 그림자
- 호버 시 올라오는 효과

스킬 프로그레스 바:
- 높이 20-30px
- 둥근 모서리
- 그라데이션 또는 단색
- 애니메이션 (로드 시 0에서 목표까지)
- 퍼센트 표시

버튼:
- 크고 명확
- 둥근 모서리
- 호버 효과
- 여러 스타일 (primary, secondary, outline)

모달:
- 중앙 배치
- 반투명 배경
- 내용: 흰 배경, 그림자
- 닫기 버튼
- 애니메이션

타임라인:
- 수직 라인
- 점으로 이벤트 표시
- 번갈아가며 왼쪽/오른쪽 배치

반응형:
- 모바일 (<768px): 1열, 간소화
- 태블릿 (768-1024px): 2열
- PC (>1024px): 3열

애니메이션:
- 스크롤 시 페이드인
- 호버 효과
- 부드러운 전환
- 로딩 애니메이션

5단계: JavaScript 기능 구현

Cursor에게 요청:

script.js 만들어줘.

기능 목록:

1. 데이터 로딩
   - projects.json 읽기
   - 프로젝트 카드 생성
   - 에러 처리

2. 스무스 스크롤
   - 네비게이션 메뉴 클릭 시
   - 해당 섹션으로 부드럽게 이동
   - 활성 메뉴 강조

3. 네비게이션 효과
   - 스크롤 시 배경 추가
   - 스크롤 위치에 따라 활성 메뉴 변경
   - 모바일 햄버거 메뉴 토글

4. 프로젝트 필터
   - 카테고리 버튼 클릭
   - 해당 카테고리 프로젝트만 표시
   - 애니메이션

5. 프로젝트 모달
   - 카드 클릭 시 상세 모달 열기
   - 프로젝트 정보 표시
   - ESC, 배경 클릭으로 닫기
   - 이미지 갤러리 (있으면)

6. 스킬 애니메이션
   - Intersection Observer 사용
   - 섹션에 들어오면 프로그레스 바 애니메이션
   - 0에서 목표 퍼센트까지

7. 스크롤 애니메이션
   - 요소가 뷰포트에 들어오면 페이드인
   - Intersection Observer
   - 순차적 애니메이션

8. 문의 폼
   - 입력 검증
   - 이메일 형식 확인
   - 제출 시 확인 메시지
   - 실제 전송은 안 함 (콘솔 출력만)

9. 맨 위로 버튼
   - 스크롤 내리면 표시
   - 클릭 시 최상단으로
   - 부드러운 스크롤

10. 타이핑 효과 (Hero)
    - 여러 직책/키워드 순환
    - 타이핑 및 지우기 애니메이션
    - 예: "Developer" → "Designer" → "Creator"

코드 구조:
- 함수 분리
- 이벤트 리스너
- async/await
- 주석 추가

6단계: 고급 기능 추가

6-1. 다크 모드

Cursor에게 요청:

다크 모드 토글 추가해줘.

기능:
- 네비게이션에 토글 버튼
- 아이콘: 🌙/☀️
- 모든 색상 다크 테마로 전환
- 로컬 스토리지에 저장
- 부드러운 전환 애니메이션
- 사용자 시스템 설정 감지 (선택사항)

6-2. 블로그 섹션

Cursor에게 요청:

간단한 블로그 섹션 추가해줘.

기능:
- blog-posts.json 파일
- 최근 글 3개만 표시
- 각 카드: 썸네일, 제목, 요약, 날짜
- "더 보기" 링크
- 실제 블로그는 외부 링크 (Medium, Tistory 등)

6-3. 프로젝트 검색

Cursor에게 요청:

프로젝트 검색 기능 추가해줘.

기능:
- 검색 입력창
- 제목, 설명, 기술 스택에서 검색
- 실시간 검색 (디바운싱)
- 매칭된 항목 하이라이트
- "결과 없음" 메시지

7단계: 이미지 및 아이콘

Cursor에게 요청:

아이콘과 이미지 추가해줘.

아이콘:
- Font Awesome 또는 Lucide 아이콘 사용
- 스킬 아이콘
- SNS 아이콘
- 화살표, 체크 등

이미지:
- 프로필 사진: 원형, 그림자
- 프로젝트 썸네일: 16:9 비율
- 플레이스홀더 이미지 (via.placeholder.com)
- lazy loading 적용

8단계: SEO 및 메타 태그

Cursor에게 요청:

SEO 최적화 해줘.

추가 사항:
- title, description 메타 태그
- Open Graph 태그 (소셜 공유)
- favicon
- 시맨틱 HTML 태그
- alt 텍스트
- robots.txt
- sitemap.xml (선택사항)

9단계: 성능 최적화

Cursor에게 요청:

성능 최적화 해줘.

최적화:
- 이미지 lazy loading
- CSS/JS 최소화
- 중복 코드 제거
- Intersection Observer로 애니메이션 최적화
- 디바운스/스로틀 적용
- Preload 중요 리소스

10단계: 접근성

Cursor에게 요청:

접근성 개선해줘.

요구사항:
- ARIA 라벨
- 키보드 네비게이션
- 충분한 색상 대비
- 포커스 표시
- 스크린 리더 지원
- Skip to content 링크
- 이미지 alt 텍스트

완성 확인

테스트 항목

GitHub & Cloudflare Pages 배포

1. Git 초기화

git init
git add .
git commit -m "포트폴리오 사이트 초기 버전"

2. GitHub 저장소 생성 및 푸시

git branch -M main
git remote add origin https://github.com/사용자명/portfolio.git
git push -u origin main

3. Cloudflare Pages 연결

Cloudflare Pages 대시보드 접속
“Connect to Git” 클릭
저장소 선택
“Save and Deploy” 클릭
배포 완료 후 URL 확인

4. 커스텀 도메인 연결 (선택사항)

나만의 도메인 연결하고 싶어.
yourname.com 같은 도메인을 Cloudflare Pages에 연결하는 방법 알려줘.

프로젝트 추가하기

새 프로젝트를 추가하려면 projects.json만 수정:

Cursor에게 요청:

projects.json에 새 프로젝트 추가해줘.

제목: 맑은소프트 쇼핑몰
설명: React와 Node.js로 만든 풀스택 쇼핑몰
카테고리: 웹
기술 스택: React, Node.js, MongoDB, Express
GitHub: https://github.com/...
라이브: https://shop.example.com

수정 후 Git 푸시하면 자동 배포!

추가 개선 아이디어

Cursor에게 요청할 수 있는 것들:

증명서/자격증 섹션

자격증 섹션 추가해줘.
- 자격증 이름
- 발급 기관
- 취득 날짜
- 증명서 이미지/링크

추천사 섹션

고객/동료 추천사 섹션 추가해줘.
- 추천사 텍스트
- 추천인 이름, 직책
- 프로필 사진
- 슬라이더 형태로 표시

통계 카운터

숫자 카운터 애니메이션 추가해줘.
- 완료 프로젝트 수
- 경력 년수
- 만족한 고객 수
- 커피 마신 잔 수 (농담)
- 0에서 목표 숫자까지 카운트업

이력서 다운로드

이력서 PDF 다운로드 버튼 추가해줘.
- Hero 섹션 또는 연락처 섹션에
- 아이콘 + "이력서 다운로드" 텍스트
- PDF 파일 링크

언어 전환

한국어/영어 전환 기능 추가해줘.
- 네비게이션에 버튼
- 모든 텍스트 번역
- projects-ko.json, projects-en.json
- 로컬 스토리지에 저장

방문자 통계 (간단)

간단한 방문자 카운터 추가해줘.
- 로컬 스토리지 사용
- 고유 방문자 수
- 페이지 하단에 작게 표시

프로젝트 좋아요

프로젝트에 좋아요 기능 추가해줘.
- 하트 아이콘
- 클릭하면 카운트 증가
- 로컬 스토리지에 저장
- 인기 프로젝트 순으로 정렬

3D 효과

카드에 3D 호버 효과 추가해줘.
- 마우스 위치 따라 기울어짐
- 부드러운 애니메이션
- CSS transform 사용

문제 해결

프로젝트가 안 보여요

Cursor에게:

projects.json 로딩 확인해줘.
- 파일 경로 확인
- fetch 에러 처리
- 콘솔에 데이터 출력

스크롤 애니메이션이 안 돼요

Cursor에게:

Intersection Observer 코드 확인해줘.
- 올바르게 초기화되었는지
- threshold 설정 확인
- CSS 클래스 추가/제거 확인

모바일 메뉴가 안 닫혀요

Cursor에게:

햄버거 메뉴 로직 확인해줘.
- 토글 함수 확인
- 메뉴 클릭 시 자동 닫기 추가
- 배경 클릭으로도 닫기

이미지가 깨져요

Cursor에게:

이미지 경로와 lazy loading 확인해줘.
- 상대 경로 확인
- 이미지 파일 존재 확인
- loading="lazy" 속성 확인

포트폴리오 팁

좋은 포트폴리오를 위한 조언:

프로젝트 선별
- 최고의 3-6개 프로젝트만
- 다양한 기술 스택 보여주기
- 완성도 높은 것만
설명 작성
- 문제와 해결 과정
- 사용한 기술과 이유
- 결과와 성과
- 배운 점
시각적 요소
- 고품질 스크린샷
- GIF 또는 비디오 데모
- 깔끔한 디자인
연락처
- 명확하게 표시
- 여러 채널 제공
- 빠른 응답
지속적 업데이트
- 새 프로젝트 추가
- 기술 스택 업데이트
- 링크 확인

다음 단계

포트폴리오 웹사이트를 완성했습니다. 이제 심화 학습으로 넘어가봅시다!