작성자는 본래 노션을 이용해 포트폴리오 페이지를 제작하였습니다. 노션은 깔끔하고 직관적인 UI를 제공하고 여러 종류의 블록을 조립하는 형태로 페이지를 만들기 때문에 이를 통해 단기간 안에 준수한 디자인의 포트폴리오 웹페이지를 제작할 수 있었습니다.
그러나 노션에서 제공하는 블록의 디자인이 제한적이고, 특히 포트폴리오 페이지를 만들기 위한 역할과는 거리가 먼 도구라고 생각했습니다. 이에 고 심 끝에 Docusaurus를 활용해 직접 포트폴리오 웹페이지를 제작하였습니다.
본 글에서는 포트폴리오 페이지 제작 중 루트 페이지의 각 섹션으로 바로가기를 제공하고 현재 보고 있는 섹션을 하이라이트하는 바로가기 섹션을 만드는 과정을 기록합니다.
작성자는 본래 노션을 이용해 포트폴리오 페이지를 제작하였습니다. 노션은 깔끔하고 직관적인 UI를 제공하고 여러 종류의 블록을 조립하는 형태로 페이지를 만들기 때문에 이를 통해 단기간 안에 준수한 디자인의 포트폴리오 웹페이지를 제작할 수 있었습니다.
그러나 노션에서 제공하는 블록의 디자인이 제한적이고, 특히 포트폴리오 페이지를 만들기 위한 역할과는 거리가 먼 도구라고 생각했습니다. 이에 고심 끝에 포트폴리오 페이지를 직접 제작하여 조금 더 작성자가 추구하는 디자인과 구성으로 포트폴리오 페이지를 구축하고자 하였습니다.
본 글에서는 포트폴리오 페이지 제작 중 웹페이지 방문자가 처음 접하는 HomepageHeader 컴포넌트와 docusaurus swizzle을 통한 Custom NavbarLayout을 구성하는 과정을 기록하고자 합니다.