Change profile pic

package-lock.json

@@ -2497,10 +2497,9 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
     },
     "@types/node": {
-      "version": "12.6.2",
+      "version": "14.11.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.2.tgz",
-      "integrity": "sha512-gojym4tX0FWeV2gsW4Xmzo5wxGjXGm550oVUII7f7G5o4BV6c7DBdiG1RRQd+y1bvqRyYtPfMK85UM95vsapqQ==",
+      "integrity": "sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA=="
-      "dev": true
     },
     "@types/parse-json": {
       "version": "4.0.0",

package.json

@@ -12,9 +12,10 @@
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@types/node": "^14.11.2",
     "classnames": "^2.2.6",
     "compression": "^1.7.4",
-    "@rollup/plugin-typescript": "^6.0.0",
     "date-fns": "^2.16.1",
     "feed": "^4.2.1",
     "front-matter": "^4.0.2",

src/routes/_error.svelte

@@ -1,34 +1,35 @@
-<script>
+<script lang="typescript">
-	export let status;
+  export let status
-	export let error;
+  export let error
 
-	const dev = process.env.NODE_ENV === 'development';
+  const dev = process.env.NODE_ENV === 'development'
 </script>
 
 <style>
-	h1, p {
+  h1,
-		margin: 0 auto;
+  p {
-	}
+    margin: 0 auto;
+  }
 
-	h1 {
+  h1 {
-		font-size: 2.8em;
+    font-size: 2.8em;
-		font-weight: 700;
+    font-weight: 700;
-		margin: 0 0 0.5em 0;
+    margin: 0 0 0.5em 0;
-	}
+  }
 
-	p {
+  p {
-		margin: 1em auto;
+    margin: 1em auto;
-	}
+  }
 
-	@media (min-width: 480px) {
+  @media (min-width: 480px) {
-		h1 {
+    h1 {
-			font-size: 4em;
+      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((r) => r.json())
-      .then(posts => {
+      .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">