portfolio (backstabslash) — Astro 作品集模板

SHA-256: bdbbc9bd5d762bd655355a5d8487ffa8601cc6f1b13f936396748075024d7c86

2026-10-12T10:59:39.913Z

[![CI](https://github.com/backstabslash/portfolio/actions/workflows/ci.yml/badge.svg)](https://github.com/backstabslash/portfolio/actions/workflows/ci.yml)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Built with Astro](https://img.shields.io/badge/built%20with-Astro-ff5d01.svg?logo=astro)](https://astro.build)

A config-driven developer portfolio built with Astro. Dark/light theme, interactive particle background, zero runtime JS (except particles). Deploy to Kubernetes or any static host.

## Quick start

```bash
# Fork this repo, then:
git clone https://github.com/YOUR_USERNAME/portfolio
cd portfolio
npm install
npm run dev
```

Edit `site.config.ts` with your info, that's the only file you need to change.

## Configuration

All content lives in `site.config.ts`:

| Field          | Type   | Description                                                         |
| -------------- | ------ | ------------------------------------------------------------------- |
| `name`         | string | Your full name                                                      |
| `title`        | string | Job title / tagline                                                 |
| `headline`     | string | Hero section headline                                               |
| `bio`          | string | Short bio paragraph                                                 |
| `profileImage` | string | Path to profile photo, e.g. `/images/profile.jpg`                   |
| `email`        | string | Contact email                                                       |
| `links`        | object | `github`, `linkedin`, `resume` URLs                                 |
| `about`        | object | `image` path and `text` (supports `\n\n` for paragraphs)            |
| `skills`       | array  | `{ label, items }` skill groups                                     |
| `projects`     | array  | `{ title, description, image, tech, github, url?, stars?, label? }` |
| `work`         | array  | `{ title, description, tag }` professional work items               |
| `contact`      | object | `heading` and `description` for the contact section                 |
| `theme`        | object | `colors.accentDark/accentLight` + `dark` and `light` palettes (hex) |

## Images

Drop your images in `src/assets/images/` and reference them in `site.config.ts` as `/images/filename.jpg` (the `/images/` prefix is a virtual path, not a folder). At build time Astro optimizes them to WebP and emits responsive variants via `srcset`, so oversized source files are fine.

| Image               | Minimum size | Used in       |
| ------------------- | ------------ | ------------- |
| `profile.jpg`       | 440x440px    | Hero section  |
| `about.jpg`         | 864x1080px   | About section |
| Project screenshots | 1048x655px   | Project cards |

## Theming

Edit `theme` in `site.config.ts` to change colors. All values are hex colors.

Each theme has its own accent color (`accentDark`, `accentLight`) that drives section labels, tech tags, particle color, primary buttons, and hover states.

Dark and light palettes are independent - each defines `bg`, `card`, `border`, `text`, and their variants.

## Development

```bash
npm run dev        # Start dev server
npm run build      # Production build
npm run preview    # Preview production build
npm run lint       # ESLint + Prettier check
npm run lint:fix   # Auto-fix lint issues
npm run test       # Unit tests (Vitest)
npm run test:e2e   # E2E tests (Playwright)
```

## Deployment

### Docker (any host)

```bash
docker build -t portfolio .
docker run -p 80:80 portfolio
```

### Kubernetes (k3s with Traefik)

1. Update `k8s/ingress.yaml` with your domain
2. Update `k8s/deployment.yaml` with your image name
3. Add `KUBECONFIG_DATA` secret to your GitHub repo (base64-encoded kubeconfig)
4. Push to main - CI/CD handles the rest

### Other platforms

Run `npm run build` and deploy the `dist/` folder to any static host (Vercel, Netlify, Cloudflare Pages, etc).