67 lines
2.2 KiB
Svelte
67 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { getJson } from '$lib/data';
|
|
import { toasts } from 'svelte-toasts';
|
|
|
|
import Loading from '$lib/components/Loading.svelte';
|
|
import Section from '$lib/components/Section.svelte';
|
|
import Card from '$lib/components/Cards/Card.svelte';
|
|
import FlexGallery from "$lib/components/FlexGallery.svelte";
|
|
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
|
import Timeline from '$lib/components/Timeline.svelte';
|
|
</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="[Experience]">
|
|
<Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
|
|
<div 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>{@html info.about}</p>
|
|
</div>
|
|
</Card>
|
|
</Section>
|
|
|
|
<!-- SKills -->
|
|
<Section label="[Skills]">
|
|
<FlexGallery>
|
|
{#each info.skills as skill}
|
|
<Card headerLeft={skill.name} footer={skill.link} containerStyle="flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
|
|
{skill.about}
|
|
|
|
<SkillProgress value={skill.competency} />
|
|
</Card>
|
|
{/each}
|
|
</FlexGallery>
|
|
</Section>
|
|
|
|
<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}
|