Merge branch 'svelte' into svelte-prod

2024-04-25 00:48:13 +10:00 · 2024-04-25 00:48:13 +10:00 · 31b01db77f
commit 31b01db77f
parent c5895a6ccb 3c7278bba9
15 changed files with 70 additions and 18 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -2,10 +2,14 @@
 // for information about these interfaces
 declare global {
  namespace App {
-    interface Error {}
+    interface Error {
+      code: string;
+      id: string;
+      message: string;
+    }
    // interface Locals {}
-    // interface PageData {}
-    // interface PageState {}
+    interface PageData {}
+    interface PageState {}
    interface Platform {
      env: {
        COUNTER: DurableObjectNamespace;
--- a/src/app.html
+++ b/src/app.html
@ -1,7 +1,9 @@
 <!doctype html>
 <html lang="en" data-theme="night">
  <head>
+    <title>Nick Bland's personal website!</title>
    <meta charset="utf-8" />
+    <meta name="description" content="This is my personal website as a way to navigate through some of the projects I've done or am working on." />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@ -18,6 +18,7 @@
      <a
        role="button"
        class="btn btn-ghost hover:shadow-lg"
+        aria-label="Find me at my GitHub"
        href="https://github.com/NickBland"><Github /></a
      >
    </div>
@ -25,6 +26,7 @@
      <a
        role="button"
        class="btn btn-ghost hover:shadow-lg"
+        aria-label="Find me at my GitLab"
        href="https://git.nickbland.dev/NickBland"><Gitlab /></a
      >
    </div>
--- a/src/lib/components/navbar/navbar.svelte
+++ b/src/lib/components/navbar/navbar.svelte
@ -6,7 +6,12 @@
 <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">
+      <div
+        tabindex="0"
+        role="button"
+        aria-label="menu button"
+        class="btn btn-ghost lg:hidden"
+      >
        <Menu class="w-5 h-5 fill-current" />
      </div>
      <ul
--- a/src/lib/components/navbar/themeController.svelte
+++ b/src/lib/components/navbar/themeController.svelte
@ -3,9 +3,14 @@
  import Moon from "lucide-svelte/icons/moon";
 </script>

-<label class="swap swap-rotate">
+<label class="swap swap-rotate" aria-label="Theme swapper">
  <!-- this hidden checkbox controls the state -->
-  <input type="checkbox" class="theme-controller" value="winter" />
+  <input
+    type="checkbox"
+    class="theme-controller"
+    value="winter"
+    aria-label="Theme toggle button"
+  />

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

--- a/src/lib/components/portfolio/countdown.svelte
+++ b/src/lib/components/portfolio/countdown.svelte
@ -41,7 +41,7 @@

 <!-- Display a different type of countdown for smaller screens, as larger one won't fit -->
 {#if w >= 768}
-  <h3 class="p-5 text-4xl text-center">Time to Graduation</h3>
+  <h2 class="p-5 text-4xl text-center">Time to Graduation</h2>
  <div class="grid grid-flow-col gap-5 pb-5 text-center auto-cols-max justify-center">
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
@ -81,7 +81,7 @@
    </div>
  </div>
 {:else}
-  <h3 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h3>
+  <h2 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h2>
  <span class="flex countdown pb-5 font-mono text-4xl justify-center">
    <span style="--value:{years};"></span>y&nbsp;
    <span style="--value:{months};"></span>m&nbsp;
--- a/src/lib/components/portfolio/divider.svelte
+++ b/src/lib/components/portfolio/divider.svelte
--- a/src/lib/components/portfolio/skills.svelte
+++ b/src/lib/components/portfolio/skills.svelte
@ -2,7 +2,6 @@
  import Stars from "./skills/stars.svelte";
 </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"
 >
--- a/src/lib/components/portfolio/skills/stars.svelte
+++ b/src/lib/components/portfolio/skills/stars.svelte
--- a/src/lib/components/portfolio/textContent.svelte
+++ b/src/lib/components/portfolio/textContent.svelte
--- a/src/lib/components/portfolio/timeline.svelte
+++ b/src/lib/components/portfolio/timeline.svelte
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+</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">
+    <div>
+      <h1
+        class="mb-6 text-5xl md:text-7xl lg:text-9xl font-bold text-primary-content text-center"
+      >
+        Whoah!
+      </h1>
+      <h3
+        class="text-3xl md:text-5xl lg:text-7xl font-bold text-primary-content text-center"
+      >
+        {$page.status}:
+        {$page.error?.message}
+      </h3>
+    </div>
+  </div>
+</div>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
  import "../app.css";
-  import Navbar from "../components/navbar/navbar.svelte";
-  import Footer from "../components/footer.svelte";
+  import Navbar from "$lib/components/navbar/navbar.svelte";
+  import Footer from "$lib/components/footer.svelte";
 </script>

 <Navbar />
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@ -1,9 +1,9 @@
-<script>
-  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 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
@ -11,7 +11,11 @@
 >
  <div class="hero-overlay bg-opacity-30"></div>
  <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>
+    <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
@ -112,3 +116,10 @@
  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>