feat(ui): add /cv route, site-wide lowercase, no-cookies footer

reproduces the legacy cv (previously at grenade.github.io/cv) as a
react-router /cv route, fetched at runtime from the same gist. moves
the lowercase aesthetic from per-element overrides to a single body-
level rule so a future toggle can flip it from one place. adds a small
site-wide footer noting why no cookie consent banner is shown.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/src/pages/TimelineHome.tsx

@@ -0,0 +1,128 @@
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import { VerticalTimeline } from 'react-vertical-timeline-component';
+
+import { fetchEvents, fetchSources, type Source } from '../api/client';
+import { Filters } from '../components/Filters';
+import { TimelineEntry } from '../components/TimelineEntry';
+
+const RANGE_MIN = new Date('2010-01-01T00:00:00Z').getTime();
+const RANGE_MAX = Date.now();
+
+const externalLinks: { url: string; alt: string }[] = [
+  { url: 'https://linkedin.com/in/thijssen/', alt: 'linkedin' },
+  { url: 'https://stackoverflow.com/users/68115/grenade', alt: 'stackoverflow' },
+  { url: 'https://github.com/grenade', alt: 'github' },
+  { url: 'https://git.lair.cafe/grenade', alt: 'gitea' },
+];
+
+export function TimelineHome() {
+  const [enabledSources, setEnabledSources] = useState<Record<Source, boolean>>({
+    github: true,
+    gitea: true,
+    hg: true,
+    bugzilla: true,
+  });
+  const [rangeValue, setRangeValue] = useState<[number, number]>(() => {
+    const now = Date.now();
+    const thirtyDaysAgo = now - 30 * 24 * 60 * 60 * 1000;
+    return [thirtyDaysAgo, now];
+  });
+  const [limit, setLimit] = useState<number>(100);
+
+  const sourcesQ = useQuery({
+    queryKey: ['sources'],
+    queryFn: fetchSources,
+    refetchInterval: 60_000,
+  });
+
+  const activeSources = useMemo(
+    () =>
+      (Object.keys(enabledSources) as Source[]).filter((s) => enabledSources[s]),
+    [enabledSources],
+  );
+
+  const eventsQ = useQuery({
+    queryKey: ['events', rangeValue, activeSources, limit],
+    queryFn: () =>
+      fetchEvents({
+        from: new Date(rangeValue[0]),
+        to: new Date(rangeValue[1]),
+        sources: activeSources,
+        limit,
+      }),
+    refetchInterval: 60_000,
+  });
+
+  const events = eventsQ.data ?? [];
+
+  return (
+    <Container className="py-4">
+      <Row className="mb-3">
+        <Col>
+          <h1>hi, i'm rob</h1>
+        </Col>
+        <Col className="d-flex flex-wrap gap-3 justify-content-end align-items-center">
+          {externalLinks.map((el) => (
+            <a
+              key={el.url}
+              href={el.url}
+              title={el.alt}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {el.alt}
+            </a>
+          ))}
+        </Col>
+      </Row>
+      <Row className="mb-4">
+        <Col>
+          <p>
+            i rarely say anything that warrants capital letters. if you're here
+            to see my resume, please go to{' '}
+            <Link className="hot-pink" to="/cv">
+              /cv
+            </Link>
+            . a peek into the projects i'm working on is below.
+          </p>
+        </Col>
+      </Row>
+
+      <Filters
+        enabledSources={enabledSources}
+        onSourceToggle={(s, on) =>
+          setEnabledSources((prev) => ({ ...prev, [s]: on }))
+        }
+        rangeMin={RANGE_MIN}
+        rangeMax={RANGE_MAX}
+        rangeValue={rangeValue}
+        onRangeChange={setRangeValue}
+        limit={limit}
+        onLimitChange={setLimit}
+        summaries={sourcesQ.data}
+      />
+
+      <Row>
+        <Col>
+          <p className="text-center" style={{ fontSize: '85%' }}>
+            {eventsQ.isLoading
+              ? 'loading…'
+              : eventsQ.isError
+                ? `error: ${(eventsQ.error as Error).message}`
+                : `showing ${events.length} ${events.length === 1 ? 'activity' : 'activities'}`}
+          </p>
+          <VerticalTimeline>
+            {events.map((item) => (
+              <TimelineEntry key={item.id} item={item} />
+            ))}
+          </VerticalTimeline>
+        </Col>
+      </Row>
+    </Container>
+  );
+}