From 7d7012eec64356ae658a4dd0c962c6609ac5be9b Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Tue, 5 Sep 2023 22:53:56 +0100
Subject: [PATCH] Made more reactive styling on main page and template

---
 rollup.config.js          | 10 ----------
 src/app.html              |  8 +++++++-
 src/main.svelte           | 34 +++++++++++++++++++++-------------
 src/routes/+layout.svelte | 30 ++++++++++++++++++++++++++----
 static/json/me.json       |  3 ++-
 5 files changed, 56 insertions(+), 29 deletions(-)
 delete mode 100644 rollup.config.js

diff --git a/rollup.config.js b/rollup.config.js
deleted file mode 100644
index f9251a1..0000000
--- a/rollup.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import json from '@rollup/plugin-json';
-
-export default {
-  input: 'src/index.js',
-  output: {
-    dir: 'output',
-    format: 'cjs'
-  },
-  plugins: [json()]
-};
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index e714fcc..148f9c7 100644
--- a/src/app.html
+++ b/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;
diff --git a/src/main.svelte b/src/main.svelte
index 9e23912..02f1179 100644
--- a/src/main.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b7a4abf..b34ff8e 100644
--- a/src/routes/+layout.svelte
+++ b/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 />
 
diff --git a/static/json/me.json b/static/json/me.json
index 0dff3e7..0df92ab 100644
--- a/static/json/me.json
+++ b/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>."
 }
\ No newline at end of file