Merge branch 'svelte' into svelte-prod

2024-04-20 23:05:41 +10:00 · 2024-04-20 23:05:41 +10:00 · c5895a6ccb
commit c5895a6ccb
parent 93b7ca5dc1 e4fc38e11a
21 changed files with 262 additions and 68 deletions
--- a/eslint.config.js
+++ b/eslint.config.js
@ -32,6 +32,7 @@ export default tsEslint.config(
      "**/build",
      "**/node_modules",
      "**/package",
+      "**/app.d.ts",
    ],
  },
 );
--- a/src/app.html
+++ b/src/app.html
@ -2,10 +2,24 @@
 <html lang="en" data-theme="night">
  <head>
    <meta charset="utf-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
-    <link rel="manifest" href="%sveltekit.assets%/site.webmanifest">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%sveltekit.assets%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%sveltekit.assets%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%sveltekit.assets%/favicon-16x16.png"
+    />
+    <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
--- a/src/components/countdown.svelte
+++ b/src/components/countdown.svelte
@ -83,9 +83,11 @@
 {:else}
  <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
-    <span style="--value:{days};"></span>d-
+    <span style="--value:{years};"></span>y&nbsp;
+    <span style="--value:{months};"></span>m&nbsp;
+    <span style="--value:{days};"></span>d
+  </span>
+  <span class="flex countdown pb-5 font-mono text-4xl justify-center">
    <span style="--value:{hours};"></span>:
    <span style="--value:{minutes};"></span>:
    <span style="--value:{seconds};"></span>
--- a/src/components/footer.svelte
+++ b/src/components/footer.svelte
@ -1,11 +1,32 @@
-<footer
-  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>
-    <p>Copyright © 2024 - All right reserved</p>
+<script lang="ts">
+  import Github from "lucide-svelte/icons/github";
+  import Gitlab from "lucide-svelte/icons/gitlab";
+</script>
+
+<footer class="footer items-center py-4 bg-neutral text-neutral-content">
+  <aside class="items-center grid-flow-col mx-2">
+    <a class="btn text-xl btn-ghost" href="/">nickbland.dev</a>
+    <p>
+      Copyright © 2024 - All right reserved | <a
+        class="link"
+        href="https://git.nickbland.dev/NickBland/website-2">Source Code</a
+      > | Made with ❤️ using SvelteKit
+    </p>
  </aside>
-  <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
-    <!-- Buttons Here -->
+  <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end mx-2">
+    <div class="tooltip" data-tip="GitHub">
+      <a
+        role="button"
+        class="btn btn-ghost hover:shadow-lg"
+        href="https://github.com/NickBland"><Github /></a
+      >
+    </div>
+    <div class="tooltip" data-tip="GitLab">
+      <a
+        role="button"
+        class="btn btn-ghost hover:shadow-lg"
+        href="https://git.nickbland.dev/NickBland"><Gitlab /></a
+      >
+    </div>
  </nav>
 </footer>
--- a/src/components/navbar/navbar.svelte
+++ b/src/components/navbar/navbar.svelte
@ -3,9 +3,7 @@
  import Menu from "lucide-svelte/icons/menu";
 </script>

-<div
-  class="navbar bg-base-300 dark:bg-neutral rounded-box mt-1 dark:text-neutral-content"
->
+<div class="navbar bg-neutral text-neutral-content">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@ -13,18 +11,20 @@
      </div>
      <ul
        tabindex="-1"
-        class="tablist menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-300 dark:bg-neutral rounded-box w-52 dark:text-neutral-content"
+        class="tablist menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-neutral rounded-box w-52 text-neutral-content"
      >
        <li><a href="/">Home</a></li>
        <li><a href="/portfolio">Portfolio</a></li>
      </ul>
    </div>
-    <a class="btn btn-ghost text-xl" href="/">nickbland.dev</a>
+    <a class="btn btn-ghost text-xl hover:shadow-lg" href="/">nickbland.dev</a>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
-      <li><a href="/" class="text-lg">Home</a></li>
-      <li><a href="/portfolio" class="text-lg">Portfolio</a></li>
+      <li><a href="/" class="btn btn-ghost text-lg hover:shadow-lg">Home</a></li>
+      <li>
+        <a href="/portfolio" class="btn btn-ghost text-lg hover:shadow-lg">Portfolio</a>
+      </li>
    </ul>
  </div>
  <div class="navbar-end">
--- a/src/components/navbar/themeController.svelte
+++ b/src/components/navbar/themeController.svelte
@ -7,7 +7,7 @@
  <!-- this hidden checkbox controls the state -->
  <input type="checkbox" class="theme-controller" value="winter" />

-  <Sun class="w-7 h-7 swap-on fill-current" />
+  <Sun class="w-7 h-7 swap-on fill-current hover:shadow-lg" />

-  <Moon class="w-7 h-7 swap-off fill-current" />
+  <Moon class="w-7 h-7 swap-off fill-current hover:shadow-lg" />
 </label>
--- a/src/components/skills.svelte
+++ b/src/components/skills.svelte
--- a/src/components/skills/stars.svelte
+++ b/src/components/skills/stars.svelte
@ -9,9 +9,9 @@
 <div class="flex">
  {#each Array(count) as _}
    <!-- Need to use the var somewhere -->
-    <Star name={_} class="stroke-base-content fill-base-content" />
+    <Star name={_} class="stroke-neutral-content fill-neutral-content" />
  {/each}
  {#if half}
-    <HalfStar class="stroke-base-content fill-base-content" />
+    <HalfStar class="stroke-neutral-content fill-neutral-content" />
  {/if}
 </div>
--- a/src/components/textContent.svelte
+++ b/src/components/textContent.svelte
@ -1,5 +1,6 @@
 <script lang="ts">
  export let middle: boolean = false;
+  export let classes: string = ""; // Further classes to pass through
 </script>

 <!-- If the text is between some other text, adjust padding to not seperate it out too much -->
@ -7,11 +8,11 @@

 <div>
  {#if middle}
-    <p class="px-5 mx-auto text-xl max-w-3xl">
+    <p class="px-5 mx-auto text-xl max-w-3xl {classes}">
      <slot />
    </p>
  {:else}
-    <p class="p-5 mx-auto text-xl max-w-3xl">
+    <p class="p-5 mx-auto text-xl max-w-3xl {classes}">
      <slot />
    </p>
  {/if}
--- a/src/components/timeline.svelte
+++ b/src/components/timeline.svelte
@ -6,7 +6,7 @@
 <ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical pb-8">
  <li>
    <div class="timeline-middle"><Circle class="fill-base-300" /></div>
-    <div class="timeline-end timeline-box bg-base-300 mb-10 max-w-3xl">
+    <div class="timeline-end timeline-box bg-base-300 mb-10 max-w-3xl shadow-lg">
      <time class="font-mono" datetime="2020-3">Mar 2020 - Jul 2020</time>
      <div class="text-xl">Villanova College</div>
      <div class="text-sm">Information Technology Officer</div>
@ -46,7 +46,7 @@
  <li>
    <hr />
    <div class="timeline-middle"><Circle class="fill-base-300" /></div>
-    <div class="timeline-start timeline-box bg-base-300 mb-10 max-w-3xl">
+    <div class="timeline-start timeline-box bg-base-300 mb-10 max-w-3xl shadow-lg">
      <div class="md:text-end">
        <time class="font-mono" datetime="2020-8">Aug 2020 - Oct 2022</time>
        <div class="text-xl">St Pauls School</div>
@ -86,7 +86,7 @@
  <li>
    <hr />
    <div class="timeline-middle"><Circle class="fill-base-300" /></div>
-    <div class="timeline-end timeline-box bg-base-300 max-w-3xl">
+    <div class="timeline-end timeline-box bg-base-300 max-w-3xl shadow-lg">
      <time class="font-mono" datetime="2022-10">Oct 2022 - Feb 2023</time>
      <div class="text-xl">St Pauls School</div>
      <div class="text-sm pb-2">System Administrator</div>
--- a/src/lib/assets/interpersonal.png
+++ b/src/lib/assets/interpersonal.png
--- a/src/lib/assets/js.png
+++ b/src/lib/assets/js.png
--- a/src/lib/assets/lecture.png
+++ b/src/lib/assets/lecture.png
--- a/src/lib/assets/linux.png
+++ b/src/lib/assets/linux.png
--- a/src/lib/assets/project-management.png
+++ b/src/lib/assets/project-management.png
--- a/src/lib/assets/python.png
+++ b/src/lib/assets/python.png
--- a/src/lib/assets/skill.png
+++ b/src/lib/assets/skill.png
--- a/src/lib/assets/team.png
+++ b/src/lib/assets/team.png
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@ -60,7 +60,9 @@
  I felt it appropriate to not hem myself in to a single major or minor.
 </TextContent>

-<h1 class="my-6 text-6xl p-5 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 & Confidence
+</h1>
 <Skills />
 <TextContent>
  While this isn't an exhaustive list of all my skills, it is a brief list of skills I
@ -70,3 +72,43 @@

 <h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Experiences</h1>
 <Timeline />
+<h3 class="p-5 text-4xl text-center">Informal Experience</h3>
+<TextContent>
+  Griffith University has also been helpful in engaging me with industry panels and
+  experiences. In early 2024, one of my units had a panel with some industry experts who
+  discussed what the future of the IT industry would look like. Coming away from that
+  panel, I felt better about the path I had taken. The experts all agreed that the
+  industry is an ever-changing field, so it really doesn't make sense to stay comfortable
+  with a single expertise.
+</TextContent>
+<TextContent middle={true}>
+  Another extracurricular activity I undertook was the 2023 'James-Jam'. In this activity,
+  groups were formed and given two weeks to construct a working game in p5play.js. The
+  theme was a game remniscient of Homeworld (1999). While this wasn't a competition, our
+  group did an amazing job at constructing a fully working game. You can play the game at
+  <a class="link" href="https://gamejam2023.nickbland.dev/">this link here</a>. And if you
+  want to view the source code, it can be found
+  <a class="link" href="https://github.com/NickBland">on my GitHub</a>.
+</TextContent>
+<TextContent middle={true} classes={"pt-5"}>
+  Outside of work experience and university, I also aim to learn new projects in my own
+  time. For example, the website you are reading this on was built by hand by me. You can
+  find the source code for this project, and others at my personal <a
+    class="link"
+    href="https://git.nickbland.dev">GitLab instance here</a
+  >
+  or my <a class="link" href="https://github.com/NickBland">GitHub here</a>.
+</TextContent>
+<TextContent middle={true} classes={"pt-5"}>
+  On top of that, I also have my own homelab setup. Utilising Proxmox, I run hosts and
+  containers for various services that both me, and my friends and family enjoy. For a
+  list of services that I am running, you can visit my <a
+    class="link"
+    href="https://status.nickbland.dev/">AWS-hosted status page here</a
+  >.
+</TextContent>
+<TextContent>
+  The homelab is a constantly evolving project that has given enabled me to self-teach
+  myself aspects of linux administration in a safer environment. In the future, I may have
+  a blog with some of the more interesting projects I've worked on.
+</TextContent>
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
--- a/svelte.config.js
+++ b/svelte.config.js
@ -13,9 +13,8 @@ const config = {
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      routes: {
-        include: ['/*'],
-        
-      }
+        include: ["/*"],
+      },
    }),
  },
 };