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

development #3

Merged
luke-else merged 53 commits from development into main 2025-02-01 13:00:04 +00:00
Conversation 0 Commits 53 Files Changed 69 +62 -54
2 changed files with 62 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d8d40ddc30 - Show all commits

55
src/main.svelte
View File

@@ -3,13 +3,9 @@
import { Toast, ToastType } from "$lib/toast";
import { addToast } from "$lib/store";
import Card from '$lib/components/Card.svelte';
import Modal from '$lib/components/Modal.svelte';
import Skills from './skills.svelte';
import Timeline from "./timeline.svelte";
let showModal: boolean = false;
let activeModal: any = null;
</script>
<style>
@@ -65,18 +61,6 @@
font-size: 1.5em;
}
.card-footer {
margin-bottom: 1em;
display: flex;
gap: 1.5em;
justify-content: space-between;
}
.logo {
color: var(--fg);
font-size: 3em;
}
/* Skills Cards CSS */
.container {
padding-top: 3em;
@@ -118,22 +102,7 @@
<h1>Skills</h1>
<hr />
<div class="cards">
{#each info.skills as skill}
<Card on:click={() => {showModal = true; activeModal = skill}}>
<div slot="header">
<h2>{skill.skill}</h2>
<i class="{skill.logo} logo"></i>
</div>
<div slot="content">
<p class="not-required">{@html skill.usage}</p>
</div>
<div slot="footer">
<!-- svelte-ignore a11y-invalid-attribute -->
<a href="#">View More</a>
<a href="/repos">Repos</a>
</div>
</Card>
{/each}
<Skills skills="{info.skills}"></Skills>
</div>
</div>
@@ -153,23 +122,3 @@
</div>
<div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
{/await}
<!--Modal to be displayed on click-->
{#if activeModal != null}
<Modal bind:showModal>
<h2 slot="header" class="card-header">
{activeModal.skill}
<i class="{activeModal.logo} logo"></i>
</h2>
<p>
{activeModal.about}
</p>
<div class="card-footer">
<a href="{activeModal.link}" target="_blank" rel="noopener noreferrer">Learn More</a>
<a href="/repos">Repos</a>
</div>
</Modal>
{/if}

59
src/skills.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script lang="ts">
export let skills: any;
import Card from '$lib/components/Card.svelte';
import Modal from '$lib/components/Modal.svelte';
let showModal: boolean = false;
let activeModal: any = null;
</script>
<style>
.card-footer {
margin-bottom: 1em;
display: flex;
gap: 1.5em;
justify-content: space-between;
}
.logo {
color: var(--fg);
font-size: 3em;
}
</style>
{#each skills as skill}
<Card on:click={() => {showModal = true; activeModal = skill}}>
<div slot="header">
<h2>{skill.skill}</h2>
<i class="{skill.logo} logo"></i>
</div>
<div slot="content">
<p class="not-required">{@html skill.usage}</p>
</div>
<div slot="footer">
<!-- svelte-ignore a11y-invalid-attribute -->
<a href="#">View More</a>
<a href="/repos">Repos</a>
</div>
</Card>
{/each}
<!--Modal to be displayed on click-->
{#if activeModal != null}
<Modal bind:showModal>
<h2 slot="header" class="card-header">
{activeModal.skill}
<i class="{activeModal.logo} logo"></i>
</h2>
<p>
{activeModal.about}
</p>
<div class="card-footer">
<a href="{activeModal.link}" target="_blank" rel="noopener noreferrer">Learn More</a>
<a href="/repos">Repos</a>
</div>
</Modal>
{/if}