Improve Responsiveness

- Remove old SVG and use a proper library for iconography
~ Adjust formatting for various objects, including the footer, and countdown
+ Add in a barebones home page

package.json

@@ -35,5 +35,8 @@
     "typescript-eslint": "^7.7.0",
     "vite": "^5.2.9"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "lucide-svelte": "^0.372.0"
+  }
 }

src/components/countdown.svelte

@@ -81,7 +81,7 @@
     </div>
   </div>
 {:else}
-  <h3 class="p-5 text-4xl text-center">Time to Graduation<br /> {FORMATTED}</h3>
+  <h3 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h3>
   <span class="flex countdown pb-5 font-mono text-4xl justify-center">
     <span style="--value:{years};"></span>y
     <span style="--value:{months};"></span>m

src/components/footer.svelte

@@ -1,5 +1,5 @@
 <footer
-  class="footer items-center p-4 bg-base-300 dark:bg-neutral dark:text-neutral-content"
+  class="footer items-center pt-4 bg-base-300 dark:bg-neutral dark:text-neutral-content"
 >
   <aside class="items-center grid-flow-col">
     <a class="btn btn-ghost text-xl" href="/">nickbland.dev</a>

src/components/navbar/navbar.svelte

@@ -1,5 +1,6 @@
 <script>
   import ThemeController from "./themeController.svelte";
+  import Menu from "lucide-svelte/icons/menu";
 </script>
 
 <div
@@ -8,18 +9,7 @@
   <div class="navbar-start">
     <div class="dropdown">
       <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-        <svg
+        <Menu class="w-5 h-5 fill-current" />
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-5 h-5"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
-            clip-rule="evenodd"
-          />
-        </svg>
       </div>
       <ul
         tabindex="-1"

src/components/navbar/themeController.svelte

@@ -1,28 +1,13 @@
+<script lang="ts">
+  import Sun from "lucide-svelte/icons/sun";
+  import Moon from "lucide-svelte/icons/moon";
+</script>
+
 <label class="swap swap-rotate">
   <!-- this hidden checkbox controls the state -->
-  <input type="checkbox" class="theme-controller" value="acid" />
+  <input type="checkbox" class="theme-controller" value="winter" />
 
-  <!-- sun icon -->
+  <Sun class="w-7 h-7 swap-on fill-current" />
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    class="w-7 h-7 swap-on fill-current"
-  >
-    <path
-      d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
-    />
-  </svg>
 
-  <!-- moon icon -->
+  <Moon class="w-7 h-7 swap-off fill-current" />
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    class="w-7 h-7 swap-off fill-current"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
-      clip-rule="evenodd"
-    />
-  </svg>
 </label>

src/routes/+page.svelte

@@ -1 +1,12 @@
-<h1>Home</h1>
+<div
+  class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
+>
+  <div class="hero-overlay bg-opacity-30"></div>
+  <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
+    <div>
+      <h1 class="mb-6 text-5xl md:text-7xl lg:text-9xl font-bold text-primary-content">
+        nickbland.dev
+      </h1>
+    </div>
+  </div>
+</div>

src/routes/portfolio/+page.svelte

@@ -2,6 +2,8 @@
   import Divider from "../../components/divider.svelte";
   import Countdown from "../../components/countdown.svelte";
   import TextContent from "../../components/textContent.svelte";
+  import Skills from "../../components/skills.svelte";
+  import Timeline from "../../components/timeline.svelte";
 </script>
 
 <div
@@ -11,10 +13,10 @@
   <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
     <div class="skeleton w-48 h-64 shadow-2xl max-w-sm"></div>
     <div>
-      <h1 class="mb-6 text-6xl font-bold">
+      <h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
-        Hello,<br /> my name is Nick
+        Hello, my name is Nick
       </h1>
-      <p class="py-5 text-lg max-w-sm">
+      <p class="py-5 text-lg max-w-fit text-center text-primary-content">
         I am an IT Student at Griffith University with a passion for developing neat
         things.
       </p>
@@ -58,4 +60,13 @@
   I felt it appropriate to not hem myself in to a single major or minor.
 </TextContent>
 
-<h1 class="my-6 text-6xl text-center text-base-content font-bold">Skills</h1>
+<h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Skills</h1>
+<Skills />
+<TextContent>
+  While this isn't an exhaustive list of all my skills, it is a brief list of skills I
+  wished to highlight. Please see the next section for detailed information on how I have
+  utilised these skills in other workplaces.
+</TextContent>
+
+<h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Experiences</h1>
+<Timeline />

tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
   },
   plugins: [require("daisyui")],
   daisyui: {
-    themes: ["night", "acid"],
+    themes: ["night", "winter"],
   },
   darkMode: "selector",
 };