Made more reactive styling on main page and template

src/main.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getJson } from "$lib/data"  
+    import { getJson } from "$lib/data";
 </script>
 
 <style>
@@ -12,6 +12,7 @@
     
     .flex-container {
         display: flex;
+        align-items: center;
     }
 
     .profile {
@@ -24,42 +25,49 @@
     
     .about {
         padding: 0em 5% 0em 5%;
+        font-size: 125%;
     }
     
-    /* Responsive layout - makes a one column layout instead of a two-column layout */
+
     @media (max-width: 800px) {
         .flex-container {
             align-items: center;
             flex-direction: column;
-        }
-
-        .profile {
-            display: none;
+            padding: 0px;
         }
 
         .about {
-            padding: 0px;
+            font-size: 100%;
         }
     }
 
-    h1 {
+    .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         color: var(--red);
         /*text-decoration: underline 5px solid var(--bg-grad);*/
         border-bottom: 5px solid var(--bg-grad);
+        margin-bottom: 1em;
     }
+
 </style>
 
 <div class="card">
     {#await getJson('/json/me.json')}
         <h1>Loading...</h1>
     {:then info}
-        <h1>{info.name}</h1>
+
+        <div class="card-header">
+            <h1>{info.name}</h1>
+            <h3 class="not-required">{info.job_title}</h3>
+        </div>
 
         <div class="flex-container">
-            <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
-            <p class="about">{info.about}</p>
+            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+            <p class="about">{@html info.about}</p>
         </div>
-    {:catch error}
-        <h1>{error.message}</h1>
+    {:catch}
+        <h1>Unable to load portfolio overview data</h1>
     {/await}
 </div>