A11Y changes + add Error & Contact area

This commit is contained in:
Nick Bland 2024-04-24 20:23:24 +10:00
parent 11469035a6
commit 3626054cf1
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
9 changed files with 55 additions and 6 deletions

BIN
bun.lockb

Binary file not shown.

6
src/app.d.ts vendored
View File

@ -2,7 +2,11 @@
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
interface Error {} interface Error {
code: string;
id: string;
message: string;
}
// interface Locals {} // interface Locals {}
// interface PageData {} // interface PageData {}
// interface PageState {} // interface PageState {}

View File

@ -1,7 +1,9 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme="night"> <html lang="en" data-theme="night">
<head> <head>
<title>Nick Bland's personal website!</title>
<meta charset="utf-8" /> <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 <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"

View File

@ -41,7 +41,7 @@
<!-- Display a different type of countdown for smaller screens, as larger one won't fit --> <!-- Display a different type of countdown for smaller screens, as larger one won't fit -->
{#if w >= 768} {#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="grid grid-flow-col gap-5 pb-5 text-center auto-cols-max justify-center">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl place-self-center"> <span class="countdown font-mono text-5xl place-self-center">
@ -81,7 +81,7 @@
</div> </div>
</div> </div>
{:else} {: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 class="flex countdown pb-5 font-mono text-4xl justify-center">
<span style="--value:{years};"></span>y&nbsp; <span style="--value:{years};"></span>y&nbsp;
<span style="--value:{months};"></span>m&nbsp; <span style="--value:{months};"></span>m&nbsp;

View File

@ -18,6 +18,7 @@
<a <a
role="button" role="button"
class="btn btn-ghost hover:shadow-lg" class="btn btn-ghost hover:shadow-lg"
aria-label="Find me at my GitHub"
href="https://github.com/NickBland"><Github /></a href="https://github.com/NickBland"><Github /></a
> >
</div> </div>
@ -25,6 +26,7 @@
<a <a
role="button" role="button"
class="btn btn-ghost hover:shadow-lg" class="btn btn-ghost hover:shadow-lg"
aria-label="Find me at my GitLab"
href="https://git.nickbland.dev/NickBland"><Gitlab /></a href="https://git.nickbland.dev/NickBland"><Gitlab /></a
> >
</div> </div>

View File

@ -6,7 +6,12 @@
<div class="navbar bg-neutral text-neutral-content"> <div class="navbar bg-neutral text-neutral-content">
<div class="navbar-start"> <div class="navbar-start">
<div class="dropdown"> <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" /> <Menu class="w-5 h-5 fill-current" />
</div> </div>
<ul <ul

View File

@ -3,9 +3,14 @@
import Moon from "lucide-svelte/icons/moon"; import Moon from "lucide-svelte/icons/moon";
</script> </script>
<label class="swap swap-rotate"> <label class="swap swap-rotate" aria-label="Theme swapper">
<!-- this hidden checkbox controls the state --> <!-- 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" /> <Sun class="w-7 h-7 swap-on fill-current hover:shadow-lg" />

24
src/routes/+error.svelte Normal file
View File

@ -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>

View File

@ -112,3 +112,10 @@
myself aspects of linux administration in a safer environment. In the future, I may have 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. a blog with some of the more interesting projects I've worked on.
</TextContent> </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>