Portfolio

Collection of projects.

html

<section class="portfolio" aria-labelledby="portfolio-heading" style="--accent:#BFD9F2;">
  <header class="portfolio__head">
    <h3 id="portfolio-heading" class="portfolio__name">Growth Platform Portfolio</h3>
    <p class="portfolio__lead">Led by S. Novak</p>
  </header>
  <p class="portfolio__stat">3 projects &middot; 2 on track</p>
  <ul class="portfolio__list" data-count="3">
    <li class="portfolio__item"><span class="portfolio__dot"></span>Checkout Redesign</li>
    <li class="portfolio__item"><span class="portfolio__dot"></span>Onboarding Revamp</li>
    <li class="portfolio__item"><span class="portfolio__dot"></span>Billing Migration</li>
  </ul>
</section>
<style>
.portfolio { max-width: 480px; padding: 18px 20px; border-radius: 12px; background: #FAF7F2; border: 1px solid #24143022; box-sizing: border-box; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.portfolio__head { border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 10px; }
.portfolio__name { margin: 0; font-size: 16px; font-weight: 700; }
.portfolio__lead { margin: 2px 0 0; font-size: 12.5px; color: #241430b3; }
.portfolio__stat { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #241430; }
.portfolio__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portfolio__list[data-count="1"] li:nth-child(n+2) { display: none; }
.portfolio__list[data-count="2"] li:nth-child(n+3) { display: none; }
.portfolio__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: #24143008; }
.portfolio__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
</style>

tailwind

<section aria-labelledby="portfolio-heading-tw" class="max-w-[480px] p-4.5 rounded-xl bg-[#FAF7F2] border border-[#24143022] box-border font-sans text-sm text-[#241430]" style="--accent:#BFD9F2;">
  <header class="border-l-[3px] pl-2.5 mb-2.5" style="border-color:#BFD9F2">
    <h3 id="portfolio-heading-tw" class="m-0 text-base font-bold">Growth Platform Portfolio</h3>
    <p class="m-0 mt-0.5 text-[12.5px] text-[#241430]/70">Led by S. Novak</p>
  </header>
  <p class="m-0 mb-2.5 text-[13px] font-semibold">3 projects &middot; 2 on track</p>
  <ul class="portfolio-tw__list list-none m-0 p-0 flex flex-col gap-2" data-count="3">
    <li class="flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]"><span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#BFD9F2"></span>Checkout Redesign</li>
    <li class="flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]"><span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#BFD9F2"></span>Onboarding Revamp</li>
    <li class="flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]"><span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#BFD9F2"></span>Billing Migration</li>
  </ul>
</section>
<style>
.portfolio-tw__list[data-count="1"] li:nth-child(n+2) { display: none; }
.portfolio-tw__list[data-count="2"] li:nth-child(n+3) { display: none; }
</style>

react

export function Portfolio({
  name = "Growth Platform Portfolio",
  lead = "S. Novak",
  projectsShown = 3,
  onTrack = 2,
  accent = "#BFD9F2",
}) {
  const projects = ["Checkout Redesign", "Onboarding Revamp", "Billing Migration"].slice(0, projectsShown);
  return (
    <section aria-labelledby="portfolio-heading-react" style={{ maxWidth: 480, padding: "18px 20px", borderRadius: 12, background: "#FAF7F2", border: "1px solid #24143022", boxSizing: "border-box", font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <header style={{ borderLeft: "3px solid " + accent, paddingLeft: 10, marginBottom: 10 }}>
        <h3 id="portfolio-heading-react" style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{name}</h3>
        <p style={{ margin: "2px 0 0", fontSize: 12.5, color: "#241430b3" }}>Led by {lead}</p>
      </header>
      <p style={{ margin: "0 0 10px", fontSize: 13, fontWeight: 600 }}>{projectsShown} projects &middot; {onTrack} on track</p>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {projects.map((p) => (
          <li key={p} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, padding: "8px 10px", borderRadius: 8, background: "#24143008" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: accent, flexShrink: 0 }} />
            {p}
          </li>
        ))}
      </ul>
    </section>
  );
}