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

operator: surface the banner, cut label noise

Browse Source
This commit is contained in:
kbot
2026-07-06 21:52:55 -05:00
parent 6c1c751313
commit 18fe7a1613
1 changed files with 16 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/portfolio/OperatorProfile.tsx
View File

@@ -4,32 +4,30 @@ export function OperatorProfile() {
return ( return (
<section <section
id="operator" id="operator"
className="bg-blacksite-bg px-4 py-20 text-blacksite-text sm:px-6 lg:px-8" className="bg-blacksite-bg px-6 py-28 text-blacksite-text sm:px-8 sm:py-36 lg:px-12"
> >
<div className="mx-auto max-w-7xl"> <div className="mx-auto max-w-7xl">
<div className="section-label mb-4">OPERATOR PROFILE /.06</div> <div className="section-label mb-12">OPERATOR /.05</div>
<div className="overflow-hidden rounded-2xl border border-blacksite-line bg-blacksite-surface shadow-[0_24px_90px_rgba(0,0,0,0.35)]"> <div className="overflow-hidden rounded-2xl border border-blacksite-line bg-blacksite-surface shadow-[0_24px_90px_rgba(0,0,0,0.35)]">
<div className="relative h-48 overflow-hidden border-b border-blacksite-line bg-blacksite-bg2 sm:h-56 lg:h-64"> <div className="relative h-72 overflow-hidden border-b border-blacksite-line bg-blacksite-bg2 sm:h-80">
<img <img
src="/banner.jpg" src="/banner.jpg"
alt="" alt=""
className="h-full w-full object-cover opacity-45 saturate-50" className="h-full w-full object-cover object-center grayscale contrast-125 opacity-70"
/> />
<div className="absolute inset-0 bg-black/85" aria-hidden="true" />
<div <div
className="absolute inset-0 bg-[linear-gradient(90deg,rgba(0,240,255,0.12),transparent_34%,rgba(255,90,31,0.08))]" className="absolute inset-0 bg-gradient-to-t from-blacksite-bg via-blacksite-bg/55 to-transparent"
aria-hidden="true" aria-hidden="true"
/> />
<h2 className="absolute bottom-6 left-6 font-display text-3xl leading-none tracking-tight text-blacksite-text sm:bottom-8 sm:left-8 sm:text-5xl">
{identity.name}
</h2>
</div> </div>
<div className="grid gap-px bg-blacksite-line lg:grid-cols-[1fr_1.15fr]"> <div className="grid gap-px bg-blacksite-line lg:grid-cols-[1fr_1.15fr]">
<div className="bg-blacksite-surface p-6 sm:p-8 lg:p-10"> <div className="bg-blacksite-surface p-8 sm:p-10">
<p className="section-label mb-4">IDENTITY</p> <dl className="grid gap-5 text-sm text-blacksite-muted sm:text-base">
<h2 className="font-display text-4xl leading-tight tracking-tight text-blacksite-text sm:text-5xl">
{identity.name}
</h2>
<dl className="mt-8 grid gap-5 text-sm text-blacksite-muted sm:text-base">
<div> <div>
<dt className="section-label mb-2">ROLE</dt> <dt className="section-label mb-2">ROLE</dt>
<dd className="text-blacksite-text">{identity.roleLine}</dd> <dd className="text-blacksite-text">{identity.roleLine}</dd>
@@ -46,7 +44,7 @@ export function OperatorProfile() {
</div> </div>
<div className="grid gap-px bg-blacksite-line"> <div className="grid gap-px bg-blacksite-line">
<article className="bg-blacksite-surface2 p-6 sm:p-8 lg:p-10"> <article className="bg-blacksite-surface2 p-8 sm:p-10">
<p className="section-label mb-4">PUBLICATION</p> <p className="section-label mb-4">PUBLICATION</p>
<h3 className="font-display text-2xl leading-tight text-blacksite-text"> <h3 className="font-display text-2xl leading-tight text-blacksite-text">
{publication.title} {publication.title}
@@ -62,15 +60,15 @@ export function OperatorProfile() {
</a> </a>
</article> </article>
<div className="bg-blacksite-surface p-6 sm:p-8 lg:p-10"> <div className="bg-blacksite-surface p-8 sm:p-10">
<p className="section-label mb-5">HONORS</p> <p className="section-label mb-5">HONORS</p>
<ul className="grid gap-4"> <ul className="grid gap-4">
{honors.map((honor) => ( {honors.map((honor) => (
<li <li
key={`${honor.title}-${honor.year}`} key={`${honor.title}-${honor.year}`}
className="grid gap-2 border-l border-signal-orange/50 pl-4 sm:grid-cols-[auto_1fr] sm:items-baseline sm:gap-4" className="grid gap-2 border-l border-signal-cyan/50 pl-4 sm:grid-cols-[auto_1fr] sm:items-baseline sm:gap-4"
> >
<span className="section-label text-signal-orange"> <span className="section-label text-signal-cyan">
{honor.year || "RECOGNITION"} {honor.year || "RECOGNITION"}
</span> </span>
<span> <span>
@@ -86,15 +84,9 @@ export function OperatorProfile() {
</div> </div>
</div> </div>
<div className="border-t border-blacksite-line bg-blacksite-bg2 p-6 sm:p-8 lg:p-10"> <div className="border-t border-blacksite-line bg-blacksite-bg2 p-8 sm:p-10">
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"> <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
<div> <p className="section-label">SKILLS</p>
<p className="section-label mb-3">SKILLS MATRIX</p>
<h3 className="font-display text-2xl text-blacksite-text">
Domain → Capabilities
</h3>
</div>
<p className="section-label text-blacksite-muted">OPERATING SURFACE</p>
</div> </div>
<div className="overflow-hidden rounded-xl border border-blacksite-line"> <div className="overflow-hidden rounded-xl border border-blacksite-line">