design changes

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,

src/lib/styles/global.css

@@ -4,9 +4,9 @@
   :root {
   --spacing-outer: 5vw;
   --spacing-nav: 5vw;
-  --color-bg: rgb(0, 0, 90);
+  --color-bg: var(--color-bg-variant-1);
-  --color-text: rgb(255, 240, 240);
+  --color-text: var(--color-text-variant-1);
-  --color-highlight: rgb(250, 125, 0);
+  --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;
+  font-family: Stratos, sans-serif;
-  letter-spacing: -0.025em;
+  font-weight: bold;
+  font-style: italic;
+  letter-spacing: -0.01em;
 }
 
 h1 {

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)');
+      // Remove inline styles to let CSS :root defaults take effect
-      document.documentElement.style.setProperty('--color-text', 'var(--color-text)');
+      document.documentElement.style.removeProperty('--color-bg');
-      document.documentElement.style.setProperty('--color-highlight', 'var(--color-highlight)');
+      document.documentElement.style.removeProperty('--color-text');
+      document.documentElement.style.removeProperty('--color-highlight');
     }
   }
 

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,
+          opacity: 0,
-          y: -window.innerHeight,
+          y: -50,
           transformOrigin: '50% 100%'
         })
         gsap.to(split.words, {
           duration: 1,
           opacity: 1,
           y: 0,
-          stagger: -0.01,
+          stagger: 0.025,
-          ease: 'elastic.out(1, .5)',
+          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]
     "
   >
   <h1
   class="
   align-middle select-none
-  leading-[0.85] text-[14.75vw] tracking-[-0.05em]
+  leading-[0.85] text-[13vw] tracking-[-0.02em]
   text-(--color-text)
   landscape:text-[9vw] landscape:px-4
   landscape:-mt-[0.5em]
-  [&_em]:not-italic [&_em]:font-normal
+  uppercase
   opacity-0 invisible
   "
   >
-    I'm Simon Flöter. <br>
+    Simon Flöter creates brands and websites <em>that stand out.</em>
-    I create brands and websites that <em>stand out.</em>
   </h1>
   </section>
 
@@ -148,7 +148,7 @@
     <h2
       class="
         select-none cursor-[url('/pointer.svg'),auto]
-        text-[12vw] leading-[0.9] tracking-[-0.033em] mb-[0.5em]
+        text-[10vw] leading-[0.9] tracking-[-0.01em] mb-[0.5em]
         landscape:text-[6vw] landscape:m-0
         [&_em]:not-italic [&_em]:font-normal [&_em]:text-(--color-highlight)
       "
@@ -158,7 +158,7 @@
     <p
       class="
         text-[0.66em] mb-[1em]
-        landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.6em] landscape:tracking-[-0.02em]
+        landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.5em] landscape:tracking-[-0.02em]
       "
     >
       I create exquisitly tailored web experiences for discerning enterprises and their audiences.
@@ -191,7 +191,7 @@
     <h2
       class="
         select-none cursor-[url('/pointer.svg'),auto]
-        text-[12vw] leading-[0.9] tracking-[-0.033em] mb-[0.5em]
+        text-[10vw] leading-[0.9] tracking-[-0.01em] mb-[0.5em]
         landscape:text-[6vw] landscape:m-0
         [&_em]:not-italic [&_em]:font-normal [&_em]:text-(--color-highlight)
       "
@@ -201,7 +201,7 @@
     <p
       class="
         text-[0.66em] mb-[1em]
-        landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.6em] landscape:tracking-[-0.02em]
+        landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.5em] landscape:tracking-[-0.02em]
       "
     >
       I'm a seasoned designer, with a long list of succesful projects and happy clients.
@@ -230,17 +230,17 @@
     <h2
       class="
         align-middle select-none cursor-[url('/pointer.svg'),auto]
-        text-[12.5vw] leading-[0.9] tracking-[-0.033em] mb-6
+        text-[12.5vw] leading-[0.9] tracking-[-0.01em] mb-6
-        landscape:text-[8vw] landscape:mb-16 landscape:mt-0 landscape:px-4
+        landscape:text-[7vw]! landscape:mb-16 landscape:mt-0 landscape:px-4
-        opacity-0 invisible
+        opacity-0 invisible text-center
-        [&_em]:not-italic [&_em]:font-normal [&_em]:text-(--color-highlight)
+        [&_em]:text-(--color-highlight)
       "
     >
       I am currently available <em>for freelance work.</em>
     </h2>
   </div>
     {#if mounted}
-      <div class="hireme-date text-[0.66em] text-center tracking-tight">
+      <div class="hireme-date text-[0.5em] text-center tracking-tight">
         (as of {currentMonth})
       </div>
     {/if}

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',
+    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)',
-    }
   }
 }

src/routes/contact/+page.svelte

@@ -79,8 +79,8 @@
 
 <div class="pagewrapper">
   <div class="intro w-full min-h-screen flex flex-col justify-center pb-16 md:pb-0">
-    <h1 class="toCanvas contact-h1">Let's be strange,<br>not strangers.</h1>
+    <h1 class="toCanvas contact-h1">Let's be strange,<br><em>not strangers.</em></h1>
-    <div class="alternatives mx-auto my-0 mb-4 w-full text-center md:mb-8 md:pb-4 [&_p]:opacity-0 [&_.button]:opacity-0 [&_p]:text-base [&_p]:my-2 md:[&_p]:text-[1.33em] [&_ul]:mx-[var(--spacing-outer)] [&_ul]:list-none [&_ul]:flex [&_ul]:justify-center [&_ul]:gap-1 [&_ul_li]:block [&_ul_li]:m-0 [&_.button]:my-1 [&_.button]:block [&_.button]:text-[0.9em] md:[&_.button]:text-[1.2em]">
+    <div class="alternatives mx-auto my-0 mb-4 w-full text-center md:mb-8 md:pb-4 [&_p]:opacity-0 [&_.button]:opacity-0 [&_p]:text-base [&_p]:my-2 md:[&_p]:text-[1.33em] [&_ul]:mx-(--spacing-outer) [&_ul]:list-none [&_ul]:flex [&_ul]:justify-center [&_ul]:gap-1 [&_ul_li]:block [&_ul_li]:m-0 [&_.button]:my-1 [&_.button]:block [&_.button]:text-[0.9em] md:[&_.button]:text-[1.2em]">
       <p>Choose your flavour of contact:</p>
       <ul>
         <li><span class="button button--primary" on:click={contactFormClickHandler} on:keydown={contactFormClickHandler} role="button" tabindex="0">Contact form</span></li>
@@ -89,10 +89,10 @@
       </ul>
     </div>
   </div>
-  <div class="formwrapper fixed inset-0 w-full h-full p-[var(--spacing-outer)] pb-16 pl-[var(--spacing-outer)] pr-[var(--spacing-outer)] bg-[var(--color-bg)] z-0 opacity-0 invisible overflow-y-auto [--form-maxwidth:1000px]">
+  <div class="formwrapper fixed inset-0 w-full h-full p-(--spacing-outer) pb-16 pl-(--spacing-outer) pr-(--spacing-outer) bg-(--color-bg) z-0 opacity-0 invisible overflow-y-auto [--form-maxwidth:1000px]">
     <span class="button button-back m-0" on:click={contactFormClickHandler} on:keydown={contactFormClickHandler} role="button" tabindex="0">← Back</span>
-    <form name="contact" method="POST" use:enhance class="box-border max-w-[var(--form-maxwidth)] mx-auto overflow-hidden py-4">
+    <form name="contact" method="POST" use:enhance class="box-border max-w-(--form-maxwidth) mx-auto overflow-hidden py-4">
-      <div class="inputs-flex-row md:flex md:gap-4 md:justify-center md:max-w-[var(--form-maxwidth)] md:mx-auto [&_label]:md:basis-1/2">
+      <div class="inputs-flex-row md:flex md:gap-4 md:justify-center md:max-w-(--form-maxwidth) md:mx-auto [&_label]:md:basis-1/2">
         <label for="name" class="contact-label">
           <input type="text" name="name" id="name" placeholder="Your name" value={form?.fields?.name ?? ''} class="contact-input">
         </label>
@@ -103,13 +103,13 @@
       <label for="contact" class="contact-label">
         <textarea rows="8" name="contact" id="contact" placeholder="Your business propositions, praise, complaints and/or threats" required class="contact-input">{form?.fields?.contact ?? ''}</textarea>
       </label>
-      <div class="disclaimer max-w-[var(--form-maxwidth)] my-4 mx-auto text-base">
+      <div class="disclaimer max-w-(--form-maxwidth) my-4 mx-auto text-base">
         <p>Disclaimer: I will only use the data you submit here (name, email, message) to respond. I will not pass it on to any third party. If I don't hear from you I will delete the data and keep no records of it.</p>
       </div>
       {#if form?.error}
-        <p class="form-error max-w-[var(--form-maxwidth)] mx-auto mb-4 p-3 border border-[var(--color-text)] rounded text-[0.95em] bg-white/10" role="alert" aria-live="polite">{form.error}</p>
+        <p class="form-error max-w-(--form-maxwidth) mx-auto mb-4 p-3 border border-(--color-text) rounded text-[0.95em] bg-white/10" role="alert" aria-live="polite">{form.error}</p>
       {/if}
-      <div class="send max-w-[var(--form-maxwidth)] mx-auto">
+      <div class="send max-w-(--form-maxwidth) mx-auto">
         <button class="button button--xl button--primary" type="submit">Send it!</button>
       </div>
     </form>
@@ -122,8 +122,12 @@
     visibility: hidden;
     font-size: 12vw;
     line-height: .9;
-    letter-spacing: -0.04em;
+    letter-spacing: -0.02em;
     margin: 1em var(--spacing-nav) 1em var(--spacing-nav);
+
+    & em {
+      color: var(--color-highlight);
+    }
   }
   @media screen and (min-width: 768px) {
     .contact-h1 {

src/routes/contact/+page.ts

@@ -2,6 +2,11 @@ export const prerender = false
 export function load() {
   return {
     title: 'Contact me!',
-    description: 'Reach out via a contact form, email or LinkedIn'
+    description: 'Reach out via a contact form, email or LinkedIn',
+    theme: {
+      bg: '#01132D',
+      text: '#FFFFFF',
+      highlight: '#E95E33',
+    }
   };
 }

src/routes/service/+page.svelte

@@ -211,7 +211,10 @@
     color: var(--color-text);
   }
   @media screen and (min-width: 768px) {
-    h1 { font-size: 6vw; letter-spacing: -0.025em; }
+    h1 { 
+      font-size: 6vw; 
+      letter-spacing: -0.01em; 
+    }
   }
   .services {
     opacity: 0;

src/routes/service/+page.ts

@@ -3,9 +3,9 @@ export function load() {
     title: 'Services I provide',
     description: 'A list of profesional webdevelopment and design services I provide',
     theme: {
-      bg: '#00005A',
+      bg: '#5959A2',
       text: '#FFF0F0',
-      highlight: '#FA7D00',
+      highlight: '#490A0A',
     }
   };
 }

src/routes/work/+page.server.ts

@@ -17,9 +17,9 @@ export async function load() {
       title: 'Work References',
       description: 'A few of the projects I have worked on',
       theme: {
-        bg: '#FA7D00',
+        bg: '#E95E33',
         text: '#FFFFFF',
-        highlight: '#00005A',
+        highlight: '#01132D',
       }
     }
   } catch (error) {

src/routes/work/+page.svelte

@@ -3,7 +3,26 @@
   import gsap from 'gsap';
   import { SplitText } from 'gsap/SplitText';
 	import { goto } from '$app/navigation';
-  let { data } = $props();
+  let { data }: {
+    data: {
+      posts: Array<{
+        meta: {
+          order: number,
+          title: string,
+          tags: string[],
+          svg: string,
+        },
+        path: string
+      }>,
+      title: string,
+      description: string,
+      theme: {
+        bg: string,
+        text: string,
+        highlight: string,
+      }
+    }
+  } = $props();
 
   const orderedPosts = $derived.by(() => (data.posts || []).sort((a, b) => {
     return a.meta.order - b.meta.order;
@@ -291,7 +310,7 @@
     flex-direction: column;
     justify-content: center;
     align-content: center;
-    letter-spacing: -0.05em;
+    letter-spacing: -0.02em;
     z-index: 10;
     transform: translateZ(500px);
     margin-left: 40.5vw;
@@ -302,7 +321,7 @@
     .headline {
       margin-left: 41.66vw;
       margin-top: 40.5vh;
-      font-size: 7vw;
+      font-size: 5vw;
       transform: translateZ(600px);
     }
   }

src/routes/work/[slug]/+page.svelte

@@ -45,7 +45,7 @@
       svg-logo
       flex flex-col justify-center
       w-full h-full m-auto p-[3em]
-      text-(--color-highlight)
+      text-[#440011]
       [&_svg]:object-fill [&_svg]:w-full [&_svg]:h-full
       md:w-3/5
     "