diff --git a/src/app.css b/src/app.css index 1a582b2..cc2ffeb 100644 --- a/src/app.css +++ b/src/app.css @@ -5,7 +5,10 @@ --font-display: "Inter", "sans-serif"; --color-floral-white: #fffcf2; --color-timber-wolf: #ccc5b9; - --color-black-olive: #403d39; --color-eerie-black: #252422; - --color-flame: #eb5e28; + --color-accent-dark: #1e1d1b; +} + +.color-transition { + transition: color 0.1s ease-in-out; } diff --git a/src/lib/images/fdm.png b/src/lib/images/error.png similarity index 100% rename from src/lib/images/fdm.png rename to src/lib/images/error.png diff --git a/src/lib/images/error1.avif b/src/lib/images/error1.avif new file mode 100644 index 0000000..1f272c1 Binary files /dev/null and b/src/lib/images/error1.avif differ diff --git a/src/lib/images/error2.avif b/src/lib/images/error2.avif new file mode 100644 index 0000000..dd6b86c Binary files /dev/null and b/src/lib/images/error2.avif differ diff --git a/src/lib/images/error3.avif b/src/lib/images/error3.avif new file mode 100644 index 0000000..f44d906 Binary files /dev/null and b/src/lib/images/error3.avif differ diff --git a/src/lib/images/error4.avif b/src/lib/images/error4.avif new file mode 100644 index 0000000..e9e3972 Binary files /dev/null and b/src/lib/images/error4.avif differ diff --git a/src/lib/scripts/randomimage.ts b/src/lib/scripts/randomimage.ts new file mode 100644 index 0000000..90e1145 --- /dev/null +++ b/src/lib/scripts/randomimage.ts @@ -0,0 +1,10 @@ +import error from "$lib/images/error.png"; +import error1 from "$lib/images/error1.avif"; +import error2 from "$lib/images/error2.avif"; +import error3 from "$lib/images/error3.avif"; +import error4 from "$lib/images/error4.avif"; + +const images = [error, error1, error2, error3, error4]; +const randomImage = images[Math.floor(Math.random() * 5)]; + +export { randomImage }; diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index dd43bd6..fbf4934 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -1,11 +1,11 @@ <script lang="ts"> import { page } from "$app/state"; - import fdm from "$lib/images/fdm.png"; + import { randomImage } from "$lib/scripts/randomimage"; </script> <div class="font-display flex flex-col items-center justify-center h-screen bg-eerie-black text-floral-white" > - <img class="mb-4" src={fdm} alt="feelsdankman" /> - <h1>{page.status}: {page.error?.message}</h1> + <img class="mb-4" src={randomImage} alt="" /> + <h1 class="text-4xl font-bold">{page.status}: {page.error?.message}</h1> </div> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 319eedf..d690bdd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,13 +3,14 @@ </script> <div - class="font-display flex items-center h-10 justify-center bg-eerie-black text-floral-white" + class="font-display flex items-center h-10 justify-center bg-accent-dark text-floral-white" > - <nav class="space-x-4"> - <a href="/" class="hover:text-timber-wolf">home</a> - <a href="/about" class="hover:text-timber-wolf">about</a> - <a href="https://status.flake.sh/status/kumo" class="hover:text-timber-wolf" - >status</a + <nav class="space-x-4 text-xl"> + <a href="/" class="hover:text-timber-wolf color-transition">home</a> + <a href="/about" class="hover:text-timber-wolf color-transition">about</a> + <a + href="https://status.flake.sh/status/kumo" + class="hover:text-timber-wolf color-transition">status</a > </nav> </div> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6be8d60..9546cc3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -18,22 +18,22 @@ <div class="flex space-x-4 mt-4"> <a href="https://www.last.fm/user/notoh" aria-label="Lastfm"> <Lastfm - className="w-8 h-8 fill-current text-floral-white hover:text-red-500" + className="w-8 h-8 fill-current text-floral-white hover:text-red-500 color-transition" /> </a> <a href="https://git.flake.sh/notohh" aria-label="Forgejo"> <Forgejo - className="w-8 h-8 fill-current text-floral-white hover:text-orange-400" + className="w-8 h-8 fill-current text-floral-white hover:text-orange-500 color-transition" /> </a> <a href="https://bsky.app/profile/flake.sh" aria-label="Bluesky"> <Bluesky - className="w-8 h-8 fill-current text-floral-white hover:text-blue-400" + className="w-8 h-8 fill-current text-floral-white hover:text-blue-500 color-transition" /> </a> <a href="https://www.twitch.tv/notohh" aria-label="Twitch"> <Twitch - className="w-8 h-8 fill-current text-floral-white hover:text-purple-500" + className="w-8 h-8 fill-current text-floral-white hover:text-purple-500 color-transition" /> </a> </div> diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index c19c296..76fb3fa 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,5 +1,12 @@ <div class="font-display flex flex-col items-center justify-center h-screen bg-eerie-black text-floral-white" > - <h1>nothing here yet lol</h1> + <h1 class="text-5xl mb-5">about me</h1> + <ul class="text-xl"> + <li>23 y/o</li> + <li>interested in linux, devops, etc</li> + <li>metalhead</li> + <li>i use nixos btw</li> + <li>professional retard</li> + </ul> </div>