diff --git a/data/sponsors.json b/data/sponsors.json index 7261e17..cdafc44 100644 --- a/data/sponsors.json +++ b/data/sponsors.json @@ -14,15 +14,5 @@ "title": "X TU Delft" } ] - }, - { - "type": "primary", - "title": "Primary", - "items": [] - }, - { - "type": "secondary", - "title": "Supporting", - "items": [] } ] diff --git a/data/timeline.json b/data/timeline.json index 8953fe5..9183e05 100644 --- a/data/timeline.json +++ b/data/timeline.json @@ -1,21 +1,25 @@ { "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": "" @@ -23,29 +27,34 @@ ], "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..." } ] } diff --git a/src/_mixins.scss b/src/_mixins.scss index 68368f8..707d3ff 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -13,3 +13,4 @@ $breakpoints: ( @content; } } + diff --git a/src/_variables.scss b/src/_variables.scss index 62bc5ad..a514a4a 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -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; diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index e989072..53670a4 100644 --- a/src/components/about/index.tsx +++ b/src/components/about/index.tsx @@ -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 = () => ( -
+

About us

-

- 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! -

-

- Tickets are not available yet but check back here soon! -

-
- {/* - - Sign up for the waiting list! - */} - - - Join Our Discord! - +
+
+

What?

+

+ 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. +

+

Who?

+

+ 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. +

+
+
+

When?

+

+ 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. +

+
); diff --git a/src/components/about/style.scss b/src/components/about/style.scss index 424bd69..757f035 100644 --- a/src/components/about/style.scss +++ b/src/components/about/style.scss @@ -2,7 +2,8 @@ @import "./src/variables"; .about { - margin-bottom: 32px; + margin-bottom: 32px; + h2 { color: $primary-color; @@ -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; diff --git a/src/components/committee/index.tsx b/src/components/committee/index.tsx index 62f1e04..e611743 100644 --- a/src/components/committee/index.tsx +++ b/src/components/committee/index.tsx @@ -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 = () => ( -
+
{/*
HackDelft Committee
*/}

Meet The Committee

- {/*

From left to right

*/} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The ChairMarit Radder
The SecretaryMarjolein van den Berghe
The TreasurerMerle de Jong
The Head of LogisticsMarijn van der Tuin
The Commissioner of Promotional AffairsSimon Deuten
The Head of AcquisitionScott Jochems
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..cc92d36 100644 --- a/src/components/committee/style.scss +++ b/src/components/committee/style.scss @@ -1,77 +1,140 @@ @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 { + .name { + margin: 0; + font-family: "Krona-One"; + font-size: 16px; + } + + .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; } - tr { - border-bottom: 1px dotted $secondary-color; + .right { + margin-top: 24px; + } + + .right .person{ + flex-direction: row-reverse; + justify-content: flex-end; + } + + + .middle { + width: 100%; + margin-top: 24px; - &:last-child { - border-bottom: none; + .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; + } - tr { - border-bottom: none; + .container { + flex-direction: row; + flex-wrap: wrap; + } + + .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 097bb81..a1769f4 100644 --- a/src/components/faq/index.tsx +++ b/src/components/faq/index.tsx @@ -1,4 +1,6 @@ import { h, FunctionalComponent } from "preact"; +import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; +import { Icon } from "/src/components/icon"; import faqData from "/data/faq.json"; @@ -9,15 +11,13 @@ import * as style from "./style.scss"; * @returns The FAQ section of the page. */ export const FAQ: FunctionalComponent = () => ( -
-

Frequently Asked Questions

+
+

FAQ

    {faqData.map((q: Question, i: number) => (
  • -
    - {q.question} +
    + {q.question}

    {q.answer}

    • diff --git a/src/components/faq/style.scss b/src/components/faq/style.scss index 9c40b50..54a05a8 100644 --- a/src/components/faq/style.scss +++ b/src/components/faq/style.scss @@ -2,12 +2,6 @@ @import "./src/mixins"; .faq { - margin: 12px 0; - padding: 16px; - background: $primary-color; - margin-bottom: 32px; - - h2 { color: $secondary-color; font-family: "Krona-One"; @@ -16,38 +10,67 @@ font-weight: 400; line-height: normal; text-align: center; - margin: 0; - padding-left: 2px; - } + margin: 0; } ul { padding: 0; list-style-type: none; + width: 80%; + margin-left: auto; + margin-right: auto; } li { - border-left: 3px solid mix($primary-color, $primary-text, 75%); - padding-left: 16px; - margin: 0 0 16px 8px; + margin: 32px 0; + } + + .icon { + position: absolute; + right: 16px; + top: 16px; + color: $primary-color; + font-size: 24px; + } + + details[open] .icon{ + transform: rotate(180deg); + + } + + details { + border-radius: 19px; + border: 3px solid $primary-color; + padding: 12px 48px; + position: relative; } summary { cursor: pointer; - font-size: 1.1em; - font-weight: 600; - color: mix($primary-color, $primary-text, 40%); + font-size: 1.17em; + font-weight: 700; + text-align: center; + list-style: none; + + &::-webkit-details-marker { + display: none; + } } p { margin: 8px 0; - font-size: 1.1em; - line-height: 20px; + font-size: 1.17em; + line-height: normal; color: $primary-text; + text-align: center; } } -@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 7e1123e..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 b2cdc8b..4cfb04c 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -1,18 +1,37 @@ import { h, FunctionalComponent } from "preact"; +import { faCalendarDay, faLocationDot } from "@fortawesome/free-solid-svg-icons"; +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; + + import * as style from "./style.scss"; import icon from "url:/static/HogeResolutieLogo.png?as=webp&width=500"; +import { Icon } from "/src/components/icon"; + /** * Renders the header of the site. */ export const Header: FunctionalComponent = () => ( -
    - HackDelft - -

    Date: May 25th & May 26th

    -

    Location: TU Delft X

    -     +
    +
    + HackDelft +
    + +

    25 and 26 may 2024

    +

    X TU Delft

    +
    +
    + {/* TODO: uncomment when tickets are online */} + {/* */} + {/* */} + + + Join Discord + +
    +
    +
    ); diff --git a/src/components/header/style.scss b/src/components/header/style.scss index 5e2dfb6..457cd94 100644 --- a/src/components/header/style.scss +++ b/src/components/header/style.scss @@ -3,42 +3,80 @@ .header { display: flex; - flex-direction: column; - margin-top: 32px; + flex-direction: column; + height: 100vh; + min-height: 100vh; + 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; - img { - height: 4em; - margin: 0 auto; + .container { + margin: auto; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + width: 100%; + max-width: 700px; } - span { - margin: 16px 2vw; - - h2 { - margin: 0; - white-space: nowrap; - color: $primary-color; - } + .text { + display: flex; + justify-content: space-between; + margin: 0 30px; + } - h3 { - margin: 0; - white-space: nowrap; - color: $secondary-color; - } + .buttons { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 60px; } -} -@include breakpoint(sm) { - .header { - flex-direction: row; - margin-bottom: 24px; + a { + border-radius: 10px; + border: 1px solid $background-color; + background-color: $primary-color; + color: $background-color; + font-size: 18px; + padding: 10px 15px; + width: 200px; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + margin-bottom: 16px; - img { - margin: 0; + &:hover { + background-color: $primary-color-darker; + cursor: pointer; } + } - span { - margin: 0 2vw; - } + button.secondary { + border: 1px solid $primary-color; + color: $primary-color; + background-color: $background-color; + } + + p { + color: $primary-color; + font-size: 24px; + font-family: "Krona-One"; } } + +// @include breakpoint(sm) { +// .header { +// flex-direction: row; +// margin-bottom: 24px; + +// img { +// margin: 0; +// } + +// span { +// margin: 0 2vw; +// } +// } +// } diff --git a/src/components/index.ts b/src/components/index.ts index 1cec7ad..17d54aa 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,6 +4,8 @@ export { FAQ } from "./faq"; export { Footer } from "./footer"; export { Header } from "./header"; export { Icon } from "./icon"; +export { Numbers } from "./numbers" export { Photos } from "./photos"; export { Sponsors } from "./sponsors"; export { Timeline } from "./timeline"; +export { Navigation} from "./navigation"; diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx new file mode 100644 index 0000000..7ca30dc --- /dev/null +++ b/src/components/navigation/index.tsx @@ -0,0 +1,26 @@ +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 = () => { + + 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 new file mode 100644 index 0000000..ec333e3 --- /dev/null +++ b/src/components/navigation/style.scss @@ -0,0 +1,34 @@ +@import "./src/mixins"; +@import "./src/variables"; + +.navigation { + border: 5px solid $primary-color; + display: none; + + > div { + display: flex; + gap: 16px; + font-size: 20px; + margin: 4px 8px; + + .time { + margin-left: auto; + 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/index.tsx b/src/components/numbers/index.tsx new file mode 100644 index 0000000..29fa34f --- /dev/null +++ b/src/components/numbers/index.tsx @@ -0,0 +1,32 @@ +import { h, FunctionalComponent } from "preact"; + +import * as style from "./style.scss"; + + + + +/** + * Renders the about section. + */ +export const Numbers: FunctionalComponent = () => ( +
    +
    + +
    +

    120

    +

    attendees

    +
    + +
    +

    3

    +

    cases

    +
    + +
    +

    24

    +

    hours

    +
    + +
    +
    +); diff --git a/src/components/numbers/style.scss b/src/components/numbers/style.scss new file mode 100644 index 0000000..255ce6c --- /dev/null +++ b/src/components/numbers/style.scss @@ -0,0 +1,78 @@ +@import "./src/mixins"; +@import "./src/variables"; + +.numbers { + margin-bottom: 64px; + // background: linear-gradient(180deg, $background-color 0%, rgba(37, 0, 67, 0.00)); + + h2 { + color: $secondary-color; + font-family: "Audiowide"; + font-size: 72px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-align: center; + margin: 0; + 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; + } + + + div { + display: flex; + flex-direction: column; + justify-content: center; + + a { + margin: 8px 16px; + padding: 0.6em 1.6em; + border-radius: 6px; + white-space: nowrap; + text-decoration: none; + cursor: pointer; + + svg { + display: inline-block; + vertical-align: middle; + } + + &:hover { + text-decoration: underline; + } + } + } +} + +@include breakpoint(sm) { + .numbers { + div { + flex-direction: row; + } + } +} diff --git a/src/components/photos/index.tsx b/src/components/photos/index.tsx index 0a8dbfd..048ac48 100644 --- a/src/components/photos/index.tsx +++ b/src/components/photos/index.tsx @@ -9,6 +9,9 @@ import * as style from "./style.scss"; * Renders the photos section. */ export const Photos: FunctionalComponent = () => { + const [currentIndex, setCurrentIndex] = useState(0); // Initialize with the first photo + + const galleryContainer = useRef(null); const gallery = useRef(null); const requestRef = useRef(null); const shouldAnimate = useRef(true); @@ -43,52 +46,121 @@ export const Photos: FunctionalComponent = () => { shouldAnimate.current = false; }; - () => { + return () => { if (requestRef.current === null) return; - cancelAnimationFrame(requestRef.current); }; }, []); return ( -
    +

    Photos

    -

    - Take a look at a previous edition to get an impression of the event. -

    -
    (shouldAnimate.current = false)} - > - {photosMap.map((url) => ( - - ))} +
    +
    { + shouldAnimate.current = false; + }} + > + {photosMap.map((url, index) => ( + { + shouldAnimate.current = true; + }} + setNavigate={(index) => setCurrentIndex(index)} + currentIndex={index} + totalPhotos={photosMap.length} + activeIndex={currentIndex} + startup={shouldAnimate.current} + /> + ))} +
    ); }; const Photo: FunctionalComponent = (props) => { - const [opened, setOpened] = useState(false); + const [opened, setOpened] = useState(props.currentIndex === props.activeIndex); + const [currentIndex, setCurrentIndex] = useState(props.currentIndex); + + useEffect(() => { + if(props.startup){ + setOpened(false); + } else { + setCurrentIndex(props.currentIndex); + setOpened(props.currentIndex === props.activeIndex); + } + }, [props.currentIndex, props.activeIndex]); const onClick = () => { setOpened(!opened); + props.setAnimate(); + }; + + const navigate = (delta: number) => { + const nextIndex = (currentIndex + delta + props.totalPhotos) % props.totalPhotos; + setCurrentIndex(nextIndex); + props.setNavigate(nextIndex); }; const classes = `${style.image} ${opened ? style.fullimage : ""}`; return ( - HackDelft 2019 photo + {opened && ( +
    +
    +
    { + e.stopPropagation(); + navigate(-1); + }} + > + < +
    +
    { + e.stopPropagation(); // Stop event propagation + navigate(1); + }} + > + > +
    +
    + HackDelft 2021 photo +
    + )} + {!opened && ( + HackDelft 2021 photo + )}     ); }; + + + interface PhotoProps { url: URL; + setAnimate: () => void; + setNavigate: (index: number) => void; + currentIndex: number; + totalPhotos: number; + activeIndex: number; + startup: boolean; } + diff --git a/src/components/photos/style.scss b/src/components/photos/style.scss index fab2fb6..7db9430 100644 --- a/src/components/photos/style.scss +++ b/src/components/photos/style.scss @@ -11,7 +11,7 @@ font-weight: 400; line-height: normal; text-align: center; - margin: 0; + margin-bottom: 32px; padding-left: 2px; } @@ -20,23 +20,50 @@ } } +.galleryContainer { + position: relative; + overflow: hidden; + + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + width: 30%; + background: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0)); + z-index: 1; + pointer-events: none; + } + + &::before { + left: 0; + background: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0)); + } + + &::after { + right: 0; + } +} + + .gallery { + position: relative; display: flex; overflow-x: scroll; - gap: 12px; + gap: 8px; scrollbar-width: auto; - scrollbar-color: $primary-color $background-color; &::-webkit-scrollbar { height: 8px; } &::-webkit-scrollbar-track { - background: $background-color; + background: rgb(48, 48, 48); } &::-webkit-scrollbar-thumb { - background-color: $primary-color; + background-color: rgb(100, 100, 100); } } @@ -47,23 +74,42 @@ height: 260px; width: 400px; object-fit: cover; - border-radius: 6px; } } .fullimage { position: fixed; display: flex; - top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; - background-color: #181226bb; backdrop-filter: blur(12px); + z-index: 2; + + .navigation { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: flex; + justify-content: space-between; + width: 100%; + pointer-events: none; + } + + .arrow { + color: white; + font-size: 72px; + cursor: pointer; + pointer-events: auto; + } + + .arrow:hover { + color: $primary-color; + } img { width: auto; @@ -72,3 +118,4 @@ max-width: 90vw; } } + diff --git a/src/components/sponsors/index.tsx b/src/components/sponsors/index.tsx index 9c21adb..8729d13 100644 --- a/src/components/sponsors/index.tsx +++ b/src/components/sponsors/index.tsx @@ -11,7 +11,7 @@ import * as style from "./style.scss"; * Renders the sponsors section. */ export const Sponsors: FunctionalComponent = () => ( -
    +

    Sponsors

    {sponsorData.map((sponsor: SponsorCategory) => sponsorItem(sponsor))}
    @@ -26,30 +26,43 @@ export const sponsorItem = (category: SponsorCategory) => { return ( -

    {category.title}

    -

    More too be announced!

    - +
    + {/*

    {category.title}

    */} + +
    ); }; diff --git a/src/components/sponsors/style.scss b/src/components/sponsors/style.scss index 9109b7b..951fbd3 100644 --- a/src/components/sponsors/style.scss +++ b/src/components/sponsors/style.scss @@ -12,21 +12,22 @@ font-weight: 400; line-height: normal; text-align: center; - margin: 0; - margin-bottom: 32px; + margin-bottom: 64px; padding-left: 2px; } h3 { color: $primary-color; font-family: "Krona-One"; + font-size: 32px; font-style: normal; font-weight: 400; line-height: normal; text-align: center; - margin: 0; + margin-bottom: 64px; padding-left: 2px; } + } .sponsorlist { @@ -42,18 +43,39 @@ justify-content: center; } + .topbar{ + + hr { + margin-bottom: 10px; + height: 2px; + width: 100%; + color: #84C1EE; + background-color: #84C1EE; + } + } + + .bottombar { + + hr { + margin-top: 10px; + height: 2px; + width: 75%; + color: #84C1EE; + background-color: #84C1EE; + } + } + .img { display: flex; padding: 8px; - border: 3px solid currentColor; - border-radius: 12px; - background-color: $sponsor-background; img { width: 100%; height: 120px; object-fit: contain; } + + } a { @@ -61,8 +83,13 @@ } p { - margin: 8px 0 0 0; + color: #FFF; text-align: center; + font-family: Krona One; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; } [data-type="organisation"] > * { diff --git a/src/components/timeline/index.tsx b/src/components/timeline/index.tsx index b787623..503fb4f 100644 --- a/src/components/timeline/index.tsx +++ b/src/components/timeline/index.tsx @@ -11,21 +11,26 @@ import * as style from "./style.scss"; * Renders the timeline section. */ export const Timeline: FunctionalComponent = () => ( -
    -

    Schedule

    +
    +

    Timetable

    This is an indication of the schedule of the event! It is an indication, and therefore subject to change.

    +
    +

    Saturday

    +

    Sunday

    +
    +
    -
    -

    Saturday

    +

    Saturday

    +
    {(saturday as TimelineEntry[]).map((entry) => renderEntry(entry) )}
    -
    -

    Sunday

    +

    Sunday

    +
    {(sunday as TimelineEntry[]).map((entry) => renderEntry(entry))}
    @@ -33,7 +38,7 @@ export const Timeline: FunctionalComponent = () => ( ); const renderEntry = (entry: TimelineEntry) => ( -
    +