01. 포트폴리오 사이트 1차 완료

🌿 메인 화면

특별한 기능은 없지만 생각보다 시간을 많이 소요했던 메인 화면입니다.

우선 사이트의 테마 컬러를 확정하는데 많은 시행착오가 있었고 좋아하는 파란색을 포기할 수 없어 포인트 색상으로 결정했습니다.

 

메뉴는 이력서에 있는 항목을 참고하여 확정하게 되었습니다.

첫 진입 시에 보이는 화면이라 효과를 주고 싶었는데 타이핑 효과와 스크롤 유도 정도가 적당해 보여서 적용했습니다.

 

🌿 It's ME

아직 프로필 이미지는 추가하지 않았지만, 원형에 마우스 호버 시 저에 대한 간단한 정보를 보이게 했습니다.

그리고 우측에는 GitHub, 블로그, 링크드인을 연결하여 클릭 시 이동되도록 처리했습니다.

프로필 하단에는 이력서 PDF를 다운로드할 수 있는 버튼을 추가했습니다.

 

🌿 Skills

다양한 프로젝트들을 진행하며 사용한  기술들을 항목별로 정리했습니다.

skills.ts 파일을 만들어서 skill 공통 컴포넌트를 생성해 출력 중인데 이후에 코드를 좀 더 다듬에 간소화해야 할 것 같습니다.

 

🌿 Projects

프로젝트를 나열했는데 생각보다 항목이 많아서 우선 개인 / 팀으로 필터링 기능을 걸어두었습니다. 

이후에 주요 프로젝트만 필터가능한 태그를 추가해서 기본값으로 처리할지 고민 중에 있습니다.

 

그리고 사용한 기술에 해당하는 아이콘을 추가하여 시각적으로 가독성을 높이고 DETAIL을 통해 상세 정보 모달을 띄우게 처리하였습니다.

프로젝트의 정보(진행 기간, 기술 스택, 설명)와 주요 기능, 기여 부분, 작업 화면을 볼 수 있습니다.

GitHub, 사이트 주소가 있을 경우 아이콘이 노출되어 클릭 시 이동됩니다. 회사에서 진행했던 프로젝트 대부분 repository가 private 되어 있어서 개인적으로 작업할 앞으로의 프로젝트들에 주로 적용될 것 같습니다.

 

작업 화면의 경우 마우스 hover 시 border로 어떤 항목을 보고 있는지 알 수 있고 클릭 시 이미지 미리 보기가 가능합니다.

 

✦ 사용된 기능

해당 페이지를 구현하면서 Framer Motion과 TailwindCSS를 사용하였습니다.

항목 출력 효과를 주기 위해 검색하던 중 Framer Motion을 적용한 예시를 보고 적용하게 되었습니다.

npm install framer-motion

설치 후 공식 사이트의 문서를  참고하니 쉽게 적용 가능했습니다.

 

‼️ 작업 중 만난 오류와 공식 문서의 중요성..

작업을 하다가 반응형 확인을 위해 개발자 모드를 했더니 만난 오류입니다. 중복 key가 존재한다는 오류였는데 map을 수행하다가 종종 key 설정을 빠트린 적이 있어 코드를 확인해 보았지만 key가 모두 적용되어 있고 중복되는 항목이 없었습니다.

이상하다 생각하던 찰나.. 유일하게 중복되어 있던 태그가 바로 <AnimatePresence> 였습니다.

 

그래서 바로 공식 문서를 확인하였더니 너무나 명확하게 설명되어 있었습니다.

<AnimatePresence>의 바로 하위 요소에 unique key를 지정해 줘야 했는데 이 부분이 빠져서 발생한 오류였습니다. 다행히 금방 발견하여 key 값을 추가해 해결하였습니다.

 

단순히 적용뿐만 아니라 이러한 주의 사항도 잘 살펴보아야겠다 생각하게 되었습니다.

---

 

TailwindCSS의 경우, hover와 같은 이벤트나 화면 크기 별 분기처리가 편리해 css처리가 매우 간단해졌습니다.

유틸리티 클래스를 사용하여  코드가 일관되어 가독성이 좋고 커스터마이징에도 용이했습니다.

또한 tailwind-styled-components로 모듈화에도 유용했습니다.

npm install tailwind-styled-components

 

프로젝트별 상세 정보 모달 띄우기에 createPortal을 사용하였습니다.

import { createPortal } from "react-dom";

createPortal은 React에서 제공하는 기능으로, 특정 컴포넌트를 DOM의 다른 위치에 렌더링 할 수 있게 해 줍니다. 이러한 특징으로 주로 모달, 알림, 툴팁 등의 기능 구현에 사용됩니다.

 

저 또한 모달을 구현하며 어두운 배경을 띄워야 하는데 project/app.tsx에서 모달을 추가할 경우 하위 컴포넌트에 위치하여 다른 영역들이 덮이지 않아 찾아보던 중에 알게 되어 적용하게 되었습니다.

 

🌿 Career

마지막으로 지금까지의 경력들에 대해 간단하게 정리하였습니다.

 

🌿 모바일 사이즈

모바일 사이즈에서는 아래와 같이 햄버거 버튼을 띄워 메뉴를 출력하도록 반응형 처리를 하였습니다.

 

---

 

소박한 나의 포트폴리오 사이트