Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic style #21

Merged
merged 31 commits into from
Jan 12, 2024
Merged

Basic style #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
af59359
Changed the about us and the committee function names and order to ma…
sajochems Nov 23, 2023
52a6d8a
Align columns properly in About us
sajochems Nov 23, 2023
c956085
Fixed the font issue
sajochems Nov 27, 2023
c78354c
Added numbers component
sajochems Nov 27, 2023
d131aec
Changed What, Who and When text
sajochems Nov 27, 2023
b602606
changed a link from the old repo to the new repo
sajochems Nov 27, 2023
4e4043e
implement bare bones of the banner and timeline
Dec 1, 2023
9b1f1da
fix colors, add icons, remove button
Dec 1, 2023
122bbdc
implement mobile view for timeline
Dec 1, 2023
b635220
Text changes
sajochems Dec 1, 2023
e23e0f2
Changed sponsors style
sajochems Dec 2, 2023
1168cc0
Added black fading block to the left of pictures
sajochems Dec 4, 2023
c24fbdf
Added a block on the right side, does not work with resizing yet
sajochems Dec 4, 2023
1d1db7a
fixed position problems
sajochems Dec 4, 2023
e18a879
fixed text alignment photos
sajochems Dec 4, 2023
b32454b
finish mobile timeline styling
Dec 6, 2023
08c9ad9
add navigation and faq
Dec 15, 2023
4481224
Merge branch 'implement-banner-and-timeline' into basic-style
MaritRadder Dec 15, 2023
28bcf96
Merge pull request #20 from WISVCH/basic-style
MaritRadder Dec 15, 2023
ec815f3
make gradient
Dec 15, 2023
f1efaf1
Fixed photo functionality and appearance, removed duplicate discord b…
sajochems Dec 28, 2023
af29d99
footer, meet the committee, timetable and many more
Jan 10, 2024
c104961
mobile fixes for footer, comittee and faq
Jan 11, 2024
4b03ecb
add images
Jan 11, 2024
56ed08f
fix timer
Jan 11, 2024
83d93f1
Merge remote-tracking branch 'origin/implement-banner-and-timeline' i…
sajochems Jan 11, 2024
584428f
Added Robert
sajochems Jan 11, 2024
6c71d19
Added Marijn and Merle also bug fixes
sajochems Jan 11, 2024
8caee6e
bug fixes
sajochems Jan 11, 2024
ec1a4cf
Added Simon
sajochems Jan 11, 2024
3be8e9a
fix discord button, remove empty sponsors, fix links
Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions data/sponsors.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading