🌟 JaeHo Portfolio

개인 포트폴리오 웹사이트입니다.
React, TypeScript, Tailwind CSS를 활용하여 제작되었으며, SPA 방식으로 구성되었습니다.

🚀 프로젝트 소개

이 프로젝트는 개발자로서의 경험과 기술을 정리하여 보여주는 포트폴리오 웹사이트입니다.

📌 주요 특징:

• 반응형 디자인: 모든 기기에서 최적화
• 애니메이션 효과: Framer Motion과 Parallax 효과 적용
• SPA 구조: 페이지 이동 없이 스크롤을 활용한 부드러운 네비게이션

🖼 스크린샷

(스크린샷)

---

🛠 기술 스택

• Frontend: React, TypeScript, Tailwind CSS
• Animation: Framer Motion, React Scroll Parallax

---

✨ 주요 기능

✅ React + TypeScript 기반 개발
✅ Framer Motion과 Parallax 효과를 활용한 동적 UI
✅ 반응형 레이아웃 지원 (PC, 태블릿, 모바일 최적화)
✅ 단일 페이지 애플리케이션(SPA)으로 부드러운 전환 효과

---

📂 폴더 구조

 ┣ 📂assets
 ┃ ┗ 📂lottie
 ┃ ┃ ┣ 📜Animation.json
 ┃ ┃ ┣ 📜Home_Lottie.json
 ┃ ┃ ┣ 📜Project2_Lottie.json
 ┃ ┃ ┣ 📜Project_Lottie.json
 ┃ ┃ ┗ 📜Skill_Lottie.json
 ┣ 📂components
 ┃ ┣ 📂AboutSection
 ┃ ┃ ┣ 📜AboutMeSection.tsx
 ┃ ┃ ┣ 📜IntroduceSection.tsx
 ┃ ┃ ┣ 📜SkillsSection.tsx
 ┃ ┃ ┣ 📜TimelineSection.tsx
 ┃ ┃ ┗ 📜TypingGuide.tsx
 ┃ ┣ 📂LottieAnimation
 ┃ ┃ ┣ 📜AboutAnimation.tsx
 ┃ ┃ ┣ 📜HomeAnimation.tsx
 ┃ ┃ ┣ 📜ProjectAnimation.tsx
 ┃ ┃ ┗ 📜SkillsAnimation.tsx
 ┃ ┣ 📂ProjectsSection
 ┃ ┃ ┣ 📜Modal.tsx
 ┃ ┃ ┣ 📜ProjectCard.tsx
 ┃ ┃ ┗ 📜ProjectsSection.tsx
 ┃ ┣ 📜Navbar.tsx
 ┃ ┣ 📜ScrollArrow.tsx
 ┃ ┣ 📜ScrollProgressBar.tsx
 ┃ ┣ 📜Sidebar.tsx
 ┃ ┣ 📜SocialLinks.tsx
 ┃ ┣ 📜TechStack.tsx
 ┃ ┗ 📜W_SocialLinks.tsx
 ┣ 📂context
 ┃ ┗ 📜NavbarContext.tsx
 ┣ 📂pages
 ┃ ┣ 📜About.tsx
 ┃ ┣ 📜Contact.tsx
 ┃ ┣ 📜Footer.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜Projects.tsx
 ┃ ┗ 📜ResponsiveMessage.tsx
 ┣ 📂styles
 ┃ ┣ 📜global.css
 ┃ ┣ 📜Home.module.css
 ┃ ┣ 📜index.css
 ┃ ┣ 📜ProjectCard.css
 ┃ ┣ 📜sidebar.css
 ┃ ┣ 📜SkillCard.css
 ┃ ┣ 📜SkillList.css
 ┃ ┣ 📜SkillsSection.css
 ┃ ┣ 📜styles.css
 ┃ ┗ 📜TechStack.css
 ┣ 📜App.tsx
 ┣ 📜declarations.d.ts
 ┗ 📜index.tsx

---

🌍 배포 링크

🔗 배포 링크: 포트폴리오 사이트 보기

---

🔥 개선할 점 및 향후 계획

• 로딩 속도 개선 – 이미지 최적화 및 Lazy Loading 적용
• 포토폴리오 - 자세한 내용 추가
• 블로그 추가 – 기술 블로그 기능 구현
• 디자인 개선 - 지속적인 디자인 개선 예정