Skip to content

Give work and education entries a hierarchy instead of one flat rhythm - #49

Merged
leinss merged 2 commits into
releasefrom
feature/work-layout
Aug 26, 2026
Merged

Give work and education entries a hierarchy instead of one flat rhythm#49
leinss merged 2 commits into
releasefrom
feature/work-layout

Conversation

@leinss

@leinss leinss commented Aug 26, 2026

Copy link
Copy Markdown
Owner

The work section read as a wall of text, and the cause was a single rule:
.entry-body > * + * gave every block an identical 8px gap. Four paragraphs of
prose with four bold words between them, all the same weight and spacing, so
nothing separated anything and the eye had no place to rest.

  • Section labels inside an entry are written as **label** alone on a line,
    which markdown renders as a paragraph containing only a bold run. Those are
    now styled as signposts: small, uppercase, letter-spaced, muted, with a lot
    of space above and almost none below, so each binds to the paragraph it
    introduces rather than floating between two.
  • The label no longer inherits the general strong rule, which had made it the
    highest-contrast thing in the entry and pulled the eye to the signpost rather
    than the content.
  • Body copy gets leading-relaxed and a 68ch measure. At the 840px container
    these paragraphs ran to roughly 95 characters, well past what the eye tracks
    comfortably, which was the other half of the problem.
  • Date, company and role are set tight as one header unit with a deliberate gap
    before the body. Previously all four shared one rhythm, so an entry had no
    header.
  • Entries are separated by a rule, not just space. With space alone the
    boundary between two jobs looked identical to the boundary between two
    paragraphs of one job, so eight years read as a single column.
  • Education gets the same treatment, since it shares entry-body.

Also drops the emoji used as icons: next to the page headings on /work,
/projects and /education, in the "See all X" links, and at the start of the
four homepage section headings. An emoji there renders at a different size,
weight and baseline than the text beside it, and it was inconsistent with the
headings that had none. The "See all X" links get a trailing arrow instead,
which inherits colour and weight. The hero's wave stays: it sits inline in a
sentence and reads as voice, not as an icon.

Test plan:

  • pnpm run lint and pnpm run build pass, 82 pages
  • internal link check passes, none broken
  • /work and the homepage rendered in a browser in dark mode and read at
    three scroll positions, not judged from the markup

leinss added 2 commits August 26, 2026 16:21
…at rhythm

The work section read as a wall of text, and the cause was a single rule:
`.entry-body > * + *` gave every block an identical 8px gap. Four paragraphs of
prose with four bold words between them, all the same weight and spacing, so
nothing separated anything and the eye had no place to rest.

- Section labels inside an entry are written as `**label**` alone on a line,
  which markdown renders as a paragraph containing only a bold run. Those are
  now styled as signposts: small, uppercase, letter-spaced, muted, with a lot
  of space above and almost none below, so each binds to the paragraph it
  introduces rather than floating between two.
- The label no longer inherits the general `strong` rule, which had made it the
  highest-contrast thing in the entry and pulled the eye to the signpost rather
  than the content.
- Body copy gets `leading-relaxed` and a 68ch measure. At the 840px container
  these paragraphs ran to roughly 95 characters, well past what the eye tracks
  comfortably, which was the other half of the problem.
- Date, company and role are set tight as one header unit with a deliberate gap
  before the body. Previously all four shared one rhythm, so an entry had no
  header.
- Entries are separated by a rule, not just space. With space alone the
  boundary between two jobs looked identical to the boundary between two
  paragraphs of one job, so eight years read as a single column.
- Education gets the same treatment, since it shares `entry-body`.

Also drops the emoji used as icons: next to the page headings on /work,
/projects and /education, in the "See all X" links, and at the start of the
four homepage section headings. An emoji there renders at a different size,
weight and baseline than the text beside it, and it was inconsistent with the
headings that had none. The "See all X" links get a trailing arrow instead,
which inherits colour and weight. The hero's wave stays: it sits inline in a
sentence and reads as voice, not as an icon.

Test plan:
- [x] `pnpm run lint` and `pnpm run build` pass, 82 pages
- [x] internal link check passes, none broken
- [x] /work and the homepage rendered in a browser in dark mode and read at
      three scroll positions, not judged from the markup
…urpose

The page named one harness, which reads as having settled on a tool. The
practice is the opposite: Claude Code day to day alongside OpenCode, Codex and
others, because they have different strengths and the field moves fast enough
that committing to one is a bad bet.

Adds a line to the intro making the same point about the list as a whole. The
breadth is the position, not an accident of not having specialised yet.

Test plan:
- [x] lint and build pass, 82 pages
- [x] internal link check passes
@leinss
leinss merged commit ddbb03c into release Aug 26, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant