Home/Colophon
Colophon · How this site is built
The system behind the system

Colophon

A consultant’s job is to build systems that are precise, documented and maintainable — so this portfolio is built the same way. This page is its own specification: the page architecture, the two design systems and their tokens, the shared infrastructure, and the conventions that keep it consistent. It is hand-written static HTML/CSS/JS — no framework, no build step.

StackStatic HTML · CSS · vanilla JS
HostGitHub Pages
TypeInter · JetBrains Mono
BuildNone — edit & deploy
21pages
2design systems
15+interactive tools
0build steps
01 · Architecture

The page map.

Every page is a single self-contained document. They group into a home, the delivered projects, and a three-tier SAP knowledge base mapped by the Knowledge Hub.

HOMEEntry & conversion
indexcvcontact
PROJECTSDelivered work
project1 · P2Pproject2 · Pricing/ARproject3 · Loyaltyproject4 · STEMproject5 · FPDUmuvmi · EVsenior · LiDAR
SAP · ADesign & methodology
sap-designfunctional-specificationbusiness-process-mapdata-migration-cutoverintegration-architecture
SAP · BFI Tax specialization
finance-functional-modulefi-tax-consultant-scope
SAP · CReference & transparency
knowledge-hubglossaryricefw-registermetricscolophon ← you are here
02 · Design systems

One palette, two information densities.

The portfolio and the specialist FI-Tax work now share one Private Ledger palette. The main site stays editorial; the SAP workbench pages stay denser and more operational without feeling like a different brand.

Private Ledger · Editorial

shared · styles.css · home + projects + SAP cluster + reference
oxblood
red-black
parchment
warm graphite
success
champagne
Inter — display & body · JetBrains Mono — SAP objects and evidence labels. Engineering red drives interaction; champagne marks precision; warm surfaces preserve full light/dark parity.

Private Ledger · SAP workbench

FI document simulator · FI-Tax scope · Oman VAT case · FI-Tax Lab
signal red
exception
gold
red-black
oxide surface
engineering border
Space Grotesk + IBM Plex Sans/Mono. The same engineering-red/champagne foundation carries denser tables, rails and simulators; brighter red and green remain reserved for real exception/success meaning.
03 · Shared infrastructure

Three files carry the chrome.

Styles styles.css

The Private Ledger token system (parchment light / obsidian dark), shared components, navigation, scroll progress, back to top, and visible focus treatment.

Motion animation.js + fx-flow.js

Scroll reveals, count-ups, hero depth, and one restrained ambient flow layer. Motion is reduced-motion aware and never required to read the content.

Theme theme.js

A tiny pre-paint bootstrap prevents flashing; the shared runtime then synchronizes the control, browser chrome and smooth light/dark transitions through one local preference.

Discoverability

sitemap.xml + robots.txt, per-page Open Graph / Twitter / canonical, JSON-LD, a dedicated 1200×630 share card, and a web manifest + touch icon.

04 · Conventions

The rules that keep it honest and precise.

  • HonestyEvidence levels stay explicit. XeerSoft cases are delivered production work; current SAP material is a public-safe role summary; simulations and redesigns are labelled tested, illustrative, standard SAP, or proposed.
  • One sourceEvery number reconciles to one file. A single internal source of truth governs the metrics; the public Metrics page shows the reconciliation.
  • A11yWCAG 2.1 AA. Contrast holds in both themes, every interactive control is keyboard-reachable with a visible focus ring, and a skip link leads each page.
  • MotionReveals enhance, never gate. Content is visible by default; motion only layers on when JS runs and prefers-reduced-motion allows.
  • PerfLean by default. Project imagery served as WebP with lazy-loading, no framework payload, and cache-busted assets.
  • InteractionShow, don’t tell. Each SAP page carries a real interactive tool — a simulator, an explorer, a calculator — rather than static claims.
05 · Under the hood

The whole stack, honestly small.

No framework, no bundler, no dependencies at runtime. The one build-time tool used was sharp, run once locally to generate WebP — it isn’t shipped.

Static HTML Hand-written CSS (custom properties) Vanilla JS (no libraries) GitHub Pages hosting Git — commit & deploy Inter + JetBrains Mono / Space Grotesk + IBM Plex SVG favicon + canvas motion
WHY A COLOPHON

An implementation consultant is judged on the systems they leave behind: are they documented, consistent, maintainable? This page answers that for the portfolio itself — the same discipline, turned on the thing you’re reading.

Back to the SAP Knowledge Hub →