marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(portfolio): enforce accent discipline, display heading, and AA contrast

Browse Source
This commit is contained in:
kbot
2026-07-06 20:56:51 -05:00
parent ff4b556381
commit c0376df402
5 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/portfolio/ClosingCta.tsx
View File

@@ -80,7 +80,7 @@ export function ClosingCta() {
<p className="font-mono text-xs uppercase leading-6 tracking-[0.14em] text-blacksite-muted">
Next.js · Tailwind · deployed from out/
</p>
<p className="mt-4 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-faint">© {year}</p>
<p className="mt-4 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">© {year}</p>
<p className="mt-6 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">⌘K opens command index</p>
</div>
</div>

2
components/portfolio/CommandPalette.tsx
View File

@@ -198,7 +198,7 @@ export function CommandPalette() {
</Command.Group>
</Command.List>
<div className="flex items-center justify-between border-t border-blacksite-line px-4 py-3 font-mono text-[11px] uppercase tracking-[0.16em] text-blacksite-faint sm:px-5">
<div className="flex items-center justify-between border-t border-blacksite-line px-4 py-3 font-mono text-[11px] uppercase tracking-[0.16em] text-blacksite-muted sm:px-5">
<span>↑↓ select</span>
<span>Enter run · Esc close</span>
</div>

2
components/portfolio/ContactTerminal.tsx
View File

@@ -60,7 +60,7 @@ export function ContactTerminal() {
<div className="grid gap-0 lg:grid-cols-[0.8fr_1.2fr]">
<div className="border-b border-blacksite-line px-5 py-8 sm:px-7 lg:border-b-0 lg:border-r lg:px-10">
<p className="section-label mb-4">CONTACT TERMINAL</p>
<h2 id="contact-title" className="font-mono text-3xl font-semibold uppercase tracking-[-0.04em] text-blacksite-text sm:text-5xl">
<h2 id="contact-title" className="font-display text-3xl font-semibold uppercase tracking-[-0.04em] text-blacksite-text sm:text-5xl">
Send signal.
</h2>
<p className="mt-5 max-w-md text-sm leading-7 text-blacksite-muted sm:text-base">

2
components/portfolio/Hero.tsx
View File

@@ -23,7 +23,7 @@ export function Hero() {
className="relative isolate flex min-h-screen overflow-hidden bg-blacksite-bg px-5 py-28 text-blacksite-text sm:px-8 lg:px-12"
>
<HeroCanvas />
<div className="absolute inset-0 z-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,90,31,0.12),transparent_30%),linear-gradient(90deg,rgba(3,5,6,0.98),rgba(3,5,6,0.78)_52%,rgba(3,5,6,0.96))]" />
<div className="absolute inset-0 z-0 bg-[linear-gradient(90deg,rgba(3,5,6,0.98),rgba(3,5,6,0.78)_52%,rgba(3,5,6,0.96))]" />
<m.div
initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}

22
components/portfolio/WorkIndex.tsx
View File

@@ -8,21 +8,21 @@ import { dossiers, type Accent, type Dossier } from "@/lib/portfolio";
const accentText: Record<Accent, string> = {
cyan: "text-signal-cyan",
orange: "text-signal-orange",
green: "text-signal-green",
green: "text-blacksite-text",
violet: "text-signal-violet",
};
const accentBorder: Record<Accent, string> = {
cyan: "border-l-signal-cyan",
orange: "border-l-signal-orange",
green: "border-l-signal-green",
green: "border-l-transparent",
violet: "border-l-signal-violet",
};
const accentGlow: Record<Accent, string> = {
cyan: "shadow-[0_0_32px_rgba(0,240,255,0.12)]",
orange: "shadow-[0_0_32px_rgba(255,90,31,0.12)]",
green: "shadow-[0_0_32px_rgba(182,255,0,0.1)]",
green: "",
violet: "shadow-[0_0_32px_rgba(128,93,255,0.12)]",
};
@@ -67,7 +67,7 @@ export function WorkIndex() {
transition={{ duration: 0.5, ease: "easeOut" }}
className="overflow-hidden border-y border-blacksite-line bg-blacksite-bg2/70"
>
<div className="section-label grid grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,0.8fr)_5rem] gap-4 border-b border-blacksite-line px-4 py-3 text-blacksite-faint max-md:hidden">
<div className="section-label grid grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,0.8fr)_5rem] gap-4 border-b border-blacksite-line px-4 py-3 text-blacksite-muted max-md:hidden">
<span>PROJECT</span>
<span>TYPE</span>
<span>STATUS</span>
@@ -106,7 +106,7 @@ export function WorkIndex() {
>
<div className="grid gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,0.8fr)_5rem] md:items-start md:gap-4">
<div className="min-w-0">
<p className="section-label mb-1 text-blacksite-faint md:hidden">
<p className="section-label mb-1 text-blacksite-muted md:hidden">
PROJECT
</p>
<div className="flex items-baseline gap-3">
@@ -122,6 +122,9 @@ export function WorkIndex() {
>
{dossier.title}
</h3>
{dossier.accent === "green" ? (
<span aria-hidden="true" className="size-2 rounded-full bg-signal-green shadow-[0_0_14px_rgba(182,255,0,0.45)]" />
) : null}
</div>
</div>
@@ -138,11 +141,10 @@ export function WorkIndex() {
<p className="section-label mb-1 text-blacksite-faint md:hidden">
STATUS
</p>
<p
className={`font-mono text-xs uppercase tracking-[0.16em] ${
liveStatus ? "text-signal-green" : "text-blacksite-muted"
}`}
>
<p className="flex items-center gap-2 font-mono text-xs uppercase tracking-[0.16em] text-blacksite-muted">
{liveStatus ? (
<span aria-hidden="true" className="size-2 rounded-full bg-signal-green shadow-[0_0_14px_rgba(182,255,0,0.45)]" />
) : null}
{dossier.status}
</p>
</div>