diff --git a/PanTS-Demo/public/headshots/harleen-sachdev.webp b/PanTS-Demo/public/headshots/harleen-sachdev.webp new file mode 100644 index 00000000..1a5e92b1 Binary files /dev/null and b/PanTS-Demo/public/headshots/harleen-sachdev.webp differ diff --git a/PanTS-Demo/public/headshots/ishita-ahelleya.webp b/PanTS-Demo/public/headshots/ishita-ahelleya.webp new file mode 100644 index 00000000..4a8f788c Binary files /dev/null and b/PanTS-Demo/public/headshots/ishita-ahelleya.webp differ diff --git a/PanTS-Demo/src/routes/TeamPage/TeamPage.module.css b/PanTS-Demo/src/routes/TeamPage/TeamPage.module.css index 906250d1..c4f31be8 100644 --- a/PanTS-Demo/src/routes/TeamPage/TeamPage.module.css +++ b/PanTS-Demo/src/routes/TeamPage/TeamPage.module.css @@ -7,9 +7,11 @@ .card:hover, .card:focus-within { background: #fff; border-color: rgba(15,23,42,.07); box-shadow: 0 22px 48px rgba(15,23,42,.08); transform: translateY(-4px); } .avatarRing { width: 112px; height: 112px; border-radius: 50%; border: 2px solid #002d72; background: #fff; padding: 4px; box-sizing: border-box; flex-shrink: 0; } .avatarInner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #f5f7fa; display: flex; align-items: flex-end; justify-content: center; } -.avatarImg { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } -.card:hover .avatarImg, .card:focus-within .avatarImg { transform: scale(1.07); } +.avatarImg { width: 100%; height: 100%; object-fit: cover; transform: var(--headshot-framing, scale(1)); transition: transform .8s; } +.card:hover .avatarImg, .card:focus-within .avatarImg { transform: var(--headshot-framing, scale(1)) scale(1.07); } .avatarPortrait { --portrait-position: translate(3.646851771069883%, 6.996506784392313%); transform: var(--portrait-position) scale(1.25); transform-origin: center; } +.avatarImg[src="/headshots/ishita-ahelleya.webp"] { --headshot-framing: translate(-3%, -14%) scale(1.5); } +.avatarImg[src="/headshots/harleen-sachdev.webp"] { --headshot-framing: translate(-2%, 1%) scale(1.04); } .card:hover .avatarPortrait, .card:focus-within .avatarPortrait { transform: var(--portrait-position) scale(1.34); } .memberName { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #0f172a; margin-bottom: 6px; } .memberRole { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #6b7285; } @@ -27,3 +29,7 @@ @media (max-width: 380px) { .grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .card, .avatarImg { transition: none; } .card:hover, .card:focus-within, .card:hover .avatarImg, .card:focus-within .avatarImg { transform: none; } } @media (prefers-reduced-motion: reduce) { .avatarPortrait, .card:hover .avatarPortrait, .card:focus-within .avatarPortrait { transform: var(--portrait-position) scale(1.25); } } +@media (prefers-reduced-motion: reduce) { + .card .avatarImg[src="/headshots/ishita-ahelleya.webp"], + .card .avatarImg[src="/headshots/harleen-sachdev.webp"] { transform: var(--headshot-framing); } +} diff --git a/PanTS-Demo/src/routes/TeamPage/members.ts b/PanTS-Demo/src/routes/TeamPage/members.ts index 4a482821..42a7a57c 100644 --- a/PanTS-Demo/src/routes/TeamPage/members.ts +++ b/PanTS-Demo/src/routes/TeamPage/members.ts @@ -68,6 +68,14 @@ export const MEMBERS: Member[] = [ portrait: true, links: { linkedin: "https://linkedin.com/in/ahmad-durre-rehman-121577382" }, }, - { name: "Ishita Ahelleya", role: "Core Contributor" }, - { name: "Harleen Sachdev", role: "Core Contributor" }, + { + name: "Ishita Ahelleya", + role: "Core Contributor", + photo: "/headshots/ishita-ahelleya.webp", + }, + { + name: "Harleen Sachdev", + role: "Core Contributor", + photo: "/headshots/harleen-sachdev.webp", + }, ]; diff --git a/PanTS-Demo/src/test/teamPage.test.tsx b/PanTS-Demo/src/test/teamPage.test.tsx index 26d19313..919dfabd 100644 --- a/PanTS-Demo/src/test/teamPage.test.tsx +++ b/PanTS-Demo/src/test/teamPage.test.tsx @@ -72,6 +72,10 @@ describe("team page", () => { expect(screen.getByAltText(name)).toHaveAttribute("src", "/headshots/ahmad-durre-rehman.jpg?v=20261013"); } else if (name === "Yusuf Abdulkadir") { expect(screen.getByAltText(name)).toHaveAttribute("src", "/headshots/yusuf-abdulkadir.webp"); + } else if (name === "Ishita Ahelleya") { + expect(screen.getByAltText(name)).toHaveAttribute("src", "/headshots/ishita-ahelleya.webp"); + } else if (name === "Harleen Sachdev") { + expect(screen.getByAltText(name)).toHaveAttribute("src", "/headshots/harleen-sachdev.webp"); } else { expect(screen.queryByAltText(name)).not.toBeInTheDocument(); }