🌐 portfolio site : https://jeonjaeeun.github.io/My_Portfolio/
본 포트폴리오 웹사이트는 개발자로서의 저를 소개하고, 기술 스택 및 프로젝트 이력을 한 페이지에서 깔끔하게 보여주기 위한 목적으로 제작되었습니다.
또한, GitHub 및 Instagram 등 커뮤니티 활동을 연결하여 저의 소셜 네트워크와도 연계합니다.
- HTML: 페이지 구조 및 콘텐츠 작성
- CSS: 레이아웃과 스타일링, 반응형 웹 구현
- JavaScript: 페이지 동작 처리 및 상호작용 기능 구현 (타이핑 효과, 프로그레스 바, 모달창, 슬라이더 등)
웹사이트의 초기 디자인은 피그마(Figma)를 사용하여 제작되었습니다. 직관적인 네비게이션을 중심으로 심플하면서도 깔끔한 느낌의 디자인을 추구하였습니다.
- 🏠 Home
- 개발자로서의 간단한 소개와 타이핑 효과로 동적인 환영 메시지 제공.
- 👤 About Me
- 개인 정보(이름, 생년월일, 학교, 전공, 취미)와 함께, 취미인 골프와 영화 관련 모달창 및 이미지 슬라이더 구현.
- 골프 사진 슬라이드와 영화 예고편 유튜브 영상으로 취미를 상세히 소개.
- 💼 Project
- 주요 프로젝트인 DotheReco를 소개.
- 기간, 사용 기술(React, Spring, AWS), 프로젝트 목적 및 GitHub 링크 포함.
- 🌐 Community
- GitHub 및 Instagram 활동 연계 링크 제공. 아이콘 클릭 시 해당 소셜 네트워크로 연결.
- GitHub 및 Instagram 활동 연계 링크 제공. 아이콘 클릭 시 해당 소셜 네트워크로 연결.
- 타이핑 효과:
- Home 섹션에서는 인사말이나 간단한 자기소개 문구가 한 글자씩 타이핑되는 듯한 효과를 보여줍니다.
- 프로그레스 바:
- 페이지를 스크롤할 때 상단에 작은 막대가 나타나며, 현재 스크롤된 위치를 시각적으로 표시합니다. 사용자는 전체 페이지에서 어느 정도 스크롤했는지 쉽게 알 수 있습니다.
- 모달 창:
- About Me 섹션에서 취미 아이콘을 클릭하면 팝업 창(모달)이 열리며, 해당 취미에 대한 추가 정보나 사진을 표시합니다. 팝업 창은 화면 중앙에 표시되고, 화면 외부를 클릭하면 창이 사라집니다.
- 슬라이드 사진:
- 프로젝트 섹션에서느 이미지 슬라이더가 포함되어 있습니다. 이 슬라이더는 사진을 클릭하면 다음 사진을 순차적으로 확인할 수 있습니다.
- Youtube API 연동:
- About Me 섹션에서 영화 관련 유튜브 영상을 직접 볼 수 있습니다. Youtube API를 사용해 웹페이지에 동영상을 임베드하고, 사용자는 해당 섹션에서 바로 재생 버튼을 눌러 트레일러나 영상 클립을 감상할 수 있습니다. 영상은 자동 재생되거나 사용자가 재생을 제어할 수 있습니다.
- GitHub 연동:
- Community 섹션에서 GitHub 위젯이 포함되어 있어서, 사용자가 최근 GitHub 활동이나 저장소를 확인할 수 있습니다.
- Community 섹션에서 GitHub 위젯이 포함되어 있어서, 사용자가 최근 GitHub 활동이나 저장소를 확인할 수 있습니다.
이 프로젝트는 개발 중 지속적으로 업데이트될 예정입니다. 다양한 기기에서 반응형 웹을 지원하는 것을 목표로 합니다.