add landing page screen shot to readme

link repo from footer

readme.md

@@ -1,3 +1,7 @@
 # My Blog
 
-I write/plan to write about physics, machine learning, sustainability and web development.
+I write about things I learned in machine learning, data visualization, web development and coding best practices.
+
+<a href="https://janosh.dev">
+  <img src="https://github.com/janosh/blog/assets/30958850/962918ab-f9f7-470b-a605-ebbfa11461b2" alt="Landing Page" />
+</a>

src/lib/Footer.svelte

@@ -1,12 +1,25 @@
 <script>
+  import { repository as repo } from '$root/package.json'
   import Icon from '@iconify/svelte'
 </script>
 
 <button on:click={() => document.body.scrollIntoView({ behavior: `smooth` })}>
   <Icon icon="material-symbols:arrow-upward-rounded" />
 </button>
 
+<footer>
+  <a href={repo}><Icon icon="octicon:mark-github" width="20pt" />Source</a>
+</footer>
+
 <style>
+  footer {
+    margin: 3em;
+  }
+  footer a {
+    display: flex;
+    place-content: center;
+    gap: 5pt;
+  }
   button {
     position: absolute;
     bottom: 18pt;

src/routes/+page.svelte

@@ -50,7 +50,7 @@
     object-fit: cover;
     height: 10em;
     width: 10em;
-    margin: 1em auto 0;
+    margin: 4em auto 0;
   }
   h1 {
     margin: 0;