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: custom timeline icons

Browse source
This commit is contained in:
Bart van der Braak 2023-11-21 03:30:46 +01:00
parent 78ca31132b
commit 5c8ec9d909
12 changed files with 425 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/routes/timeline/+page.svelte
View file

@ -27,8 +27,8 @@
<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 timelineItems as { title, logo, description, date }}
<TimelineItem {title} {logo} {description} {date} />
{/each}
</div>
</div>

10
src/routes/timeline/TimelineItem.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
export let title: string;
export let logo: string;
export let description: string;
export let date: string;
</script>
@ -8,14 +9,9 @@
class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
>
<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"
class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 gro up-[.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 overflow-hidden"
>
<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>
<img src={logo} alt="{title} logo" loading="lazy" />
</div>
<div

28
src/routes/timeline/timeline-items.ts
View file

@ -1,5 +1,14 @@
import linuxFoundationLogo from '$lib/assets/timeline/linuxfoundation.svg';
import microsoftLogo from '$lib/assets/timeline/microsoft.svg';
import tripleLogo from '$lib/assets/timeline/triple.svg';
import urbanDealLogo from '$lib/assets/timeline/urbandeal.svg';
import diastaseLogo from '$lib/assets/timeline/diastase.svg';
import vuLogo from '$lib/assets/timeline/vu.svg';
import bijlmerweideLogo from '$lib/assets/timeline/bijlmerweide.svg';
export interface TimelineItem {
title: string;
logo?: string;
link?: string;
image?: string;
description: string;
@ -9,48 +18,51 @@ export interface TimelineItem {
const timelineItems: TimelineItem[] = [
{
title: 'The Linux Foundation',
logo: linuxFoundationLogo,
description: 'Certified Kubernetes Administrator',
date: '2022'
},
{
title: 'Microsoft Certified',
logo: microsoftLogo,
description: 'Administrator Associate (AZ-104)',
date: '2021'
},
{
title: 'Triple',
logo: tripleLogo,
description: 'DevOps Engineer',
date: '2021'
},
{
title: 'Urban Deal',
logo: urbanDealLogo,
description: 'Full Stack Developer',
date: '2019'
},
{
title: 'Diastase Netwerk',
logo: diastaseLogo,
description: 'Volunteer Web Administrator',
date: '2019'
},
{
title: 'Vrije Universiteit Amsterdam',
logo: vuLogo,
description: 'Master Information Sciences',
date: '2018'
},
{
title: 'Vrije Universiteit Amsterdam',
description: 'Bachelor Information Sciences',
date: '2014'
},
{
title: 'Kinderboerderij Bijlmerweide',
logo: bijlmerweideLogo,
description: 'Volunteer Web Administrator',
date: '2016'
},
{
title: 'Zaanlands Lyceum',
description: 'Pre-university education (VWO)',
date: '2008'
title: 'Vrije Universiteit Amsterdam',
logo: vuLogo,
description: 'Bachelor Information Sciences',
date: '2014'
}
];