{ "name": "The compass", "page": "https://me.kariem.dev/compass/", "about": "The deviation card for this site: every law its build is held to, whether each holds true, and the commit the verdicts were computed at. A card with a deviation on it is never published.", "computedAt": "2026-10-20T02:01:19+00:00", "commit": "8b3d4a4", "dirty": false, "source": "private", "laws": 32, "true": 32, "variation": 0, "deviation": 0, "vocabulary": { "true": "The site does what the law promises.", "variation": "What the law points at has moved. The law needs rewriting, not the site.", "deviation": "The site is doing the forbidden thing. The build stops, and a card with one on it is never published." }, "families": [ { "id": "truth", "title": "Truth", "tagline": "What the site says, it derived. A number it could count is counted, never typed.", "laws": [ { "slug": "counts-are-derived-from-the-collection", "law": "counts are derived from the collection", "promise": "Every count is counted by the code, never typed by hand.", "why": "A number typed by hand is right on the day it is written and wrong after. Counts here are read from the collection itself, so they move when the work does.", "reading": "true", "bearing": 0, "point": "north", "evidence": { "checker": "HELD", "detail": "10 derived count(s)", "where": [ "src/data/career.ts:107", "src/pages/compass.astro:126", "src/pages/compass.astro:143", "src/pages/compass.astro:174" ] } }, { "slug": "date-strings-are-derived-by-spanlabel-never-written", "law": "date strings are derived by spanLabel(), never written", "promise": "Every date range is computed from real start and end dates, never written out.", "why": "A case study's displayed dates come from the same fields the timeline uses, through one function. It cannot claim a date its own data does not support.", "reading": "true", "bearing": 11.25, "point": "north by east", "evidence": { "checker": "HELD", "detail": "spanLabel() present; no authored display dates", "where": [] } }, { "slug": "yyyy-and-yyyy-mm-both-stay-legal", "law": "YYYY and YYYY-MM both stay legal", "promise": "A bare year is a legal date, and the site never invents a month it does not know.", "why": "Turning 2021 into January 2021 would state something nobody verified. The date format still accepts a year on its own, on purpose.", "reading": "true", "bearing": 22.5, "point": "north-northeast", "evidence": { "checker": "HELD", "detail": "regex still admits year-only dates", "where": [] } }, { "slug": "every-hero-proof-point-links-to-the-page-that-proves-it", "law": "every hero proof point links to the page that proves it", "promise": "Every number in the hero links to the page that proves it.", "why": "A headline number nobody can check is a slogan. Each one carries the case study that states it, one click away.", "reading": "true", "bearing": 33.75, "point": "northeast by north", "evidence": { "checker": "HELD", "detail": "1 proof point(s), all linked", "where": [] } }, { "slug": "an-availability-claim-is-rendered-only-while-it-is-true", "law": "an availability claim is rendered only while it is true", "promise": "An availability claim appears only while one hand-kept flag says so.", "why": "A badge written into a page keeps asserting long after it stops being true. This one sits behind a single flag, and the build refuses any page that states it without checking the flag.", "reading": "true", "bearing": 45, "point": "northeast", "evidence": { "checker": "HELD", "detail": "the claim is gated by one owned flag", "where": [] } }, { "slug": "an-arcs-period-is-derived-from-the-work-inside-it", "law": "an arc's period is derived from the work inside it", "promise": "A career era is exactly as long as the work inside it.", "why": "Era dates are computed from the spans of the case studies under them, so the timeline and the cards cannot disagree about when something began.", "reading": "true", "bearing": 56.25, "point": "northeast by east", "evidence": { "checker": "HELD", "detail": "arc periods come from member spans", "where": [] } }, { "slug": "no-arc-is-shown-without-work-under-it", "law": "no arc is shown without work under it", "promise": "No era appears on the site without real work beneath it.", "why": "An era heading with nothing under it is a resume line pretending to be a section. Every era names case studies, and every name has to be a real file.", "reading": "true", "bearing": 67.5, "point": "east-northeast", "evidence": { "checker": "HELD", "detail": "12 case studies, every mapped slug real", "where": [] } } ] }, { "id": "failing", "title": "Failing loudly", "tagline": "A broken promise stops the build. It never ships quietly.", "laws": [ { "slug": "status-and-end-are-a-biconditional-enforced-at-build-time", "law": "status and end are a biconditional, enforced at build time", "promise": "A finished project has an end date and a live one does not. A mismatch stops the build.", "why": "A case study marked live cannot quietly carry an end date, and one with an end date cannot call itself live. The schema refuses the combination before the page exists.", "reading": "true", "bearing": 78.75, "point": "east by north", "evidence": { "checker": "HELD", "detail": "superRefine present", "where": [] } }, { "slug": "an-unknown-callout-throws-rather-than-rendering-empty", "law": "an unknown callout throws rather than rendering empty", "promise": "A typo in a callout breaks the build instead of printing an empty box.", "why": "Case studies use named blocks for asides. If a name is not one the site knows, the build throws, so no page ships with a silent gap where a note should be.", "reading": "true", "bearing": 90, "point": "east", "evidence": { "checker": "HELD", "detail": "throws on unknown directive", "where": [] } }, { "slug": "a-chapter-never-repeats-its-parent-slug-in-frontmatter", "law": "a chapter never repeats its parent slug in frontmatter", "promise": "A chapter's parent is its folder and nothing else.", "why": "Writing the parent into the chapter's own frontmatter as well would make two sources for one fact, and one of them would drift. The path is the only link.", "reading": "true", "bearing": 101.25, "point": "east by south", "evidence": { "checker": "HELD", "detail": "filesystem path is the only parent link", "where": [] } }, { "slug": "nothing-is-reachable-by-two-route-templates", "law": "nothing is reachable by two route templates", "promise": "No page is reachable at two addresses.", "why": "The flat case-study route leaves out items that have chapters, so a project cannot exist as both a single page and a chaptered one.", "reading": "true", "bearing": 112.5, "point": "east-southeast", "evidence": { "checker": "HELD", "detail": "flat route filters chaptered items out", "where": [] } }, { "slug": "the-compass-states-no-number-it-does-not-derive", "law": "the compass states no number it does not derive", "promise": "The compass never states a count it did not compute.", "why": "It once typed its own law count and was off by one: nineteen against twenty. Now the count in the document is compared with the count in the checker, and a mismatch stops the build.", "reading": "true", "bearing": 123.75, "point": "southeast by east", "evidence": { "checker": "HELD", "detail": "32 laws claimed and registered", "where": [] } }, { "slug": "the-compass-index-states-no-length-it-does-not-measure", "law": "the compass index states no length it does not measure", "promise": "The index never claims a length it did not measure.", "why": "The compass index tells you what each document costs to read. Those numbers are measured against the files, so they cannot go stale unnoticed.", "reading": "true", "bearing": 135, "point": "southeast", "evidence": { "checker": "HELD", "detail": "every stated length matches the file", "where": [] } }, { "slug": "every-compass-file-is-reachable-from-the-index", "law": "every compass file is reachable from the index", "promise": "Every document in the compass is listed in its index.", "why": "A standard nobody is routed to still looks like coverage. If a file is added and not indexed, the build says so.", "reading": "true", "bearing": 146.25, "point": "southeast by south", "evidence": { "checker": "HELD", "detail": "every compass file is routed from INDEX.md", "where": [] } }, { "slug": "the-compass-cites-nothing-it-cannot-prove", "law": "the compass cites nothing it cannot prove", "promise": "Every file the compass cites exists and is tracked.", "why": "A citation to a file that moved is a claim that quietly became false. Every path in the compass is checked against what version control holds, and every cited line has to exist.", "reading": "true", "bearing": 157.5, "point": "south-southeast", "evidence": { "checker": "HELD", "detail": "every cited path exists and is tracked", "where": [] } } ] }, { "id": "colour", "title": "Colour", "tagline": "Every colour has a source, lives as data, and follows the page's theme.", "laws": [ { "slug": "colors-are-rgb-triples-in-css-never-hex", "law": "colors are RGB triples in CSS, never hex", "promise": "Colours are stored as red-green-blue triples, so opacity and theming work everywhere.", "why": "A triple can take any opacity where it is used and a hex value cannot. Hex still appears in comments, where each brand colour cites the value it came from.", "reading": "true", "bearing": 168.75, "point": "south by east", "evidence": { "checker": "HELD", "detail": "30 stylesheet(s); hex only in comments and static scales", "where": [] } }, { "slug": "no-dead-design-tokens", "law": "no dead design tokens", "promise": "No gradient or shadow token exists that nothing uses.", "why": "A token nobody reads is a suggestion that outlived its use, and the next person to touch the file has to guess whether it matters. The check covers gradients and shadows; colour and spacing scales stay complete on purpose.", "reading": "true", "bearing": 180, "point": "south", "evidence": { "checker": "HELD", "detail": "all 5 gradient/shadow tokens referenced", "where": [] } }, { "slug": "the-sites-own-canvas-is-never-pure-white", "law": "the site's own canvas is never pure white", "promise": "The site's own background is never pure white.", "why": "Its atmosphere and doodle layer disappear on white. A brand's own pages may use white when that brand's spec says so, because a brand's written rules outrank the site's defaults.", "reading": "true", "bearing": 191.25, "point": "south by west", "evidence": { "checker": "HELD", "detail": "site canvas is warm (1 brand(s) declare white by their own spec)", "where": [] } }, { "slug": "the-five-accents-are-all-declared", "law": "the five accents are all declared", "promise": "Every named accent colour is always defined: beacon, compass, horizon, fathom and tide.", "why": "A missing accent means a page silently falls back to another colour. The check names which one is gone.", "reading": "true", "bearing": 202.5, "point": "south-southwest", "evidence": { "checker": "HELD", "detail": "beacon, compass, horizon, fathom, tide", "where": [] } }, { "slug": "a-brand-always-beats-a-borrowed-accent", "law": "a brand always beats a borrowed accent", "promise": "A brand's own colour always wins over a borrowed accent.", "why": "A page with its own identity is never overridden by the site's generic accent. The accent attribute is dropped whenever a brand is set.", "reading": "true", "bearing": 213.75, "point": "southwest by south", "evidence": { "checker": "HELD", "detail": "data-accent suppressed whenever brand is set", "where": [] } }, { "slug": "css-partials-are-imported-explicitly-never-globbed", "law": "CSS partials are imported explicitly, never globbed", "promise": "Every stylesheet is imported by name, never by pattern.", "why": "A pattern import loses source order, and whichever stylesheet loads last wins by accident. Naming each import keeps the cascade in the order it was written.", "reading": "true", "bearing": 225, "point": "southwest", "evidence": { "checker": "HELD", "detail": "every brand imported by its own line", "where": [] } }, { "slug": "a-converted-palette-cites-the-value-it-was-converted-from", "law": "a converted palette cites the value it was converted from", "promise": "Every brand palette says where its colours came from.", "why": "A plausible invented colour survives a glance. So each brand kit has to cite the original hex in a comment or say plainly that the colour is derived.", "reading": "true", "bearing": 236.25, "point": "southwest by west", "evidence": { "checker": "HELD", "detail": "12 kit(s) cite a source hex or declare derived", "where": [] } }, { "slug": "every-brand-kit-is-imported-or-it-is-not-a-kit", "law": "every brand kit is imported, or it is not a kit", "promise": "A brand's colour file that nothing imports fails the build.", "why": "An unimported kit renders the page in the default colour and looks like it works until you measure it. The wiring is checked, not remembered.", "reading": "true", "bearing": 247.5, "point": "west-southwest", "evidence": { "checker": "HELD", "detail": "12 brand kit(s), all wired into global.css", "where": [] } }, { "slug": "a-brands-dark-block-reaches-the-cards-inside-a-dark-page", "law": "a brand's dark block reaches the cards inside a dark page", "promise": "A brand's dark theme reaches its cards, not only its own page.", "why": "A dark rule that matches only when both attributes sit on one element works on a case study and fails on every card in the index. A kit with a dark block has to match cards under a dark page too.", "reading": "true", "bearing": 258.75, "point": "west by south", "evidence": { "checker": "HELD", "detail": "every dark block also matches a card under .dark", "where": [] } }, { "slug": "a-case-component-reads-the-pages-theme-not-one-modes-colours", "law": "a case component reads the page's theme, not one mode's colours", "promise": "Case-study drawings take their colour from the page's theme, not from one mode.", "why": "Hardcoded colour looks perfect in exactly the mode its author is looking at. Components draw from live tokens; the few literals left belong to a third party's own identity, and each says why.", "reading": "true", "bearing": 270, "point": "west", "evidence": { "checker": "HELD", "detail": "13 case component(s) take their colour from the page", "where": [] } } ] }, { "id": "motion", "title": "Motion & reach", "tagline": "Motion answers to the visitor, and every way in stays open.", "laws": [ { "slug": "every-animating-file-answers-prefers-reduced-motion", "law": "every animating file answers prefers-reduced-motion", "promise": "Every file that animates also answers a request for less motion.", "why": "Motion is a courtesy a visitor can withdraw. A file that defines keyframes and has no reduced-motion rule fails the check.", "reading": "true", "bearing": 281.25, "point": "west by north", "evidence": { "checker": "HELD", "detail": "every keyframe-defining file answers it", "where": [] } }, { "slug": "content-is-visible-by-default-reveal-is-additive", "law": "content is visible by default; reveal is additive", "promise": "Content is visible by default. Scroll reveals are added on top and never required.", "why": "If a script fails, nothing may stay hidden. Hidden states exist only behind a class the script adds, so a JavaScript failure costs an animation and nothing else.", "reading": "true", "bearing": 292.5, "point": "west-northwest", "evidence": { "checker": "HELD", "detail": ".reveal-ready gates the hidden state", "where": [] } }, { "slug": "focus-visible-always-draws", "law": "focus-visible always draws", "promise": "Keyboard focus is always drawn, and no component turns it off.", "why": "A page that hides where the keyboard is has failed everyone who navigates by it. There is one global focus ring, and the check fails if a component opts out.", "reading": "true", "bearing": 303.75, "point": "northwest by west", "evidence": { "checker": "HELD", "detail": "global outline present, no opt-outs", "where": [] } }, { "slug": "the-skip-link-is-the-first-focusable-element", "law": "the skip link is the first focusable element", "promise": "The first thing a keyboard reaches on every page is the skip link.", "why": "It is checked against the HTML the build produced, not against the template, because a layout is not a document and only the built page says what a browser receives.", "reading": "true", "bearing": 315, "point": "northwest", "evidence": { "checker": "HELD", "detail": "read from the finished build; a build where this fails is never published", "where": [] } }, { "slug": "no-emoji-anywhere-in-source-or-content", "law": "no emoji anywhere in source or content", "promise": "No emoji, anywhere in the source or the content.", "why": "Icons here are drawn as marks the site owns, in one colour and with no font dependency, so they look the same on every device.", "reading": "true", "bearing": 326.25, "point": "northwest by north", "evidence": { "checker": "HELD", "detail": "139 file(s) scanned, zero emoji", "where": [] } }, { "slug": "the-primary-segment-has-a-channel-that-reaches-him", "law": "the primary segment has a channel that reaches him", "promise": "There is always a way to ask a question and get an answer, not only somewhere to read more.", "why": "GitHub and LinkedIn are places to read, so they do not count. The check passes only while a direct channel exists on the site: email, WhatsApp or Telegram.", "reading": "true", "bearing": 337.5, "point": "north-northwest", "evidence": { "checker": "HELD", "detail": "2 direct channel(s): email, whatsapp", "where": [] } }, { "slug": "no-channel-is-shown-without-saying-who-it-is-for", "law": "no channel is shown without saying who it is for", "promise": "Every contact channel says who it is for.", "why": "A row of identical icons is a menu, and it asks the visitor to work out which door is theirs. Each channel carries one clause saying what it is for, and none may be blank.", "reading": "true", "bearing": 348.75, "point": "north by west", "evidence": { "checker": "HELD", "detail": "4 channel(s), each says who for", "where": [] } } ] } ], "refused": [ { "title": "ARIA tab panels for chapters", "reason": "Hid three-quarters of the document's headings inside `[hidden]`. Real routes removed the problem." }, { "title": "Tool logos as glyphs", "reason": "Breaks the background-less `currentColor` rule and regresses into a skills-badge resume." }, { "title": "Inventing a chapter to round out a number", "reason": "Six proposed, four in the source, four shipped." }, { "title": "`import.meta.glob` for CSS", "reason": "Lost the source-order race." }, { "title": "A fixed card height", "reason": "The sixth lane landed on the proof line." }, { "title": "Terms, prices, or a support policy on the site", "reason": "Prices depend on the deal, and the site is an identity, not a sales page." }, { "title": "An availability badge", "reason": "It keeps saying \"available\" after it stops being true, so it went. One owned flag still guards the claim, and a law checks it." }, { "title": "A for-hire pitch", "reason": "The site shows what each stop added; it does not ask for work." } ] }