Skip to content
All projects

01 / Public

ASTRACE 포트폴리오 사이트

AI와 함께 만든 결과물과 배운 것을 기록하는 정적 포트폴리오 사이트.

  • claude-code
  • astro
  • github
목차
  1. 어떻게 만들었나
  2. 만드는 과정의 기록

마크다운 파일 하나를 쓰면 글이 올라가는 사이트. 지금 보고 있는 이 페이지가 그 결과다.

포트폴리오의 주제가 “AI로 만든다”이므로, 사이트 자체도 AI(Claude Code)와 함께 만들었다.

어떻게 만들었나

  • 정적 사이트 생성기 Astro 위에, 궤도·위성·별자리가 움직이는 첫 화면을 가진 오픈소스 템플릿(Astro Orbit)을 골랐다.
  • 로고와 브랜드 시안에서 색을 뽑아 다크·라이트 두 팔레트를 만들었다. 강조색 하나를 바꾸면 첫 화면의 위성 통신선까지 함께 바뀐다.
  • 글은 마크다운 파일 하나가 글 한 편이다. 카테고리 3개, 태그는 자유.

만드는 과정의 기록

자세한 제작기는 구축 보고서에 기록하였다.

배운 점

화려함은 첫 화면에만, 글은 읽기 편하게. 브랜드 색 값 하나가 위성 궤도까지 바꾼다.

Command center

이 사이트 위의 작은 셸. ls, cd projects, cat <이름> 을 써 보라.

Quick commands