Made more reactive styling on main page and template

rollup.config.js

@@ -1,10 +0,0 @@
-import json from '@rollup/plugin-json';
-
-export default {
-  input: 'src/index.js',
-  output: {
-    dir: 'output',
-    format: 'cjs'
-  },
-  plugins: [json()]
-};

src/app.html

@@ -20,7 +20,7 @@
 				--purple: #C678DD; 
 				--cyan: #56B6C2;
 
-				--font: Consolas, 'Cascadia Code';
+				--font: Consolas, 'Cascadia Code', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
 
 				background: var(--bg);
 				color: var(--fg);
@@ -29,6 +29,12 @@
 				margin: 2rem;
 			}
 
+			@media (max-width: 800px) {
+				.not-required {
+					display: none;
+				}
+			}
+
 			a {
 				text-decoration: none;				
 				position: relative;

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>

src/routes/+layout.svelte

@@ -6,7 +6,14 @@
     .main-container {
         margin-left: 10%;
         margin-right: 10%;
-        padding-top: 3em;
+        padding-top: 2em;
+    }
+
+    @media (max-width: 800px) {
+        .main-container {
+            margin: 0em;
+            padding-top: 1em;
+        }
     }
 
     nav {
@@ -20,15 +27,30 @@
         height: 1.5em;
         border-radius: 4px;
     }
+
+    .fade {
+        -webkit-animation: fadeinout 1s linear forwards;
+        animation: fadeinout 1s linear forwards;
+    }
+
+    @-webkit-keyframes fadeinout {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+    }
+
+    @keyframes fadeinout {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+    }
 </style>
 
 <nav>
     <a href = "/">//Profile</a>
-    <a href = "test">//Repos</a>
-    <a href = "test">//Contact</a>
+    <a href = "/repos">//Repos</a>
+    <a href = "/contact">//Contact</a>
 </nav>
 
-<div class="main-container">
+<div class="main-container fade">
 
     <slot />
 

static/json/me.json

@@ -1,5 +1,6 @@
 {
   "name": "Luke Else",
+  "job_title": "Software Engineer",
   "profile_photo": "/profile.jpg",
   "skills" : [
     {
@@ -18,5 +19,5 @@
       "mastery": 10
     }
   ],
-  "about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu dictum varius duis at consectetur. Enim lobortis scelerisque fermentum dui. Eu mi bibendum neque egestas congue quisque egestas. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Eget est lorem ipsum dolor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Risus quis varius quam quisque id diam vel quam. Arcu non sodales neque sodales ut. Malesuada fames ac turpis egestas integer eget aliquet nibh. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus."
+  "about": "Hello! I'm a enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>."
 }