meta data for SEO

src/routes/+layout.svelte

@@ -2,19 +2,25 @@
   import '$lib/styles/global.scss';
   import Header from '$lib/components/Header.svelte';
   import Loader from '$lib/components/Loader.svelte';
-  import { navigating } from '$app/stores';
+  import { navigating, page } from '$app/stores';
   export let data;
-  
 </script>
 
+<svelte:head>
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content={`https://floter.design`+data.pathname} />
+  <meta property="og:image" content="https://floter.design/ogimage.png">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="description" content={$page.data.description ? $page.data.description : 'Simon Flöter is a designer and creative developer'} />
+  <title>{$page.data.title ? $page.data.title : 'Simon Flöter, Designer and Creative Developer'}</title>
+</svelte:head>
+
 <Header />
-  {#key data.pathname}
-    <div 
-      class="content"
-    >
+{#key data.pathname}
+  <div class="content">
     {#if $navigating} 
       <Loader />
     {/if}
     <slot />
   </div>
-  {/key}
+{/key}

src/routes/+page.svelte

@@ -13,9 +13,10 @@
   let canvasElems: Array<HTMLElement>;
   let imgElems: Array<HTMLElement>;
   let mounted = false;
+  let currentMonth: string;
 
   onMount( () => {
-
+    currentMonth = new Date().toLocaleString('en-UK', { month: 'long', year: 'numeric' });
     mounted = true;
 
     gsap.registerPlugin( ScrollTrigger, ScrollToPlugin, SplitText );
@@ -84,6 +85,7 @@
       }) 
     })
 
+
     return () => {
       gsap.killTweensOf(canvasElems);
       ScrollTrigger.getAll().forEach( instance => instance.kill() );
@@ -91,6 +93,7 @@
   });
 
 </script>
+
 {#if !mounted}
   <Loader />
 {/if}
@@ -98,9 +101,6 @@
   <section class="canvasized splash"> 
     <h1 class="align-middle">I create digital experiences that <em>stand out</em> from the rest.</h1>
   </section>
-  <section class="canvasized introduction"> 
-    <h2 class="align-middle">My name is Simon, I help my clients reach their audiences using <em>my skills:</em></h2>
-  </section>
   <section class="dev">
     <figure class="dev-image">
       <HomeIlluDev />
@@ -124,9 +124,12 @@
     </div>
   </section>
   <section class="canvasized hireme">
-    <h2 class="align-middle">I work as a free agent. You can <em>hire me</em> for your noble enterprise.</h2>
+    <h2 class="align-middle">I am currently available <em>for freelance work.</em></h2>
+    {#if mounted}
+    <div class="hireme-date">(as of { currentMonth })</div>
+    {/if}
     <div class="cta" style="text-align: center">
-      <a href="/contact" class="button button--xl button--primary">Contact me</a>
+      <a href="/contact" class="button button--xl button--primary">Get in touch</a>
     </div>
   </section>
 </article>
@@ -167,21 +170,16 @@
     justify-content: start;
     min-height: 100svh;
     justify-content: center;
-    margin-bottom: -1em;
     max-width: 100%;
     padding: var(--spacing-outer);
     
     @media screen and (orientation: landscape) {
-      padding: var(--spacing-outer) calc(var(--spacing-outer) * 2);
+      padding: 0 calc(var(--spacing-outer) * 2);
+
+      & h1 {
+        margin: -.5em 0 0 0;
       }
     }
-  .introduction {
-    h2 {
-      font-size: 1.53em;
-      letter-spacing: -0.033em;
-      margin-bottom: 0;
-      line-height: .9;
-    }
   }
   .dev-image {
     position:relative; 
@@ -224,11 +222,18 @@
       font-size: 8vw;
       margin-bottom: 0.5em;
       margin-top: 0;
+      padding: 0 .25em;
     }
   }
+  .hireme-date {
+    font-size: .66em;
+    text-align: center;
+    letter-spacing: -0.02em;
+  }
   h2 {
     font-size: 12vw;
     line-height: .9;
+    letter-spacing: -0.033em;
     margin: 0 0 0.5em 0;
     -webkit-touch-callout: none; /* Safari */
     -webkit-user-select: none; /* Chrome */     
@@ -236,7 +241,7 @@
     -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none; 
     @media screen and (orientation: landscape) {
-      font-size: 8vw;
+      font-size: 6.66vw;
       margin: 0;
     }
     & > em {
@@ -249,7 +254,6 @@
     line-height: .85;
     font-size: 14.75vw;
     letter-spacing: -0.05em;
-    margin-top: -.5em;
     color: var(--color-highlight);
     -webkit-touch-callout: none; /* Safari */
     -webkit-user-select: none; /* Chrome */     
@@ -258,7 +262,8 @@
     user-select: none; 
     
     @media screen and (orientation: landscape) {
-      font-size: 11vw;
+      font-size: 10vw;
+      padding: 0 1em;
     }
     & > em {
       font-style: normal;

src/routes/+page.ts

@@ -0,0 +1,7 @@
+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'
+  }
+}

src/routes/about/+page.svelte

@@ -1,53 +0,0 @@
-<script lang='ts'>
-  import * as PIXI from 'pixi.js';
-  import { onMount } from 'svelte';
-  import { gsap } from 'gsap';
-  
-  onMount( async () => {
-    // const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-    // const app = new PIXI.Application({
-    //   backgroundColor: 0x000000,
-    //   backgroundAlpha: 0,
-    //   resizeTo: window,
-    //   antialias: true,
-    //   resolution: 2,
-    //   view: canvas
-    // })
-
-    // const imageurl = 'work/peak/peak_hero.png'
-    // // create a PIXI texture and create one sprite per quarter of the original image of the texture
-    // const texture = await PIXI.Texture.from(imageurl)
-    // texture.baseTexture.width = window.innerWidth
-    // texture.baseTexture.height = window.innerWidth / 1.5
-
-    // const rows = 50
-    // const cols = 50
-
-    // for (let i = 0; i < rows; i++) {
-    //   for (let j = 0; j < cols; j++) {
-    //     const thisTexture = new PIXI.Texture(texture.baseTexture, new PIXI.Rectangle(
-    //       j * window.innerWidth / cols,
-    //       i * window.innerHeight / rows,
-    //       window.innerWidth / cols,
-    //       window.innerHeight / rows
-    //     ))
-
-    //     const sprite = new PIXI.Sprite(thisTexture)
-    //     sprite.width = window.innerWidth / cols
-    //     sprite.height = window.innerHeight / rows 
-    //     sprite.x = sprite.width * j 
-    //     sprite.y = sprite.height * i
-    //     app.stage.addChild(sprite)
-    //   }
-    // }
-  })
-</script>
-
-<article>
-  <h1>Hello world</h1>
-  <p>Is this the text you're looking for?</p>
-</article>
-<canvas></canvas>
-
-
-<style src="./about.scss" lang="scss"></style>

src/routes/about/about.scss

@@ -1,10 +0,0 @@
-article {
-  padding: var(--spacing-outer);
-}
-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}

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

@@ -1,12 +0,0 @@
-import { error } from '@sveltejs/kit';
-
-export function load({ params }) {
-  
-  const posts = fetch('https://uncommonbio.co/wp-json/wp/v2/pages/').then((r) => r.json().catch((err) => {console.log(err, params)}));
-
-  if (!posts) throw error(404);
-
-  return {
-    posts
-  };
-}

src/routes/blog/+page.svelte

@@ -1,10 +0,0 @@
-<script lang='ts'>
-  export let data: any;
-  let posts = data.posts;
-</script>
-
-<h1>Blog roll!</h1>
-
-{#each posts as post}
-  <h2>{post.title.rendered}</h2>
-{/each}

src/routes/blog/[slug]/+page.server.ts

@@ -1,12 +0,0 @@
-import { error } from '@sveltejs/kit';
-
-export function load({ params }) {
-  
-  const posts = fetch('https://uncommonbio.co/wp-json/wp/v2/posts/').then((r) => r.json().catch((err) => {console.log(err, params)}));
-
-  if (!posts) throw error(404);
-
-  return {
-    posts
-  };
-}

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

@@ -1,8 +0,0 @@
-<script lang='ts'>
-  export let data: any;
-  let dataConverted = JSON.stringify(data);
-  let dataone = data.posts[1].content.rendered;
-</script>
-
-<h1>Blog post</h1>
-<p>{@html dataone}</p>

src/routes/contact/+page.svelte

@@ -124,12 +124,6 @@
       margin: 1em var(--spacing-outer) .75em var(--spacing-outer);
       font-size: 4.5em;
     }
-
-    & em {
-      font-style: normal;
-      font-weight: 400;
-      color: var(--color-highlight);
-    }
   }
   .intro {
     width: 100%;

src/routes/contact/+page.ts

@@ -1 +1,7 @@
 export const prerender = true
+export function load() {
+  return {
+    title: 'Contact me!',
+    description: 'Reach out via a contact form, email or LinkedIn'
+  };
+}

src/routes/service/+page.svelte

@@ -6,6 +6,8 @@
   import Faq from '$lib/components/Faq.svelte';
   import ServiceCanvas from './ServiceCanvas.svelte';
 
+  export let data;
+
   onMount( () => {  
     gsap.registerPlugin( ScrollTrigger, SplitText );
     

src/routes/service/+page.ts

@@ -0,0 +1,6 @@
+export function load() {
+  return {
+    title: 'Services I provide',
+    description: 'A list of profesional webdevelopment and design services I provide'
+  };
+}

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

@@ -5,6 +5,8 @@ export async function load() {
   if (!posts) console.error('No posts found')
 
   return {
-    posts
+    posts,
+    title: 'Work References',
+    description: 'A few of the projects I have worked on'
   }
 }