Skip to content

Commit 71f03ee

Browse files
nchshrinchshri
committed
workshops page
1 parent 57293b0 commit 71f03ee

File tree

3 files changed

+162
-0
lines changed

3 files changed

+162
-0
lines changed

‎src/components/grid-item.astro‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
export interface Props {
3+
date: string,
4+
topic: string,
5+
leading: string,
6+
status: string,
7+
}
8+
9+
const { date, topic, leading, status } = Astro.props;
10+
---
11+
12+
<section class="relative flex w-screen border-b-[1px] border-purple-500 h-[26vh]">
13+
<div class="flex flex-col justify-between items-end border-r-[1px] h-full w-[26vw] -mt-4 text-right border-purple-500 p-4">
14+
<h2 class="text-sm leading-tight mb-2">{date}</h2>
15+
<span class="bg-purple-900 ml-3 text-white rounded-md py-1 px-5 text-sm">
16+
{status}
17+
</span>
18+
</div>
19+
20+
<div class="flex flex-col justify-center h-full pl-4">
21+
<span class="orbitron text-2xl">{topic}</span>
22+
<h2 class="text-base mt-2">{leading}</h2>
23+
</div>
24+
</section>

‎src/pages/workshops.astro‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
import "@fontsource/inter/variable.css";
3+
import ContentSection from "~/components/content-section.astro";
4+
import Spacer from "~/components/Spacer.astro";
5+
import Footer from "~/components/footer.astro";
6+
import Header from "~/components/header.astro";
7+
import "~/styles/index.css";
8+
import { WorkshopItem } from "~/types";
9+
10+
const workshopItems: Array<WorkshopItem> = [
11+
{
12+
date: "September 12, 2024",
13+
topic: "Intro to Neural Networks with PyTorch",
14+
leading: "Harmya Bhatt",
15+
status: "completed",
16+
},
17+
{
18+
date: "April 7, 2024",
19+
topic: "BERT",
20+
leading: "Brian S",
21+
status: "completed",
22+
},
23+
{
24+
date: "March 24, 2024",
25+
topic: "Transformer Architecture",
26+
leading: "Harmya Bhatt",
27+
status: "completed",
28+
},
29+
{
30+
date: "March 3, 2024",
31+
topic: "Large-Scale Training on HPC (SLURM)",
32+
leading: "Jinen Setpal",
33+
status: "completed",
34+
},
35+
{
36+
date: "February 20, 2024",
37+
topic: "CNNs and Transfer Learning",
38+
leading: "candysha",
39+
status: "completed",
40+
},
41+
{
42+
date: "February 4, 2024",
43+
topic: "Building a Basic Neural Network",
44+
leading: "Sagar Patil",
45+
status: "completed",
46+
},
47+
];
48+
49+
const { site } = Astro;
50+
const description = "ML@Purdue Website";
51+
---
52+
53+
<!DOCTYPE html>
54+
<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
55+
<head>
56+
<meta charset="utf-8" />
57+
<meta name="viewport" content="width=device-width" />
58+
<!-- <meta name="generator" content={generator} /> -->
59+
<title>ML@Purdue - Workshops</title>
60+
<meta name="description" content={description} />
61+
<meta property="og:title" content="ML@Purdue" /><meta
62+
property="og:type"
63+
content="website"
64+
/><meta property="og:description" content={description} /><meta
65+
property="og:image"
66+
content="/social.png"
67+
/><meta property="og:url" content={site} /><meta
68+
name="twitter:card"
69+
content="summary_large_image"
70+
/></head
71+
>
72+
73+
<!-- social media -->
74+
75+
<body
76+
class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
77+
>
78+
<Header fixed />
79+
<br />
80+
<article class="pt-10 mt-11 w-[90vw] max-w-[80ch]">
81+
<ContentSection id="workshops" title="WORKSHOPS">
82+
<div
83+
class="flex w-screen border-y-[1px] border-purple-500 -mt-6 py-6"
84+
>
85+
<p class="max-w-[75%] pl-8 text-sm">
86+
Sundays 6-7 PM (not every Sunday - upcoming workshops will show below)
87+
</p>
88+
</div>
89+
</ContentSection>
90+
91+
<Spacer y={150} />
92+
<ContentSection id="workshopArchive" title="ARCHIVE">
93+
<div
94+
class="flex w-screen border-y-[1px] border-purple-500 -mt-6 py-6"
95+
>
96+
<p class="max-w-[75%] pl-8 text-sm">
97+
The “Pending” Status means the event will either change or we are working on finalizing it.
98+
</p>
99+
</div>
100+
{
101+
workshopItems.map(({ date, topic, leading, status }) => (
102+
<section class="relative flex w-screen border-b-[1px] border-purple-500 -mt-4 h-[16vh]">
103+
<div class="flex flex-col justify-between items-end border-r-[1px] h-[16vh] w-[26vw] text-right border-purple-500 p-2 lg:p-4">
104+
<h2 class="text-xs lg:text-sm leading-snug mb-2">{date}</h2>
105+
<span class="bg-purple-900 ml-3 text-white rounded-md py-1 px-4 text-xs leading-snug">
106+
{status}
107+
</span>
108+
</div>
109+
110+
<div class="flex flex-col lg:justify-center pt-2 lg:pt-0 h-full pl-2 lg:pl-4">
111+
<span class="orbitron text-xl lg:text-2xl lowercase leading-tight">{topic}</span>
112+
<h2 class="text-sm lg:text-base mt-2">{leading}</h2>
113+
</div>
114+
</section>
115+
))
116+
}
117+
</ContentSection>
118+
</article>
119+
<div
120+
class="flex flex-col items-center justify-center gap-[5px] md:flex-row md:items-start md:gap-12"
121+
>
122+
<div
123+
class="mt-20 -mb-20 flex flex-col items-center text-left md:mb-0 md:items-start"
124+
>
125+
<span class="pt-4 font-semibold text-2xl">Contact Us!</span>
126+
<span class="text-sm"><b>🖂</b> [email protected]</span>
127+
</div>
128+
<Footer />
129+
</div>
130+
</body>
131+
</html>

‎src/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,10 @@ export interface ShowcaseSite {
3030
image: ImageMetadata;
3131
url: string;
3232
}
33+
34+
export interface WorkshopItem {
35+
date: string,
36+
topic: string,
37+
leading: string,
38+
status: string,
39+
}

0 commit comments

Comments
 (0)