);
}
// Live AST clock — Port of Spain has no DST so Intl handles the offset.
// Tick on the next wall-clock second so the seconds counter doesn't drift
// out of phase with the system clock during long sessions.
function useASTClock() {
const [now, setNow] = useState(() => new Date());
useEffect(() => {
let id;
const tick = () => {
setNow(new Date());
id = setTimeout(tick, 1000 - (Date.now() % 1000));
};
id = setTimeout(tick, 1000 - (Date.now() % 1000));
return () => clearTimeout(id);
}, []);
return now;
}
const __TIME_FMT = new Intl.DateTimeFormat("en-GB", {
timeZone: "America/Port_of_Spain",
hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
});
// ── Hero ───────────────────────────────────────────────────────────────────
function Hero() {
const now = useASTClock();
const time = __TIME_FMT.format(now);
return (
{HERO.pills[0].label}
Port of Spain · {time} AST
{HERO.title.map((part, i) => {
if (part.serif) return {part.t};
if (part.stroke) return {part.t};
return {part.t};
})}
);
}
// Portrait — uses assets/profile.jpg. If the image fails to load,
// falls back to an on-brand SKL monogram so the card never breaks.
function Monogram() {
const [failed, setFailed] = useState(false);
if (!failed) {
return (
setFailed(true)}
style={{ display: "none" }} />
);
}
return (
);
}
// ── Ticker ─────────────────────────────────────────────────────────────────
function Ticker() {
// Duplicate the row so the -50% translate loop is seamless.
const items = [...TICKER, ...TICKER];
return (
{items.map((s, i) => {s})}
);
}
// ── Credentials strip (critique #10 — credibility anchors) ────────────────
// Sits between the capabilities ticker and the origin story. Three numbers,
// large mono type, no SaaS-marketing tone — each one is a fact the reader
// can verify from the rest of the page.
function Credentials() {
return (
23Years shipping production softwareSince 2003 · Microsoft stack
I work on every layer, from Azure to STM32 bus wires. Most
projects fail at the seams between layers. I focus my efforts
there.
I design hardware and software as a single problem.
I don't treat it as two teams sliding tickets across an org chart.
The result is systems that survive contact with the real world.
{STACK.map((l) => (
{l.num}
{l.name}
{l.sub}
))}
{SYSTEMS_CAPS.map((c) => (
{c.lab}
{c.h}
{c.p}
))}
);
}
// ── KBlazor showcase ───────────────────────────────────────────────────────
// Right side shows real screenshots from kblazor.com cycling through the
// three view modes — the fake React table would only ever look like a fake
// React table, so honesty wins.
function KBlazorSection({ theme }) {
const VIEWS = [
{ k: "Table", base: "kblazor-table",
caption: "Sort, filter, paginate. Saved views per user." },
{ k: "Card", base: "kblazor-card",
caption: "Same data as chips with status colour-coding." },
{ k: "Kanban", base: "kblazor-kanban",
caption: "Group items by any property. Counts at a glance." },
];
const [view, setView] = useState("Table");
const current = VIEWS.find((v) => v.k === view) || VIEWS[0];
const shotSrc = `assets/${current.base}-${theme === "light" ? "light" : "dark"}.jpg`;
return (
A multi-view data architecture for Blazor. One{" "}
IQueryable<T> can render simultaneously as a Table,
Card, or Kanban. No need to rewrite the data layer.
);
}
// ── About + Philosophy ─────────────────────────────────────────────────────
function About() {
return (
About · Philosophy
The long version.
{ABOUT.paragraphs.map((p, i) =>
{p}
)}
Operating principles
{PHILOSOPHY.map((t, i) => (
{String(i + 1).padStart(2, "0")}{t}
))}
Away from the keyboard/
Photography and Videography
{" "}are an active part of my life. You've got to enjoy the{" "}
grind.
);
}
// ── Focus / current research ───────────────────────────────────────────────
function Focus() {
return (
);
}
// ── Footer ─────────────────────────────────────────────────────────────────
function Footer() {
const year = new Date().getFullYear();
return (
);
}
// ── Augmented software engineering (definition band) ───────────────────────
// Sits directly under the hero. Defines the practice behind the role line
// in the hero tagline. Reuses .sec-label; scoped .aug-* for the rest.
function AugmentedDef() {
return (
setFailed(true)}
style={{ display: "none" }} />
