Colophon · How this site is built

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

index cv contact

PROJECTSDelivered work

project1 · P2P project2 · Pricing/AR project3 · Loyalty project4 · STEM project5 · FPDU muvmi · EV senior · LiDAR

SAP · ADesign & methodology

sap-design functional-specification business-process-map data-migration-cutover integration-architecture

SAP · BFI Tax specialization

finance-functional-module fi-tax-consultant-scope

SAP · CReference & transparency

knowledge-hub glossary ricefw-register metrics colophon ← you are here

02 · Design systems

Two systems, on purpose.

Most of the site runs one shared system; the two FI-Tax pages carry a deliberately separate identity, so the specialization reads as its own body of work.

The Engineer’s Console

shared · styles.css · home + projects + SAP cluster + reference

#2563eb

#0f172a

#f8fafc

#586379

#059669

#d97706

Inter — display & body · JetBrains Mono — labels/readouts. One Implementation Blue accent; slate neutrals; flat surfaces that glow on interaction. Full light/dark parity.

SAP FI Tax (self-contained)

finance-functional-module · fi-tax-consultant-scope

gas

flare

gold

abyss

deep

steel

Space Grotesk + IBM Plex Sans/Mono. A three-colour language: gas = SAP/data, flare = tax to the State, gold = value. Own inline CSS/JS + left rail nav.

03 · Shared infrastructure

Three files carry the chrome.

Styles styles.css

Design tokens (light/dark), components, the nav, the scroll-progress bar, back-to-top pill and the skip link. Cache-busted with ?v=12.

Motion animation.js

Cursor spotlight + tilt, scroll-reveal, count-ups, hero parallax, and the neural-network background canvas. Every effect is reduced-motion aware.

Theme theme.js

Sets light/dark before first paint to avoid a flash, off a shared theme localStorage key. Inlined on the home page to drop a request.

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.

HonestyXeerSoft is the delivery; SAP is methodology. Every SAP page states that its content is design/preparation, never a claim of configured SAP production work.
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 →