webp & removed ionicons

src/routes/contact.svelte

@@ -1,13 +1,40 @@
 <script>
+  import Icon from '../components/Icon.svelte'
+
   import SimplePage from '../components/SimplePage.svelte'
 
   const links = [
-    { href: 'mailto:hi@nicco.io', name: 'Say hi@nicco.io', icon: 'chatbubble-outline' },
-    { href: 'https://github.com/cupcakearmy', name: 'Github', icon: 'logo-github' },
+    {
+      href: 'mailto:hi@nicco.io',
+      name: 'Say hi@nicco.io',
+      icon: 'chatbubbles-outline',
+    },
+    {
+      href: 'https://github.com/cupcakearmy',
+      name: 'Github',
+      icon: 'logo-github',
+    },
     { href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
   ]
 </script>
 
+<svelte:head>
+  <title>Contact</title>
+</svelte:head>
+
+<SimplePage title="Contact">
+  <ul>
+    {#each links as { href, name, icon }}
+      <li>
+        <a rel="noopener noreferrer" {href}>
+          <Icon class="icon" {icon} />
+          {name}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</SimplePage>
+
 <style>
   ul {
     list-style: none;
@@ -27,24 +54,9 @@
     transform: translateY(0.25em) translateX(0.15em) scale(1.05);
   }
 
-  ion-icon {
+  li :global(.icon) {
     transform: translateY(0.3em);
+    font-size: 2em;
+    margin-right: 0.5rem;
   }
 </style>
-
-<svelte:head>
-  <title>Contact</title>
-</svelte:head>
-
-<SimplePage title="Contact">
-  <ul>
-    {#each links as { href, name, icon }}
-      <li>
-        <a rel="noopener noreferrer" {href}>
-          <ion-icon name={icon} size="large" />
-          {name}
-        </a>
-      </li>
-    {/each}
-  </ul>
-</SimplePage>

src/routes/index.svelte

@@ -2,6 +2,28 @@
   import SpacedLetters from '../components/SpacedLetters.svelte'
 </script>
 
+<svelte:head>
+  <title>Niccolo Borgioli</title>
+</svelte:head>
+
+<section class="left" style="z-index: 3;">
+  <h1>
+    <SpacedLetters letters="Niccolò" even />
+    <SpacedLetters letters="Borgioli" even />
+  </h1>
+
+  <p>Design & Development</p>
+</section>
+
+<section class="right" style="z-index: 2;">
+  <picture>
+    <source media="(min-width: 60em)" srcset="/images/home@1500.webp" />
+    <source media="(min-width: 45em)" srcset="/images/home@1000.webp" />
+    <source srcset="/images/home@500.webp" />
+    <img src="/images/decoration.jpg" alt="decoration" />
+  </picture>
+</section>
+
 <style>
   p {
     font-size: 4vw;
@@ -48,20 +70,3 @@
     }
   }
 </style>
-
-<svelte:head>
-  <title>Niccolo Borgioli</title>
-</svelte:head>
-
-<section class="left" style="z-index: 3;">
-  <h1>
-    <SpacedLetters letters="Niccolò" even />
-    <SpacedLetters letters="Borgioli" even />
-  </h1>
-
-  <p>Design & Development</p>
-</section>
-
-<section class="right" style="z-index: 2;">
-  <img src="/images/decoration.jpg" alt="decoration" />
-</section>