Skip to content

Commit 1fc0f85

Browse files
committed
homepage
2 parents dd19967 + b47f88d commit 1fc0f85

26 files changed

+291
-48
lines changed

app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function RootLayout({
4444
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
4545
<div className="relative flex flex-col h-screen">
4646
<Navbar />
47-
<main className="container mx-auto max-w-full pt-16 px-6 flex-grow">
47+
<main className="container mx-auto max-w-full pt-4 px-6 flex-grow">
4848
{children}
4949
</main>
5050
{/* <footer className="w-full flex items-center justify-center py-3">

app/page.tsx

Lines changed: 78 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,92 @@ import { Link } from "@nextui-org/link";
22
import { Snippet } from "@nextui-org/snippet";
33
import { Code } from "@nextui-org/code";
44
import { button as buttonStyles } from "@nextui-org/theme";
5-
import {Card, CardHeader } from "@nextui-org/card";
6-
import { Image } from "@nextui-org/image";
7-
8-
5+
import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
6+
import { ScrollShadow } from "@nextui-org/scroll-shadow";
7+
import Image from "next/image";
8+
// import { Image } from "@nextui-org/image";
99

1010
import { siteConfig } from "@/config/site";
1111
import { title, subtitle } from "@/components/primitives";
1212
import { GithubIcon } from "@/components/icons";
1313
import { Placeholder } from "@/components/placeholder";
1414

15+
16+
function ResearchDirection({ title, image } : {
17+
title: string,
18+
image: string,
19+
})
20+
{
21+
return (
22+
<Card className="col-span-1 aspect-square py-4"
23+
isFooterBlurred
24+
isPressable
25+
>
26+
{/* <CardBody className="relative"> */}
27+
<Image
28+
alt={title}
29+
src={image}
30+
fill
31+
style={{
32+
objectFit: 'contain',
33+
}}
34+
/>
35+
{/* </CardBody> */}
36+
<CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 before:rounded-xl rounded-large w-[calc(100%_-_8px)] shadow-small ml-1 justify-center">
37+
<h4 className="font-medium text-large">{title}</h4>
38+
</CardFooter>
39+
</Card>
40+
);
41+
}
42+
1543
export default function Home() {
1644
return (
17-
<div className="max-w-full gap-2 grid grid-cols-4 grid-rows-2 px-8">
18-
{/* <div className={`border-4 col-span-4 flex justify-center items-center h-[600px]`}>
19-
Homepage
20-
</div> */}
21-
<Placeholder text="Homepage" col_span={4} height={600} />
22-
<Placeholder text="Research Direction 1" col_span={1} />
23-
<Placeholder text="Research Direction 2" col_span={1} />
24-
<Placeholder text="Research Direction 3" col_span={1} />
25-
<Placeholder text="Research Direction 4" col_span={1} />
45+
<>
46+
<div className="p-4">
47+
<h1 className={subtitle()}>🔥 News</h1>
48+
<ScrollShadow className="w-full h-[180px] px-8">
49+
<ul>
50+
<li>
51+
Rex gave a tutorial on Machine Learning in Network Science at <Link href="https://netsci2024.com/en/schools">NetSci 2024</Link>
52+
</li>
53+
<li>
54+
Rex gave a tutorial on <Link href="https://www2024.thewebconf.org/docs/tutorial-slides/text-attributed-graph-representation-learning.pdf">Text-Attributed Graph Representation Learning: Methods, Applications, and Challenges</Link> at WebConf 2024
55+
</li>
56+
</ul>
57+
</ScrollShadow>
58+
</div>
59+
60+
<div className="p-4">
61+
<h1 className={title()}>Vision</h1>
62+
<div className="grid grid-cols-4 grid-rows-1">
63+
<div className="col-span-2 px-8">
64+
<p className="my-4">
65+
We are a group of data-driven machine learning enthusiasts who are primarily interested in building unified approaches to integrate and learn from complex real-world data. Beyond just text and images, we also build novel deep learning models that consider graphs, time series, geometry and tabular data, and use them to solve a wide array of applications in domains such as biology, medicine, chemistry, physics, neuroscience, social networks, science of science and supply chain.
66+
</p>
67+
<p>
68+
Motivated by real-world use cases, we focus on efficient and scalable techniques that combine relational reasoning, multimodal learning, geometric deep learning and foundation models. Furthermore, we are actively doing research in trustworthy deep learning to allow safe, transparent and reliable deployment of such models.
69+
</p>
70+
</div>
71+
72+
<div className="relative col-span-2">
73+
<Image
74+
alt="Woman listing to music"
75+
src="https://cs.stanford.edu/~rexy/images/word_cloud.png"
76+
fill
77+
style={{
78+
objectFit: 'contain',
79+
}} />
80+
</div>
81+
</div>
82+
</div>
83+
<div className="grid grid-cols-4 gap-4 p-8">
84+
<ResearchDirection title="Graph Representation Learning" image="/graph_learning.webp" />
85+
<ResearchDirection title="Multi-Modal Foundation Model" image="/graph_learning.webp" />
86+
<ResearchDirection title="Trustworthy AI" image="/trustworthy.webp" />
87+
<ResearchDirection title="Application" image="/application.webp" />
2688
</div>
89+
</>
2790
);
2891
}
92+
93+

app/people/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export default function AboutLayout({
44
children: React.ReactNode;
55
}) {
66
return (
7-
<section className="flex items-center justify-center gap-4 py-8 md:py-10">
8-
<div className="inline-block max-w-6xl text-center justify-center">
7+
<section className="flex items-center justify-center gap-4">
8+
<div className="inline-block max-w-full text-center justify-center">
99
{children}
1010
</div>
1111
</section>

app/people/page.tsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ export default function PeoplePage() {
2020
<Divider />
2121

2222
<ExpandPeople text={"PhD Students"} people={peopleList.phds} />
23+
<Divider />
24+
25+
<OtherExpandPerson text={"Master/Undergrad Students"} people={peopleList.masters_and_undergrad} />
2326

2427
</div>
2528
);
@@ -65,9 +68,7 @@ export function PersonCard(person: Person) {
6568
}}
6669
/>
6770
</div>
68-
6971
</div>
70-
7172
<div className="col-span-3 flex">
7273
<div className="flex flex-col">
7374
<h2 className={subtitle()}>{person.name}</h2>
@@ -82,3 +83,26 @@ export function PersonCard(person: Person) {
8283
)
8384

8485
}
86+
87+
function OtherExpandPerson(person: Person) {
88+
return (
89+
<li key={person.name}>
90+
<OtherPersonCard {...person} />
91+
</li>
92+
)
93+
}
94+
95+
export function OtherPersonCard(person: Person) {
96+
return (
97+
<Card className="py-4 border-none" shadow="none">
98+
<CardBody>
99+
<div className="grid grid-cols-4">
100+
<div className="flex flex-col">
101+
<p className="text-justify"><strong>{person.name}:</strong> {person.position}</p>
102+
</div>
103+
</div>
104+
105+
</CardBody>
106+
</Card>
107+
)
108+
}

app/publications/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export default function Publications({
44
children: React.ReactNode;
55
}) {
66
return (
7-
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8-
<div className="inline-block max-w-lg text-center justify-center">
7+
<section className="flex flex-col items-start justify-start gap-4 py-8">
8+
<div className="inline-block max-w-full text-left justify-start">
99
{children}
1010
</div>
1111
</section>

app/publications/page.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
import { title } from "@/components/primitives";
2+
import { publications } from "@/config/publications";
3+
import { ApplicationTag } from "@/components/tag";
4+
import { Chip } from "@nextui-org/chip";
25

36
export default function PublicationsPage() {
47
return (
58
<div>
6-
<h1 className={title()}>Publications</h1>
9+
<ul>
10+
{publications.map((publication) => (
11+
<li key={publication.title}>
12+
[{publication.venue}] {publication.title}. {publication.authors}.
13+
14+
<ApplicationTag />
15+
</li>
16+
))}
17+
</ul>
718
</div>
819
);
920
}

app/teaching/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export default function BlogLayout({
44
children: React.ReactNode;
55
}) {
66
return (
7-
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8-
<div className="inline-block max-w-lg text-center justify-center">
7+
<section className="flex flex-col items-center justify-center gap-4">
8+
<div className="inline-block text-left justify-center">
99
{children}
1010
</div>
1111
</section>

app/teaching/page.tsx

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,62 @@
1-
import { title } from "@/components/primitives";
1+
import { subtitle, title } from "@/components/primitives";
2+
import { Link } from "@nextui-org/link";
23

34
export default function TeachingPage() {
45
return (
5-
<div>
6-
<h1 className={title()}>Teaching</h1>
6+
<div className="flex px-8">
7+
<ul>
8+
{courses.map((course) =>
9+
<li key={course.id}>
10+
{ExpandCourse(course)}
11+
</li>
12+
)}
13+
</ul>
714
</div>
815
);
916
}
17+
18+
function ExpandCourse(course: Course) {
19+
return (
20+
<div className="p-8">
21+
<h1 className={subtitle()}>{course.id}</h1>
22+
<p>{course.intro}</p>
23+
<p className="my-4">Course Link:</p>
24+
<ul className="flex gap-4">
25+
{course.happens.map((happen) =>
26+
<li key={happen.year}>
27+
<Link href={happen.link}>[{happen.year}]</Link>
28+
</li>
29+
)}
30+
</ul>
31+
</div>
32+
)
33+
}
34+
35+
interface Course {
36+
id: string;
37+
intro: string;
38+
happens: Happen[];
39+
}
40+
41+
interface Happen {
42+
year: string,
43+
link: string
44+
}
45+
46+
const courses: Course[] = [
47+
{
48+
"id": "CPSC 483/583",
49+
"intro": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia odit culpa doloremque enim nostrum laudantium, dolor rem velit. Atque, molestias corporis porro ipsa veritatis maxime earum. Cupiditate commodi pariatur cum.",
50+
"happens": [
51+
{
52+
"year": "2023 Fall",
53+
"link": "https://graph-and-geometric-learning.github.io/cpsc483-583-website-23fall/",
54+
},
55+
{
56+
"year": "2022 Fall",
57+
"link": "https://graph-and-geometric-learning.github.io/CPSC483-website/"
58+
}
59+
60+
]
61+
}
62+
]

components/navbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ import {
2929
export const Navbar = () => {
3030
return (
3131
<NextUINavbar maxWidth="full" position="sticky">
32-
<NavbarContent className="basis-1/3 sm:basis-full" justify="start">
33-
<NavbarBrand as="li" className="gap-3 max-w-fit">
32+
<NavbarContent className="basis-1/4" justify="start">
33+
<NavbarBrand as="li" className="gap-3 w-96">
3434
<NextLink className="flex justify-start items-center gap-1" href="/">
3535
<Logo />
3636
<p className="font-bold text-inherit">Graph and Geometric Learning Lab</p>

components/tag.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
3+
import { Chip } from "@nextui-org/chip";
4+
import React from "react";
5+
6+
function Tag({ name, color }: { name: string; color: string }) {
7+
return (
8+
<Chip style={{ backgroundColor: color }}>
9+
{name}
10+
</Chip>
11+
);
12+
}
13+
14+
function ApplicationTag() {
15+
return <Tag name="Application" color="#FFAA60" />
16+
}
17+
18+
export { ApplicationTag };

0 commit comments

Comments
 (0)