Compare commits
3 Commits
a0c3b27aab
...
41c6964679
Author | SHA1 | Date | |
---|---|---|---|
41c6964679 | |||
f25c6ddd68 | |||
9b49710556 |
@ -9,13 +9,13 @@
|
||||
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
|
||||
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
|
||||
</div>
|
||||
<hr class="mb-4 border-1" />
|
||||
<div class="flex-1 flex flex-col justify-center p-5">
|
||||
<hr class="border-1" />
|
||||
<div class="flex-1 flex flex-col justify-center mt-4 mb-8">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-1" />
|
||||
<div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
|
||||
<hr class="border-1" />
|
||||
<div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
|
||||
<slot name="footerLeft"/>
|
||||
<slot name="footerRight"/>
|
||||
</div>
|
||||
|
33
src/lib/components/Collapsible.svelte
Normal file
33
src/lib/components/Collapsible.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
export let open = false;
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
|
||||
on:click={() => open = !open}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span><slot name="label"/></span>
|
||||
<svg
|
||||
class="w-5 h-5 ml-2 transition-transform duration-200"
|
||||
style="transform: rotate({open ? 90 : 0}deg)"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="overflow-hidden transition-all duration-300"
|
||||
style="max-height: {open ? '1000px' : '0'}"
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div class="pt-2">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -1,40 +1,28 @@
|
||||
<script lang="ts">
|
||||
import Collapsible from "./Collapsible.svelte";
|
||||
|
||||
export let timelineData: Array<{
|
||||
title: string;
|
||||
description: string;
|
||||
duration: string;
|
||||
}>;
|
||||
|
||||
// Track open/closed state for each entry
|
||||
let openStates = timelineData.map(() => false);
|
||||
|
||||
function toggle(index: number) {
|
||||
openStates[index] = !openStates[index];
|
||||
}
|
||||
|
||||
toggle(0); // Open the first entry by default
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="max-w-4xl w-full">
|
||||
{#each timelineData as entry, i}
|
||||
<div class="relative border-l border-gray-700 pl-8 pb-12">
|
||||
{#if openStates[i]}
|
||||
{#if i == 0}
|
||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">♦</div>
|
||||
{:else}
|
||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">⋄</div>
|
||||
{/if}
|
||||
<p class="text-sm opacity-70">{entry.duration}</p>
|
||||
<button
|
||||
class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
|
||||
on:click={() => toggle(i)}
|
||||
aria-expanded={openStates[i]}
|
||||
>
|
||||
<h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
|
||||
</button>
|
||||
{#if openStates[i]}
|
||||
<p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
|
||||
{/if}
|
||||
|
||||
<Collapsible open={i==0}>
|
||||
<span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
|
||||
<span slot="content">{entry.description}</span>
|
||||
</Collapsible>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
@ -8,6 +8,7 @@
|
||||
import GridGallery from "$lib/components/GridGallery.svelte";
|
||||
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
||||
import Timeline from '$lib/components/Timeline.svelte';
|
||||
import Collapsible from '$lib/components/Collapsible.svelte';
|
||||
</script>
|
||||
|
||||
{#await getJson('/json/me.json')}
|
||||
@ -24,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Main Card -->
|
||||
<Section label="[Experience]">
|
||||
<Section label="[About]">
|
||||
<Card>
|
||||
<h2 slot="headerLeft">{info.name}</h2>
|
||||
<h2 slot="headerRight">{info.job_title}</h2>
|
||||
@ -47,7 +48,10 @@
|
||||
<Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
|
||||
<h2 slot="headerLeft">{skill.name}</h2>
|
||||
<div slot="content">
|
||||
{skill.about}
|
||||
<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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user