Skip to content

Make author photos black and white #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lksbrssr merged 2 commits into from
Aug 4, 2026
Merged

Make author photos black and white #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44b76a9
Make author photos black and white
Aug 2, 2026
7396460
Make blog byline author photos black and white
lksbrssr Aug 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/app/authors/AuthorsTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ const TABS = [
{ id: 'alumni', label: 'Alumni' },
]

const AUTHOR_PHOTO_CLASS = 'w-full h-full object-cover object-top grayscale group-hover:scale-[1.03] transition-transform duration-500'

type Props = {
heroTitle: string
heroSubtitle: string
Expand Down Expand Up @@ -134,7 +136,7 @@ function LeaderCard({ author }: { author: typeof authors[number] }) {
<img
src={author.avatarPath}
alt={author.name}
className="w-full h-full object-cover object-top group-hover:scale-[1.03] transition-transform duration-500"
className={AUTHOR_PHOTO_CLASS}
/>
) : (
<div className="w-full h-full bg-gray-200" />
Expand Down Expand Up @@ -180,7 +182,7 @@ function AdvisorCard({ author }: { author: typeof authors[number] }) {
<img
src={author.avatarPath}
alt={author.name}
className="w-full h-full object-cover object-top group-hover:scale-[1.03] transition-transform duration-500"
className={AUTHOR_PHOTO_CLASS}
/>
) : (
<div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl font-semibold text-gray-400">
Expand Down Expand Up @@ -208,7 +210,7 @@ function AlumniCard({ author }: { author: typeof authors[number] }) {
<img
src={author.avatarPath}
alt={author.name}
className="w-full h-full object-cover object-top group-hover:scale-[1.03] transition-transform duration-500"
className={AUTHOR_PHOTO_CLASS}
/>
) : (
<div className="w-full h-full bg-gray-200" />
Expand Down
8 changes: 4 additions & 4 deletions src/components/AuthorCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function AuthorCard({ slug, variant = 'default' }: AuthorCardProp
className="inline-flex items-center gap-4 py-3 px-5 rounded-2xl bg-gray-50 hover:bg-gray-100 border border-gray-100 hover:border-gray-200 transition-all no-underline group"
>
{avatar ? (
<img src={avatar} alt={name} className="w-12 h-12 rounded-full object-cover shrink-0 ring-2 ring-white shadow-sm" />
<img src={avatar} alt={name} className="w-12 h-12 rounded-full object-cover grayscale shrink-0 ring-2 ring-white shadow-sm" />
) : (
<span className="w-12 h-12 rounded-full bg-gray-200 shrink-0 ring-2 ring-white shadow-sm flex items-center justify-center text-gray-400 text-lg font-medium">
{name.charAt(0)}
Expand All @@ -43,7 +43,7 @@ export default function AuthorCard({ slug, variant = 'default' }: AuthorCardProp
className="inline-flex items-center gap-3 py-2.5 px-4 rounded-xl bg-gray-50 hover:bg-gray-100 border border-gray-100 hover:border-gray-200 transition-all no-underline group"
>
{avatar ? (
<img src={avatar} alt={name} className="w-10 h-10 rounded-full object-cover shrink-0 ring-2 ring-white shadow-sm" />
<img src={avatar} alt={name} className="w-10 h-10 rounded-full object-cover grayscale shrink-0 ring-2 ring-white shadow-sm" />
) : (
<span className="w-10 h-10 rounded-full bg-gray-200 shrink-0 ring-2 ring-white shadow-sm flex items-center justify-center text-gray-400 font-medium">
{name.charAt(0)}
Expand All @@ -64,7 +64,7 @@ export default function AuthorCard({ slug, variant = 'default' }: AuthorCardProp
className="inline-flex items-center gap-4 no-underline group"
>
{avatar ? (
<img src={avatar} alt={name} className="w-14 h-14 rounded-full object-cover shrink-0 ring-2 ring-gray-100" />
<img src={avatar} alt={name} className="w-14 h-14 rounded-full object-cover grayscale shrink-0 ring-2 ring-gray-100" />
) : (
<span className="w-14 h-14 rounded-full bg-gray-200 shrink-0 ring-2 ring-gray-100 flex items-center justify-center text-gray-400 text-xl font-medium">
{name.charAt(0)}
Expand All @@ -81,7 +81,7 @@ export default function AuthorCard({ slug, variant = 'default' }: AuthorCardProp
return (
<Link href={`/authors/${slug}`} className="inline-flex items-center gap-2.5 py-1.5 px-3 rounded-full border border-gray-200 hover:border-blue/40 transition-colors no-underline group">
{avatar ? (
<img src={avatar} alt={name} className="w-6 h-6 rounded-full object-cover shrink-0" />
<img src={avatar} alt={name} className="w-6 h-6 rounded-full object-cover grayscale shrink-0" />
) : (
<span className="w-6 h-6 rounded-full bg-gray-200 shrink-0" />
)}
Expand Down