feat: website

This commit is contained in:
trafficlunar 2025-05-03 17:40:21 +01:00
parent fc22cf0330
commit 215e6944a8
45 changed files with 709 additions and 16 deletions

14
src/pages/404.astro Normal file
View file

@ -0,0 +1,14 @@
---
import Layout from "../layouts/Layout.astro";
import Construction from "../assets/construction.svg";
---
<Layout>
<section class="font-mono flex flex-col justify-center items-center h-96">
<h1 class="font-extrabold text-6xl">404</h1>
<h2 class="text">not found</h2>
<Construction class="size-16 absolute left-8 bottom-0" />
</section>
</Layout>

View file

@ -1,16 +1,37 @@
---
import Layout from "../layouts/Layout.astro";
import Projects from "../components/Projects.svelte";
import Tools from "../components/Tools.astro";
import PersonIcon from "../assets/icons/person.svg";
import LocationIcon from "../assets/icons/location.svg";
---
---
<Layout>
<section>
<legend>about</legend>
<p>Hey there, I'm <strong class="text-peach">trafficlunar</strong>. I'm a 15 year old self-proclaimed full-stack developer and sysadmin.</p>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<div class="flex gap-1 mt-2">
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit px-2 py-0.5 flex gap-1 items-center">
<PersonIcon />
he/him
</div>
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit pl-1 pr-2 py-0.5 flex gap-1 items-center">
<LocationIcon />
Scotland
</div>
</div>
</section>
<Tools />
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-4">
<hr class="flex-grow border-surface1" />
<span>projects</span>
<hr class="flex-grow border-surface1" />
</div>
<Projects client:only />
</Layout>

20
src/pages/status.astro Normal file
View file

@ -0,0 +1,20 @@
---
import Layout from "../layouts/Layout.astro";
import Music from "../components/Music.svelte";
---
<Layout>
<section class="!mb-0 !pt-3">
<legend>status</legend>
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium mb-2">
<hr class="flex-grow border-surface1" />
<span>last.fm</span>
<hr class="flex-grow border-surface1" />
</div>
<Music client:only />
<p class="text-center mt-4 text-subtext1 text-sm">more coming soon...</p>
</section>
</Layout>