initial

src/pages/_Team.astro

@@ -0,0 +1,99 @@
+---
+import { Picture } from 'astro:assets';
+import Base from '../layouts/Base.astro';
+import teamPhoto from '../assets/images/team.png';
+import { team } from '../data/team';
+import { t, type Lang } from '../i18n/ui';
+
+interface Props { lang: Lang }
+const { lang } = Astro.props;
+const ui = t(lang);
+---
+<Base lang={lang} title={ui.meta.team.title} description={ui.meta.team.description}>
+  <section class="section section--intro team-intro">
+    <div class="container grid">
+      <h1 class="display team-intro__title">
+        {ui.team.title.map((line) => <span class="line">{line}</span>)}
+      </h1>
+      <p class="team-intro__lead">{ui.team.intro}</p>
+    </div>
+  </section>
+
+  <div class="team-photo">
+    <Picture
+      src={teamPhoto}
+      alt={ui.team.photoAlt}
+      formats={['avif']}
+      fallbackFormat="webp"
+      widths={[640, 960, 1440]}
+      sizes="100vw"
+      loading="eager"
+      decoding="async"
+      class="img-cover img-mono team-photo__img"
+      pictureAttributes={{ class: 'team-photo__picture' }}
+    />
+    <div class="team-photo__overlay" aria-hidden="true"></div>
+  </div>
+
+  <section class="section" aria-label={ui.nav.team}>
+    <div class="container">
+      <ul class="people" role="list">
+        {team.map((p) => (
+          <li class="person">
+            <Picture
+              src={p.portrait}
+              alt={p.name}
+              formats={['avif']}
+      fallbackFormat="webp"
+              widths={[320, 480, 640]}
+              sizes="(min-width: 64rem) 22vw, (min-width: 48rem) 45vw, 100vw"
+              loading="lazy"
+              decoding="async"
+              class="img-mono img-print person__img"
+            />
+            <h2 class="h3 person__name">{p.name}</h2>
+            <p class="muted">{ui.team.roles[p.role]}</p>
+            <ul class="person__links small" role="list">
+              {p.github && <li><a href={p.github} rel="noopener">{ui.team.links.github}</a></li>}
+              {p.linkedin && <li><a href={p.linkedin} rel="noopener">{ui.team.links.linkedin}</a></li>}
+              <li><a href={`mailto:${p.email}`}>{ui.team.links.email}</a></li>
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </section>
+</Base>
+
+<style>
+  .line { display: block; }
+  .team-intro__title { grid-column: 1 / -1; }
+  .team-intro__lead { grid-column: 1 / -1; max-width: var(--measure); color: var(--ink-muted); }
+  @media (min-width: 48rem) {
+    .team-intro__title { grid-column: 1 / span 7; }
+    .team-intro__lead { grid-column: 9 / span 4; align-self: end; }
+  }
+
+  .team-photo {
+    position: relative;
+    /* Explicit height: an aspect-ratio with max-height would transfer the cap to the width. */
+    height: min(66.67vw, 80svh);
+    min-height: 20rem;
+    overflow: hidden;
+  }
+  :global(.team-photo__picture) { position: absolute; inset: 0; }
+  .team-photo__img, :global(.team-photo__img) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
+  .team-photo__overlay { position: absolute; inset: 0; background: var(--overlay); opacity: 0.6; }
+
+  .people {
+    display: grid;
+    gap: var(--space-8) var(--gap);
+  }
+  .person { display: grid; gap: var(--space-2); align-content: start; }
+  .person__img, :global(.person__img) { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: var(--space-2); }
+  .person__links { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
+  .person__links a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; }
+
+  @media (min-width: 30rem) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @media (min-width: 64rem) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+</style>