Change profile pic

src/routes/_error.svelte

@@ -1,34 +1,35 @@
-<script>
-	export let status;
-	export let error;
+<script lang="typescript">
+  export let status
+  export let error
 
-	const dev = process.env.NODE_ENV === 'development';
+  const dev = process.env.NODE_ENV === 'development'
 </script>
 
 <style>
-	h1, p {
-		margin: 0 auto;
-	}
+  h1,
+  p {
+    margin: 0 auto;
+  }
 
-	h1 {
-		font-size: 2.8em;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
+  h1 {
+    font-size: 2.8em;
+    font-weight: 700;
+    margin: 0 0 0.5em 0;
+  }
 
-	p {
-		margin: 1em auto;
-	}
+  p {
+    margin: 1em auto;
+  }
 
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
+  @media (min-width: 480px) {
+    h1 {
+      font-size: 4em;
+    }
+  }
 </style>
 
 <svelte:head>
-	<title>{status}</title>
+  <title>{status}</title>
 </svelte:head>
 
 <h1>{status}</h1>
@@ -36,5 +37,5 @@
 <p>{error.message}</p>
 
 {#if dev && error.stack}
-	<pre>{error.stack}</pre>
+  <pre>{error.stack}</pre>
 {/if}

src/routes/_layout.svelte

@@ -1,16 +1,16 @@
-<script context="module">
+<script context="module" lang="typescript">
   import { take } from 'ramda'
 
   export function preload({ params, query }) {
     return this.fetch(`blog.json`)
-      .then(r => r.json())
-      .then(posts => {
+      .then((r) => r.json())
+      .then((posts) => {
         return { latestPosts: take(5, posts) }
       })
   }
 </script>
 
-<script>
+<script lang="typescript">
   import Nav from '../components/Nav.svelte'
   import Footer from '../components/Footer.svelte'
   export let segment
@@ -19,7 +19,10 @@
 
 <style>
   .app-content {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
     background: #f2f6f6;
+    min-height: 100vh;
   }
 
   main {

src/routes/index.svelte

@@ -17,7 +17,6 @@
 
   img {
     width: 100%;
-    max-width: 420px;
     margin: 0 0 1em 0;
     border-radius: 5px;
     box-shadow: 0px 0px 8px 1px #2d3935;
@@ -38,7 +37,10 @@
 
 <header class="index-header">
   <figure class="profile-pic">
-    <img alt="My eye" src="eye.png" />
+    <picture>
+      <source srcset="images/profile-picture.webp" type="image/webp" />
+      <img alt="My profile picture" src="image/profil-picture.jpg" />
+    </picture>
   </figure>
 
   <p class="motto">