mirror of
https://github.com/LukeHagar/LukeHagar.com.git
synced 2025-12-06 04:20:17 +00:00
Updated Deps, adjusted Styles, Added DEV.to link
This commit is contained in:
Luke Hagar
52
package.json
52
package.json
@@ -14,34 +14,34 @@
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@skeletonlabs/skeleton": "^0.80.8",
|
||||
"@sveltejs/adapter-auto": "^1.0.0",
|
||||
"@sveltejs/adapter-vercel": "^1.0.0",
|
||||
"@sveltejs/kit": "^1.0.0",
|
||||
"@playwright/test": "^1.34.3",
|
||||
"@skeletonlabs/skeleton": "^1.6.2",
|
||||
"@sveltejs/adapter-auto": "^2.1.0",
|
||||
"@sveltejs/adapter-vercel": "^3.0.0",
|
||||
"@sveltejs/kit": "^1.20.0",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
"@typescript-eslint/parser": "^5.45.0",
|
||||
"@vercel/analytics": "^0.1.6",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.8",
|
||||
"@typescript-eslint/parser": "^5.59.8",
|
||||
"@vercel/analytics": "^1.0.1",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.41.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.20",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^2.9.2",
|
||||
"svelte-particles": "^2.6.0",
|
||||
"svelte-preprocess": "^5.0.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tslib": "^2.4.1",
|
||||
"tsparticles": "^2.6.0",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0",
|
||||
"vitest": "^0.25.3",
|
||||
"web-vitals": "^3.1.0"
|
||||
"postcss": "^8.4.24",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"svelte": "^3.59.1",
|
||||
"svelte-check": "^3.4.3",
|
||||
"svelte-particles": "^2.9.3",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"tslib": "^2.5.2",
|
||||
"tsparticles": "^2.9.3",
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.3.9",
|
||||
"vitest": "^0.31.2",
|
||||
"web-vitals": "^3.3.2"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
||||
13
src/lib/DevTOSVG.svelte
Normal file
13
src/lib/DevTOSVG.svelte
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="dev.to"
|
||||
role="img"
|
||||
class="mx-auto w-8"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<rect width="512" height="512" rx="15%" fill="white" />
|
||||
<path
|
||||
fill="black"
|
||||
d="M140.47 203.94h-17.44v104.47h17.45c10.155-.545 17.358-8.669 17.47-17.41v-69.65c-.696-10.364-7.796-17.272-17.48-17.41zm45.73 87.25c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28zm100.68-88.66H233.6v38.42h32.57v29.57H233.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 676 B |
5
src/lib/GitHubSVG.svelte
Normal file
5
src/lib/GitHubSVG.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 832 B |
@@ -1,60 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AppBar } from '@skeletonlabs/skeleton';
|
||||
</script>
|
||||
|
||||
<AppBar background="bg-transparent" class="!shadow-none">
|
||||
<div class="flex flex-row justify-center gap-4 md:justify-end">
|
||||
<a href="https://www.skeleton.dev">
|
||||
<img alt="Skeleton.dev" class="mx-auto w-8 rounded-xl" src="/favicon.png" />
|
||||
Skeleton
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/lukehagar/">
|
||||
<svg
|
||||
class="mx-auto w-8 rounded-xl"
|
||||
fill="white"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 455 455"
|
||||
style="enable-background:new 0 0 455 455;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;"
|
||||
d="M246.4,204.35v-0.665c-0.136,0.223-0.324,0.446-0.442,0.665H246.4z"
|
||||
/>
|
||||
<path
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;"
|
||||
d="M0,0v455h455V0H0z M141.522,378.002H74.016V174.906h67.506V378.002z
|
||||
M107.769,147.186h-0.446C84.678,147.186,70,131.585,70,112.085c0-19.928,15.107-35.087,38.211-35.087
|
||||
c23.109,0,37.31,15.159,37.752,35.087C145.963,131.585,131.32,147.186,107.769,147.186z M385,378.002h-67.524V269.345
|
||||
c0-27.291-9.756-45.92-34.195-45.92c-18.664,0-29.755,12.543-34.641,24.693c-1.776,4.34-2.24,10.373-2.24,16.459v113.426h-67.537
|
||||
c0,0,0.905-184.043,0-203.096H246.4v28.779c8.973-13.807,24.986-33.547,60.856-33.547c44.437,0,77.744,29.02,77.744,91.398V378.002
|
||||
z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Linkedin
|
||||
</a>
|
||||
<a href="https://github.com/LukeHagar" 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"
|
||||
/></svg
|
||||
>
|
||||
Personal
|
||||
</a>
|
||||
<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"
|
||||
/></svg
|
||||
>
|
||||
Work
|
||||
</a>
|
||||
</div>
|
||||
</AppBar>
|
||||
29
src/lib/LinkedInSVG.svelte
Normal file
29
src/lib/LinkedInSVG.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<svg
|
||||
class="mx-auto w-8 rounded-xl"
|
||||
fill="white"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 455 455"
|
||||
style="enable-background:new 0 0 455 455;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;"
|
||||
d="M246.4,204.35v-0.665c-0.136,0.223-0.324,0.446-0.442,0.665H246.4z"
|
||||
/>
|
||||
<path
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;"
|
||||
d="M0,0v455h455V0H0z M141.522,378.002H74.016V174.906h67.506V378.002z
|
||||
M107.769,147.186h-0.446C84.678,147.186,70,131.585,70,112.085c0-19.928,15.107-35.087,38.211-35.087
|
||||
c23.109,0,37.31,15.159,37.752,35.087C145.963,131.585,131.32,147.186,107.769,147.186z M385,378.002h-67.524V269.345
|
||||
c0-27.291-9.756-45.92-34.195-45.92c-18.664,0-29.755,12.543-34.641,24.693c-1.776,4.34-2.24,10.373-2.24,16.459v113.426h-67.537
|
||||
c0,0,0.905-184.043,0-203.096H246.4v28.779c8.973-13.807,24.986-33.547,60.856-33.547c44.437,0,77.744,29.02,77.744,91.398V378.002
|
||||
z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -1,22 +1,15 @@
|
||||
<script lang="ts">
|
||||
import Header from '$lib/Header.svelte';
|
||||
import '$lib/theme-luke.css';
|
||||
import { AppShell } from '@skeletonlabs/skeleton';
|
||||
import '@skeletonlabs/skeleton/styles/all.css';
|
||||
import '../app.postcss';
|
||||
|
||||
// Import the Analytics package, and the SvelteKit dev variable.
|
||||
import { dev } from '$app/environment';
|
||||
import { inject } from '@vercel/analytics';
|
||||
|
||||
// Inject the Analytics functionality
|
||||
inject({ mode: dev ? 'development' : 'production' });
|
||||
</script>
|
||||
|
||||
<!-- App Shell -->
|
||||
<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">
|
||||
<svelte:fragment slot="header">
|
||||
<!-- App Bar -->
|
||||
<Header />
|
||||
</svelte:fragment>
|
||||
<!-- Page Route Content -->
|
||||
<slot />
|
||||
</AppShell>
|
||||
<!-- Page Route Content -->
|
||||
<slot />
|
||||
|
||||
@@ -1,14 +1,19 @@
|
||||
<script lang="ts">
|
||||
import AnimatedCounter from '$lib/AnimatedCounter.svelte';
|
||||
import DevTosvg from '$lib/DevTOSVG.svelte';
|
||||
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',
|
||||
'a FullStack Developer',
|
||||
'a Senior Software Engineer',
|
||||
'a Frontend Nerd',
|
||||
'a Backend Geek',
|
||||
'an IAM Engineer',
|
||||
'an Identity and Access Mangement Engineer',
|
||||
'a Cloud Support Engineer',
|
||||
'an Open Source Contributor',
|
||||
'a Skeleton Contributor',
|
||||
@@ -18,10 +23,6 @@
|
||||
|
||||
const particlesConfig = {
|
||||
particles: {
|
||||
// angle: {
|
||||
// value: 0,
|
||||
// offset: 30
|
||||
// },
|
||||
color: {
|
||||
value: ['#ffffff', '#0033a1', '#0071ce', '#54c0e8', '#cc27b0']
|
||||
},
|
||||
@@ -31,12 +32,6 @@
|
||||
},
|
||||
move: {
|
||||
enable: true
|
||||
|
||||
// gravity: {
|
||||
// enable: true
|
||||
// }
|
||||
// speed: { min: 5, max: 20 },
|
||||
// decay: 0.01
|
||||
},
|
||||
number: {
|
||||
value: 200
|
||||
@@ -44,17 +39,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
const onParticlesLoaded = (event: any) => {
|
||||
const particlesContainer = event.detail.particles;
|
||||
|
||||
// you can use particlesContainer to call all the Container class
|
||||
// (from the core library) methods like play, pause, refresh, start, stop
|
||||
};
|
||||
|
||||
const particlesInit = async (engine: any) => {
|
||||
// you can use main to customize the tsParticles instance adding presets or custom shapes
|
||||
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
|
||||
// starting from v2 you can add only the features you need reducing the bundle size
|
||||
await loadFull(engine);
|
||||
};
|
||||
</script>
|
||||
@@ -73,18 +58,12 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="z-0">
|
||||
<Particles
|
||||
id="tsparticles"
|
||||
options={particlesConfig}
|
||||
on:particlesLoaded={onParticlesLoaded}
|
||||
{particlesInit}
|
||||
/>
|
||||
<Particles id="tsparticles" options={particlesConfig} {particlesInit} />
|
||||
</div>
|
||||
<div class="z-50 mx-auto flex h-full items-center justify-center md:p-0 p-4">
|
||||
<div class="card card-glass z-50 space-y-5 p-4 md:p-10">
|
||||
<span class="flex flex-row flex-wrap gap-2">
|
||||
<p class="unstyled text-6xl !text-white">Hi,</p>
|
||||
<p class="unstyled text-6xl !text-white">I'm Luke</p>
|
||||
<div class="z-50 mx-auto flex h-full flex-col gap-2 items-center justify-center p-4">
|
||||
<div class="w-[500px] 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" />
|
||||
@@ -98,11 +77,62 @@
|
||||
transitionInterval={700}
|
||||
values={counterList}
|
||||
random
|
||||
class="custom-skill px-2 text-secondary-500"
|
||||
class="custom-skill px-2 "
|
||||
/>]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[500px] flex flex-row justify-between card variant-glass-surface p-4">
|
||||
<a
|
||||
class="unstyled grow text-center transition ease-in-out hover:scale-125 duration-200 subpixel-antialiased scale-110"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://www.skeleton.dev"
|
||||
>
|
||||
<img alt="Skeleton.dev" class="mx-auto w-8 rounded-xl" src="/favicon.png" />
|
||||
Skeleton
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="unstyled grow text-center transition ease-in-out hover:scale-125 duration-200 subpixel-antialiased scale-110"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://www.linkedin.com/in/lukehagar/"
|
||||
>
|
||||
<LinkedInSvg />
|
||||
Linkedin
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="unstyled grow text-center transition ease-in-out hover:scale-125 duration-200 subpixel-antialiased scale-110"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://dev.to/lukehagar"
|
||||
>
|
||||
<DevTosvg />
|
||||
Dev
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="unstyled grow text-center transition ease-in-out hover:scale-125 duration-200 subpixel-antialiased scale-110"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://github.com/LukeHagar"
|
||||
>
|
||||
<GitHubSvg />
|
||||
Personal
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="unstyled grow text-center transition ease-in-out hover:scale-125 duration-200 subpixel-antialiased scale-110"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://github.com/luke-hagar-sp"
|
||||
>
|
||||
<GitHubSvg />
|
||||
Work
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -10,14 +10,7 @@ const config = {
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
vitePlugin: {
|
||||
experimental: {
|
||||
inspector: {
|
||||
holdMode: true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: ['./src/**/*.{html,js,svelte,ts}', require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
|
||||
content: [
|
||||
'./src/**/*.{html,js,svelte,ts}',
|
||||
require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {}
|
||||
},
|
||||
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography'),require('@skeletonlabs/skeleton/tailwind/theme.cjs')],
|
||||
}
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
|
||||
]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user