Portfolio-Template-05 — HTML 作品集模板

SHA-256: 043e92f9435e119fc88307430be919cc14a9be4908031380def50383e2d7bc30

2026-10-13T14:59:10.338Z

<div align=center >
# prtfl. — a brutalist portfolio template

A single-page-feel, multi-page **creative-developer portfolio** built the old way:
plain HTML, CSS and vanilla JavaScript. No framework, no build step, no bundler,
no trackers. Drop it on GitHub Pages (or any static host) and it just works —
even opened straight from the filesystem.

The whole thing is one machine chassis: a fixed grid of panels separated by
2px ink seams, a hanging neon "SCROLL DOWN" sign, a crosshair cursor that
inverts whatever is under it, a pixel-spark particle field, panels that wipe
open on load, and a scrolling archive of project plates that resolve from
coarse pixels to full detail as they reach the centre of the screen.

## </div>

## Features

**Chrome & layout**

- Fixed 7×4 CSS grid chassis with 18 crosshair corner marks and 2px ink seams
- Identity cell with generated barcodes, name, copyright line
- Three nav cells + a composite cell (wordmark, years, barcode, marquee,
  manufacture date, theme button, QR plate)
- Sidebar: language selector with crosshair brackets, live table of contents,
  micro-typography texture strip, pixel-art social icons
- Hanging neon sign (CRT aperture grille + flicker) that becomes "BACK TO TOP"
- Full mobile layout: round hamburger → full-screen drawer

**Motion**

- Boot sequence: fetch wash → percentage counter → staggered panel wipe reveal
- Scramble-decode text on every heading and nav item as it enters the viewport
- Custom crosshair cursor (`backdrop-filter: invert`) with split-arm hover,
  caret mode over inputs and a click pulse
- Pixel-spark physics canvas (gravity, bounce, click bursts, scroll dust)
- Scroll-driven pixelation: project plates resolve from 64px blocks to 1:1
- Inertia smooth-scroll with wheel, keyboard (`J`/`K`/`Home`/`End`) and anchors
- Page-exit curtain + panel close on navigation; matching entrance on load
- Theme repaint: panels flash to ink and wipe back open in the new palette
- `prefers-reduced-motion` fully respected everywhere

**Content system**

- Everything editable in **one file**: `assets/js/config.js`
- 14 project entries (media panel + case-study panel + facts + links + plate)
- About page rendered from an outline (drives the indented TOC)
- Journal page rendered from entries
- 6 colour themes, cycled with the button or the `T` key, remembered
- 5 interface languages (EN / اردو / ES / DE / 日本語), remembered; Urdu &
  Japanese webfonts load lazily only when selected
- 404 page, SEO + Open Graph tags, self-hosted OFL webfonts

---

````

No `npm install`. No build. That's the point.

---

## Make it yours

1. **Edit `assets/js/config.js`** — identity, socials, nav, themes, languages,
   projects, about outline, journal entries. Every string and image path lives
   there.
2. **Replace the artwork** in `assets/img/` (keep the filenames, or update the
   paths in config).
3. **Regenerate the QR plate** to point at your domain:
   ```bash
   pip install segno
   python3 - <<'PY'
   import segno
   segno.make('https://your-domain.dev', error='m').save(
       'assets/img/qr-site.svg', scale=6, border=2,
       dark='#1a1a1a', light='#969696')
   PY
````

4. Update the `<meta>` / Open Graph tags at the top of each HTML page.

See **`GUIDE.md`** for the complete GitHub Pages publishing walkthrough.

---

## Repository layout

```
.
├── index.html            home — the project archive
├── about.html            outline-driven long-form page
├── journal.html          entries / writings
├── 404.html              served by GitHub Pages for unknown routes
├── .nojekyll             tells GitHub Pages not to run Jekyll
├── GUIDE.md              publishing walkthrough
├── LICENSE
└── assets/
    ├── css/              base · layout · components · responsive
    ├── js/               config + 14 tiny single-purpose modules
    ├── fonts/            self-hosted Silkscreen / Chakra Petch / Space Mono
    └── img/              project plates, hero, portrait, QR, favicon
```

---

## Keyboard & pointer

| Input                            | Action                      |
| -------------------------------- | --------------------------- |
| `J` / `K`, `PageDown` / `PageUp` | next / previous panel       |
| `Home` / `End`                   | top / bottom                |
| `T`                              | cycle colour theme          |
| `Esc`                            | close mobile drawer         |
| Click the neon sign              | next panel (or back to top) |

---

## Browser support & performance

Modern evergreen browsers (Chrome, Edge, Firefox, Safari 16+). The cursor's
`backdrop-filter: invert()` degrades gracefully where unsupported. Zero
runtime dependencies; total JS is ~60 KB unminified and the only network
requests are your own assets.

---

## Accessibility

Semantic landmarks, focus-visible outlines, `aria-current` on nav, labelled
icon links, a live-region loader, full keyboard navigation, and a complete
`prefers-reduced-motion` path that swaps every animation for an instant state.

---

## Fonts

Self-hosted under the SIL Open Font License 1.1 — see `assets/fonts/OFL.txt`:
**Silkscreen** (Paul Hurtt / Jason Kottke), **Chakra Petch** (Cadson Demak),
**Space Mono** (Colophon Foundry). Urdu and Japanese faces are pulled from
Google Fonts only when those languages are selected.

## License

MIT — see `LICENSE`. Use it, fork it, ship it.