public-blog/components/portfolio/OperatorProfile.tsx

import { honors, identity, publication, skillsMatrix } from "@/lib/portfolio";

export function OperatorProfile() {
  return (
    <section
      id="operator"
      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="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="relative h-72 overflow-hidden border-b border-blacksite-line bg-blacksite-bg2 sm:h-80">
            <img
              src="/banner.jpg"
              alt=""
              className="h-full w-full object-cover object-center grayscale contrast-125 opacity-70"
            />
            <div
              className="absolute inset-0 bg-gradient-to-t from-blacksite-bg via-blacksite-bg/55 to-transparent"
              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 className="grid gap-px bg-blacksite-line lg:grid-cols-[1fr_1.15fr]">
            <div className="bg-blacksite-surface p-8 sm:p-10">
              <dl className="grid gap-5 text-sm text-blacksite-muted sm:text-base">
                <div>
                  <dt className="section-label mb-2">ROLE</dt>
                  <dd className="text-blacksite-text">{identity.roleLine}</dd>
                </div>
                <div>
                  <dt className="section-label mb-2">EDUCATION</dt>
                  <dd>{identity.education}</dd>
                </div>
                <div>
                  <dt className="section-label mb-2">SITE</dt>
                  <dd>{identity.site}</dd>
                </div>
              </dl>
            </div>

            <div className="grid gap-px bg-blacksite-line">
              <article className="bg-blacksite-surface2 p-8 sm:p-10">
                <p className="section-label mb-4">PUBLICATION</p>
                <h3 className="font-display text-2xl leading-tight text-blacksite-text">
                  {publication.title}
                </h3>
                <p className="mt-4 text-sm text-blacksite-muted sm:text-base">
                  {publication.venue} · {publication.year} · {publication.authorship}
                </p>
                <a
                  href={publication.href}
                  className="section-label mt-6 inline-flex text-signal-cyan underline decoration-signal-cyan/35 underline-offset-4 transition-colors hover:text-blacksite-text focus-visible:outline-signal-cyan"
                >
                  DOI: {publication.doi}
                </a>
              </article>

              <div className="bg-blacksite-surface p-8 sm:p-10">
                <p className="section-label mb-5">HONORS</p>
                <ul className="grid gap-4">
                  {honors.map((honor) => (
                    <li
                      key={`${honor.title}-${honor.year}`}
                      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-cyan">
                        {honor.year || "RECOGNITION"}
                      </span>
                      <span>
                        <span className="text-blacksite-text">{honor.title}</span>
                        {honor.detail ? (
                          <span className="text-blacksite-muted"> — {honor.detail}</span>
                        ) : null}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          <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">
              <p className="section-label">SKILLS</p>
            </div>

            <div className="overflow-hidden rounded-xl border border-blacksite-line">
              <table className="w-full border-collapse text-left text-sm sm:text-base">
                <thead className="bg-blacksite-surface2">
                  <tr>
                    <th scope="col" className="section-label px-4 py-3 sm:px-5">
                      Domain
                    </th>
                    <th scope="col" className="section-label px-4 py-3 sm:px-5">
                      Capabilities
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-blacksite-line bg-blacksite-surface">
                  {skillsMatrix.map((row) => (
                    <tr key={row.category}>
                      <th
                        scope="row"
                        className="w-56 px-4 py-4 align-top font-mono text-xs uppercase tracking-[0.16em] text-blacksite-text sm:px-5"
                      >
                        {row.category}
                      </th>
                      <td className="px-4 py-4 text-blacksite-muted sm:px-5">
                        <div className="flex flex-wrap gap-2">
                          {row.skills.map((skill) => (
                            <span
                              key={skill}
                              className="rounded-full border border-blacksite-line bg-blacksite-surface2 px-3 py-1 text-xs text-blacksite-text sm:text-sm"
                            >
                              {skill}
                            </span>
                          ))}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}