Portfolio-Template-33 — Astro 作品集模板

SHA-256: 6e07b66070c2f45998886e2865913c922ef161b160e8eec475ff2fe2b49d047a

2026-10-17T17:14:45.910Z

<div align="center">
  <img src="docs/media/header.gif" width="960" alt="Phosphor Portfolio — a different kind of personal website" />
  <br />
  <strong>A portfolio with a little memory. And a lot of character.</strong>
  <br /><br />
  A retro desktop, a living project collection, and a human story.<br />
  Built with Astro, TypeScript, Three.js, and GSAP. Made to be made your own.
  <br /><br />
  <img src="docs/media/stack.svg" width="640" alt="Astro · TypeScript · Three.js · GSAP · MIT licensed source" />
  <br /><br />
  <a href="#03--get-it-running">Quick start</a> ·
  <a href="#04--publish-it">Deploy</a> ·
  <a href="docs/CUSTOMIZATION.md">Make it yours</a> ·
  <a href="docs/REFERENCE-STUDY.md">Design notes</a>
</div>

<br />

## 01 — Not another wall of cards

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

Phosphor turns the portfolio into an operating system you can explore. Open a volume, follow a career through a commit graph, find a command, or get pleasantly sidetracked by a cartridge.

The interface is playful. The underlying site is straightforward: static HTML, local assets, real links, and a small, readable codebase.

| The desktop                                           | Inside the system                                           |
| :---------------------------------------------------- | :---------------------------------------------------------- |
| A glowing particle portrait with pointer response     | 17 original project concepts and individual case-study URLs |
| Four corners: projects, experience, profile, contact  | Sphere, index, and spatial gallery views                    |
| A cold-start sequence and pixel cursors               | A 13-step, four-branch career timeline                      |
| Six persistent, carefully chosen color themes         | A long-form profile with animated, original diagrams        |
| Optional CRT glass, scanlines, and synthesized clicks | Draggable contact and utility windows                       |
| Searchable command palette and keyboard shortcuts     | An original ray-cast maze and fractal explorer              |

> **Demo content, honestly labelled.** Alex Morgan is a fictional identity. The 17 projects and career history are original examples, not real client credits. Replace them before representing the portfolio as your own professional work.

## 02 — A closer look

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

<p align="center"><img src="docs/media/desktop.webp" width="960" alt="Desktop preview: amber pixel type, a particle portrait, and four navigation spaces" /></p>

<details>
<summary><strong>See the mobile layout</strong></summary>
<br />
<p align="center"><img src="docs/media/mobile.webp" width="300" alt="Mobile preview with a centred portrait and a two-column navigation grid" /></p>

This is a separate touch layout, not a desktop squeezed into a smaller viewport. Navigation moves below the portrait, the contact form stacks, and project controls remain within reach.

</details>

## 03 — Get it running

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

**Requirements:** Node.js **22.22.0 or newer** and npm. The lockfile is included.

```sh
npm ci
npm run dev
```

Open the local URL printed by Astro, normally **http://localhost:4321**. On first visit, click, tap, or press a key to start the desktop. Reduced-motion visitors skip the cold start.

```sh
npm run check       # Astro and TypeScript diagnostics
npm run build       # Type-check, then generate the static site
npm run preview     # Serve that production build locally
npm run package     # After a build: create source, portable Pages, and offline exports
```

**No Node.js just to look around?** The delivery includes a separate `Phosphor-Preview.html`: download it and open it in a modern browser. It embeds its scripts, fonts, and images and does not need a server. It is a preview/export, not the source of truth for editing.

## 05 — Make it yours

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

Start here, not in the shaders:

| What you want to change                         | Where it lives                                              |
| :---------------------------------------------- | :---------------------------------------------------------- |
| Name, email, role, location, social links       | `src/data/portfolio.ts` → `person`                          |
| Projects, descriptions, credits, technologies   | `src/data/portfolio.ts` → `projects`                        |
| Career entries, dates, branch labels            | `src/data/portfolio.ts` → `commits`                         |
| Four roles and capabilities                     | `src/data/portfolio.ts` → `roles`                           |
| Profile paragraphs, form labels, interface copy | `src/components/Desktop.astro`                              |
| Home portrait                                   | `public/images/portrait.webp`                               |
| Raster portrait fallback                        | `public/images/portrait-particles.png`                      |
| Project artwork                                 | `public/art/<project-id>.svg` and `<project-id>-detail.svg` |
| Palette values                                  | `src/styles/global.css` and `themes` in the data file       |
| Motion, navigation, windows, interactions       | `src/scripts/app.ts`                                        |
| WebGL portrait and project scenes               | `src/scripts/scenes.ts`                                     |
| Domain and deployment base                      | `astro.config.mjs` / optional environment values            |

<details>
<summary><strong>Project structure</strong></summary>

```text
.
├── .github/workflows/deploy.yml  # Source-to-Pages deployment
├── public/
│   ├── art/                     # 34 original SVG covers and detail plates
│   ├── fonts/                   # Self-hosted fonts + OFL notices
│   ├── images/                  # New portrait, fallback, social card
│   ├── .nojekyll
│   └── favicon.svg
├── src/
│   ├── components/              # Real HTML interface + SVG diagrams
│   ├── data/portfolio.ts        # Identity, work, experience, themes
│   ├── pages/                   # Home, static deep links, and 404
│   ├── scripts/                 # Router, scenes, and original cartridges
│   └── styles/global.css        # Themes, layout, print, responsive states
├── docs/                        # Public documentation + README media
├── scripts/                     # Artwork and export tools
├── astro.config.mjs
├── package.json
└── package-lock.json
```

</details>

## 06 — Find your way around

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

| Key                   | Action                                               |
| :-------------------- | :--------------------------------------------------- |
| `1` / `2` / `3` / `4` | Projects / experience / profile / contact            |
| `⌘ K` or `Ctrl K`     | Open or close the command palette                    |
| `Esc`                 | Close the foreground window, or return a level       |
| `←` / `→`             | Move through experience or the 3D project views      |
| `Home` / `End`        | First / last career step                             |
| `Enter`               | Open the selected 3D project                         |
| `S`                   | Toggle sound, except while typing or playing         |
| `F`                   | Request full screen, where browser permissions allow |
| `⌘ P` or `Ctrl P`     | Print the complete, text-based résumé                |

The project sphere supports dragging and a scroll wheel. The index is a normal scrollable list. The gallery supports swiping, scrolling, and explicit previous/next controls. Right-click the desktop for a small context menu.

## 07 — Under the glass

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

| Layer                                   | Choice                                          |
| :-------------------------------------- | :---------------------------------------------- |
| Static framework                        | Astro 7.4.0                                     |
| Application code                        | TypeScript                                      |
| Portrait and spatial project collection | Three.js r185                                   |
| Transitions and interaction timing      | GSAP 3.15.0                                     |
| Display type                            | Jacquard 12                                     |
| Interface type                          | DotGothic16                                     |
| Maze and fractal cartridges             | Original Canvas 2D code                         |
| Hosting                                 | Any static host; GitHub Pages workflow included |

<p align="center"><img src="docs/media/boot.gif" width="680" alt="Animated terminal showing the portfolio's local, static architecture" /></p>

No component runtime is needed for the interface. React and SwiftUI appear in the fictional project descriptions; they are **not** extra runtime dependencies of this website.

### Accessibility & practical details

- Navigation, forms, project stories, and content remain real HTML.
- Reduced-motion preferences disable animated transitions and skip startup.
- The complete project index is available without WebGL. A raster halftone backs up the portrait.
- Dialogs have focus management; background content is inert while a dialog is open.
- Keyboard shortcuts do not intercept typing in a form.
- Fonts and visual assets are local. The site has no analytics or tracking service.
- Rendering pauses when scenes are not needed or the tab is hidden.
- The print stylesheet produces a readable résumé rather than a screenshot of a canvas.

These are implemented features, **not a claim of a formal WCAG audit**. Test your own content and any modifications before shipping. See the [production and export verification record](docs/VERIFICATION.md).

## 08 — Contact without pretending

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

By default, the form prepares a **`mailto:` draft**. Your email app handles sending. The interface never claims a message was sent when it was not.

Before publishing:

- Replace `[email protected]` with your real address.
- Replace the generic GitHub and LinkedIn destinations.
- If you want direct form delivery, configure a compatible endpoint in `person.contactEndpoint` and test it. The optional endpoint must accept JSON `{ email, subject, message }` and return a successful HTTP response on success.
- Do not put API keys or mail-service secrets into client code. GitHub Pages is static hosting, not an email backend.

## 09 — Credits, provenance & license

<img src="docs/media/spectrum.gif" width="960" height="6" alt="Animated rainbow divider" />

Visual and interaction inspiration: **[Eddy Naboulet’s portfolio](https://eddy-naboulet.dev/)**. Its retro operating-system vocabulary, warm phosphor palette, pixel type, spatial collection, and commit-history résumé were studied before this independent implementation was written.

This is not the reference author's source code, work, branding, imagery, or identity. It is not affiliated with or endorsed by the reference author, and it is not advertised as a verified pixel-identical copy. New content, new art, independent code.

The template source and original SVG artwork are released under the [MIT License](LICENSE). The demo portrait is AI-generated and represents a fictional person. Fonts are distributed under their included **SIL Open Font License** notices. Dependencies retain their own licenses; GSAP is not relicensed by this project's MIT file. See [third-party notices](THIRD_PARTY_NOTICES.md).

<img src="docs/media/spectrum.gif" width="420" height="6" alt="Animated rainbow spectrum" />

<div align="center">
  <strong>Build something with a point of view.</strong><br />
  Keep it useful. Give it a little character.
  <br /><br />
  <img src="docs/media/spectrum.gif" width="420" height="6" alt="Animated rainbow spectrum" />
</div>

<div align="center">

## 🌟 Support the Project

If you find this template useful, please consider giving it a star! It helps others discover the repository and supports future development.

</div>

<img src="docs/media/spectrum.gif" width="420" height="6" alt="Animated rainbow spectrum" />