Skip to content

Commit a07e480

Browse files
phthallophthallo
committed
minor ui updates
1 parent c05a216 commit a07e480

File tree

3 files changed

+50
-33
lines changed

3 files changed

+50
-33
lines changed

‎app/award/page.tsx‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function FormattedProject({project, index}: {project: any, index: number} ){
2525
<h2 className = "text-xl">{project.name}</h2>
2626
<div className = "flex flex-col md:flex-row w-full justify-between text-sm">
2727
<a target = "_blank" href = {project.code_url} className = "underline">Code URL</a>
28-
<a target = "_blank" href = {project.playable_url} className = "underline">Playable URL</a>
28+
<a target = "_blank" href = {project.playable_url} className = "underline">Demo URL</a>
2929
</div>
3030
<div className = "grow flex-1 h-full">{project.description}</div>
3131
<small className = "flex flex-col md:flex-row justify-between">
@@ -98,30 +98,36 @@ params,
9898
return (
9999
<div className="px-6 lg:px-32 mb-16 pt-16 h-full relative">
100100
<Link href="/" className="absolute text-2xl font-bold flex gap-2 transition-all items-center hover:gap-4 cursor-pointer mb-4"><FaArrowLeftLong /> Athena</Link>
101-
<div className = "flex flex-col items-center gap-4">
102-
<img className = "mt-12 md:mt-0 w-2/3 md:w-1/3" src = "https://hc-cdn.hel1.your-objectstorage.com/s/v3/6ea8e84acae378a03d5b5e788a780a853aae4d21_outlined_logo__alt_-cropped.svg"/>
103-
<div className = "md:w-2/3 mx-auto flex flex-col gap-4">
104-
<div className = "text-justify bg-red/10 border border-red/30 p-4 rounded-sm gap-2 items-center *:max-sm:text-sm">
105-
<p>The <a target = "_blank" href = "https://award.athena.hackclub.com" className = "font-bold" >Athena Award</a> was a six month long program ran by Hack Club where girls and nonbinary students (ages 13-18) spent 30 (often more!) hours coding three technical projects. By earning this certification, students have proven themselves as technicaly adept and familiar with industry-standard software development platforms.</p>
106-
<br/>
107-
<p>Projects needed to be shipped - defined as deployed and experiencable by others - and open source. All submissions were tested, evaluated and approved by members of the Athena team.</p>
108-
<p>For further questions, contact <b>athena@hackclub.com</b>.</p>
109-
<br/>
110-
<p className = "font-bold">Enter the code at the bottom left of a certification to verify its legitimacy.</p>
101+
102+
<div className = "flex lg:flex-row flex-col gap-10 *:lg:basis-1/2 transition-all duration-300">
103+
<div className = "flex flex-col items-start gap-4 overflow-hidden grow">
104+
<img className = "mt-12 md:mt-0 w-2/3 lg:w-4/12 mx-auto" src = "https://hc-cdn.hel1.your-objectstorage.com/s/v3/6ea8e84acae378a03d5b5e788a780a853aae4d21_outlined_logo__alt_-cropped.svg"/>
105+
<div className = "flex flex-col gap-4">
106+
<div className = "text-justify bg-red/10 border border-red/30 p-4 rounded-sm gap-2 items-center *:max-sm:text-sm text-base">
107+
<p>The <a target = "_blank" href = "https://award.athena.hackclub.com" className = "font-bold" >Athena Award</a> was a six month long program ran by Hack Club where girls and nonbinary students (ages 13-18) spent 30 (often more!) hours coding three technical projects. By earning this certification, students have proven themselves as technicaly adept and familiar with industry-standard software development platforms.</p>
108+
<br/>
109+
<p>Projects needed to be shipped - defined as deployed and experiencable by others - and open source. All submissions were tested, evaluated and approved by members of the Athena team.</p>
110+
<p>For further questions, contact <b>athena@hackclub.com</b>.</p>
111+
<br/>
112+
<p className = "font-bold">Enter the code at the bottom left of a certification to verify its legitimacy.</p>
113+
</div>
114+
<form className = "flex flex-row gap-4 flex-wrap items-center *:p-2" action={submitForm}>
115+
Code:
116+
<input name="id" required className = "rounded-sm grow border border-red/20" defaultValue={id ?? ""}></input>
117+
<input type="submit" value="Verify" className = "grow border border-red/20 bg-red/70 hover:bg-red/90 text-white rounded-sm"/>
118+
</form>
111119
</div>
112-
<form className = "flex flex-row gap-4 flex-wrap items-center *:p-2" action={submitForm}>
113-
Code:
114-
<input name="id" required className = "rounded-sm grow border border-red/20" defaultValue={id ?? ""}></input>
115-
<input type="submit" value="Verify" className = "grow border border-red/20 bg-red/70 hover:bg-red/90 text-white rounded-sm"/>
116-
</form>
117-
{ id && profile == null &&
118-
<div className = "bg-rose-500/30 border border-rose-400/40 rounded-sm p-2 text-rose-800 flex flex-col">
120+
{ id && profile == null &&
121+
<div className = "w-full bg-rose-500/30 border border-rose-400/40 rounded-sm p-2 text-rose-800 flex flex-col">
119122
<h1 className = "text-2xl text-center">Certification not found!</h1>
120123
</div>
121124
}
125+
</div>
126+
127+
{ profile != null &&
128+
<div className = "lg:overflow-y-scroll lg:h-[85vh] border-t-2 border-b-2 border-rose-800/40 py-2">
122129
{ profile &&
123130
<div className = "flex flex-col gap-4">
124-
<hr className = "border border-gray-300"/>
125131
<div className = "text-center flex flex-col gap-4">
126132
<div className = "bg-green-400/30 border border-green-400/40 rounded-sm p-2 text-green-800 flex flex-col">
127133
<h1 className = "text-2xl">This Athena Award certification is valid!</h1>
@@ -145,15 +151,11 @@ params,
145151
</table>
146152
</div>
147153

148-
<h2 className = "text-3xl text-left">Projects</h2>
149-
<div className = "rounded-sm p-2 bg-yellow-400/30 border border-yellow-400/40">
150-
<h2 className = "text-xl">Note</h2>
151-
<p>Some projects may seem to lack information. This happens if:</p>
152-
<ul className = "list-disc list-inside">
153-
<li>The project was submitted to another Hack Club program and not directly to the Athena Award.</li>
154-
<li>The media uploaded was a video.</li>
155-
</ul>
154+
<div className = "flex flex-row items-center gap-2 relative">
155+
<h2 className = "text-3xl text-left flex flex-row gap-2 items-center">
156+
Projects</h2>
156157
</div>
158+
157159
<div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
158160
{ zipped_normal && zipped_normal.map((project: any, index: number) => {
159161
return (
@@ -169,9 +171,12 @@ params,
169171
)}
170172
</div>
171173
</div>
174+
172175
}
173-
</div>
174176
</div>
177+
}
178+
</div>
179+
175180
</div>
176181

177182
)

‎app/page.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,27 @@ export default async function Home() {
3030
</div>
3131
<Image alt="" src="/images/top-paper.png" className="h-full w-auto absolute rotate-180 top-0 left-0 opacity-25 md:opacity-100" height={800} width={800}></Image>
3232
<Image alt="" src="/images/small-vine-1.png" className="h-48 w-auto absolute top-0 left-0 opacity-25 md:opacity-100" height={800} width={800}></Image>
33+
</div>
3334

35+
<div className="col-span-full md:col-span-3 w-full h-full relative rounded-lg pb-8 p-9 bg-gradient-to-r from-[#903A42] to-[#8D2423] overflow-hidden transition">
36+
<div className="absolute inset-0 opacity-30 md:opacity-40 bg-[url('/svg/background2.svg')] pointer-events-none"></div>
37+
<div className="relative z-0 *:ml-auto h-full flex flex-col">
38+
<div className="text-lg md:text-xl font-bold text-white mb-3 text-right">The Athena Award:</div>
39+
<Image alt="Parthenon Event" src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/6ea8e84acae378a03d5b5e788a780a853aae4d21_outlinedlogoaltcropped.svg" className="max-h-[15vh] w-auto" width={1121} height={390} />
40+
<div className="text-white md:w-8/12 text-right line-clamp-4 flex-1 grow">In 2025, over 1000 Hack Clubbers started their journey to earn the Athena Award certifcation - in collaboration with MIT, Girls Who Code, and GitHub - by spending 30 hours coding on 3 technical projects.</div>
41+
<Link href="/award" className="w-full text-right text-white italic underline inline-block mt-3 text-lg underline-offset-4 decoration-transparent transition-all hover:decoration-white">Verify an Athena Award certification</Link>
42+
</div>
43+
<Image alt="" src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/315b4d8271ec9804a39feb90d0c8c0da22be2411_image.png" className="h-[100%] w-auto absolute -bottom-[2vh] -left-[20vh] opacity-25 md:opacity-75" height={800} width={800}></Image>
3444
</div>
35-
<div className="col-span-full md:col-span-full w-full h-full relative rounded-lg pb-8 p-9 bg-gradient-to-l from-[#150122] via-[#150122] to-[#2651A6] overflow-hidden transition">
36-
<div className="relative z-0">
45+
46+
<div className="col-span-full md:col-span-3 w-full h-full relative rounded-lg pb-8 p-9 bg-gradient-to-l from-[#150122] via-[#150122] to-[#2651A6] overflow-hidden transition">
47+
<div className="relative z-0 flex flex-col h-full">
3748
<div className="text-lg md:text-xl font-bold text-white mb-3 z-10">Our 2024 summit:</div>
38-
<Image alt="Ascend Event" src="https://cloud-rnls34zc7-hack-club-bot.vercel.app/0reduced-whitespace-ascend-logo.png" className="max-h-[15vh] w-auto" width={1121} height={390} />
39-
<div className="text-white md:w-3/5 line-clamp-2">Ascend was Hack Club&apos;s first-ever Days of Service Summit! Held in Los Angeles, this event brought together 50 girls and non-binary Hack Club members from across the U.S. and internationally for a hackathon hosted at SpaceX, along with a weekend filled with fun and growth. This summit became the largest teenage girl hackathon in the U.S. this year, in partnership with Girls Who Code and Kode with Klossy.</div>
49+
<Image alt="Ascend Event" src="https://cloud-rnls34zc7-hack-club-bot.vercel.app/0reduced-whitespace-ascend-logo.png" className="max-h-[15vh] w-max" width={1121} height={390} />
50+
<div className="text-white md:w-3/5 line-clamp-4 flex-1">Ascend was Hack Club&apos;s first-ever Days of Service Summit! Held in Los Angeles, this event brought together 50 girls and non-binary Hack Club members from across the U.S. and internationally for a hackathon hosted at SpaceX, along with a weekend filled with fun and growth. This summit became the largest teenage girl hackathon in the U.S. this year, in partnership with Girls Who Code and Kode with Klossy.</div>
4051
<Link href="https://ascend.hackclub.com" className="text-white italic underline inline-block mt-3 text-lg underline-offset-4 decoration-transparent transition-all hover:decoration-white">Learn more about Ascend</Link>
4152
</div>
42-
<Image alt="" src="https://ascend.hackclub.com/moon.png" className="h-[150%] w-auto absolute -top-[10vh] -right-[10vh] opacity-25 md:opacity-100" height={800} width={800}></Image>
53+
<Image alt="" src="https://ascend.hackclub.com/moon.png" className="h-[150%] w-auto absolute -top-[10vh] -right-[10vh] opacity-25" height={800} width={800}></Image>
4354
</div>
4455

4556
</div>

‎public/svg/background2.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)