모던 React 기반의 개인 포트폴리오 웹사이트
안녕하세요, 새로운 기술에 도전하고 꾸준히 성장하는 개발자 김규일입니다.
이 포트폴리오는 Figma AI 디자인을 기반으로 제작되었으며, 모던 웹 기술 스택을 활용하여 구현한 반응형 단일 페이지 애플리케이션(SPA)입니다.
- 모든 디바이스에서 최적화된 사용자 경험
- 모바일, 태블릿, 데스크톱 완벽 지원
next-themes를 활용한 테마 전환- 시스템 설정 자동 감지
- 부드러운 테마 전환 애니메이션
- EmailJS 통합으로 서버 없이 이메일 전송
- 실시간 폼 유효성 검사
- 전송 상태 피드백 (로딩, 성공, 에러)
- Framer Motion을 활용한 부드러운 애니메이션
- Intersection Observer 기반 스크롤 애니메이션
- 커스텀 스크롤바 스타일링
- Hero - 프로필, 소개, 교육 정보
- Skills - 기술 스택 카테고리별 정리
- Projects - 주요 프로젝트 쇼케이스 (상세 모달 포함)
- Achievements - 수상 및 성과
- Experience - 경력 타임라인
- Blog - 기술 블로그 포스트
- Contact - 연락처 정보 및 문의 폼
- 웹사이트 데이터를 Single Source of Truth로 활용하여 이력서 PDF 자동 생성
@react-pdf/renderer로 텍스트 기반 PDF 생성 (검색/복사 가능)- 버튼 클릭 시 라이브러리 Lazy Loading으로 초기 번들 최적화
- 한글 폰트(Spoqa Han Sans Neo) 지원
- 이미지 로드 실패 시 자동 fallback UI
- Lazy loading 지원
- 최적화된 이미지 포맷 (PNG, JPEG)
- React 18.3.1 - UI 라이브러리
- TypeScript 5.9.3 - 타입 안정성
- Vite 6.3.5 - 빌드 도구 (SWC 플러그인)
- CSS Modules - 컴포넌트 스코프 스타일링
- CSS Variables - 테마 관리 및 일관된 디자인 시스템
- Framer Motion 12.23.25 - 애니메이션
- Lucide React 0.487.0 - 아이콘 (기능적 아이콘)
- React Icons 5.5.0 - 브랜드 아이콘 (Simple Icons)
- next-themes 0.4.6 - 테마 관리
- EmailJS 4.4.1 - 이메일 전송
- RSS Parser 3.13.0 - 블로그 RSS 피드 파싱
- @react-pdf/renderer 4.3.2 - 이력서 PDF 생성
- ESLint - 코드 품질 관리
- Prettier - 코드 포매팅
- Typed CSS Modules - CSS Modules 타입 생성
gyuill-portfolio/
├── src/
│ ├── assets/ # 정적 리소스
│ │ └── images/
│ │ ├── profile/ # 프로필 이미지
│ │ ├── projects/ # 프로젝트 이미지
│ │ └── skills/ # 스킬 아이콘 이미지
│ │
│ ├── components/
│ │ ├── common/ # 재사용 가능한 공통 컴포넌트
│ │ │ ├── AchievementCard/
│ │ │ ├── BlogCard/
│ │ │ ├── ContactInfoItem/
│ │ │ ├── ExperienceItem/
│ │ │ ├── FadeInSection/ # 스크롤 애니메이션
│ │ │ ├── ImageWithFallback/ # 이미지 에러 처리
│ │ │ ├── ProjectCard/
│ │ │ ├── ProjectModal/
│ │ │ ├── SkillCard/
│ │ │ └── SocialLink/
│ │ │
│ │ ├── layout/ # 레이아웃 컴포넌트
│ │ │ └── Navigation/ # 네비게이션 바
│ │ │
│ │ ├── pdf/ # 이력서 PDF 생성
│ │ │ ├── PdfDownloadButton/ # 다운로드 버튼 (Lazy Loading)
│ │ │ ├── ResumePdf/ # PDF 문서 루트 컴포넌트
│ │ │ ├── fonts.ts # 한글 폰트 등록
│ │ │ ├── styles.ts # PDF 전용 스타일
│ │ │ ├── primitives/ # 공통 PDF 컴포넌트
│ │ │ └── sections/ # PDF 섹션 (Header, About, Skills, Experience, Achievements)
│ │ │
│ │ └── sections/ # 페이지 섹션
│ │ ├── Hero/ # 프로필 섹션 (3단 레이아웃)
│ │ ├── Skills/
│ │ ├── Projects/
│ │ ├── Achievements/
│ │ ├── Experience/
│ │ ├── Blog/
│ │ └── Contact/ # 연락처 + EmailJS 폼
│ │
│ ├── constants/ # 상수 정의
│ │ ├── navigation.ts # 네비게이션 메뉴 항목
│ │ ├── categories.ts # 프로젝트 카테고리
│ │ ├── skillIcons.tsx # 스킬 아이콘 매핑
│ │ └── contactIcons.tsx # 연락처 아이콘 매핑
│ │
│ ├── contexts/ # React Context
│ │ └── ThemeContext.tsx # 테마 Provider
│ │
│ ├── data/ # 컨텐츠 데이터 (커스터마이징 대상)
│ │ ├── hero.ts # 프로필, 소개, 교육
│ │ ├── skills.ts # 기술 스택
│ │ ├── projects.ts # 프로젝트 목록
│ │ ├── achievements.ts # 수상 및 성과
│ │ ├── experiences.ts # 경력 정보
│ │ ├── blog.ts # 블로그 포스트
│ │ └── contact.ts # 연락처 정보
│ │
│ ├── types/ # TypeScript 타입 정의
│ │ └── index.ts
│ │
│ ├── utils/ # 유틸리티 함수
│ │ ├── cn.ts # 클래스네임 병합
│ │ └── iconMapper.ts # 아이콘 매핑 헬퍼
│ │
│ ├── styles/ # 글로벌 스타일
│ │ └── globals.css # CSS 변수, 리셋, 유틸리티
│ │
│ ├── App.tsx # 메인 앱 컴포넌트
│ └── main.tsx # 엔트리 포인트
│
├── build/ # 빌드 출력 디렉토리
├── public/ # 퍼블릭 리소스
├── .env.local # 환경 변수 (git 무시)
├── vite.config.ts # Vite 설정
├── tsconfig.json # TypeScript 설정
├── eslint.config.js # ESLint 설정
└── package.json # 프로젝트 메타데이터
- ✅ 이미지 lazy loading 적용됨
- ✅ Code splitting (React.lazy 사용)
- ✅ CSS Modules로 CSS 최적화
- ✅ Framer Motion은 필요한 곳에만 사용
- ✅ 불필요한 re-render 방지 (memo, useMemo, useCallback)
- ✅ PDF 라이브러리 Dynamic Import (클릭 시 로드)
- Chrome (최신)
- Firefox (최신)
- Safari (최신)
- Edge (최신)
- 모바일 브라우저
이 프로젝트는 개인 포트폴리오 목적으로 제작되었습니다.
- 아이콘:
- Lucide Icons (MIT License)
- Simple Icons (CC0 1.0 Universal)
- 일부 컴포넌트: shadcn/ui (MIT License)
김규일 - rlarbdlf222@gmail.com
- GitHub: @Kimgyuilli
- Blog: blog.rlarbdlf222.workers.dev