mirror of
https://github.com/LukeHagar/LukeHagar.com.git
synced 2025-12-06 04:20:17 +00:00
Mobile Formatting
This commit is contained in:
luke-hagar-sp
@@ -1,72 +1,60 @@
|
||||
<script lang="ts">
|
||||
import { AppBar } from "@skeletonlabs/skeleton";
|
||||
import { AppBar } from '@skeletonlabs/skeleton';
|
||||
</script>
|
||||
|
||||
<AppBar background="bg-transparent" class="!shadow-none">
|
||||
<svelte:fragment slot="trail">
|
||||
<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
|
||||
<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/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
|
||||
>
|
||||
Work
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
/>
|
||||
</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/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
|
||||
>
|
||||
Work
|
||||
</a>
|
||||
</div>
|
||||
</AppBar>
|
||||
|
||||
@@ -6,16 +6,16 @@
|
||||
import { AppShell } from '@skeletonlabs/skeleton';
|
||||
import Header from '$lib/Header.svelte';
|
||||
import { inject } from '@vercel/analytics';
|
||||
import { browser } from '$app/environment';
|
||||
import { browser, dev } from '$app/environment';
|
||||
import { webVitals } from '$lib/vitals';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
export let data: PageData;
|
||||
const { analyticsId } = data;
|
||||
|
||||
inject();
|
||||
if (!dev) inject();
|
||||
|
||||
$: if (browser && analyticsId) {
|
||||
$: if (browser && analyticsId && !dev) {
|
||||
webVitals({
|
||||
path: $page.url.pathname,
|
||||
params: $page.params,
|
||||
|
||||
@@ -1,61 +1,64 @@
|
||||
<script>
|
||||
import { Avatar, GradientHeading } from "@skeletonlabs/skeleton";
|
||||
import Particles from "svelte-particles";
|
||||
import { loadFull } from "tsparticles";
|
||||
import { Avatar, GradientHeading } from '@skeletonlabs/skeleton';
|
||||
import Particles from 'svelte-particles';
|
||||
import { loadFull } from 'tsparticles';
|
||||
|
||||
const particlesConfig = {
|
||||
particles: {
|
||||
color: {
|
||||
value: "#ffff",
|
||||
},
|
||||
links: {
|
||||
enable: true,
|
||||
color: "#ffff",
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
const particlesConfig = {
|
||||
particles: {
|
||||
color: {
|
||||
value: '#ffff'
|
||||
},
|
||||
links: {
|
||||
enable: true,
|
||||
color: '#ffff'
|
||||
},
|
||||
move: {
|
||||
enable: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onParticlesLoaded = (event) => {
|
||||
const particlesContainer = event.detail.particles;
|
||||
const onParticlesLoaded = (event) => {
|
||||
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
|
||||
};
|
||||
// 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) => {
|
||||
// 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);
|
||||
};
|
||||
const particlesInit = async (engine) => {
|
||||
// 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>
|
||||
|
||||
<div class="z-0">
|
||||
<Particles
|
||||
id="tsparticles"
|
||||
options={particlesConfig}
|
||||
on:particlesLoaded={onParticlesLoaded}
|
||||
{particlesInit}
|
||||
/>
|
||||
<Particles
|
||||
id="tsparticles"
|
||||
options={particlesConfig}
|
||||
on:particlesLoaded={onParticlesLoaded}
|
||||
{particlesInit}
|
||||
/>
|
||||
</div>
|
||||
<div class="z-50 mx-auto flex h-full items-center justify-center">
|
||||
<div class="card card-glass z-50 space-y-10 p-10">
|
||||
<span class="flex flex-row gap-2">
|
||||
<p class="unstyled text-6xl font-bold !text-white">Hi, I'm</p>
|
||||
<GradientHeading
|
||||
class="text-6xl"
|
||||
tag="h1"
|
||||
direction="bg-gradient-to-r"
|
||||
from="from-primary-500"
|
||||
to="to-surface-500">Luke</GradientHeading
|
||||
>
|
||||
</span>
|
||||
<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 font-bold !text-white">Hi,</p>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="unstyled text-6xl font-bold !text-white">I'm</p>
|
||||
<GradientHeading
|
||||
class="text-6xl"
|
||||
tag="h1"
|
||||
direction="bg-gradient-to-r"
|
||||
from="from-primary-500"
|
||||
to="to-surface-500">Luke</GradientHeading
|
||||
>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex justify-center space-x-2" />
|
||||
<div class="space-y-2" />
|
||||
<Avatar src="/Luke.png" width="w-48" class="mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user