개인 포트폴리오 웹사이트 템플릿

 

https://github.com/g-hyeong/Portfolio-Website-Template

GitHub - g-hyeong/Portfolio-Website-Template

 
 

전부터 항상 포트폴리오를 어떤 형식으로 만들어야 하나 고민이 많았다.
노션을 매우 좋아하지만, 포트폴리오로서는 개인적으로 불호였고,
피그마도 좋지만, 뭔가 끌리진 않았다.
 
내 웹사이트 하나 있으면 좋겠다는 마음은 항상 있었는데 프론트엔드는 아는 게 하나도 없고,
요즘 다들 바이브 코딩이다 뭐다 말이 많길래, 제대로 된 바이브 코딩 한 번 해보고도 싶어서 웹으로 하나 만들어 봤다.
업무에 LLM을 아주 적극적으로 활용하는 편이긴 하지만 코드 검토도 없이 동작만 확인하면서 의존할 순 없어서,
이 기회에 망가질 걱정 없는 정적 호스팅 웹사이트에 바이브 코딩 실컷 해 봄.
 
기술 스택도 완전 LLM에 맡겨서, Next.js랑 Tailwind CSS로 했다는 것 같다.
보기 적당히 괜찮은 기본적인 구현은 정말 빨랐다.
과장 없이 15분도 안 돼서 포트폴리오 웹으로서의 구색은 충분히 갖출 정도.
 
그래도 좀 더 보기 좋고 내 취향에 맞는 기능들 이것저것 넣느라 시간을 생각보다 많이 썼다.
구성은 "About", 'Career", "Activities", "Projects", "Achievements", "Skills"의 섹션으로 구성된다.

내용의 추가/수정/삭제는 최대한 블로그 관리하듯이 편하게 하고 싶어서, src/data/ 에서 모두 관리되도록 했다.

개발자가 아니어도 충분히 내용 잘 관리할 수 있을 정도.
 
색상 또한  src/app/global.css 기반으로 관리되도록 했다.
디자인 토큰 관리라고 하는 것 같은데, 그런 목적은 아니고 색상 변경 시 LLM의 사용 토큰을 최소화 하기 위함이었다.
 
 

 
대충 위와 같이 생겼다.
다크모드 전환 같은 건 어떻게 보면 굳이 싶은 기능인데, 요청 한 번에 완성돼서 넣었다.
 
가장 공 들인 건 아래의 노트 기능

 
내용을 채우다 보면, 메인 페이지에 다 담긴 뭐하고,
세부 설명은 넣고 싶고, 증명 자료 같은 것도 넣고 싶은 일들이 있다.
 
특정 요소를 눌렀을 때 뜨게 하는 건 간단하지만 성에 안 찼고, 보다 유연하고 완전했으면 해서
노트에서 지정한 텍스트와 일치하는 텍스트는 모두 해당 노트와 연결 되도록 설정했다.
 
src/data/notes.ts에서

linkedText에 링킹을 원하는 텍스트를 입력하면,
정확히 일치하는 텍스트 요소에 해당 문서가 링킹된다.
 
또한, relatedNotes에 다른 note의 id를 입력하면,

 
상단에 관련 노트가 뜨게 되고, 누르면 멀티 위 전체 노트 이미지처럼 멀티 탭으로도 볼 수 있다.
노트는 마크다운을 자동 변환해 보여주도록 해서 노션, 옵시디언, 다른 블로그 등에도 손쉽게 공유할 수 있도록 했다.
 
[다크 모드 전체 이미지]

 
 
[라이트 모드 전체 이미지]