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

Updated content, created modal and changed skills card to style nicer on smaller screens

Browse Source
This commit is contained in:
Luke Else 2023-09-26 20:09:17 +01:00
parent 3f171dea3c
commit 86652a4f09
4 changed files with 131 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/Modal.svelte Normal file
View File

@ -0,0 +1,69 @@
<script lang="ts">
export let showModal: boolean;
let dialog: HTMLDialogElement;
$: if (dialog && showModal) dialog.showModal();
</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()}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
<slot name="header" />
<hr />
<slot />
<hr />
<!-- svelte-ignore a11y-autofocus -->
<button autofocus on:click={() => dialog.close()}>Close</button>
</div>
</dialog>
<style>
dialog {
max-width: 70%;
border-radius: 0.2em;
border: none;
padding: 0em 2em 2em 2em;
border-left: 2em;
border-right: 2em;
background: var(--bg);
color: var(--fg);
box-shadow: .5em .5em .5em var(--red);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.3);
}
dialog > div {
padding: 1em;
}
dialog[open] {
animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoom {
from {
transform: scale(0.95);
}
to {
transform: scale(1);
}
}
dialog[open]::backdrop {
animation: fade 0.5s ease-out;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
button {
display: block;
}
</style>

8
src/app.html
View File

@ -30,6 +30,14 @@
margin: 2rem;
}
h1, h2, h3 {
color: var(--red);
}
hr {
border: .2em solid var(--bg-grad);
border-radius: 5em;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {

57
src/main.svelte
View File

@ -2,6 +2,11 @@
import { getJson } from "$lib/data";
import { Toast, ToastType } from "$lib/toast";
import { addToast } from "$lib/store";
import Modal from './Modal.svelte';
let showModal: boolean = false;
let activeModal: any = null;
</script>
<style>
@ -46,10 +51,19 @@
display: flex;
align-items: center;
justify-content: space-between;
color: var(--red);
/*text-decoration: underline 5px solid var(--bg-grad);*/
border-bottom: 5px solid var(--bg-grad);
margin-bottom: 1em;
margin-bottom: 0em;
}
.card-header h1 {
font-size: 2em;
}
.card-header h2 {
font-size: 1.5em;
}
.card-header h3 {
font-size: 1.5em;
}
.card-header .logo {
@ -62,7 +76,7 @@
.skills-container {
max-width: 90%;
padding: 0em 2em;
margin: 0em auto;
margin: em auto;
}
.cards {
@ -80,7 +94,8 @@
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 0 0 20%;
flex: 2 1 20%;
min-width: 10em;
padding: .5em 2.5em 2em 2.5em;
background: var(--bg-grad);
border-radius: .5em;
@ -92,12 +107,13 @@
}
.card .card-content {
margin: 1em 0;
margin: 2em 0em;
max-width: 85%;
}
.card .card-footer {
.card-footer {
display: flex;
gap: 1.5em;
justify-content: space-between;
margin-top: auto;
}
@ -116,7 +132,7 @@
<h1>{info.name}</h1>
<h3 class="not-required">{info.job_title}</h3>
</div>
<hr />
<div class="flex-container">
<img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
<p class="about">{@html info.about}</p>
@ -126,12 +142,15 @@
<div class="skills-container">
<ul class="cards">
{#each info.skills as skill}
<li class="card">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li on:click={() => {showModal = true; activeModal = skill}} class="card">
<div>
<div class="card-header">
<h2>{skill.skill}</h2>
<i class="{skill.logo} logo"></i>
</div>
<hr />
<div class="card-content">
<p class="not-required">{skill.about}</p>
</div>
@ -152,3 +171,21 @@
</div>
<div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
{/await}
{#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}">Learn More</a>
<a href="/repos">Repos</a>
</div>
</Modal>
{/if}

9
static/json/me.json
View File

@ -6,17 +6,20 @@
{
"skill": "Rust",
"logo": "devicon-rust-plain",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate"
"link": "https://rust-lang.org",
"about": "Rust is a remarkable programming language that combines the best of both high-level and low-level programming. It prioritizes safety and efficiency through strict memory management and concurrent programming features, all while maintaining clean and readable code. The active Rust community makes it a valuable choice for building reliable software."
},
{
"skill": "Svelte",
"logo": "devicon-svelte-plain",
"about": "Lorem ipsum dolor sit alore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate"
"link": "https://svelte.dev",
"about": "Svelte is an impressive web framework that stands out in the world of front-end development. It's known for its unique approach, compiling components to highly optimized vanilla JavaScript, resulting in blazing-fast web applications. Svelte's simplicity and declarative syntax make it easy to learn and use, and it encourages efficient, maintainable code. "
},
{
"skill": "Git",
"logo": "devicon-git-plain",
"about": "Lorem ipsum doerit in voluptate"
"link": "https://git-scm.com",
"about": "Git, a fundamental tool in version control, streamlines collaboration and code management. Its simplicity and robustness empower developers to track changes, collaborate seamlessly, and maintain code efficiently. With Git, managing and tracking code changes becomes a breeze, making it an essential tool for software development."
}
],
"about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>."