# Portfolio Pages Operations Guide

## Current structure

- Navigation only keeps three portfolio tracks:
  - `视频作品集`
  - `图文作品集`
  - `开发项目作品集`
- Every work card links to a detail page.
- Each detail page supports:
  - project summary
  - process breakdown
  - design thinking
  - deliverables and outcomes

## Content source

The site now uses Astro Content Collections instead of a single `site.js` data blob.

Content directories:

- `src/content/settings/`
- `src/content/videos/`
- `src/content/stories/`
- `src/content/projects/`

Static route metadata stays in:

`src/data/site.js`

## Where to update content

All portfolio content now lives in markdown files under `src/content/`.

The main editable fields are:

- `title`
- `strapline`
- `summary`
- `cover`
- `media`
- `role`
- `client`
- `tags`
- `deliverables`
- `outcomes`
- `process`
- `thinking`

## How to add a new work

1. Open the matching folder in `src/content/`.
2. Copy an existing markdown file from the same category.
3. Rename the file to the new URL slug.
4. Replace the frontmatter fields with your real project content.
5. Replace `cover`, `media`, `process`, and `thinking` image paths.
6. Put real assets into `public/uploads/` or `public/images/`.
7. Keep the filename unique because it becomes the route slug.

## Category routes

- `videos` list page: `/videos`
- `stories` list page: `/stories`
- `projects` list page: `/projects`

Detail page routes are generated automatically:

- `/videos/<slug>`
- `/stories/<slug>`
- `/projects/<slug>`

## Local preview

Use the ASCII alias path because the current repository path can interfere with build tooling:

`E:\xcweb_alias`

Commands:

```powershell
cd E:\xcweb_alias
npm run dev
```

Then check:

- desktop width
- phone width
- each list page
- each detail page

## Local CMS workflow

Decap CMS is wired in local mode because Gitee is not an officially supported Decap auth backend.

Run these in separate terminals:

```powershell
cd E:\xcweb_alias
npm run dev
```

```powershell
cd E:\xcweb_alias
npm run cms:proxy
```

Then open:

`http://localhost:4321/admin/`

Use the CMS locally to edit content files, then commit and push the changes yourself.

If `npm run cms:proxy` reports `EADDRINUSE 8081`, it usually means a stale Decap proxy is still running.
Find and stop it, then retry:

```powershell
Get-NetTCPConnection -LocalPort 8081 -State Listen
Stop-Process -Id <PID> -Force
```

## Production build

```powershell
cd E:\xcweb_alias
npm run build
```

## Deploy to Cloudflare Pages

```powershell
cd E:\xcweb_alias
npm run deploy:pages
```

If `wrangler` has trouble reading the alias path during upload, deploy from the real repo path by calling the CLI through the alias installation:

```powershell
cd E:\78\xc_n\xc_web
$lines = Get-Content key.txt
$env:CLOUDFLARE_API_TOKEN = $lines[1].Trim()
$env:CLOUDFLARE_ACCOUNT_ID = $lines[3].Trim()
& 'E:\xcweb_alias\node_modules\.bin\wrangler.cmd' pages deploy dist --project-name xc-web-portfolio-v2 --branch main --commit-dirty=true
```

## Design notes

- The homepage is a routing page, not a long archive.
- Cards stay direct and readable.
- Detail pages do the explanatory work.
- Mobile layout collapses to a single column.
- Desktop layout uses wider media areas and dual-column detail structure.

## Current public URL

`https://xc-web-portfolio-v2.pages.dev`

## Gitee note

The code repository can stay on Gitee:

`https://gitee.com/agricultural-study-chang/xc_web.git`

But the Decap CMS login flow should not be treated as a production online admin on Gitee.
Current safe model:

1. edit locally via Decap
2. commit locally
3. push to Gitee
4. deploy to Cloudflare Pages