개발자가 순수 HTML/CSS/JavaScript로 사이버펑크 테마의 인터랙티브 터미널 포트폴리오를 구현했다

Context

개발자들이 자신이 만든 다양한 도구들을 한 곳에 체계적으로 보여줄 수단이 부족했다. 전통적인 포트폴리오는 정적 웹페이지 형태가 대부분이다.

Technical Solution

• 순수 HTML/CSS/JavaScript만으로 터미널 에뮬레이터를 구현했다
• Tab 자동완성 기능을 명령어, 디렉토리, 파일별로 구분하여 제공했다
• 가상 파일 시스템에 디렉토리와 파일 구조를 구축했다
• CSS 애니메이션으로 그리드 배경, 스캔 라인, 글리치 텍스트 효과를 구현했다
• Canvas API로 연결된 55개의 입자 파티클 시스템을 구현했다
• 배경색상 #060a0f, 주요 강조색 #00e5ff(시안), #39ff14(그린), #ff6b35(오렌지)를 사용했다

Impact

20개 이상의 오픈소스 도구를 하나의 인터랙티브 터미널 환경에서 확인할 수 있게 되었다

Key Takeaway

프레임워크 없이도 순수 JavaScript만으로 고품질 인터랙티브 웹 앱을 만들 수 있다