프론트엔드 개발자 포트폴리오 V2

📒 프론트엔드 개발자 포트폴리오 V2

---

https://lasbe.kr/

장성우 - 프론트엔드 개발자 포트폴리오

 

예전부터 개인적으로 Retro Window OS 테마의 웹을 하나 만들어보고 싶었는데,

생각하다보니 제 포트폴리오에 하면 재미있겠다 싶어 기존 포트폴리오 사이트를 갈아 엎어 봤습니다.

 

재미난 것들 많이 넣었는데 간단히 소개 드립니다.

 

📌 OS 모방

웹에서 윈도우 처럼 작동하는 것을 모방하기 위해 다음과 같은 기능을 추가했습니다.

 

🔎 바탕화면 아이콘 드래그 및 저장

• react-draggable 패키지와 localStorage를 이용하여 아이콘을 드래그 및 위치 좌표를 저장할 수 있습니다.
• 창의 높이에 따라 아이콘이 잘리지 않게 정렬됩니다.
• 바탕화면에서 우클릭 후 "아이콘 정렬"을 누른다면 위치가 초기화 됩니다.

 

🔎 Window 모달

• 창을 드래그하거나 리사이즈할 수 있습니다. 
• 창을 클릭하면 해당 창이 항상 최상단으로 올라옵니다. (z-index 포커스 스택) 
• 최대화/복원 시 이전 위치와 크기로 돌아옵니다.

 

📌 반응형

• 모바일 화면에서 최적화된 UI/UX를 지원합니다.

 

📌 Notion Render

노션으로 작성한 경력 기술서를 iframe으로 딸깍 보여주려 했지만, 노션 측에서 막아버리는 바람에 방법이 없나 리서치를 좀 했습니다.

 

찾다보니 몇몇 방법이 있었지만 notion-client로 노션 페이지를 fetch 한 뒤, react-notion-x를 이용해 데이터를 직접 렌더하여 보여주는 방법을 사용했습니다.

 

덕분에 사용자를 이탈 시키지 않을 수도 있고, 빌드 배포 과정 없이 내용을 수정할 수도 있습니다.

 

📌  우주 배경화면

원래 다들 사용하는 멋들어지고 화려한 우주 배경을 넣으려 했지만 이 프로젝트와 톤 앤 매너가 맞지 않고, 바탕화면 아이콘 가독성을 떨어뜨릴 것 같아 threeJS로 직접 구현해봤습니다.

• 마우스를 움직이면 4개 레이어의 별이 서로 다른 속도로 따라옵니다.
• 렌더 해상도를 절반으로 줄이고 CSS 업스케일로 별을 픽셀 느낌으로 표현했습니다.
• 모바일에서는 기기를 기울이면 배경이 따라 움직입니다.

---

오랜만에 개발하면서 큰 재미 느끼고 몰입할 수 있었네요.

 

대단하진 않지만 뿌듯한 하루입니다.