🚀 zkm.tw — Portfolio

Modern React + TypeScript portfolio powered by Vite, Tailwind CSS, and Framer Motion.

Stack

• React 19, TypeScript 6, Vite 8
• Tailwind CSS 4, PostCSS, Styled Components
• Framer Motion (animations), Lucide Icons
• Chart.js + react-chartjs-2 (lazy-loaded Bar)
• Vitest + Testing Library (unit tests)

Getting started

Prerequisites: Node 24+, Yarn 4 (via Corepack).

Install deps

yarn install

Dev server

yarn dev

Build

yarn build

Preview

yarn preview

Scripts

• dev: start Vite dev server
• build: build for production
• preview: preview production build
• lint / lint:fix: run/fix ESLint
• typecheck: check TypeScript types
• format / format:check: format/check code with Prettier
• test: run tests once
• test:watch: run tests in watch mode
• test:coverage: generate coverage report
• test:ui: run tests with UI dashboard
• clean: remove dist/ directory
• verify: lint, typecheck, and test
• fix: lint:fix and format
• docker:dev: run dev with Docker (5173, HMR 24678)
• docker:prod: run production build with nginx (8082)
• docker:down: stop Docker containers
• health / health:full: health checks and audit
• health:report: generate health report
• deps:check / deps:audit: check/audit dependencies
• deploy: build and deploy to GitHub Pages
• ci: CI workflow (install, verify, build)

Docker

• Dockerfile has multi-stage targets: dev (Vite), build, prod (nginx)
• docker-compose.yml defines:
  • web: bind-mount dev with hot reload on http://localhost:5173
  • web-prod: serves built assets via nginx on http://localhost:8082
• .dockerignore is configured to keep the build context small

Common

yarn docker:dev   # dev with HMR
yarn docker:prod  # serve built site on :8082

Tests

• Vitest + @testing-library/react
• Framer Motion is mocked in test setup (src/test-setup.ts) for stable DOM
• Hooks are mocked per test with vi.mocked(...) patterns

Run

yarn test
yarn test:watch
yarn test:coverage
yarn test:ui

Data & components

• Public JSON data: public/data/profile.json, public/data/resume.json
• Hooks: src/hooks/useProfileData.ts, src/hooks/useResumeData.ts
• Key components: src/components/Portfolio.tsx, src/components/Resume.tsx
• Resume sections are collapsible (accessible), default-expanded

Analytics

GA4 is loaded in index.html and initialized in public/analytics.js

Deployment

Deployment is handled by the deploy script and the production branch workflow:

yarn deploy

This will:

1. Build your project
2. Replace the production branch contents with your built dist assets
3. Commit and push to production
4. Trigger GitHub Actions deployment recording for production

Project structure

src/
  components/
    Portfolio.tsx
    Resume.tsx
  hooks/
    useProfileData.ts
    useResumeData.ts
  __tests__/
public/
  data/
    profile.json
    resume.json

---

Created by Zach Schneider