Skip to content

Commit

Permalink
Merge pull request #21 from WISVCH/basic-style
Browse files Browse the repository at this point in the history 
Merge new style
  • Loading branch information
@MaritRadder
MaritRadder authored Jan 12, 2024
2 parents ce71dae + 3be8e9a commit 2a9c47c
Show file tree
Hide file tree
Showing 47 changed files with 1,153 additions and 320 deletions.
10 changes: 0 additions & 10 deletions data/sponsors.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,5 @@
"title": "X TU Delft"
}
]
},
{
"type": "primary",
"title": "Primary",
"items": []
},
{
"type": "secondary",
"title": "Supporting",
"items": []
}
]
43 changes: 26 additions & 17 deletions data/timeline.json
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,60 @@
{
"saturday": [
{
"time": "12:00",
"id": "sa1",
"time": "12:00 - 13:00",
"name": "Walk-in",
"description": "We will welcome you in hall X1 of TU Delft X! You then have a bit of time to get settled in before the hacking starts."
"description": "More information will follow soon..."
},
{
"time": "13:00",
"name": "Opening Presentation",
"description": "Here you will finally be introduced to the challenges, and get other important information about the event. If you don't have a team yet, you can form it here."
"id": "sa2",
"time": "13:00 - 14:00",
"name": "Opening",
"description": "More information will follow soon..."
},
{
"time": "14:00",
"name": "Start Hacking!",
"description": "After the challenges have been divided you can now get started on your project. We are excited to see what you will come up with!"
"id": "sa3",
"time": "14:00 - 00:00",
"name": "Hacking!",
"description": "More information will follow soon..."
},
{
"id": "sa4",
"time": "18:30 - 20:00",
"name": "Dinner",
"description": ""
}
],
"sunday": [
{
"id": "su1",
"time": "00:00 - 14:00",
"name": "Hacking!",
"description": "More information will follow soon..."
},
{
"id": "su2",
"time": "8:00 - 10:00",
"name": "Breakfast",
"description": ""
},
{
"id": "su3",
"time": "12:30 - 14:30",
"name": "Lunch",
"description": ""
},
{
"time": "14:00",
"name": "Hacking Ends",
"description": "It has been 24 hours since we started! Now it's time to pitch your project to the jury."
},
{
"time": "14:30",
"id": "su4",
"time": "14:30 - 16:00",
"name": "Networking Drinks",
"description": "Talk to your fellow hackers at the drinks after the hacking has ended."
"description": "More information will follow soon..."
},
{
"time": "± 16:00",
"id": "su5",
"time": "16:00 - 17:00",
"name": "Award Ceremony",
"description": "We have a lot of prizes to award here, maybe to you?"
"description": "More information will follow soon..."
}
]
}
1 change: 1 addition & 0 deletions src/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ $breakpoints: (
@content;
}
}

3 changes: 2 additions & 1 deletion src/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
$background-color: #002E78;
$primary-color: #389EE9;
$primary-color: #84C1EE;
$primary-color-darker: #389EE9;
$secondary-color: #DB00FF;
$tu-color: #00a6d6;
$discord-color: #7289da;
Expand Down
48 changes: 19 additions & 29 deletions src/components/about/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,32 @@
import { h, FunctionalComponent } from "preact";
import { faTicket } from "@fortawesome/free-solid-svg-icons";
import { faDiscord } from "@fortawesome/free-brands-svg-icons";

import { Icon } from "/src/components";

import * as style from "./style.scss";

/**
* Renders the about section.
* Renders the about section.
*/
export const About: FunctionalComponent = () => (
<section class={style.about}>
<section class={style.about} id="aboutus">
<h2>About us</h2>
<p>
Join us on May 25th and May 26th in this all-inclusive 24 hour
hackathon where you solve fun challenges provided by our partner
companies, win prizes, and have a good time!
</p>
<p>
Tickets are not available yet but check back here soon!
</p>
<div>
{/* <a
class={style.tickets}
href="https://forms.gle/VmVWSof6tLyaVyBB8"
target="_blank"
>
<Icon icon={faTicket} pad />
Sign up for the waiting list!
</a> */}
<a
class={style.discord}
href="https://discord.gg/rB2ucUaFnc"
target="_blank"
>
<Icon icon={faDiscord} pad />
Join Our Discord!
</a>
<div class={style.columns}>
<div class={style.column}>
<h3>What?</h3>
<p>
Embark on an exciting journey with Hack to the Future, a fully inclusive 24-hour hackathon experience. Immerse yourself in a dynamic environment where participants take on entertaining challenges presented by our amazing partner companies. Beyond the thrill of problem-solving, the event offers the chance to win exciting prizes and guarantees a good time for all involved.
</p>
<h3>Who?</h3>
<p>
Any current university student is welcome! Whether you're a beginner or an experienced individual, the hackathon welcomes all levels of expertise. Partner companies provide challenges for participants to solve. They foster a collaborative environment where students can showcase their skills and creativity.
</p>
</div>
<div class={style.column}>
<h3>When?</h3>
<p>
Mark your calendars for May 25th and May 26th as we invite you to join us at TU Delft X for an exhilarating two-day event. The excitement kicks off on Saturday morning, extending all the way through Sunday evening. To enhance your experience, we've got dinner covered, and sleeping over at the venue is an option. Across these two days, participants will have a dedicated 24 hours to collaboratively tackle and solve a challenging case.
</p>
</div>
</div>
</section>
);
37 changes: 36 additions & 1 deletion src/components/about/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@import "./src/variables";

.about {
margin-bottom: 32px;
margin-bottom: 32px;


h2 {
color: $primary-color;
Expand All @@ -16,8 +17,42 @@
padding-left: 2px;
}

h3 {
font-family: "Krona-One";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
margin: 0;
padding-left: 2px;
}

.columns {
display: flex;
justify-content: space-between;
width: 100%;
}

.column {
flex: 1;
display: flex;
flex-direction: column;
text-align: left;
padding: 20px;
justify-content: flex-start;
}


p {
margin: 8px;
margin-bottom: 50px;

font-family: "Krona-One";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;

a {
color: $primary-color;
Expand Down
142 changes: 108 additions & 34 deletions src/components/committee/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,126 @@ import { h, FunctionalComponent } from "preact";

import * as style from "./style.scss";

const picture = new URL(
"/static/committee.png?as=webp&width=1200",
const Marjolein = new URL(
"/static/members/Marjolein.jpg?as=webp",
import.meta.url
);

const Scott = new URL(
"/static/members/Scott.jpg?as=webp",
import.meta.url
);

const Marit = new URL(
"/static/members/Marit.jpg?as=webp",
import.meta.url
);

const Robert = new URL(
"/static/members/Robert.jpg?as=webp",
import.meta.url
);

const Merle = new URL(
"/static/members/Merle.jpg?as=webp",
import.meta.url
);

const Marijn = new URL(
"/static/members/Marijn.jpg?as=webp",
import.meta.url
);

const Simon = new URL(
"/static/members/Simon.jpg?as=webp",
import.meta.url
);



/**
* Renders the committee section.
*/
export const Committee: FunctionalComponent = () => (
<section class={style.container}>
<section>
{/* <div class={style.image}>
<img src={picture as any} alt="HackDelft Committee" />
</div> */}
<div class={style.committee}>
<h2>Meet The Committee</h2>
{/* <h3>From left to right</h3> */}
<table>
<tr>
<th>The Chair</th>
<td>Marit Radder</td>
</tr>
<tr>
<th>The Secretary</th>
<td>Marjolein van den Berghe</td>
</tr>
<tr>
<th>The Treasurer</th>
<td>Merle de Jong</td>
</tr>
<tr>
<th>The Head of Logistics</th>
<td>Marijn van der Tuin</td>
</tr>
<tr>
<th>The Commissioner of Promotional Affairs</th>
<td>Simon Deuten</td>
</tr>
<tr>
<th>The Head of Acquisition</th>
<td>Scott Jochems</td>
</tr>
<tr>
<th>The Qualitate Qua</th>
<td>Robert van Dijk</td>
</tr>
</table>
<div class={style.container}>
<div class={style.left}>
<div class={style.person}>
<div class={style.polygon}>
<img src={Marit as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Chair</p>
<p class={style.name}>Marit Radder</p>
</div>
</div>
<div class={style.person}>
<div class={style.polygon}>
<img src={Marjolein as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Secretary</p>
<p class={style.name}>Marjolein van der Berghe</p>
</div>
</div>
<div class={style.person}>
<div class={style.polygon}>
<img src={Merle as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Treasure</p>
<p class={style.name}>Merle de Jong</p>
</div>
</div>
</div>
<div class={style.right}>
<div class={style.person}>
<div>
<p class={style.function}>Logistics</p>
<p class={style.name}>Marijn van der Tuin</p>
</div>
<div class={style.polygon}>
<img src={Marijn as any} alt="HackDelft Committee" />
</div>
</div>

<div class={style.person}>
<div>
<p class={style.function}>Promotion</p>
<p class={style.name}>Simon Deuten</p>
</div>
<div class={style.polygon}>
<img src={Simon as any} alt="HackDelft Committee" />
</div>
</div>

<div class={style.person}>
<div>
<p class={style.function}>Acquisition</p>
<p class={style.name}>Scott Jochems</p>
</div>
<div class={style.polygon}>
<img src={Scott as any} alt="HackDelft Committee" />
</div>
</div>
</div>
<div class={style.middle}>
<div class={style.person}>
<div class={style.polygon}>
<img src={Robert as any} alt="HackDelft Committee" />
</div>
<div>
<p class={style.function}>Qualitate Qua</p>
<p class={style.name}>Robert van Dijk</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
Loading

0 comments on commit 2a9c47c

Please sign in to comment.