Merge branch 'svelte' into svelte-prod

src/lib/components/navbar/navbar.svelte

@@ -1,11 +1,11 @@
 <script>
   import ThemeController from "./themeController.svelte";
-  import Menu from "lucide-svelte/icons/menu";
+  // import Menu from "lucide-svelte/icons/menu";
 </script>
 
 <div class="navbar bg-neutral text-neutral-content">
   <div class="navbar-start">
-    <div class="dropdown">
+    <!-- <div class="dropdown">
       <div
         tabindex="0"
         role="button"
@@ -21,17 +21,17 @@
         <li><a href="/">Home</a></li>
         <li><a href="/portfolio">Portfolio</a></li>
       </ul>
-    </div>
+    </div> -->
     <a class="btn btn-ghost text-xl hover:shadow-lg" href="/">nickbland.dev</a>
   </div>
-  <div class="navbar-center hidden lg:flex">
+  <!-- <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1">
       <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> -->
   <div class="navbar-end">
     <ul class="menu menu-horizontal px-1">
       <li class="focus:"><ThemeController /></li>

src/lib/components/portfolio/skeletonImage.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  export let src: string;
+  export let altText: string = "";
+
+  let loaded = false;
+
+  onMount(() => {
+    const img = new Image();
+    img.src = src;
+
+    img.onload = () => {
+      loaded = true;
+    };
+  });
+</script>
+
+{#if loaded}
+  <img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
+{:else}
+  <div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl" />
+{/if}

src/routes/+page.svelte

@@ -1,12 +1,123 @@
+<script lang="ts">
+  import SkeletonImage from "$lib/components/portfolio/skeletonImage.svelte";
+  import Divider from "$lib/components/portfolio/divider.svelte";
+  import Countdown from "$lib/components/portfolio/countdown.svelte";
+  import TextContent from "$lib/components/portfolio/textContent.svelte";
+  import Skills from "$lib/components/portfolio/skills.svelte";
+  import Timeline from "$lib/components/portfolio/timeline.svelte";
+</script>
+
 <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">
+    <SkeletonImage src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp" altText="Profile of me." />
     <div>
-      <h1 class="mb-6 text-5xl md:text-7xl lg:text-9xl font-bold text-primary-content">
+      <h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
-        nickbland.dev
+        Hello, my name is Nick
       </h1>
+      <p class="py-5 text-lg max-w-xl text-center text-primary-content">
+        I am a Junior Systems Administrator with a passion for building stuff. I have my
+        own homelab which I use to test my new creations on the path to my goal-career in
+        cybersecurity. At the moment, I'm a student at Griffith University.
+      </p>
     </div>
+    <div class="hidden lg:flex divider divider-horizontal divider-start">Scoll</div>
   </div>
 </div>
+
+<h1 class="my-6 text-6xl text-center text-base-content font-bold">About Me</h1>
+<TextContent>
+  Since 2014, I've had an interest in programming and making things. I've made this
+  portfolio as a place for me to collate and show off some of the work that I've done.
+</TextContent>
+<TextContent>
+  At the moment, I've returned back to Uni to finish my degree after achieving a point in
+  my career that I am happy with. With the experience I've gained, and after finishing my
+  studies, my plan is to work in the cybersecurity field.
+</TextContent>
+
+<Divider />
+
+<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
+  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 text-center text-base-content font-bold">Education & Goals</h1>
+<Countdown />
+<TextContent>
+  I am currently studying a Bachelor of Information Technology at Griffith University,
+  opting for a no major or minor option. Having previously studied Computer Science at QUT
+  from 2019-2021, I decided to take a break from study and focus on work experience. As of
+  2023, I returned to studying at Griffith using the experiences I gained from both QUT
+  and from work.
+</TextContent>
+<TextContent middle={true}>
+  From my previous work experience, employers look more for relevant skills and industry
+  knowledge over the type of degree or the majors and minors you study. The mentorship I
+  gained from those jobs was what influenced me to change my degree over, and to not
+  choose a major.
+</TextContent>
+<TextContent>
+  As time has progressed, my goals and ambitions have also adapted. Initially, I wanted to
+  be a systems administrator. Upon reaching that goal, I shifted my gaze to what I wanted
+  to do work towards, setting on cybersecurity. Given that the industry is ever-changing,
+  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">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>
+
+<h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Contact</h1>
+<TextContent>
+  Thanks for checking out my site, if you want to get in contact with me, you can find me
+  on <a class="link" href="https://github.com/NickBland">GitHub</a>, or send an email to
+  <a class="link" href="mailto:hello@nickbland.dev">hello@nickbland.dev</a>.
+</TextContent>

src/routes/portfolio/+page.svelte

@@ -1,125 +0,0 @@
-<script lang="ts">
-  import Divider from "$lib/components/portfolio/divider.svelte";
-  import Countdown from "$lib/components/portfolio/countdown.svelte";
-  import TextContent from "$lib/components/portfolio/textContent.svelte";
-  import Skills from "$lib/components/portfolio/skills.svelte";
-  import Timeline from "$lib/components/portfolio/timeline.svelte";
-</script>
-
-<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">
-    <img
-      class=" skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"
-      alt="what i look like!"
-      src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp"
-    />
-    <div>
-      <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-fit text-center text-primary-content">
-        I am an IT Student at Griffith University with a passion for developing neat
-        things.
-      </p>
-    </div>
-    <div class="hidden lg:flex divider divider-horizontal divider-start">Scoll</div>
-  </div>
-</div>
-
-<h1 class="my-6 text-6xl text-center text-base-content font-bold">About Me</h1>
-<TextContent>
-  Since 2014, I've had an interest in programming and making things. I've made this
-  portfolio as a place for me to collate and show off some of the work that I've done.
-</TextContent>
-<TextContent>
-  At the moment, I've returned back to Uni to finish my degree after achieving a point in
-  my career that I am happy with. With the experience I've gained, and after finishing my
-  studies, my plan is to work in the cybersecurity field.
-</TextContent>
-
-<Divider />
-
-<h1 class="my-6 text-6xl text-center text-base-content font-bold">Education & Goals</h1>
-<Countdown />
-<TextContent>
-  I am currently studying a Bachelor of Information Technology at Griffith University,
-  opting for a no major or minor option. Having previously studied Computer Science at QUT
-  from 2019-2021, I decided to take a break from study and focus on work experience. As of
-  2023, I returned to studying at Griffith using the experiences I gained from both QUT
-  and from work.
-</TextContent>
-<TextContent middle={true}>
-  From my previous work experience, employers look more for relevant skills and industry
-  knowledge over the type of degree or the majors and minors you study. The mentorship I
-  gained from those jobs was what influenced me to change my degree over, and to not
-  choose a major.
-</TextContent>
-<TextContent>
-  As time has progressed, my goals and ambitions have also adapted. Initially, I wanted to
-  be a systems administrator. Upon reaching that goal, I shifted my gaze to what I wanted
-  to do work towards, setting on cybersecurity. Given that the industry is ever-changing,
-  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 & Confidence
-</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 />
-<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>
-
-<h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Contact</h1>
-<TextContent>
-  Thanks for checking out my site, if you want to get in contact with me, you can find me
-  on <a class="link" href="https://github.com/NickBland">GitHub</a>, or send an email to
-  <a class="link" href="mailto:hello@nickbland.dev">hello@nickbland.dev</a>.
-</TextContent>