luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: Started fleshing out content on the webpage

Browse Source
This commit is contained in:
Luke Else
2025-05-23 18:13:58 +01:00
parent 538d9593c2
commit c52d185f76
9 changed files with 159 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/lib/components/Cards/Card.svelte
View File

@@ -3,24 +3,29 @@
export let headerRight: string = "";
export let headerColour: string = "text-red-500";
export let footer: string = "";
// Allows additional styling to be applied to the Card component's outer wrapping
export let containerStyle: string = "";
</script>
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
<div class="{headerColour} flex flex-row justify-between items-center mb-4">
<p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
{#if headerRight}
<p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
<div class={containerStyle}>
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
<div class="{headerColour} flex flex-row justify-between items-center mb-4">
<p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
{#if headerRight}
<p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
{/if}
</div>
<hr class="mb-4 border-1" />
<div class="flex-1 flex flex-col justify-center p-5">
<slot />
</div>
{#if footer}
<hr class="my-4 border-1" />
<div class="mt-2 text-base opacity-90">
{@html footer}
</div>
{/if}
</div>
<hr class="mb-4 border-1" />
<div class="flex-1 flex flex-col justify-center p-5">
<slot />
</div>
{#if footer}
<hr class="my-4 border-1" />
<div class="mt-2 text-base opacity-90">
{@html footer}
</div>
{/if}
</div>
</div>

7
src/lib/components/FlexGallery.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
</script>
<!-- FlexGallery.svelte -->
<div class="flex flex-wrap gap-10 w-full">
<slot />
</div>

39
src/lib/components/Modal.svelte
View File

@@ -1,39 +0,0 @@
<script lang="ts">
export let showModal: boolean;
let dialog: HTMLDialogElement;
$: if (dialog && showModal) dialog.showModal();
import CloseIcon from "./Toasts/CloseIcon.svelte";
</script>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
bind:this={dialog}
on:close={() => (showModal = false)}
on:click|self={() => dialog.close()}
class="max-w-[70vw] rounded-md border-0 p-0 shadow-lg bg-bg text-fg relative animate-[zoom_0.5s_cubic-bezier(0.34,1.56,0.64,1)]"
style="box-shadow: 0.5em 0.5em 0.5em var(--header);"
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation class="p-4">
<slot name="header" />
<hr class="my-2 border-accent" />
<slot />
<hr class="my-2 border-accent" />
</div>
<button
class="close absolute top-4 right-6 text-fg bg-transparent border-0 p-0 m-0 leading-none text-[1.2em] hover:text-accent"
on:click={() => dialog.close()}
>
<CloseIcon width="0.8em" />
</button>
</dialog>
<style>
@keyframes zoom {
from { transform: scale(0.95); }
to { transform: scale(1); }
}
</style>

2
src/lib/components/Section.svelte
View File

@@ -2,7 +2,7 @@
export let label: string = "";
</script>
<div class="relative flex flex-row w-full min-h-[300px] mt-5 mb-5">
<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
<!-- Sticky/Sliding Label -->
<div class="hidden md:flex flex-col items-center mr-6">
<div class="sticky top-24 left-0 z-10">

15
src/lib/components/SkillProgress.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
export let value: number = 0; // 0 to 100
</script>
<div class="w-full mt-3">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-400">{value}%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-5">
<div
class="bg-orange-400 h-5 rounded-full transition-all duration-500"
style="width: {value}%"
></div>
</div>
</div>