Example side project
A placeholder project. It shows how a project page looks with the kinds of content the real ones will carry: text, code, diagrams and video.
Project pages are living documents, updated in place as the project changes, so they show when they were started and when they last changed. A bigger project can grow sub-pages:
Body text is set in the system's own sans-serif for comfortable reading.
Headings, dates, captions and code use monospace, which carries the
typewriter-technical feel of the resume. Links are
underlined in the text colour, with no accent colour.
Inline code looks like ./build.sh serve.
A second-level heading
Lists keep the default bullets, toned down a little:
- Plain HTML, one stylesheet, one script.
- Shared header and footer, stitched in by a small bash script.
- No frameworks, packages or build tools beyond bash.
A third-level heading
A code block, with a heavy rule on its left edge:
$ ./build.sh serve
built public/
serving at http://localhost:4021 (ctrl-c to stop)Code blocks get coding ligatures, so arrows and comparisons join up:
const live = posts.filter(p => p.date <= today && p.status !== "draft");
// also: -> != == >= <!-- -->A blockquote, for quoting someone else, is quiet and set off by a thin rule.
Diagrams
Diagrams are inline SVG drawn in the text colour, so they follow dark mode.
Video
<video controls> element fills this box.A thin rule, like the one above, separates sections of a long article.