Skip to content

Commit 4a45fa2

Browse files
saumilthecodesaumilthecode
committed
competition update
1 parent e4b860a commit 4a45fa2

File tree

4 files changed

+145
-2
lines changed

4 files changed

+145
-2
lines changed

‎public/og-image.webp‎

115 KB
Loading

‎src/components/CompetitionCard.astro‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
---
2+
const Competitions = [
3+
{
4+
name: "Swift Explorers Singapore 2024",
5+
image: "https://cloud-fu9r7fufm-hack-club-bot.vercel.app/0aboutbbss.webp",
6+
description: "In 2024, Saumil, Zenneth, Ethan, Daivik and Kevin participated in the Swift Explorers Singapore 2024 programme. From the programme they learned the fundamental of using Swift to create a experience for anyone. Check out their projects Recycler and About-BBSS.",
7+
projectLink: "https://dev.bbsshack.club/projects",
8+
linkType: "website"
9+
},
10+
{
11+
name: "National Youth Tech Championships 2024",
12+
image: "https://cloud-5hnwjfoa6-hack-club-bot.vercel.app/0nytc.jpg",
13+
description: "In mid 2024 Saumil, Zenneth, Ethan and Naung Phone competed in NYTC. Although they didn't win they did learn a lot about Machine Learning Models as well as how to use python for the Tello Drone platform. Check out their team introduction ↓",
14+
projectLink: "https://www.youtube.com/watch?v=rDZHAjA3ZVk",
15+
linkType: "youtube"
16+
},
17+
{
18+
name: "Grey Cat The Flag '24 CTF",
19+
image: "https://cloud-1xr0k2g41-hack-club-bot.vercel.app/0scr-20240425-qnwt.png",
20+
description: "Grey Cat The Flag was a CTF that Saumil, Zenneth, Ethan, Daivik and Naung Phone participated in. Although they didn't manage to win anything since it was their first CTF, they emerged 269th out of the 407 non-zero scored teams! Read their writeup ↓",
21+
projectLink: "https://github.com/saumilthecode/A-writeup-of-sorts-greycattheflag",
22+
linkType: "github"
23+
},
24+
{
25+
name: "DSTA BrainHack TIL-AI 2024",
26+
image: "https://cloud-lgnf35ovk-hack-club-bot.vercel.app/0clipboard-image-1.png",
27+
description: "BrainHack TIl-AI was a competition and learning experience about AI and Machine Learning that Saumil, Ethan, Zenneth, Daivik and Naung Phone participated in. Through this competition, they learned how to train ml models through the Vertex AI GCP platform. Find out more ↓ ",
28+
projectLink: "https://www.dstabrainhack.com/activities/til-ai",
29+
linkType: "website"
30+
}
31+
];
32+
---
33+
<!-- Font Awesome stylesheet link -->
34+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
35+
36+
<!-- Team Section -->
37+
<section class="team">
38+
<section class="competitions">
39+
<div class="header">
40+
<h1 style="font-size:10vw; margin-bottom: 20px;">Competitions</h1>
41+
</div>
42+
<h6 style="font-size:smaller; margin-top: 20px;">
43+
Since we're a completely student-run interest group, we are open to you joining any competitions that fit your skills and interests. Let us know how we can support you!
44+
</h6>
45+
</section>
46+
<div class="competition-grid">
47+
{Competitions.map((competition) => (
48+
<div class="competition-entry">
49+
<img src={competition.image} alt={`${competition.name} logo`} />
50+
<h3>{competition.name}</h3>
51+
<p class="description">{competition.description}</p>
52+
53+
<div class="project-link">
54+
{competition.linkType === "github" && (
55+
<a href={competition.projectLink} target="_blank" class="project-btn">
56+
<i class="fa fa-github"></i> View Project
57+
</a>
58+
)}
59+
{competition.linkType === "youtube" && (
60+
<a href={competition.projectLink} target="_blank" class="project-btn">
61+
<i class="fa fa-youtube"></i> Watch Video
62+
</a>
63+
)}
64+
{competition.linkType === "website" && (
65+
<a href={competition.projectLink} target="_blank" class="project-btn">
66+
<i class="fa fa-globe"></i> Visit Website
67+
</a>
68+
)}
69+
</div>
70+
</div>
71+
))}
72+
</div>
73+
74+
<style>
75+
.header {
76+
text-align: center;
77+
font-size: 10vw;
78+
margin-top: 1rem;
79+
}
80+
81+
.competitions {
82+
text-align: center;
83+
padding: 2rem;
84+
}
85+
86+
.competition-grid {
87+
display: flex;
88+
gap: 2rem; /* Increased gap for larger spacing */
89+
flex-wrap: wrap;
90+
justify-content: center; /* Center align items */
91+
}
92+
93+
.competition-entry {
94+
max-width: 300px; /* Increased max width */
95+
padding: 1.5rem; /* Increased padding */
96+
border-radius: 10px;
97+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
98+
text-align: center;
99+
}
100+
101+
.competition-entry img {
102+
width: 100%;
103+
max-height: 180px; /* Optional: Set a max height */
104+
object-fit: cover;
105+
border-radius: 10px;
106+
margin-bottom: 0.5rem;
107+
}
108+
109+
.description {
110+
font-size: 0.9rem;
111+
margin: 0.5rem 0;
112+
}
113+
114+
.project-btn {
115+
display: inline-block;
116+
padding: 0.5rem;
117+
/* color: #333; */
118+
text-decoration: green wavy underline;
119+
font-size: 1.2rem;
120+
}
121+
122+
/* Responsive adjustments */
123+
@media (max-width: 768px) {
124+
.competition-grid {
125+
flex-direction: column; /* Stack items vertically on smaller screens */
126+
gap: 1rem;
127+
}
128+
.competition-entry {
129+
max-width: 100%; /* Make each competition take full width */
130+
}
131+
.description {
132+
font-size: 0.8rem;
133+
}
134+
}
135+
</style>

‎src/components/core/HeadSEO.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { HeadSEOProps } from "@/lib/types";
1212
const canonicalURL = new URL(Astro.url);
1313
1414
if (Astro.props.ogImage === undefined) {
15-
Astro.props.ogImage = new URL("og-image.jpg", canonicalURL);
15+
Astro.props.ogImage = new URL("og-image.webp", canonicalURL);
1616
}
1717
1818
const { title, description, ogImage } = Astro.props as HeadSEOProps;

‎src/pages/competition.astro‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
33
// import Hero from "@/components/home/hero.astro";
44
// import CallToAction from "@/components/home/CallToAction.astro";
55
// import Entice from "@/components/home/entice.astro";
6+
import CompetitionCard from "@/components/CompetitionCard.astro";
67
---
78

8-
<BaseLayout title="BBSS Hack Club" description="Official website of THE Hack Club in BBSS." />
9+
<BaseLayout
10+
title="BBSS Hack Club"
11+
description="Official website of THE Hack Club in BBSS."
12+
>
13+
<CompetitionCard></CompetitionCard>
14+
15+
</BaseLayout>
16+

0 commit comments

Comments
 (0)