Skip to content

Commit f550933

Browse files
CharlieLeeeCharlieLeee
authored
revamp funding part, add funder images (#2)
1 parent ddb1ad1 commit f550933

File tree

9 files changed

+181
-56
lines changed

9 files changed

+181
-56
lines changed

‎app/funding/page.tsx‎

Lines changed: 16 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,14 @@
1+
import { FunderLogo } from "@/components/funding/FunderLogo"
12
import { Badge } from "@/components/ui/badge"
23
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
4+
import fundingData from "@/data/funding.json"
35

46
export const metadata = {
57
title: "Funding | Mathis Group",
68
description: "Our funding sources and grants.",
79
}
810

911
export default function FundingPage() {
10-
const grants = [
11-
{
12-
period: "2024 - 2028",
13-
title: "SNSF Project Grant",
14-
description: "Prof. Mathis was awarded another SNSF Project Grant!",
15-
type: "Research Grant"
16-
},
17-
{
18-
period: "2022 - 2026",
19-
title: "SNSF Project Grant",
20-
description: "Prof. Mathis was awarded a SNSF Project Grant!",
21-
type: "Research Grant"
22-
},
23-
{
24-
period: "2024 - 2028",
25-
title: "PhD Fellowship - Sepideh Mamooler",
26-
description: "PhD Student Sepideh Mamooler was awarded a PhD Fellowship!",
27-
type: "Fellowship"
28-
},
29-
{
30-
period: "2022 - 2026",
31-
title: "PhD Fellowship - Haozhe Qi",
32-
description: "PhD Student Haozhe Qi was awarded a PhD Fellowship!",
33-
type: "Fellowship"
34-
},
35-
{
36-
period: "2022 - 2026",
37-
title: "Project Funding with Prof. Bosselut",
38-
description: "Profs. Mathis & Bosselut are awarded project funding!",
39-
type: "Research Grant"
40-
},
41-
{
42-
period: "2022 - 2023",
43-
title: "Microsoft Funding",
44-
description: "Prof. Mathis is awarded funding from Microsoft!",
45-
type: "Industry"
46-
},
47-
{
48-
period: "2019 - 2023",
49-
title: "Chan Zuckerberg Initiative (CZI)",
50-
description: "Prof. Mathis & Prof. M. Mathis co-awarded funding from CZI!",
51-
type: "Foundation"
52-
},
53-
{
54-
period: "2021 - 2022",
55-
title: "Kavli Foundation",
56-
description: "Prof. Mathis was awarded funding from the Kavli Foundation",
57-
type: "Foundation"
58-
}
59-
]
60-
6112
return (
6213
<div className="flex flex-col">
6314
{/* Header */}
@@ -78,12 +29,21 @@ export default function FundingPage() {
7829
<section className="py-16 lg:py-24">
7930
<div className="section-container max-w-4xl">
8031
<div className="space-y-6">
81-
{grants.map((grant, index) => (
82-
<Card key={index} className="transition-all hover:shadow-soft-lg">
32+
{fundingData.map((grant) => (
33+
<Card key={grant.id} className="group transition-all hover:shadow-soft-lg">
8334
<CardHeader>
84-
<div className="flex items-start justify-between gap-4">
85-
<div className="flex-1">
86-
<div className="mb-2 flex items-center gap-3">
35+
<div className="flex items-start gap-4">
36+
{/* Funder Logo */}
37+
<FunderLogo
38+
name={grant.funder.name}
39+
logo={grant.funder.logo}
40+
website={grant.funder.website}
41+
size="md"
42+
/>
43+
44+
{/* Grant Content */}
45+
<div className="min-w-0 flex-1">
46+
<div className="mb-2 flex flex-wrap items-center gap-2">
8747
<Badge variant="outline">{grant.period}</Badge>
8848
<Badge variant="secondary">{grant.type}</Badge>
8949
</div>

‎components/funding/FunderLogo.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
"use client"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
interface FunderLogoProps {
6+
name: string
7+
logo: string
8+
website?: string
9+
size?: "sm" | "md" | "lg"
10+
className?: string
11+
}
12+
13+
const sizeClasses = {
14+
sm: "w-36 h-20",
15+
md: "w-48 h-28 lg:w-56 lg:h-32",
16+
lg: "w-64 h-36 lg:w-72 lg:h-40",
17+
}
18+
19+
const containerPadding = {
20+
sm: "p-4",
21+
md: "p-5 lg:p-6",
22+
lg: "p-6 lg:p-8",
23+
}
24+
25+
export function FunderLogo({
26+
name,
27+
logo,
28+
website,
29+
size = "md",
30+
className,
31+
}: FunderLogoProps) {
32+
const logoElement = (
33+
<div
34+
className={cn(
35+
"relative flex items-center justify-center overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-muted/30 to-muted/60 shadow-sm transition-all duration-300",
36+
"group-hover:border-border group-hover:shadow-soft group-hover:from-muted/50 group-hover:to-muted/80",
37+
sizeClasses[size],
38+
containerPadding[size],
39+
className
40+
)}
41+
>
42+
<img
43+
src={logo}
44+
alt={`${name} logo`}
45+
className="size-full object-contain opacity-60 grayscale transition-all duration-500 ease-out group-hover:scale-105 group-hover:opacity-100 group-hover:grayscale-0"
46+
style={{ mixBlendMode: "multiply" }}
47+
/>
48+
</div>
49+
)
50+
51+
if (website) {
52+
return (
53+
<a
54+
href={website}
55+
target="_blank"
56+
rel="noopener noreferrer"
57+
className="shrink-0"
58+
aria-label={`Visit ${name} website`}
59+
onClick={(e) => e.stopPropagation()}
60+
>
61+
{logoElement}
62+
</a>
63+
)
64+
}
65+
66+
return <div className="shrink-0">{logoElement}</div>
67+
}

‎data/funding.json‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
[
2+
{
3+
"id": "snsf-2024",
4+
"period": "2024 - 2028",
5+
"title": "SNSF Project Grant",
6+
"description": "Prof. Mathis was awarded another SNSF Project Grant!",
7+
"type": "Research Grant",
8+
"funder": {
9+
"name": "Swiss National Science Foundation",
10+
"logo": "/images/funders/snf_logo.webp",
11+
"website": "https://www.snf.ch"
12+
}
13+
},
14+
{
15+
"id": "snsf-2022",
16+
"period": "2022 - 2026",
17+
"title": "SNSF Project Grant",
18+
"description": "Prof. Mathis was awarded a SNSF Project Grant!",
19+
"type": "Research Grant",
20+
"funder": {
21+
"name": "Swiss National Science Foundation",
22+
"logo": "/images/funders/snf_logo.webp",
23+
"website": "https://www.snf.ch"
24+
}
25+
},
26+
{
27+
"id": "fellowship-sepideh",
28+
"period": "2024 - 2028",
29+
"title": "PhD Fellowship - Sepideh Mamooler",
30+
"description": "PhD Student Sepideh Mamooler was awarded a PhD Fellowship!",
31+
"type": "Fellowship",
32+
"funder": {
33+
"name": "Boehringer Ingelheim Fonds",
34+
"logo": "/images/funders/bif_logo.webp",
35+
"website": "https://bifonds.de/"
36+
}
37+
},
38+
{
39+
"id": "fellowship-haozhe",
40+
"period": "2022 - 2026",
41+
"title": "PhD Fellowship - Haozhe Qi",
42+
"description": "PhD Student Haozhe Qi was awarded a PhD Fellowship!",
43+
"type": "Fellowship",
44+
"funder": {
45+
"name": "Boehringer Ingelheim Fonds",
46+
"logo": "/images/funders/bif_logo.webp",
47+
"website": "https://bifonds.de/"
48+
}
49+
},
50+
{
51+
"id": "bosselut-collab",
52+
"period": "2022 - 2026",
53+
"title": "Project Funding with Prof. Bosselut",
54+
"description": "Profs. Mathis & Bosselut are awarded project funding!",
55+
"type": "Research Grant",
56+
"funder": {
57+
"name": "EPFL Center for Imaging",
58+
"logo": "/images/funders/epfl.webp",
59+
"website": "https://imaging.epfl.ch/"
60+
}
61+
},
62+
{
63+
"id": "microsoft-2022",
64+
"period": "2022 - 2023",
65+
"title": "Microsoft Funding",
66+
"description": "Prof. Mathis is awarded funding from Microsoft!",
67+
"type": "Industry",
68+
"funder": {
69+
"name": "Microsoft",
70+
"logo": "/images/funders/microsoft-ai.webp",
71+
"website": "https://www.microsoft.com"
72+
}
73+
},
74+
{
75+
"id": "czi-2019",
76+
"period": "2019 - 2023",
77+
"title": "Chan Zuckerberg Initiative (CZI)",
78+
"description": "Prof. Mathis & Prof. M. Mathis co-awarded funding from CZI!",
79+
"type": "Foundation",
80+
"funder": {
81+
"name": "Chan Zuckerberg Initiative",
82+
"logo": "/images/funders/images.webp",
83+
"website": "https://chanzuckerberg.com"
84+
}
85+
},
86+
{
87+
"id": "kavli-2021",
88+
"period": "2021 - 2022",
89+
"title": "Kavli Foundation",
90+
"description": "Prof. Mathis was awarded funding from the Kavli Foundation",
91+
"type": "Foundation",
92+
"funder": {
93+
"name": "Kavli Foundation",
94+
"logo": "/images/funders/kavli.webp",
95+
"website": "https://www.kavlifoundation.org"
96+
}
97+
}
98+
]

‎public/images/funders/bif_logo.webp‎

13.7 KB
Loading

‎public/images/funders/epfl.webp‎

24.3 KB
Loading

‎public/images/funders/images.webp‎

3.63 KB
Loading

‎public/images/funders/kavli.webp‎

5.1 KB
Loading

‎public/images/funders/microsoft-ai.webp‎

41.8 KB
Loading

‎public/images/funders/snf_logo.webp‎

1.17 KB
Loading

0 commit comments

Comments
 (0)