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
2024-04-20 15:48:54 +10:00 · 2024-04-20 15:48:54 +10:00 · d0afdc696e
commit d0afdc696e
parent 1074f98c39
9 changed files with 44 additions and 44 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/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"
+  }
 }
--- a/src/components/countdown.svelte
+++ b/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
--- a/src/components/footer.svelte
+++ b/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>
--- a/src/components/navbar/navbar.svelte
+++ b/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
-          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>
+        <Menu class="w-5 h-5 fill-current" />
      </div>
      <ul
        tabindex="-1"
--- a/src/components/navbar/themeController.svelte
+++ b/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 -->
-  <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>
+  <Sun class="w-7 h-7 swap-on fill-current" />

-  <!-- moon icon -->
-  <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>
+  <Moon class="w-7 h-7 swap-off fill-current" />
 </label>
--- a/src/routes/+page.svelte
+++ b/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>
--- a/src/routes/portfolio/+page.svelte
+++ b/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">
-        Hello,<br /> my name is Nick
+      <h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
+        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 />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -6,7 +6,7 @@ module.exports = {
  },
  plugins: [require("daisyui")],
  daisyui: {
-    themes: ["night", "acid"],
+    themes: ["night", "winter"],
  },
  darkMode: "selector",
 };