From f08ab015ee4c906533d0d143acaeb71ec1c70e0b Mon Sep 17 00:00:00 2001
From: luke-hagar-sp <98849695+luke-hagar-sp@users.noreply.github.com>
Date: Sun, 18 Dec 2022 20:36:06 -0600
Subject: [PATCH] Added Counter, Fixed Links

---
 src/lib/AnimatedCounter.svelte | 110 +++++++++++++++++++++++++++++++++
 src/lib/Header.svelte          |   2 +-
 src/routes/+page.svelte        |  33 ++++++++++
 3 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/AnimatedCounter.svelte

diff --git a/src/lib/AnimatedCounter.svelte b/src/lib/AnimatedCounter.svelte
new file mode 100644
index 0000000..29909ca
--- /dev/null
+++ b/src/lib/AnimatedCounter.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	/**
+	 * list of values to animate
+	 */
+	export let values: Array<string | number> = Array.from({ length: 100 }, (_, i) =>
+		new String(i).padStart(3, '0')
+	);
+	/**
+	 * counter interval between each step in milliseconds, defaults to `1000`
+	 */
+	export let interval = 1000;
+	/**
+	 * counter interval for each transition in milliseconds, defaults to `700`
+	 */
+	export let transitionInterval = 700;
+	/**
+	 * whether to start the counter immediately or wait for the `interval` to pass, defaults to `false`
+	 */
+	export let startImmediately = false;
+
+	/**
+	 * counter direction, can be `up` or `down` defaults to `down`
+	 */
+	export let direction: 'up' | 'down' = 'down';
+	/**
+	 * whether to loop the counter animation after reaching the end of  `values` array , defaults to `true`
+	 */
+	export let loop = true;
+	/**
+	 * easing function to use, defaults to `cubic-bezier(1, 0, 0, 1)`
+	 */
+	export let ease = 'cubic-bezier(1, 0, 0, 1)';
+	/**
+	 * setting to allow items in values to be displayed randomly
+	 */
+	export let random = false;
+	/**
+	 * optional initial value to start the counter from
+	 */
+	export let initialValue: string | number | undefined = undefined;
+
+	$: contentValues = values.join('\n\n');
+	$: intervalInMs = `${transitionInterval}ms`;
+
+	let index = direction === 'up' ? 0 : values.length - 1;
+	let lastIndex = initialValue ? values.indexOf(initialValue) : index;
+
+	onMount(() => {
+		// timer function
+		const start = () => {
+			index = lastIndex + (direction === 'up' ? 1 : -1);
+
+			// terminate if we looped through all values && loop is false
+			if (!loop && (index === values.length - 1 || index === 0)) {
+				clearInterval(timer);
+				return;
+			}
+			// ensure index is in range
+			if (loop && index === values.length) {
+				index = 0;
+			}
+			if (loop && index === -1) {
+				index = values.length - 1;
+			}
+
+			if (random) {
+				index = Math.floor(Math.random() * values.length);
+			}
+
+			lastIndex = index;
+		};
+
+		if (startImmediately) {
+			start();
+		}
+		let timer = setInterval(start, interval);
+
+		return () => clearInterval(timer);
+	});
+</script>
+
+<span class="sliding-text {$$props.class}">
+	<span style="--index: {index}; --interval: {intervalInMs}; --ease:{ease}">
+		<span>{contentValues}</span>
+	</span>
+</span>
+
+<style>
+	.sliding-text {
+		display: inline-block;
+		position: relative;
+		line-height: 1em;
+		height: 1em;
+	}
+	.sliding-text > span {
+		height: 1em;
+		display: inline-block;
+		overflow-y: hidden;
+	}
+	.sliding-text > span > span {
+		text-align: center;
+		transition: all var(--interval) var(--ease);
+		position: relative;
+		height: 100%;
+		white-space: pre;
+		top: calc(var(--index) * -2em);
+	}
+</style>
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 2e8ef1f..0acf552 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -48,7 +48,7 @@
 			>
 			Personal
 		</a>
-		<a href="https://github.com/LukeHagar" class="text-center">
+		<a href="https://github.com/luke-hagar-sp" class="text-center">
 			<svg class="mx-auto w-8" xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"
 				><path
 					d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0b9b918..75f8fc0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,21 @@
 <script>
+	import AnimatedCounter from '$lib/AnimatedCounter.svelte';
 	import { Avatar, GradientHeading } from '@skeletonlabs/skeleton';
 	import Particles from 'svelte-particles';
 	import { loadFull } from 'tsparticles';
 
+	const counterList = [
+		'a FullStack Developer',
+		'a Frontend Nerd',
+		'a Backend Geek',
+		'an IAM Engineer',
+		'a Cloud Support Engineer',
+		'an Open Source Contributor',
+		'a Skeleton Contributor',
+		'a Svelte Enthusiast',
+		'a Developer Advocate'
+	];
+
 	const particlesConfig = {
 		particles: {
 			color: {
@@ -60,5 +73,25 @@
 		<div class="flex justify-center space-x-2" />
 		<div class="space-y-2" />
 		<Avatar src="/Luke.png" width="w-48" class="mx-auto" />
+
+		<div class="flex flex-row justify-center">
+			<div class="skills">
+				I'm [<AnimatedCounter values={counterList} random class="custom-skill" />]
+			</div>
+		</div>
 	</div>
 </div>
+
+<style>
+	.skills {
+		display: flex;
+		justify-items: start;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	:global(.custom-skill) {
+		display: inline-block;
+		text-align: center;
+		@apply px-2;
+	}
+</style>