React.js, Next.js 로 구현한 페이지입니다.
📢 해당 링크에서 확인하실 수 있습니다.
- 반응형 웹으로 개발했습니다. UI 는 두가지 버전으로 제공됩니다.
-
2개의 분할된 섹션으로 정보를 제공하기 때문에 모바일 혹은 작은 화면에서는 사용자가 보기 불편할 것 같다는 생각이 들었습니다.
min-width: 640px; 을 기준으로 css 를 작업하여 한눈에 보기 쉽게 만들었습니다.
또한 Experience 섹션을 작업하며 근무했던 회사와 기간 등은 경력 기술이 길어짐에 따라 스크롤시 화면에서 보이지 않는다는 문제를 발견했습니다.
이는 css 의 sticky 속성을 사용해 UX를 개선할 수 있었습니다.
넓은 화면에서는 근무 기간이 담긴 박스가 스크롤시 화면 중간에 고정되어 화면에 항상 노출됩니다.
좁은 화면(모바일)에서는 background-color 와 shadow 를 추가해 조금 더 강조하는 느낌을 주었으며, 화면 상단에 노출되게 끔 구성했습니다.
자바스크립트를 사용하지 않고도 상당히 부드러운 동작을 제공하여 만족스러웠습니다.
☺️
-
Seo 설정
이력서/포트폴리오 뿐만 아니라 개인 페이지로서의 역할을 원했기 때문에 Seo 설정도 완료했습니다.
- robot.txt , sitemap.xml 등록 완료