mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-10-31 12:19:10 +00:00
feat: rewrite all to use shadcn-svelte
This commit is contained in:
parent
0df260c5a5
commit
b13ece80d5
162 changed files with 3268 additions and 2815 deletions
|
|
@ -1,34 +1,17 @@
|
|||
<script>
|
||||
import TimelineItem from './TimelineItem.svelte';
|
||||
import timelineItems from './timeline-items';
|
||||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { Timeline } from '$lib/components/site/timeline';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art — timeline</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A timeline showing a multitude of endeavors in my career, education as well as personal
|
||||
milestones."
|
||||
/>
|
||||
</svelte:head>
|
||||
<div class="container relative max-w-[980px]">
|
||||
<PageHeader.Root class="pb-8">
|
||||
<PageHeader.Heading>Experiences through time</PageHeader.Heading>
|
||||
<PageHeader.Description>
|
||||
Achievements in my education, career and personal life.
|
||||
</PageHeader.Description>
|
||||
</PageHeader.Root>
|
||||
|
||||
<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 { title, logo, description, date }}
|
||||
<TimelineItem {title} {logo} {description} {date} />
|
||||
{/each}
|
||||
</div>
|
||||
<section>
|
||||
<Timeline />
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
6
src/routes/timeline/+page.ts
Normal file
6
src/routes/timeline/+page.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Timeline`
|
||||
};
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { TimelineItem } from './timeline-items';
|
||||
|
||||
export let title: TimelineItem['title'];
|
||||
export let logo: TimelineItem['logo'];
|
||||
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"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<img src={logo} alt="{title} logo" loading="lazy" />
|
||||
</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>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
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;
|
||||
date: string;
|
||||
}
|
||||
|
||||
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: 'Kinderboerderij Bijlmerweide',
|
||||
logo: bijlmerweideLogo,
|
||||
description: 'Volunteer Web Administrator',
|
||||
date: '2016'
|
||||
},
|
||||
{
|
||||
title: 'Vrije Universiteit Amsterdam',
|
||||
logo: vuLogo,
|
||||
description: 'Bachelor Information Sciences',
|
||||
date: '2014'
|
||||
}
|
||||
];
|
||||
|
||||
export default timelineItems;
|
||||
Loading…
Add table
Add a link
Reference in a new issue