Skip to content

Commit 720244d

Browse files
RoboroadsRoboroads
committed
feat: Speakers & Schedule
1 parent 6540348 commit 720244d

File tree

3 files changed

+198
-272
lines changed

3 files changed

+198
-272
lines changed

‎src/routes/+page.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
</svelte:head>
3030

3131
<HeaderSection />
32-
<InfoSection /><!--<SpeakerScheduleSection />-->
33-
<Spacer /><!--<WorkshopScheduleSection />--><!--<SpeakerSection />-->
32+
<InfoSection />
33+
<SpeakerScheduleSection />
34+
<Spacer /><!--<WorkshopScheduleSection />-->
35+
<SpeakerSection />
3436
<PhotoSliderSection />
3537
<PracticalInformationSection />

‎src/routes/SpeakerScheduleSection.svelte

+65-78
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,73 @@
1-
<script>
1+
<script lang="ts">
22
import TagBlock from '$lib/components/TagBlock.svelte';
3+
4+
type ScheduleItem = {
5+
time: string;
6+
title?: string;
7+
speaker?: string;
8+
};
9+
10+
let schedule: ScheduleItem[] = [
11+
{
12+
time: '17:00',
13+
title: 'Walk-in and dinner'
14+
},
15+
{
16+
time: '18:30',
17+
title: 'Custom Elements, or How to Make it Easy for People to Use Your Code',
18+
speaker: 'Stacy Cashmore'
19+
},
20+
{
21+
time: '19:00',
22+
title: 'Ctrl+Alt+VR: Create VR-First Websites for the 2D Web',
23+
speaker: 'Jorrik Klijsma'
24+
},
25+
{
26+
time: '20:00',
27+
title: 'An Intro to Nx',
28+
speaker: 'Bjorn Schijff'
29+
},
30+
{
31+
time: '20:30',
32+
title: 'Beats in the Browser - Coding Music with JavaScript',
33+
speaker: 'Rowdy Rabouw'
34+
},
35+
{
36+
time: '21:00',
37+
title: 'Wrap-up & Drinks'
38+
},
39+
{
40+
time: '22:00',
41+
title: 'Closing'
42+
}
43+
];
344
</script>
445

546
<div class="flex-center w-full flex-col bg-shark py-10 text-white" id="schedule">
647
<div class="px-2 text-4xl">Speaker schedule</div>
748
<div class="px-2 text-xl">The following schedule is not final and is subject to change.</div>
8-
<TagBlock class="mt-5" direction="right" extend backgroundColor="fountain">
9-
<div class="flex w-screen max-w-xl gap-5">
10-
<div class="pl-5 text-2xl sm:pl-0">17:00</div>
11-
<div class="grow text-2xl">Welcome</div>
12-
</div>
13-
</TagBlock>
14-
<TagBlock class="mt-2" direction="left" extend backgroundColor="ordina">
15-
<div class="flex w-screen max-w-xl gap-5">
16-
<div class="pl-5 text-2xl">16:30</div>
17-
<div class="inline-flex grow flex-col">
18-
<div class="text-2xl">Keynote with Kitze</div>
19-
</div>
20-
</div>
21-
</TagBlock>
22-
<TagBlock class="mt-2" direction="left" extend backgroundColor="ordina">
23-
<div class="flex w-screen max-w-xl gap-5">
24-
<div class="pl-5 text-2xl">17:30</div>
25-
<div class="inline-flex grow flex-col">
26-
<div class="text-2xl">Firebase</div>
27-
<div class="text-xl">Frank van Puffelen (Google)</div>
28-
<div class="text-lg">How you can build better apps faster with Firebase.</div>
29-
</div>
30-
</div>
31-
</TagBlock>
32-
<TagBlock class="mt-2" direction="left" extend backgroundColor="ordina">
33-
<div class="flex w-screen max-w-xl gap-5">
34-
<div class="pl-5 text-2xl">17:45</div>
35-
<div class="inline-flex grow flex-col">
36-
<div class="text-2xl">AWS & Flutter</div>
37-
<div class="text-xl">Oscar Hahn (AWS)</div>
38-
<div class="text-lg">
39-
Accelerate web and mobile development with AWS Amplify and Flutter.
40-
</div>
41-
</div>
42-
</div>
43-
</TagBlock>
44-
<TagBlock class="mt-2" direction="left" extend backgroundColor="ordina">
45-
<div class="flex w-screen max-w-xl gap-5">
46-
<div class="pl-5 text-2xl">18:00</div>
47-
<div class="inline-flex grow flex-col">
48-
<div class="text-2xl">Artistic Bugs</div>
49-
<div class="text-xl">Jorrik Klijnsma (Ordina)</div>
50-
<div class="text-lg">When my bug became art; A different perspective.</div>
51-
</div>
52-
</div>
53-
</TagBlock>
54-
<TagBlock class="mt-2" direction="right" extend backgroundColor="fountain">
55-
<div class="flex w-screen max-w-xl gap-5">
56-
<div class="pl-5 text-2xl sm:pl-0">18:15</div>
57-
<div class="grow text-2xl">Drinks & Dinner</div>
58-
</div>
59-
</TagBlock>
60-
<TagBlock class="mt-2" direction="left" extend backgroundColor="ordina">
61-
<div class="flex w-screen max-w-xl gap-5">
62-
<div class="pl-5 text-2xl">19:15</div>
63-
<div class="inline-flex grow flex-col">
64-
<div class="text-2xl">Svelte</div>
65-
<div class="text-xl">Robbin Schepers (Ordina)</div>
66-
<div class="text-lg">Falling in love with frontend, again!</div>
67-
</div>
68-
</div>
69-
</TagBlock>
70-
<TagBlock class="mt-2" direction="left" extend backgroundColor="ordina">
71-
<div class="flex w-screen max-w-xl gap-5">
72-
<div class="pl-5 text-2xl">19:45</div>
73-
<div class="inline-flex grow flex-col">
74-
<div class="text-2xl">Micro Frontends</div>
75-
<div class="text-xl">Peter Eijgermans (Ordina)</div>
76-
<div class="text-lg">Take your web apps to the next level with Micro frontends</div>
49+
50+
{#each schedule as item}
51+
<TagBlock
52+
class="mt-5"
53+
direction={item.speaker ? 'left' : 'right'}
54+
extend
55+
backgroundColor={item.speaker ? 'ordina' : 'fountain'}
56+
>
57+
<div class="flex w-screen max-w-xl gap-5">
58+
<div class="pl-5 text-2xl sm:pl-0">{item.time}</div>
59+
60+
{#if item.speaker}
61+
<div class="inline-flex grow flex-col">
62+
<div class="text-2xl">{item.title ?? 'Coming soon..'}</div>
63+
<div class="text-lg">by {item.speaker}</div>
64+
</div>
65+
{:else}
66+
<div class="grow text-2xl">
67+
{item.title ?? 'Coming soon..'}
68+
</div>
69+
{/if}
7770
</div>
78-
</div>
79-
</TagBlock>
80-
<TagBlock class="mt-2" direction="right" extend backgroundColor="fountain">
81-
<div class="flex w-screen max-w-xl gap-5">
82-
<div class="pl-5 text-2xl sm:pl-0">20:15</div>
83-
<div class="grow text-2xl">Drinks</div>
84-
</div>
85-
</TagBlock>
71+
</TagBlock>
72+
{/each}
8673
</div>

0 commit comments

Comments
 (0)