mirror of
https://github.com/LukeHagar/LukeHagar.com.git
synced 2025-12-06 04:20:17 +00:00
Added Counter, Fixed Links
This commit is contained in:
luke-hagar-sp
110
src/lib/AnimatedCounter.svelte
Normal file
110
src/lib/AnimatedCounter.svelte
Normal file
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user