Add in some precursory info

+ Add in hero
+ Add in about me section

src/app.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.height-minus-nav {
+    min-height: calc(100vh - 4.75rem);
+    /* this is the full view height - the navbar(4rem + 0.75rem padding) */
+}

src/components/divider.svelte

@@ -0,0 +1,57 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 2400 800"
+>
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad">
+      <stop style="stop-color:oklch(var(--p))" stop-opacity="1" offset="0%"
+      ></stop>
+      <stop style="stop-color:oklch(var(--a))" stop-opacity="1" offset="100%"
+      ></stop>
+    </linearGradient>
+  </defs>
+  <g
+    stroke-width="4"
+    stroke="url(#oooscillate-grad)"
+    fill="none"
+    stroke-linecap="round"
+  >
+    <path d="M 0 518 Q 600 -100 1200 400 Q 1800 900 2400 518" opacity="1.00"
+    ></path>
+    <path d="M 0 481 Q 600 -100 1200 400 Q 1800 900 2400 481" opacity="0.93"
+    ></path>
+    <path d="M 0 444 Q 600 -100 1200 400 Q 1800 900 2400 444" opacity="0.85"
+    ></path>
+    <path d="M 0 407 Q 600 -100 1200 400 Q 1800 900 2400 407" opacity="0.78"
+    ></path><path
+      d="M 0 370 Q 600 -100 1200 400 Q 1800 900 2400 370"
+      opacity="0.71"
+    ></path><path
+      d="M 0 333 Q 600 -100 1200 400 Q 1800 900 2400 333"
+      opacity="0.63"
+    ></path><path
+      d="M 0 296 Q 600 -100 1200 400 Q 1800 900 2400 296"
+      opacity="0.56"
+    ></path><path
+      d="M 0 259 Q 600 -100 1200 400 Q 1800 900 2400 259"
+      opacity="0.49"
+    ></path><path
+      d="M 0 222 Q 600 -100 1200 400 Q 1800 900 2400 222"
+      opacity="0.42"
+    ></path><path
+      d="M 0 185 Q 600 -100 1200 400 Q 1800 900 2400 185"
+      opacity="0.34"
+    ></path><path
+      d="M 0 148 Q 600 -100 1200 400 Q 1800 900 2400 148"
+      opacity="0.27"
+    ></path><path
+      d="M 0 111 Q 600 -100 1200 400 Q 1800 900 2400 111"
+      opacity="0.20"
+    ></path><path
+      d="M 0 74 Q 600 -100 1200 400 Q 1800 900 2400 74"
+      opacity="0.12"
+    ></path></g
+  ></svg
+>

src/routes/portfolio/+page.svelte

@@ -1 +1,37 @@
-<h1>Portfolio</h1>
+<script>
+  import Divider from "../../components/divider.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-neutral-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>
+      <p class="py-5 text-lg max-w-sm">
+        I am an IT Student at Griffith University with a passion for developing
+        neat things.
+      </p>
+    </div>
+    <div class="hidden md: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>
+<p class="p-5 mx-auto text-xl max-w-3xl">
+  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.
+  <br /><br />
+  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.
+</p>
+
+<Divider />