honeycomb — Vite 作品集模板

SHA-256: 33c8c22dfe40c988aef335f64f6ff61e8d0a7f9fce085856ccd842cd26fc4f16

2026-10-19T00:21:38.337Z

<div align="center">


# Honeycomb

A portfolio that is a honeycomb: your projects as hexagons on a live generative
wallpaper, each opening a sheet with a screenshot, the problem it solves and the
stack. The centre hex is you. There is a Windows 95 desktop hidden in it.

[![License: MIT](https://img.shields.io/badge/license-MIT-3a1f7a.svg)](LICENSE)
&nbsp;[![Example](https://img.shields.io/badge/example-themasterofnone.xyz-a78bef.svg)](https://themasterofnone.xyz)
&nbsp;[![Nostalgia OS](https://img.shields.io/badge/easter%20egg-Nostalgia%20OS-00b3b3.svg)](https://nostalgia.themasterofnone.xyz)

[Live example](https://themasterofnone.xyz) · [Nostalgia OS](https://nostalgia.themasterofnone.xyz) · Wallpaper by [Fluid](https://github.com/enonforetsam/fluid)

</div>

## Make it yours in ten minutes

```sh
git clone https://github.com/enonforetsam/honeycomb my-site
cd my-site && npm i
cp src/data/experiments.example.js src/data/experiments.js
npm run dev
```

Edit one file. `src/data/experiments.js` holds your projects (name, one line,
blurb, problem, stack, link, accent) and your profile (headline, bio, timeline,
socials). Set `shot` and `now.logo` to `null` until your images are ready. Everything on the page renders from it, including the static HTML and
the JSON-LD that search engines and link previews read.

```sh
node scripts/shots.mjs      # screenshots of your live projects for the sheets
npm run build               # dist/, with your words baked into index.html
npm run lint && npm test
```

## What you get

- A responsive honeycomb around your profile, plus an accessible list view.
  Desktop uses two columns; phones stack the introduction, contact and projects.
  Layout tests cover one to 32 tiles.
- Project sheets: a native `<dialog>` with screenshot, problem, stack and links
  (Esc, backdrop and the × all close it; cmd-click still opens the site).
  Each project has a shareable `#project/<id>` link, previous/next controls,
  and a fallback when a screenshot is unavailable.
- The centre hex opens into a reader with three tabs: About, Now, Work with me
- A live [Fluid](https://befluid.xyz) wallpaper you can shuffle, painted over a
  CSS gradient so the first frame is never black. Pause/play controls, reduced
  motion, background-tab pausing and reading-mode pausing keep it considerate.
- Static prerender: real HTML before JavaScript, Person + WebSite +
  SoftwareApplication JSON-LD, sitemap and robots
- No text under 12px on any screen, 44px targets, visible focus rings, reduced
  motion respected
- Regression checks for tile geometry, deep links and content integrity, run
  before deployments. Browser failure fixtures live at `tests/browser.html`.

## Nostalgia OS

`src/os/` is a Windows 95 desktop: boot screen, draggable windows, a guestbook and
a hit counter on Cloudflare D1 + KV. `worker.js` serves it on its own host
(`nostalgia.<your-domain>`) and the portfolio on the apex; open `os.html` locally.

## Structure

| file | role |
|------|------|
| `src/data/experiments.js` | the only file you must edit |
| `src/components/HexGrid.jsx` | the comb, the landing words, the fit |
| `src/components/ProjectSheet.jsx` | the per-project dialog |
| `src/components/BuilderCenterHex.jsx` + `ProfileDialog.jsx` + `AboutPanel.jsx` | the centre hex and its native dialog reader |
| `src/components/FluidArt.jsx` | the wallpaper |
| `src/landing.css` | the words, the sheet, the copy floor |
| `vite.config.js` | the prerender plugin (static HTML + JSON-LD from your data) |
| `worker.js` | Cloudflare Worker: host routing, security headers, guestbook API |

## Deploy

Cloudflare Worker with static assets. Edit the routes in `wrangler.jsonc`, then:

```sh
npm run build && npx wrangler deploy --env staging
npm run build && npx wrangler deploy
```

The GitHub Action runs lint, tests and a build before deploying on push to `main` with
`CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` as repo secrets. The guestbook
needs a D1 database and a KV namespace named in `wrangler.jsonc`; without them the
portfolio works and the OS guestbook shows nothing.

## Contributing

Bugs and ideas welcome; see [CONTRIBUTING.md](CONTRIBUTING.md).

## License

MIT © Danial Alias. The wallpaper engine is [fluid-bg](https://www.npmjs.com/package/fluid-bg) (MIT).