diff --git a/data/timeline.json b/data/timeline.json index da96225..9183e05 100644 --- a/data/timeline.json +++ b/data/timeline.json @@ -4,19 +4,19 @@ "id": "sa1", "time": "12:00 - 13:00", "name": "Walk-in", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." + "description": "More information will follow soon..." }, { "id": "sa2", "time": "13:00 - 14:00", "name": "Opening", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + "description": "More information will follow soon..." }, { "id": "sa3", "time": "14:00 - 00:00", "name": "Hacking!", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + "description": "More information will follow soon..." }, { "id": "sa4", @@ -30,7 +30,7 @@ "id": "su1", "time": "00:00 - 14:00", "name": "Hacking!", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + "description": "More information will follow soon..." }, { "id": "su2", @@ -48,13 +48,13 @@ "id": "su4", "time": "14:30 - 16:00", "name": "Networking Drinks", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + "description": "More information will follow soon..." }, { "id": "su5", "time": "16:00 - 17:00", "name": "Award Ceremony", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + "description": "More information will follow soon..." } ] } diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index 529f33d..53670a4 100644 --- a/src/components/about/index.tsx +++ b/src/components/about/index.tsx @@ -5,7 +5,7 @@ import { Icon } from "/src/components"; import * as style from "./style.scss"; /** - * Renders the about section. + * Renders the about section. */ export const About: FunctionalComponent = () => (
diff --git a/src/components/committee/index.tsx b/src/components/committee/index.tsx index 0d64fb2..4e49855 100644 --- a/src/components/committee/index.tsx +++ b/src/components/committee/index.tsx @@ -2,52 +2,106 @@ 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 +); + + + /** * Renders the committee section. */ export const Committee: FunctionalComponent = () => ( -
+
{/*
HackDelft Committee
*/}

Meet The Committee

- {/*

From left to right

*/} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The ChairMarit Radder
The SecretaryMarjolein van den Berghe
The TreasurerMerle de Jong
The Commissioner of PromotionSimon Deuten
The Commissioner of AcquisitionScott Jochems
The Commissioner of LogisticsMarijn van der Tuin
The Qualitate QuaRobert van Dijk
+
+
+
+
+ HackDelft Committee +
+
+

Chair

+

Marit Radder

+
+
+
+
+ HackDelft Committee +
+
+

Secretary

+

Marjolein van der Berghe

+
+
+
+
+ HackDelft Committee +
+
+

Treasure

+

Merle de Jong

+
+
+
+
+
+
+

Logistics

+

Marijn van der Tuin

+
+
+ HackDelft Committee +
+
+ +
+
+

Promotion

+

Simon Deuten

+
+
+ HackDelft Committee +
+
+ +
+
+

Acquisition

+

Scott Jochems

+
+
+ HackDelft Committee +
+
+
+
+
+
+ HackDelft Committee +
+
+

Qualitate Qua

+

Robert van Dijk

+
+
+
+
); diff --git a/src/components/committee/style.scss b/src/components/committee/style.scss index 7d9a03f..3fa83dd 100644 --- a/src/components/committee/style.scss +++ b/src/components/committee/style.scss @@ -1,77 +1,134 @@ @import "./src/variables"; @import "./src/mixins"; -.container { - width: calc(100% - 16px); - display: flex; - flex-direction: column; - margin: 0 8px; -} - -.image { - flex: 2; - align-self: center; +.committee { + margin-bottom: 100px; - img { + h2 { + color: $primary-color; + margin-bottom: 0; + font-size: 38px; + font-family: "Krona-One"; + margin-bottom: 50px; width: 100%; - border: 4px solid $secondary-color; - border-radius: 12px; - box-sizing: border-box; - object-fit: cover; + text-align: center; + } -} -.committee { - flex: 3; + p { + margin: 0; + font-family: "Krona-One"; + font-size: 16px; + } - h2 { + .function { color: $primary-color; - margin-bottom: 0; } - h3 { - color: $secondary-color; - margin-top: 0; - padding: 0; + .container { + flex-direction: column; + flex-wrap: nowrap; + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 80%; + margin-left: auto; + margin-right: auto; } - table { - border-collapse: collapse; + .left, .right { + gap: 24px; + display: flex; + flex-direction: column; width: 100%; - line-height: 1.4; + text-align: left; + } + + .right { + margin-top: 24px; } - tr { - border-bottom: 1px dotted $secondary-color; + .right .person{ + flex-direction: row-reverse; + justify-content: flex-end; + } - &:last-child { - border-bottom: none; + + .middle { + width: 100%; + margin-top: 24px; + + .person { + flex-direction: row; + gap: 20px; } } - th { - float: left; - display: contents; - color: mix($primary-color, $primary-text, 80%); + img { + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + height: 100px; + width: 90px; + min-width: 90px; + object-fit: cover; + position: relative; } - td { - white-space: nowrap; + .polygon { + height: 110px; + width: 100px; + min-width: 100px; + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + background-color: $primary-color; + display: flex; + justify-content: center; + align-items: center; } -} -@include breakpoint(lg) { - .container { - flex-direction: row; - width: 100%; - margin: 0; + .person { + display: flex; + align-items: center; + gap: 20px; } +} +@include breakpoint(md) { .committee { - margin-left: 16px; + h2 { + font-size: 48px; + } + + .container { + flex-direction: row; + flex-wrap: wrap; + } - tr { - border-bottom: none; + .left { + width: 50%; + } + + .right { + width: 50%; + text-align: right; + margin-top: 0; + + .person { + justify-content: flex-end; + flex-direction: row; + } + } + + .middle { + width: 100%; + text-align: center; + margin-top: 24px; + + .person { + justify-content: center; + flex-direction: column; + align-items: center; + gap: 20px; + } } } } + diff --git a/src/components/faq/index.tsx b/src/components/faq/index.tsx index 605a0bb..a1769f4 100644 --- a/src/components/faq/index.tsx +++ b/src/components/faq/index.tsx @@ -11,7 +11,7 @@ import * as style from "./style.scss"; * @returns The FAQ section of the page. */ export const FAQ: FunctionalComponent = () => ( -
+

FAQ

    {faqData.map((q: Question, i: number) => ( diff --git a/src/components/faq/style.scss b/src/components/faq/style.scss index 0f6e55d..54a05a8 100644 --- a/src/components/faq/style.scss +++ b/src/components/faq/style.scss @@ -26,7 +26,8 @@ .icon { position: absolute; - right: 48px; + right: 16px; + top: 16px; color: $primary-color; font-size: 24px; } @@ -64,8 +65,12 @@ } } -@include breakpoint(sm) { +@include breakpoint(md) { .faq { border-radius: 6px; + + .icon { + top: unset + } } } diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index 2ad0d57..fc63539 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -9,22 +9,35 @@ import * as style from "./style.scss"; /** * Renders the footer of the site. */ -export const Footer: FunctionalComponent = () => ( - -); +export const Footer: FunctionalComponent = () => { + const scrollToDiv = (target: any) => { + if (document.getElementById(target)) { + window.scrollTo({ top: document.getElementById(target).offsetTop }) + } + } + + return ( + + ); +} \ No newline at end of file diff --git a/src/components/footer/style.scss b/src/components/footer/style.scss index d4f9a14..7625602 100644 --- a/src/components/footer/style.scss +++ b/src/components/footer/style.scss @@ -1,16 +1,48 @@ @import "./src/variables"; +@import "./src/mixins"; + .footer { display: flex; - padding-bottom: 8px; - width: 100%; - justify-content: end; + flex-direction: column; + justify-content: center; + margin-bottom: 20px; + gap: 16px; + + .container { + display: flex; + width: 80%; + margin-left: auto; + margin-right: auto; + flex-direction: column; + gap: 16px; + } + + p { + color: $primary-color; + font-family: "Krona-One"; + font-size: 16px; + margin: 0; + } - * { - color: $secondary-color; + a { + font-family: "Krona-One"; + font-size: 16px; + text-decoration: none; + color: #fff; + } - &:hover { - color: $primary-color; - } + .innercontainer { + display: flex; + flex-direction: column; + width: 30%; } } + +@include breakpoint(md) { + .footer .container { + flex-direction: row; + gap: 0; + } +} + diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 21349a8..48ad90b 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -14,7 +14,7 @@ import { Icon } from "/src/components/icon"; * Renders the header of the site. */ export const Header: FunctionalComponent = () => ( -
    +
    HackDelft
    diff --git a/src/components/header/style.scss b/src/components/header/style.scss index 73a25d6..fa1b855 100644 --- a/src/components/header/style.scss +++ b/src/components/header/style.scss @@ -6,8 +6,7 @@ flex-direction: column; height: 100vh; min-height: 100vh; - width: 100vw; - background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #05238E 100%,), url('../../../static/banner.gif'); + background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, $background-color 100%,), url('../../../static/banner.gif'); background-repeat: no-repeat; background-size: cover; diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx index 93dd550..7ca30dc 100644 --- a/src/components/navigation/index.tsx +++ b/src/components/navigation/index.tsx @@ -2,19 +2,25 @@ import * as style from "./style.scss"; import { h, FunctionalComponent } from "preact"; import { faStopwatch } from "@fortawesome/free-solid-svg-icons"; import { Icon } from "/src/components/icon"; +import { Timer } from "/src/components/timer"; +export const Navigation: FunctionalComponent = () => { -export const Navigation: FunctionalComponent = () => ( -
    -
    - About us - Timetable - Pictures - Themes - FAQ - Sponsors - Contact - 05d 05h 05m 05s -
    -
    -); \ No newline at end of file + const scrollToDiv = (target: any) => { + if (document.getElementById(target)){ + window.scrollTo({top: document.getElementById(target).offsetTop}) + } + } + return ( +
    + +
    + ); +} diff --git a/src/components/navigation/style.scss b/src/components/navigation/style.scss index e532631..ec333e3 100644 --- a/src/components/navigation/style.scss +++ b/src/components/navigation/style.scss @@ -3,8 +3,9 @@ .navigation { border: 5px solid $primary-color; + display: none; - div { + > div { display: flex; gap: 16px; font-size: 20px; @@ -12,12 +13,22 @@ .time { margin-left: auto; - margin-right: 0;; + margin-right: 0; + display: flex; + justify-content: center; + align-items: center; } .icon { color: $secondary-color; margin: 0 8px; vertical-align: middle; + display: flex; } } +} + +@include breakpoint(lg) { + .navigation { + display: block; + } } \ No newline at end of file diff --git a/src/components/numbers/style.scss b/src/components/numbers/style.scss index f6f0165..255ce6c 100644 --- a/src/components/numbers/style.scss +++ b/src/components/numbers/style.scss @@ -2,8 +2,8 @@ @import "./src/variables"; .numbers { - margin-bottom: 64px; - + margin-bottom: 64px; + // background: linear-gradient(180deg, $background-color 0%, rgba(37, 0, 67, 0.00)); h2 { color: $secondary-color; diff --git a/src/components/photos/index.tsx b/src/components/photos/index.tsx index 39218e0..0aeba11 100644 --- a/src/components/photos/index.tsx +++ b/src/components/photos/index.tsx @@ -53,7 +53,7 @@ export const Photos: FunctionalComponent = () => { }, []); return ( -
    +

    Photos

    { + const calculateTimeLeft = () => { + const difference = (new Date("2024-05-25T13:00:00")).valueOf() - (new Date()).valueOf() + + let timeLeft = {}; + + if (difference > 0) { + + const days = Math.floor(difference / (1000 * 60 * 60 * 24)); + const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((difference % (1000 * 60)) / 1000); + + setCountdown({ + days: days, + hours: hours, + minutes: minutes, + seconds: seconds, + }); + } else { + setCountdown({ + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }); + } + }; + + const [countdown, setCountdown] = useState({ + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }); + + useEffect(() => { + const interval = setInterval(calculateTimeLeft, 1000); + return () => clearInterval(interval); + }, []); + + return ( +
    +
    + {countdown.days} d + {countdown.hours} h + {countdown.minutes} m + {countdown.seconds} s +
    +
    + ); +} \ No newline at end of file diff --git a/src/components/timer/style.scss b/src/components/timer/style.scss new file mode 100644 index 0000000..952802c --- /dev/null +++ b/src/components/timer/style.scss @@ -0,0 +1,17 @@ +@import "./src/mixins"; +@import "./src/variables"; + +.timer { + display: flex; + + > div { + gap: 0; + + } + + span { + color: $secondary-color; + margin-right: 8px; + margin-left: -4px; + } +} \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 1ac01c8..6632a0c 100644 --- a/src/global.scss +++ b/src/global.scss @@ -22,6 +22,10 @@ body { position: relative; } +.gradient { + background: linear-gradient(180deg, $background-color 25%, rgba(0, 0, 0, 0.00) 100%); +} + section { margin: 0 8px; } diff --git a/src/index.tsx b/src/index.tsx index 4975a65..ac9e732 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ import { Fragment, h, render } from "preact"; +import * as style from "./global.scss"; import { About, @@ -22,8 +23,10 @@ const start = (): void => { render(
    - - +
    + + +
    diff --git a/static/members/Marit.jpg b/static/members/Marit.jpg new file mode 100644 index 0000000..d3e3863 Binary files /dev/null and b/static/members/Marit.jpg differ diff --git a/static/members/Marjolein.jpg b/static/members/Marjolein.jpg new file mode 100644 index 0000000..a19411b Binary files /dev/null and b/static/members/Marjolein.jpg differ diff --git a/static/members/Scott.jpg b/static/members/Scott.jpg new file mode 100644 index 0000000..6f5eb00 Binary files /dev/null and b/static/members/Scott.jpg differ