Lots of CSS changes to headers content structure and logo

src/routes/portfolio/index.svelte

@@ -1,14 +1,14 @@
 <script context="module">
   /**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
+   * @type {import('@sveltejs/kit').Load}
+   */
   export async function load({ fetch }) {
     const res = await fetch('portfolio.json')
     const content = await res.json()
     return {
       props: {
         content,
-      }
+      },
     }
   }
 </script>
@@ -20,41 +20,13 @@
   export let content
 </script>
 
-<style>
-  :global([id])::before {
-    content: '';
-    display: block;
-    height: 5em;
-    margin-top: -5em;
-    visibility: hidden;
-  }
-
-  section[id] {
-    margin-top: 2em;
-  }
-
-  h1 {
-    text-shadow: 2px 2px 1px #c8c4b7;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    margin: 1.5em 0;
-  }
-</style>
-
 <svelte:head>
   <title>{content.title}</title>
 </svelte:head>
 
-<h1>Michal Vanko</h1>
+<h1 class="name-tag">Michal Vanko</h1>
 
-<h2>Software Developer</h2>
+<h2 class="name-tag">Software Architect and Consultant</h2>
 
 <section id="personal-information">
   {@html content.body}
@@ -95,3 +67,34 @@
     {/each}
   </ul>
 </section>
+
+<style>
+  :global([id])::before {
+    content: '';
+    display: block;
+    height: 5em;
+    margin-top: -5em;
+    visibility: hidden;
+  }
+
+  section[id] {
+    margin-top: 2em;
+  }
+
+  h1 {
+    text-shadow: 2px 2px 1px #c8c4b7; // TODO
+  }
+
+  .name-tag {
+    text-align: center;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    margin: 1.5em 0;
+  }
+</style>