게임 UI/UX & 프론트엔드 개발자의 성장 여정을 담은 포트폴리오
안녕하세요! 게임 UI/UX 및 프론트엔드 개발에 관심이 많은 개발자입니다.
코드잇 부트캠프를 통해 체계적으로 학습하며, 기초부터 심화까지 단계별로 성장한 과정을 포트폴리오에 담았습니다.
🎯 핵심 가치: 사용자에게 즐거움과 편의성을 제공하는 인터페이스 구현
- 기간: 2025.03 ~ 2025.04 (3주)
- 역할: 메인 페이지 & 질문 모달 개발
- 성과: 첫 팀 프로젝트로 React 컴포넌트 기반 개발 경험
- 기술: React, JavaScript, Tailwind CSS, Axios, React Router
- 배포: Live Demo | GitHub
- 기간: 2025.05 ~ 2025.06 (3주)
- 역할: 팀장, GitHub 환경 구성, 프로필 페이지 & 공통 컴포넌트 개발
- 성과: JWT 인증 시스템 구현, 팀 리더십 경험
- 기술: Next.js, TypeScript, React, Tailwind CSS, Axios
- 배포: Live Demo | GitHub
- 기간: 2025.07 ~ 2025.07 (4주)
- 역할: 체험 등록/수정 페이지, 공통 컴포넌트 개발
- 성과: React Hook Form + Zod 조합으로 폼 검증 시스템 구현
- 기술: Next.js, TypeScript, Zustand, React Hook Form, Zod, Tailwind CSS
- 배포: Live Demo | GitHub
- 기간: 2025.08 ~ 2025.09 (1개월)
- 역할: 전체 기획, 디자인, 개발 (개인 프로젝트)
- 성과: 게임 캐릭터 커스터마이징 웹 서비스, 한/일/영 다국어 지원
- 기술: Next.js, TypeScript, Tailwind CSS, Zustand, Figma, LibreSprite
- 배포: Live Demo | GitHub
portfolio/
├── public/ # Static assets
│ ├── me.jpg # Profile image
│ ├── project1.png # 4U project screenshot
│ ├── sgs-project.png # SGS project screenshot
│ ├── wazy-project.png # Wazy project screenshot
│ └── character-project.png # Make Character project screenshot
├── src/
│ ├── components/ # Reusable components
│ │ ├── Header.tsx # Navigation header
│ │ ├── IntroSection.tsx # Hero section with profile
│ │ ├── ProjectSection.tsx # Project showcase section
│ │ ├── ProjectCard.tsx # Individual project card
│ │ └── TechStack.tsx # Technology stack display
│ ├── data/
│ │ └── projectsData.ts # Project data and configurations
│ ├── App.tsx # Main application component
│ └── main.tsx # Application entry point
└── package.json # Dependencies and scripts
- Node.js 18+
- pnpm (권장) 또는 npm/yarn
# Clone the repository
git clone https://github.com/yuwonkyu/portfolio.git
cd portfolio
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm preview- 🎯 반응형 디자인: 모바일부터 데스크톱까지 완벽 대응
- ✨ 모던 UI/UX: Tailwind CSS 기반의 세련된 인터페이스
- 🚀 빠른 로딩: Vite 기반의 최적화된 번들링
- 📱 SEO 최적화: 메타 태그 및 접근성 고려
- 🎨 인터랙티브 효과: 부드러운 호버 애니메이션
- 📊 프로젝트 쇼케이스: 체계적인 난이도별 프로젝트 분류
- 프로젝트 완료: 4개 (기초 → 중급 → 심화 → 개인)
- 팀 프로젝트 경험: 5인 팀 리더 경험
- 개인 프로젝트: 기획부터 디자인, 개발까지 전체 사이클 경험
- 기술 스택 확장: JavaScript → TypeScript, React → Next.js
- 협업 도구 활용: GitHub, Figma, CodeRabbit, LibreSprite
- 컴포넌트 설계: 재사용 가능한 컴포넌트 아키텍처 구현
- 상태 관리: JWT 인증, Zustand를 활용한 클라이언트 상태 관리
- 폼 검증: React Hook Form + Zod 조합으로 견고한 폼 시스템
- 팀 리더십: 개발 환경 세팅, 코드 리뷰, 일정 관리 경험
- 개인 프로젝트: 기획·디자인·개발 전체 사이클 경험, 다국어 지원 시스템 구현
"늦둥이지만 풍부한 경험과 뛰어난 책임감으로 프로젝트에 임합니다."
함께 성장할 수 있는 기회를 기대합니다! 🚀