Initital commit simple bio page

src/lib/colors.ts

@@ -0,0 +1,3 @@
+const colors = ['#24d05a', '#eb4888', '#10a2f5', '#e9bc3f'];
+
+export default colors;

src/lib/images.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type IImage from '$lib/interfaces/IImage';
+
+	let images: IImage[] = [
+		{ url: 'IMG_5613.jpeg', alt: 'Kevin at beach' },
+		{ url: 'IMG_4551.jpeg', alt: 'Kevin fishing' },
+		{ url: 'IMG_1925.jpeg', alt: 'Kevin in a boat with dog' }
+	];
+
+	function cycle() {
+		images.push(images.shift() || images[0]);
+		images = images;
+	}
+</script>
+
+<div
+	class="images"
+	on:click={cycle}
+	on:keydown={(e) => e.key === 'Enter'}
+	role="button"
+	tabindex="0"
+>
+	{#each images as image (image.url)}
+		<img src={image.url} alt={image.alt} />
+	{/each}
+</div>
+
+<style lang="scss">
+	div.images {
+		position: relative;
+		display: flex;
+		user-select: none;
+		-webkit-user-select: none;
+		margin-left: 40px;
+
+		img {
+			position: absolute;
+			margin-top: 10vh;
+			max-height: 80vh;
+			transition: all 0.51s ease;
+		}
+
+		@for $i from 0 through 4 {
+			img:nth-of-type(#{$i}) {
+				left: calc(-10px * $i);
+				top: calc(-10px * $i);
+			}
+		}
+	}
+</style>

src/lib/interfaces/IImage.ts

@@ -0,0 +1,6 @@
+interface IImage {
+	url: string;
+	alt: string;
+}
+
+export type { IImage };

src/lib/interfaces/ILink.ts

@@ -0,0 +1,6 @@
+interface ILink {
+	title: string;
+	url: string;
+}
+
+export default ILink;

src/lib/interfaces/IPersonalia.ts

@@ -0,0 +1,6 @@
+interface IPersonalia {
+	length: string;
+	text: string;
+}
+
+export type { IPersonalia };

src/lib/linkColor.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import colors from './colors';
+
+	function getRandomColor() {
+		return colors[Math.floor(Math.random() * colors.length)];
+	}
+
+	function setRandomLinkColor() {
+		Array.from(document.getElementsByTagName('a')).forEach((e) => {
+			e.style.color = getRandomColor();
+		});
+	}
+
+	function setColorHoverListener() {
+		Array.from(document.querySelectorAll('a, button')).forEach((e) => {
+			e.addEventListener('mouseover', setRandomLinkColor);
+		});
+	}
+
+	onMount(() => {
+		setRandomLinkColor();
+		setColorHoverListener();
+	});
+</script>

src/lib/personalia.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import colors from './colors';
+	import type IPersonalia from '$lib/interfaces/IPersonalia';
+
+	const personalias: IPersonalia[] = [
+		{
+			length: 'short bio',
+			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];
+
+	function setSelectedPersonalia(personalia: IPersonalia) {
+		selectedPersonalia = personalia;
+
+		const color = colors[Math.floor(Math.random() * colors.length)];
+		document.documentElement.style.setProperty('--selected-color', color);
+	}
+</script>
+
+<div class="personalia-toggles">
+	{#each personalias as p}
+		<button
+			on:click={() => setSelectedPersonalia(p)}
+			class={selectedPersonalia.length === p.length ? 'selected' : ''}
+		>
+			{p.length}
+		</button>
+	{/each}
+</div>
+
+<p>{selectedPersonalia.text}</p>
+
+<style lang="scss">
+	.personalia-toggles {
+		margin-top: 3rem;
+	}
+
+	button {
+		width: 120px;
+		height: 30px;
+		border: 2px solid gray;
+		border-radius: 15px;
+		box-sizing: border-box;
+		color: gray;
+		font-size: 1rem;
+		background-color: white;
+		overflow: auto;
+		transition: 0.2s ease all;
+
+		&:not(&:last-of-type) {
+			margin-right: 1rem;
+		}
+
+		&.selected {
+			font-weight: bold;
+			border-color: var(--selected-color);
+			color: var(--selected-color);
+		}
+
+		&:hover {
+			background: rgba(150, 151, 156, 0.1);
+			cursor: pointer;
+		}
+	}
+</style>