diff --git a/src/lib/components/HomeCanvas.svelte b/src/lib/components/HomeCanvas.svelte index 4903c3a..dcfbf88 100644 --- a/src/lib/components/HomeCanvas.svelte +++ b/src/lib/components/HomeCanvas.svelte @@ -87,7 +87,7 @@ onMount(()=>{ strength: -0.25, duration: .5, ease: 'power4.inOut', - }, 1.5) + }, 2) introTl.to(bulgefilter, { strength: 0.5, duration: 1.25, diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css index 5d570e6..9f38fc5 100644 --- a/src/lib/styles/global.css +++ b/src/lib/styles/global.css @@ -4,9 +4,9 @@ :root { --spacing-outer: 5vw; --spacing-nav: 5vw; - --color-bg: rgb(0, 0, 90); - --color-text: rgb(255, 240, 240); - --color-highlight: rgb(250, 125, 0); + --color-bg: var(--color-bg-variant-1); + --color-text: var(--color-text-variant-1); + --color-highlight: var(--color-highlight-variant-1); --color-bg-variant-1: rgb(207, 63, 70); --color-text-variant-1: rgb(255, 234, 217); @@ -47,6 +47,65 @@ font-style: italic; font-display: swap; } +@font-face { + font-family: 'Lack'; + src: url('/fonts/Lack-Regular.woff2') format('woff2'); + font-weight: normal; + font-display: swap; +} +@font-face { + font-family: 'Syne'; + src: url('/fonts/Syne-Regular.woff2') format('woff2'); + font-weight: normal; + font-display: swap; +} +@font-face { + font-family: 'Syne'; + src: url('/fonts/Syne-Bold.woff2') format('woff2'); + font-weight: bold; + font-display: swap; +} +@font-face { + font-family: 'Syne'; + src: url('/fonts/SyneTactile-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Cantique'; + src: url('/fonts/Cantique-Normal.woff2') format('woff2'); + font-display: swap; +} +@font-face { + font-family: 'Feroniapi'; + src: url('/fonts/Feroniapi-MediumItalic.woff2') format('woff2'); + font-display: swap; +} +@font-face { + font-family: 'Lineal'; + src: url('/fonts/LinealVF.woff2') format('woff2'); + font-display: swap; +} +@font-face { + font-family: 'LeMurmure'; + src: url('/fonts/LeMurmure-Regular.woff2') format('woff2'); + font-display: swap; +} +@font-face { + font-family: 'PPFormula'; + src: url('/fonts/PPFormula-Medium.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'PPFormula'; + src: url('/fonts/PPFormula-ExtraBold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; +} a:hover, input:hover, button:hover { cursor: url('/pointer.svg'), auto; @@ -54,7 +113,7 @@ a:hover, input:hover, button:hover { body { cursor: url('/cursor.svg'), auto; - font-family: stratos, sans-serif; + font-family: Stratos, sans-serif; font-size: var(--font-size-p); padding: 0; margin: 0; @@ -73,8 +132,10 @@ body * { :where(h1, h2, h3, h4, h5) { font-size: 2em; line-height: 1.1; - font-weight: 400; - letter-spacing: -0.025em; + font-family: Stratos, sans-serif; + font-weight: bold; + font-style: italic; + letter-spacing: -0.01em; } h1 { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a932406..e5ed761 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -54,14 +54,15 @@ } function setTheme() { - if (page.data.theme) { + if (page.data.theme && page.data.theme.bg && page.data.theme.text && page.data.theme.highlight) { document.documentElement.style.setProperty('--color-bg', page.data.theme.bg); document.documentElement.style.setProperty('--color-text', page.data.theme.text); document.documentElement.style.setProperty('--color-highlight', page.data.theme.highlight); } else { - document.documentElement.style.setProperty('--color-bg', 'var(--color-bg)'); - document.documentElement.style.setProperty('--color-text', 'var(--color-text)'); - document.documentElement.style.setProperty('--color-highlight', 'var(--color-highlight)'); + // Remove inline styles to let CSS :root defaults take effect + document.documentElement.style.removeProperty('--color-bg'); + document.documentElement.style.removeProperty('--color-text'); + document.documentElement.style.removeProperty('--color-highlight'); } } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ad6dca9..6245725 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -28,7 +28,7 @@ duration: .5, color: 'var(--color-highlight)', ease: 'power4.out', - delay: 2 + delay: 2.55 }) sections.forEach( (section) => { @@ -38,16 +38,17 @@ word.innerHTML = word.innerHTML.replace(' ', ''); }) gsap.set(split.words, { - opacity: 1, - y: -window.innerHeight, + opacity: 0, + y: -50, transformOrigin: '50% 100%' }) gsap.to(split.words, { duration: 1, opacity: 1, y: 0, - stagger: -0.01, - ease: 'elastic.out(1, .5)', + stagger: 0.025, + ease: 'power2.inOut', + // ease: 'elastic.out(1, .5)', delay: .3 }) } @@ -108,23 +109,22 @@ snap-start box-border px-(--spacing-outer) p-(--spacing-outer) min-h-svh flex flex-col justify-center - max-w-full landscape:max-w-[75vw] landscape:mx-auto + max-w-full landscape:max-w-[74vw] landscape:mx-auto cursor-[url('/pointer.svg'),auto] " >

- I'm Simon Flöter.
- I create brands and websites that stand out. + Simon Flöter creates brands and websites that stand out.

@@ -148,7 +148,7 @@

I create exquisitly tailored web experiences for discerning enterprises and their audiences. @@ -191,7 +191,7 @@

I'm a seasoned designer, with a long list of succesful projects and happy clients. @@ -230,17 +230,17 @@

{#if mounted} -
+
(as of {currentMonth})
{/if} diff --git a/src/routes/+page.ts b/src/routes/+page.ts index 9a078b7..ea1222f 100644 --- a/src/routes/+page.ts +++ b/src/routes/+page.ts @@ -2,11 +2,6 @@ export const prerender = true export function load() { return { title: 'Simon Flöter, creative developer and designer', - description: 'Simon Flöter is a creative developer and designer you can hire as a freelancer', - theme: { - bg: 'rgb(0, 0, 90)', - text: 'rgb(255, 240, 240)', - highlight: 'rgb(250, 125, 0)', - } + description: 'Simon Flöter is a creative developer and designer you can hire as a freelancer' } } \ No newline at end of file diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte index 2e261f0..868401b 100644 --- a/src/routes/contact/+page.svelte +++ b/src/routes/contact/+page.svelte @@ -79,8 +79,8 @@
-

Let's be strange,
not strangers.

-
+

Let's be strange,
not strangers.

+

Choose your flavour of contact:

  • Contact form
    • @@ -89,10 +89,10 @@
-