keemtj/portfolio

개인 포트폴리오 사이트입니다. Javascript, React, Styled-components, Firebase

PORTFOLIO

📗 목차

• 📝 개요
• 🛠 기술 및 도구
• 🔗 링크
• ✨ 업데이트
• 👨🏻‍💻 기능 구현
  • 라이트/다크 모드
  • Hash Link
  • 반응형 웹
  • Email 전송
  • Open graph
  • 기타
• 🚀 배포
• ⏰ 커밋 히스토리

📝 포트폴리오 개요

프로젝트: 개인 포트폴리오 사이트

기획 및 제작: 김태진

분류: 개인 프로젝트

제작 기간: 2021.09 ~ 10.

배포일: 2021.10.05.

주요 기능: 라이트/다크 모드, 반응형 웹, Hash Link, Email 전송, 배포 및 커스텀 도메인 연결, open graph

사용 기술: React, Styled-components, Firebase Hosting

문의: [email protected]

🛠 기술 및 도구

🔗 링크

링크: https://keemtj.com

✨ 업데이트

• About 섹션에 이력서 및 자기소개서 다운로드 기능 추가(21.10.13)

👨🏻‍💻 기능 구현

1. 라이트/다크 모드

• 라이트 및 다크모드 기능 구현
• 사용자의 시스템 모드에 맞게 theme이 설정되도록 구현
• 사용자가 설정한 테마가 localStorage에 저장되어 한번 설정한 이후 같은 theme을 보여주도록 구현

2. Hash Link

• Hash Link링크를 이용하여 네비게이션에서 메뉴 클릭시 해당 영역으로 스크롤되도록 구현
• 해당하는 메뉴의 영역은 Full page.js와 유사하게 스타일링함

3. 반응형 웹

• 5개의 endpoint를 두고 반응형을 구현함

// media.js
const deviceSizes = {
  desktop: '1440px',
  laptop: '1280px',
  tablet: '1024px',
  mobile: '768px',
  phone: '480px',
};

const media = {
  desktop: `screen and (max-width: ${deviceSizes.desktop})`,
  laptop: `screen and (max-width: ${deviceSizes.laptop})`,
  tablet: `screen and (max-width: ${deviceSizes.tablet})`,
  mobile: `screen and (max-width: ${deviceSizes.mobile})`,
  phone: `screen and (max-width: ${deviceSizes.phone})`,
};

export { deviceSizes, media };

• 네비게이션 메뉴의 경우 mobile(768px)을 기준으로 그 이상일 경우 상단바, 이하일 경우 햄버거메뉴로 변경

4. Email 전송

• EmailJS를 이용하여 서버없이 메일 서비스를 이용할 수 있도록 구현
• Sweetalert를 이용하여 커스텀 alert를 구현
• https://emailjs.com
• https://sweetalert2.github.io/

5. Open graph

<!-- index.html -->
<meta property="og:title" content="김태진 • Frontend Developer" />
<meta property="og:description" content="프론트엔드 개발자 김태진입니다." />
<meta property="og:image" content="%PUBLIC_URL%/thumb.png" />
<meta property="og:url" content="https://keemtj.com/" />
<meta property="og:type" content="website" />

• meta tags를 통해 Facebook, twitter, linkedin, discord, kakao talk 등 링크를 전달 했을 때 링크에 대한 정보를 볼 수 있도록 구현
• https://www.opengraph.xyz

6. 기타 기능

• favicon.ico 생성
• Fade-in transform
• 프로젝트 페이지
• React-responsive-carousel 커스텀

🚀 배포

• 첫 배포

$ npm install -g firebase-tools
$ firebase init
$ firebase login
  > HOSTING
  > Directroy? build
$ yarn build
$ firebase deploy

• 수정 후 배포

$ yarn build
$ firebase deploy

• 커스텀 도메인: Godaddy에서 커스텀 도매인 구매(https://keemtj.com)

⏰ 커밋 히스토리

내 커밋 히스토리 보러가기