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

CHORE: Cleaned up components to make main.svelte easier to maintain.

Browse Source
This commit is contained in:
Luke Else
2023-10-25 11:28:22 +01:00
parent ee2098e6e6
commit d8d40ddc30
2 changed files with 62 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/main.svelte
View File

@@ -3,13 +3,9 @@
import { Toast, ToastType } from "$lib/toast"; import { Toast, ToastType } from "$lib/toast";
import { addToast } from "$lib/store"; import { addToast } from "$lib/store";
import Card from '$lib/components/Card.svelte'; import Skills from './skills.svelte';
import Modal from '$lib/components/Modal.svelte';
import Timeline from "./timeline.svelte"; import Timeline from "./timeline.svelte";
let showModal: boolean = false;
let activeModal: any = null;
</script> </script>
<style> <style>
@@ -65,18 +61,6 @@
font-size: 1.5em; 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 */ /* Skills Cards CSS */
.container { .container {
padding-top: 3em; padding-top: 3em;
@@ -118,22 +102,7 @@
<h1>Skills</h1> <h1>Skills</h1>
<hr /> <hr />
<div class="cards"> <div class="cards">
{#each info.skills as skill} <Skills skills="{info.skills}"></Skills>
<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}
</div> </div>
</div> </div>
@@ -152,24 +121,4 @@
</div> </div>
</div> </div>
<div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div> <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
{/await} {/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}