Add in Skills + Timeline

+ Skills section with confidence rating
+ Timeline for formal work experience

src/components/skills.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Stars from "./skills/stars.svelte";
+  import js from "$lib/assets/js.png";
+  import python from "$lib/assets/python.png";
+  import linux from "$lib/assets/linux.png";
+  import teams from "$lib/assets/team.png";
+  import project from "$lib/assets/project-management.png";
+  import teaching from "$lib/assets/lecture.png";
+  import interpersonal from "$lib/assets/interpersonal.png";
+  import thinking from "$lib/assets/skill.png";
+</script>
+
+<!-- Icons on this site have been designed using images from Flaticon.com -->
+<div
+  class="m-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-content-center justify-items-center gap-5 p-5 md:max-w-4xl lg:min-w-max"
+>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={js} alt="Javascript logo" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">JavaScript + TypeScript</h2>
+      <Stars count={5} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={python} alt="Python logo" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Python</h2>
+      <Stars count={4} half={true} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={linux} alt="Tux logo" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Linux Administration</h2>
+      <Stars count={4} half={true} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={teams} alt="A team thinking" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Working in Teams</h2>
+      <Stars count={4} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={project} alt="A lightbulb with gears around it" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Independant Projects</h2>
+      <Stars count={4} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={teaching} alt="A person giving a lecture" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Teaching Others</h2>
+      <Stars count={4} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={interpersonal} alt="People communicating" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Interpersonal Skills</h2>
+      <Stars count={4} />
+    </div>
+  </div>
+  <div class="card card-side w-50 md:w-96 bg-base-300">
+    <figure><img src={thinking} alt="A brain and lightbulb together" /></figure>
+    <div class="card-body">
+      <h2 class="card-title">Critical Thinking</h2>
+      <Stars count={4} />
+    </div>
+  </div>
+</div>

src/components/skills/stars.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Star from "lucide-svelte/icons/star";
+  import HalfStar from "lucide-svelte/icons/star-half";
+
+  export let count: number = 5;
+  export let half: boolean = false;
+</script>
+
+<div class="flex">
+  {#each Array(count) as _}
+    <!-- Need to use the var somewhere -->
+    <Star name={_} class="stroke-base-content fill-base-content" />
+  {/each}
+  {#if half}
+    <HalfStar class="stroke-base-content fill-base-content" />
+  {/if}
+</div>

src/components/timeline.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import Circle from "lucide-svelte/icons/circle";
+</script>
+
+<h3 class="p-5 text-4xl text-center">Work Experience</h3>
+<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">
+      <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>
+      <div class="divider my-1" />
+      Help Desk Role:
+      <ul class="list-disc list-inside mt-2">
+        <li>Performed repairs and troubleshooting for both students and teachers.</li>
+        <li>
+          Logged warranty claims with suppliers and triaged with parents and students
+          during this process.
+        </li>
+        <li>
+          Collaborated with IT team on installing and configuring equipment inside a new
+          building.
+        </li>
+        <li>
+          Assisted contractors with installation of Salto Systems and improved on existing
+          configuration throughout school.
+        </li>
+      </ul>
+      <div class="divider my-1" />
+      Key Experiences and Takeaways:
+      <ul class="list-disc list-inside mt-2">
+        <li>Became more comfortable and confident in an end-user facing role.</li>
+        <li>
+          Experience in a <i>professional</i> team environment, learning of the strengths and
+          weaknesses that come with it.
+        </li>
+        <li>
+          Gained first-hand experience using ticketing software (LanSweeper), and using it
+          as a powerful tool for organisation.
+        </li>
+      </ul>
+    </div>
+    <hr />
+  </li>
+  <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="md:text-end">
+        <time class="font-mono" datetime="2020-8">Aug 2020 - Oct 2022</time>
+        <div class="text-xl">St Pauls School</div>
+        <div class="text-sm pb-2">Information Technology Officer</div>
+      </div>
+      <div class="divider my-1" />
+      Help Desk Role:
+      <ul class="list-disc list-inside mt-2">
+        <li>
+          Assisted students and teachers with level 1 and 2 issues, and logged warranty
+          jobs. Continued triaging until issue was resolved.
+        </li>
+        <li>
+          Gained experience in cloud-based solutions in the enterprise environment, namely
+          AWS. I was able to apply some of the teaching for my homelab setup.
+        </li>
+        <li>
+          Gained more experience in Azure ecosystem, SCCM deployment, and networking.
+        </li>
+      </ul>
+      <div class="divider my-1" />
+      Key Experiences and Takeaways:
+      <ul class="list-disc list-inside mt-2">
+        <li>Working in a larger group to cover more ground</li>
+        <li>
+          The importance of relationships with end-users and suppliers to get issues
+          sorted in a timely manner.
+        </li>
+        <li>
+          Much more experience in networking (both Cisco and Unifi), and configuration in
+          an enterprise environment.
+        </li>
+      </ul>
+    </div>
+    <hr />
+  </li>
+  <li>
+    <hr />
+    <div class="timeline-middle"><Circle class="fill-base-300" /></div>
+    <div class="timeline-end timeline-box bg-base-300 max-w-3xl">
+      <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>
+      <div class="divider my-1" />
+      System Administrator Role:
+      <ul class="list-disc list-inside mt-2">
+        <li>
+          Became more experienced in scripting languages, and streamlining legacy scripts
+          in use.
+        </li>
+        <li>
+          Continually worked on improving my knowledge in Python, Powershell, and
+          Bashscript for automation tasks, and small projects.
+        </li>
+        <li>
+          Assisted in streamlining SDS (Student Data Sync service) scripts, including
+          importing new users into TASS and AD.
+        </li>
+      </ul>
+      <div class="divider my-1" />
+      Key Experiences and Takeaways:
+      <ul class="list-disc list-inside mt-2">
+        <li>There is always something to be improved upon if you look hard enough.</li>
+        <li>
+          Gained much more experience in deploying Autotune and Intune, as well as how
+          AzureAD works under the hood.
+        </li>
+      </ul>
+    </div>
+  </li>
+</ul>