LukeParke/LukeHagar.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/LukeHagar.com.git synced 2025-12-06 04:20:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added Atropos

Browse Source
This commit is contained in:
Luke Hagar
2023-07-06 14:34:32 -05:00
parent c80091db8e
commit 8d2928bee3
4 changed files with 75 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -15,7 +15,7 @@
},
"devDependencies": {
"@playwright/test": "^1.34.3",
"@skeletonlabs/skeleton": "^1.6.2",
"@skeletonlabs/skeleton": "^1.9.0",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/adapter-vercel": "^3.0.0",
"@sveltejs/kit": "^1.20.0",
@@ -24,6 +24,7 @@
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"@vercel/analytics": "^1.0.1",
"atropos": "^2.0.2",
"autoprefixer": "^10.4.14",
"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",

59
src/routes/+layout.svelte
View File

@@ -1,15 +1,66 @@
<script lang="ts">
import '$lib/theme-luke.css';
import '@skeletonlabs/skeleton/styles/all.css';
import '@skeletonlabs/skeleton/styles/skeleton.css';
import '../app.postcss';
// Import the Analytics package, and the SvelteKit dev variable.
import { dev } from '$app/environment';
import { inject } from '@vercel/analytics';
import Particles from 'svelte-particles';
import { loadFull } from 'tsparticles';
import Atropos from 'atropos';
import 'atropos/css';
import { onMount } from 'svelte';
let div: HTMLDivElement;
onMount(() => {
// Initialize
Atropos({
el: div,
activeOffset: 5,
shadowScale: 0
});
});
// Inject the Analytics functionality
inject({ mode: dev ? 'development' : 'production' });
const particlesConfig = {
particles: {
color: {
value: ['#ffffff', '#0033a1', '#0071ce', '#54c0e8', '#cc27b0']
},
links: {
enable: true,
color: '#54c0e8'
},
move: {
enable: true
},
number: {
value: 200
}
}
};
const particlesInit = async (engine: any) => {
await loadFull(engine);
};
</script>
<!-- Page Route Content -->
<slot />
<!-- main Atropos container (required), add your custom class here -->
<div class="atropos h-full" bind:this={div}>
<!-- scale container (required) -->
<div class="atropos-scale">
<!-- rotate container (required) -->
<div class="atropos-rotate">
<!-- inner container (required) -->
<div class="atropos-inner">
<Particles id="tsparticles" options={particlesConfig} {particlesInit} />
<!-- Page Route Content -->
<slot />
</div>
</div>
</div>
</div>

41
src/routes/+page.svelte
View File

@@ -4,8 +4,6 @@
import GitHubSvg from '$lib/GitHubSVG.svelte';
import LinkedInSvg from '$lib/LinkedInSVG.svelte';
import { Avatar } from '@skeletonlabs/skeleton';
import Particles from 'svelte-particles';
import { loadFull } from 'tsparticles';
const counterList = [
's Space Cowboy',
@@ -20,28 +18,6 @@
'a Svelte Enthusiast',
'a Developer Advocate'
];
const particlesConfig = {
particles: {
color: {
value: ['#ffffff', '#0033a1', '#0071ce', '#54c0e8', '#cc27b0']
},
links: {
enable: true,
color: '#54c0e8'
},
move: {
enable: true
},
number: {
value: 200
}
}
};
const particlesInit = async (engine: any) => {
await loadFull(engine);
};
</script>
<svelte:head>
@@ -57,27 +33,28 @@
<meta property="og:image" content="/Luke.png" />
</svelte:head>
<div class="z-0">
<Particles id="tsparticles" options={particlesConfig} {particlesInit} />
</div>
<div class="z-50 mx-auto flex h-full flex-col gap-2 items-center justify-center p-4">
<div
class="mx-auto flex h-full flex-col gap-2 items-center justify-center p-4"
data-atropos-offset="+20"
>
<div class="min-w-[380px] max-w-[500px] w-full card variant-glass-surface z-50 space-y-5 p-4">
<span class="flex flex-row justify-center flex-wrap gap-2 text-3xl">
<p>Hi, I'm Luke</p>
</span>
<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="space-y-2">
<Avatar src="/Luke.png" width="w-48" class="mx-auto" />
</div>
<div class="flex flex-row justify-center">
<div class="skills">
<div class="skills text-2xl">
I'm [<AnimatedCounter
interval={1200}
transitionInterval={700}
values={counterList}
random
class="custom-skill px-2 "
class="custom-skill px-2 text-2xl"
/>]
</div>
</div>

19
yarn.lock
View File

@@ -264,13 +264,12 @@
estree-walker "^2.0.1"
picomatch "^2.2.2"
"@skeletonlabs/skeleton@^1.6.2":
version "1.6.2"
resolved "https://registry.yarnpkg.com/@skeletonlabs/skeleton/-/skeleton-1.6.2.tgz#437a86acc78f4f9012769464a4c06179bc43adb6"
integrity sha512-Xp+gCAgxEfzwa6lUzeFHhIiTzPe7wKAWZJzo0UnNJfgMCuJy4Txu2bDXz6ZCyu9+B6+i8lShFPxPuENqTfP14w==
"@skeletonlabs/skeleton@^1.9.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@skeletonlabs/skeleton/-/skeleton-1.9.0.tgz#0b297af954b35c011feca9347c2d1e5fa24585a6"
integrity sha512-8dPp2l4d7p07FD4PXejY4p4my8SpurHwGPw2SCMvKPVde49js13BTvZ26dWo7pfPuPozrXsOzEF2mZxpSv2W+A==
dependencies:
esm-env "1.0.0"
svelte "3.58.0"
"@sveltejs/adapter-auto@^2.1.0":
version "2.1.0"
@@ -635,6 +634,11 @@ async-sema@^3.1.1:
resolved "https://registry.yarnpkg.com/async-sema/-/async-sema-3.1.1.tgz#e527c08758a0f8f6f9f15f799a173ff3c40ea808"
integrity sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==
atropos@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/atropos/-/atropos-2.0.2.tgz#8024e845487a69662b70fdb83f5e81039c934def"
integrity sha512-8f0u0hEOlBTWTSvzY17TcHuQjxUIpkTBq70/I4+UF5B43ORtOoRjm8TPBYEgLM8Ba9AWf6PDtkagbYoybdjaKg==
autoprefixer@^10.4.14:
version "10.4.14"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
@@ -2212,11 +2216,6 @@ svelte-preprocess@^5.0.3, svelte-preprocess@^5.0.4:
sorcery "^0.11.0"
strip-indent "^3.0.0"
svelte@3.58.0:
version "3.58.0"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
svelte@^3.59.1:
version "3.59.1"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.59.1.tgz#3de3d56b9165748f32f3131589b8d183cabe7449"