DetectViz Portfolio

個人作品集網站，展示 SRE、數據工程與可觀測性領域的專案經驗。

Live Demo | Architecture | Deployment

---

Tech Stack

Category	Technology
Framework	Astro, Preact
Styling	Tailwind CSS, Material Design 3
Animation	AOS, GSAP
Deployment	GitHub Pages, Cloudflare

Quick Start

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview build
npm run preview

Project Structure

src/
├── assets/        # Static assets (avatar, logo)
├── components/    # Astro components
│   ├── layout/    # Layout components (Navbar)
│   ├── sections/  # Page sections (Hero, Skills, Projects...)
│   └── ui/        # UI components (ThemeToggle, Carousel)
├── data/          # Data files (me.ts, projects.ts, skills.ts)
├── layouts/       # Page layouts
├── pages/         # Route pages
├── scripts/       # Client-side scripts
├── styles/        # Global styles (theme.css, global.css)
├── types/         # TypeScript types
└── utils/         # Utilities (i18n)

Data Management

Update personal info

Edit src/data/me.ts

Update projects

Edit src/data/projects.ts

Update skills

Edit src/data/skills.ts

Update translations

Edit src/data/zh-tw.json

Deployment

Push to main branch triggers automatic deployment via GitHub Actions.

git add .
git commit -m "feat: new feature"
git push origin main

Documentation

Document	Description
ARCHITECTURE.md	System architecture
DEPLOYMENT.md	Deployment guide
DESIGN_SYSTEM.md	Design system
CHANGELOG.md	Change log

License

MIT License

---

detectviz.com