bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-10-31 12:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: page and components for timeline

Browse source
This commit is contained in:
Bart van der Braak 2023-11-18 18:45:02 -08:00
parent e134d1cf00
commit 4e1b4cb5fe
4 changed files with 124 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/routes/timeline/+page.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
import TimelineItem from './TimelineItem.svelte';
import timelineItems from './timeline-items';
</script>
<svelte:head>
<title>hellob.art &mdash; timeline</title>
<meta name="description" content="Timeline showing " />
</svelte:head>
<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
<h2 class="text-3xl font-bold mb-8">Timeline</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
<div class="md:col-span-2">
<p class="text-lg leading-relaxed mb-8">
A timeline showing a multitude of endeavors in my career, education as well as personal
milestones.
</p>
</div>
</div>
<div
class="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent"
>
{#each timelineItems as item}
<TimelineItem title={item.title} description={item.description} date={item.date} />
{/each}
</div>
</div>

35
src/routes/timeline/TimelineItem.svelte Normal file
View file

@ -0,0 +1,35 @@
<script lang="ts">
import type { TimelineItem } from './timeline-items';
export let title: TimelineItem['title'];
export let description: TimelineItem['description'];
export let date: TimelineItem['date'];
</script>
<div
class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
>
<!-- Icon -->
<div
class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2"
>
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path
fill-rule="nonzero"
d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z"
/>
</svg>
</div>
<div
class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] border border-white/10 bg-white/5 p-4 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl rounded"
>
<div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-bold">{title}</div>
<time class="font-caveat font-medium text-">{date}</time>
</div>
<div class="text-slate-500">
{description}
</div>
</div>
</div>

57
src/routes/timeline/timeline-items.ts Normal file
View file

@ -0,0 +1,57 @@
export interface TimelineItem {
title: string;
link?: string;
image?: string;
description: string;
date: string;
}
const timelineItems: TimelineItem[] = [
{
title: 'The Linux Foundation',
description: 'Certified Kubernetes Administrator',
date: '2022'
},
{
title: 'Microsoft Certified',
description: 'Administrator Associate (AZ-104)',
date: '2021'
},
{
title: 'Triple',
description: 'DevOps Engineer',
date: '2021'
},
{
title: 'Urban Deal',
description: 'Full Stack Developer',
date: '2019'
},
{
title: 'Diastase Netwerk',
description: 'Volunteer Web Administrator',
date: '2019'
},
{
title: 'Vrije Universiteit Amsterdam',
description: 'Master Information Sciences',
date: '2018'
},
{
title: 'Vrije Universiteit Amsterdam',
description: 'Bachelor Information Sciences',
date: '2014'
},
{
title: 'Kinderboerderij Bijlmerweide',
description: 'Volunteer Web Administrator',
date: '2016'
},
{
title: 'Zaanlands Lyceum',
description: 'Pre-university education (VWO)',
date: '2008'
}
];
export default timelineItems;