Skip to content

Commit

Permalink
footer, meet the committee, timetable and many more
Browse files Browse the repository at this point in the history
  • Loading branch information
Marit Radder authored and Marit Radder committed Jan 10, 2024
1 parent ec815f3 commit af29d99
Show file tree
Hide file tree
Showing 10 changed files with 247 additions and 125 deletions.
106 changes: 74 additions & 32 deletions src/components/committee/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,43 +11,85 @@ const picture = new 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 Commissioner of Promotion</th>
<td>Simon Deuten</td>
</tr>
<tr>
<th>The Commissioner of Acquisition</th>
<td>Scott Jochems</td>
</tr>
<tr>
<th>The Commissioner of Logistics</th>
<td>Marijn van der Tuin</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={picture 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={picture 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={picture 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={picture 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={picture 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={picture as any} alt="HackDelft Committee" />
</div>
</div>
</div>
<div class={style.middle}>
<div class={style.person}>
<div class={style.polygon}>
<img src={picture 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>
);
117 changes: 67 additions & 50 deletions src/components/committee/style.scss
Original file line number Diff line number Diff line change
@@ -1,77 +1,94 @@
@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: 48px;
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: 28px;
}

h2 {
.function {
color: $primary-color;
margin-bottom: 0;
}

h3 {
color: $secondary-color;
margin-top: 0;
padding: 0;
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}

table {
border-collapse: collapse;
width: 100%;
line-height: 1.4;
.left {
width: 50%;
gap: 24px;
display: flex;
flex-direction: column;
}

tr {
border-bottom: 1px dotted $secondary-color;
.right {
width: 50%;
text-align: right;
gap: 24px;
display: flex;
flex-direction: column;

&:last-child {
border-bottom: none;
.person {
justify-content: flex-end;
}
}

th {
float: left;
display: contents;
color: mix($primary-color, $primary-text, 80%);
}
.middle {
width: 100%;
text-align: center;
margin-top: 24px;

td {
white-space: nowrap;
.person {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 20px;
}
}
}

@include breakpoint(lg) {
.container {
flex-direction: row;
width: 100%;
margin: 0;
img {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
height: 160px;
width: 150px;
min-width: 150px;
object-fit: cover;
position: relative;
}

.committee {
margin-left: 16px;
.polygon {
height: 170px;
width: 160px;
min-width: 160px;
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;
}

tr {
border-bottom: none;
}
.person {
display: flex;
align-items: center;
gap: 40px;
}
}
2 changes: 1 addition & 1 deletion src/components/faq/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import * as style from "./style.scss";
* @returns The FAQ section of the page.
*/
export const FAQ: FunctionalComponent = () => (
<section class={style.faq}>
<section class={style.faq} id='faq'>
<h2>FAQ</h2>
<ul>
{faqData.map((q: Question, i: number) => (
Expand Down
48 changes: 30 additions & 18 deletions src/components/footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,34 @@ import * as style from "./style.scss";
/**
* Renders the footer of the site.
*/
export const Footer: FunctionalComponent = () => (
<footer class={style.footer}>
<a
title="Send us an email!"
href="mailto:hackdelft@ch.tudelft.nl"
target="_blank"
rel="noopener"
>
<Icon icon={faEnvelope} pad />
</a>
<a
title="View source code."
href="https://github.com/WISVCH/hackdelft-2024"
target="_BLANK"
>
<Icon icon={faGithub} pad />
</a>
export const Footer: FunctionalComponent = () => {
const scrollToDiv = (target: any) => {
if (document.getElementById(target)){
window.scrollTo({top: document.getElementById(target).offsetTop})
}
}

return (
<footer>
<section class={style.footer}>
<div>
<p>Site</p>
<a onClick={() => scrollToDiv('home')}>Home</a>
<a onClick={() => scrollToDiv('aboutus')}>About us </a>
<a onClick={() => scrollToDiv('timetable')}>Timetable</a>
<a onClick={() => scrollToDiv('photos')}>Pictures</a>
<a onClick={() => scrollToDiv('themes')}>Themes</a>
<a onClick={() => scrollToDiv('faq')}>FAQ</a>
<a onClick={() => scrollToDiv('sponsors')}>Sponsors</a>
</div>
<div>
<p>Contact</p>
<a title="Send us an email!"
href="mailto:hackdelft@ch.tudelft.nl"
target="_blank"
rel="noopener"> hackdelft@ch.tudelft.nl </a>
</div>
</section>
</footer>
);
);
}
27 changes: 19 additions & 8 deletions src/components/footer/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,26 @@

.footer {
display: flex;
padding-bottom: 8px;
width: 100%;
justify-content: end;
justify-content: center;

* {
color: $secondary-color;
p {
color: $primary-color;
font-family: "Krona-One";
font-size: 34px;
margin: 10px 0;
}

a {
font-family: "Krona-One";
font-size: 34px;
text-decoration: none;
color: #fff;
margin: 10px 0;
}

&:hover {
color: $primary-color;
}
> div {
display: flex;
flex-direction: column;
width: 30%;
}
}
2 changes: 1 addition & 1 deletion src/components/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Icon } from "/src/components/icon";
* Renders the header of the site.
*/
export const Header: FunctionalComponent = () => (
<header class={style.header}>
<header class={style.header} id='home'>
<div class={style.container}>
<img src={icon} alt="HackDelft" />
<div class={style.text}>
Expand Down
Loading

0 comments on commit af29d99

Please sign in to comment.