zenoPortfolio Overview
zenoPortfolio는 Web Designer & Publisher 포트폴리오 사이트입니다.
Design / Dev 모드로 작업물을 나누고, 카테고리와 기술 스택으로 필터링할 수 있게 만든 정적 웹사이트입니다.
이 문서는 단순 소개가 아니라, 실제 코드 구조와 기술 개념을 다시 공부하기 위한 문서입니다.
핵심 정의
zenoPortfolio = Vanilla JavaScript + Custom Elements + CSS Variables로 만든 포트폴리오 사이트
주요 특징
| 특징 | 설명 |
|---|---|
| Custom Elements | <site-header>, <works-section>, <portfolio-card> 같은 태그를 직접 정의 |
| ES Modules | import로 컴포넌트를 분리해서 불러옴 |
| Light DOM | Shadow DOM 없이 일반 DOM 안에 HTML을 렌더링 |
| 데이터 기반 렌더링 | portfolioItems 배열을 기반으로 카드 자동 생성 |
| Design / Dev 모드 | body[data-mode]와 CSS Variables로 모드별 색상 변경 |
| 필터링 | 카테고리 필터와 기술 스택 필터를 조합 |
| 무한 스크롤 | Intersection Observer로 6개씩 카드 노출 |
문서 구성
| 챕터 | 배우는 내용 |
|---|---|
| 프로젝트 구조 | 폴더와 파일 역할 |
| Web Components 기초 | Custom Elements, connectedCallback, observedAttributes |
| 컴포넌트 구조 | Header, Hero, Works, Card, Footer |
| 데이터 렌더링 | portfolioItems 배열과 카드 생성 흐름 |
| 필터와 모드 전환 | Design / Dev 모드, 카테고리, 기술 칩 |
| CSS 설계 | CSS Variables, 디자인 토큰, 반응형 |
| 코드 리뷰 | 현재 코드에서 좋은 점과 개선 포인트 |
| 배포와 운영 | GitHub Pages 정적 배포 구조 |
전체 동작 흐름
index.html 로드
-> components/index.js 실행
-> customElements.define()으로 컴포넌트 등록
-> <site-header>, <hero-section>, <works-section>, <site-footer> 렌더링
-> js/main.js가 필터, 모드, 무한스크롤, 메뉴 이벤트 연결
이 프로젝트는 프레임워크 없이 웹 플랫폼 기본 기능만으로 컴포넌트 구조를 만든 좋은 학습 예제입니다.