KevinMidboe/k9e.no
1
0
Fork 0
mirror of https://github.com/KevinMidboe/k9e.no.git synced 2025-12-08 20:29:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated long bio text & HTML elements rather than JSON

Browse Source
This commit is contained in:
Kevin
2024-02-14 18:09:49 +01:00
committed by Kevin Midboe
parent ecc197f08c
commit c4d5990a32
1 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/lib/personalia.svelte
View File

@@ -1,22 +1,14 @@
<script lang="ts"> <script lang="ts">
import colors from './colors'; import colors from './colors';
import type IPersonalia from '$lib/interfaces/IPersonalia';
const personalias: IPersonalia[] = [ const bioSelectOptions: string[] = ['short', 'long'];
{ const shortBio =
length: 'short bio', 'Hello 👋 I currently work at Aller Media as DevOps Lead. I enjoy building things with my hands & head, bouldering and teaching in my free time.';
text: 'Hello 👋 I currently work at Aller Media as DevOps Lead. I enjoy building things with my hands & head, bouldering and teaching in my free time.'
},
{
length: 'long bio',
text: 'Hello longer 👋 I currently work at Aller Media as DevOps Lead. I enjoy building things with my hands & head, bouldering and teaching in my free time.'
}
];
let selectedPersonalia = personalias[0]; let bioSelected = bioSelectOptions[0];
function setSelectedPersonalia(personalia: IPersonalia) { function setSelectedPersonalia(personalia: string) {
selectedPersonalia = personalia; bioSelected = personalia;
const color = colors[Math.floor(Math.random() * colors.length)]; const color = colors[Math.floor(Math.random() * colors.length)];
document.documentElement.style.setProperty('--selected-color', color); document.documentElement.style.setProperty('--selected-color', color);
@@ -24,17 +16,39 @@
</script> </script>
<div class="personalia-toggles"> <div class="personalia-toggles">
{#each personalias as p} {#each bioSelectOptions as p}
<button <button on:click={() => setSelectedPersonalia(p)} class={bioSelected === p ? 'selected' : ''}>
on:click={() => setSelectedPersonalia(p)} {p} bio
class={selectedPersonalia.length === p.length ? 'selected' : ''}
>
{p.length}
</button> </button>
{/each} {/each}
</div> </div>
<p>{selectedPersonalia.text}</p> <p>{shortBio}</p>
{#if bioSelected === 'long'}
<p>
I currently work at Aller Media as DevOps Lead. I enjoy building things with my hands and head,
bouldering and teaching in my free time.
</p>
<p>
Since I child I have been interested in building together with people, either from scrap wood, a
soldering iron or application of code. My 50 m2 apartment acts both as my workshop and my
playground where anything that can have ethernet has it, has a microcontroller attached to it, a
3D printed fix attached to it or hand built kitchen that fits my needs. My ideas and creativity
reaches beyond the personality built into my walls, and down into my basement where I run 5
(ambrosia) servers.
</p>
<p>
My servers let me practice end-to-end development from client application to hosting it,
including deploying, logging, updating, monitoring and backing up. I also have a unknown need
for having a offline backup of everything. This taken so far that my power can go out and
everything plugged into ethernet or wifi AP will still work internally, even security cameras
will still record to local server off battery. Nothing should be lost or unavilable, all within
my control.
</p>
{/if}
<style lang="scss"> <style lang="scss">
.personalia-toggles { .personalia-toggles {
@@ -44,11 +58,15 @@
p { p {
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.6; line-height: 1.6;
white-space: pre-line;
max-width: 800px;
} }
button { button {
width: 120px; width: 120px;
height: 30px; // height: 30px;
padding: 0.8rem 0.4rem;
border: 2px solid gray; border: 2px solid gray;
border-radius: 15px; border-radius: 15px;
box-sizing: border-box; box-sizing: border-box;