weilanx-personal-website — HTML 作品集模板

SHA-256: 69c3a2c3c128a1527f0fbaa47ad0efddb5cfca9d5e9846f01527ca92a59d3a4c

2026-10-13T08:34:41.066Z

<h1 align="center">Personal Website Studio</h1>

<p align="center">
  <img src="docs/assets/project-icon.svg" width="112" alt="Personal Website Studio icon">
</p>

<p align="center">Generate polished, portable personal websites from one profile and five reusable visual themes.</p>

<p align="center">
  <a href="README.zh-CN.md">简体中文</a>
  ·
  <a href="LICENSE"><img alt="MIT License" src="https://img.shields.io/badge/license-MIT-19a974.svg"></a>
  <a href="https://github.com/Azure12355/weilanx-personal-website"><img alt="GitHub repository" src="https://img.shields.io/badge/GitHub-repository-171717.svg"></a>
</p>

## What it provides

- Five complete, responsive visual systems instead of a single generic layout.
- One JSON profile as the source of truth for identity, projects, services, links, and media.
- Automatic theme selection with an explicit override when you know the direction you want.
- Anonymous SVG placeholders and portable relative asset paths.
- Progressive enhancement for pointer, WebGL, glass, tilt, and scroll effects.
- Built-in `prefers-reduced-motion` behavior so content remains usable without animation.

## Themes

| Theme | Visual direction | Best for |
|---|---|---|
| `dark-ember` | Black, white, orange, technical grid, glass depth | Developers and technical product portfolios |
| `forest-caramel` | Cream paper, forest green, caramel editorial layout | Resumes and information-rich profiles |
| `ultraviolet-wave` | Purple waves, dark panels, long-form narrative | Creators, makers, and founders |
| `neon-studio` | Electric lime, cobalt, purple, bold agency type | Freelancers and one-person studios |
| `solar-ink` | Warm paper, black, red, yellow, poster language | Designers, writers, and product portfolios |

## Theme previews

<table>
  <tr>
    <td width="50%" align="center"><strong>Dark Ember</strong><br><img src="docs/previews/dark-ember.webp" alt="Dark Ember theme preview"></td>
    <td width="50%" align="center"><strong>Forest Caramel</strong><br><img src="docs/previews/forest-caramel.webp" alt="Forest Caramel theme preview"></td>
  </tr>
  <tr>
    <td width="50%" align="center"><strong>Ultraviolet Wave</strong><br><img src="docs/previews/ultraviolet-wave.webp" alt="Ultraviolet Wave theme preview"></td>
    <td width="50%" align="center"><strong>Neon Studio</strong><br><img src="docs/previews/neon-studio.webp" alt="Neon Studio theme preview"></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><strong>Solar Ink</strong><br><img src="docs/previews/solar-ink.webp" width="50%" alt="Solar Ink theme preview"></td>
  </tr>
</table>

## Quick start

Requirements: Python 3.10+ and a modern browser. Node.js is optional and only used for JavaScript syntax checks.

```bash
git clone https://github.com/Azure12355/weilanx-personal-website.git
cd weilanx-personal-website
cp assets/profile.example.json profile.json
python3 scripts/create_site.py \
  --profile profile.json \
  --output output-site \
  --theme auto
```

Open `output-site/index.html` in a browser. Edit `profile.json` with real, public information and run the command again with `--force` to replace an existing generated output.

List the available themes:

```bash
python3 scripts/create_site.py --list-themes
```

Choose a specific theme:

```bash
python3 scripts/create_site.py \
  --profile profile.json \
  --output output-site \
  --theme solar-ink
```

## Profile input

The minimum profile contains a public name, professional role, tagline, factual biography, public location, and contact email. See [`references/profile-schema.md`](references/profile-schema.md) for every supported field and [`assets/profile.example.json`](assets/profile.example.json) for a complete editable example.

Local media paths are resolved relative to the profile file, copied into the output, and rewritten as relative paths. HTTPS media URLs remain remote.

## Agent Quickstart

For an AI coding agent, use these files as the sources of truth:

1. Read [`SKILL.md`](SKILL.md) for the workflow, truthfulness rules, and generation contract.
2. Read [`references/profile-schema.md`](references/profile-schema.md) before constructing a profile.
3. Read [`references/theme-catalog.md`](references/theme-catalog.md) before selecting or recommending a theme.
4. Run [`scripts/create_site.py`](scripts/create_site.py); do not modify `assets/templates/` for one person's site.
5. Make one-off refinements only inside the generated output directory.

The generator never needs private source material. Do not invent education, employers, clients, testimonials, metrics, dates, or project status. Keep placeholders visible or omit unsupported claims.

## Validate generated output

```bash
node --check output-site/script.js
rg -n '\[\[[^]]+\]\]' output-site
```

The token search should return no matches. Confirm that each local `src`, stylesheet, and script reference exists. Browser testing is only needed when visual verification is required.

## Repository structure

```text
.
├── SKILL.md
├── agents/
├── assets/
│   ├── placeholders/
│   ├── templates/
│   └── profile.example.json
├── references/
│   ├── profile-schema.md
│   └── theme-catalog.md
└── scripts/
    └── create_site.py
```

## Contributing

Issues and focused pull requests are welcome. Please read [`CONTRIBUTING.md`](CONTRIBUTING.md) before changing the generator or a bundled theme.

## License

Released under the [MIT License](LICENSE).