87 lines
2.9 KiB
Svelte
87 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { getJson } from '$lib/data';
|
|
import { toasts } from 'svelte-toasts';
|
|
|
|
import {
|
|
Loading,
|
|
Section,
|
|
Card,
|
|
GridGallery,
|
|
SkillProgress,
|
|
Timeline,
|
|
Collapsible
|
|
} from '@luke-else/component-lib';
|
|
</script>
|
|
|
|
{#await getJson('/json/me.json')}
|
|
<Loading />
|
|
{:then info}
|
|
<div style="display: none;">
|
|
{toasts.add({
|
|
title: 'Welcome',
|
|
duration: 5000,
|
|
type: 'success',
|
|
placement: 'bottom-center',
|
|
showProgress: true
|
|
})}
|
|
</div>
|
|
|
|
<!-- Main Card -->
|
|
<Section label="[About]">
|
|
<Card>
|
|
<h2 slot="headerLeft">{info.name}</h2>
|
|
<h2 slot="headerRight">{info.job_title}</h2>
|
|
<div slot="content" class="flex flex-row items-center gap-5">
|
|
<img
|
|
src={info.profile_photo}
|
|
alt="Avatar"
|
|
class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
|
|
/>
|
|
<p
|
|
class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600"
|
|
>
|
|
{@html info.about}
|
|
</p>
|
|
</div>
|
|
<h3 slot="footerLeft">{@html info.location}</h3>
|
|
</Card>
|
|
</Section>
|
|
|
|
<!-- Skills -->
|
|
<Section label="[Skills]">
|
|
<GridGallery>
|
|
{#each info.skills as skill}
|
|
<Card
|
|
containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
|
|
>
|
|
<h2 slot="headerLeft">{skill.name}</h2>
|
|
<i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
|
|
<div slot="content">
|
|
<Collapsible>
|
|
<span slot="label" class="text-lg">About {skill.name}</span>
|
|
<span slot="content">{skill.about}</span>
|
|
</Collapsible>
|
|
<SkillProgress skillColour={skill.colour} value={skill.competency} />
|
|
</div>
|
|
<h3 slot="footerLeft"><a href={skill.link} target="_blank">{skill.link}</a></h3>
|
|
</Card>
|
|
{/each}
|
|
</GridGallery>
|
|
</Section>
|
|
|
|
<!-- Experience -->
|
|
<Section label="[Experience]">
|
|
<Timeline timelineData={info.timeline} />
|
|
</Section>
|
|
{:catch}
|
|
<div style="display: none;">
|
|
{toasts.add({
|
|
title: 'Error',
|
|
description: 'There was an error loading static site data',
|
|
duration: 0,
|
|
placement: 'bottom-center',
|
|
showProgress: true
|
|
})}
|
|
</div>
|
|
{/await}
|