From 0c0ee849a630f125a8f08c10ee71dfdbc6b7c7ce Mon Sep 17 00:00:00 2001
From: schererleander <leander@schererleander.de>
Date: Fri, 27 Jun 2025 00:42:58 +0200
Subject: chore

---
 src/App.tsx                         |  16 +++---
 src/components/Card.tsx             |  82 +++++++++++++++++++++++++++++
 src/components/CardLink.tsx         |  82 -----------------------------
 src/components/Gallery.tsx          | 100 ++++++++++++++++++++++++++++++++++++
 src/components/ImageGalleryGrid.tsx | 100 ------------------------------------
 src/index.css                       |  13 +++--
 src/pages/404.tsx                   |  21 ++++++++
 src/pages/404Page.tsx               |  21 --------
 src/pages/Blog.tsx                  |  19 +++----
 src/pages/Gear.tsx                  |   8 +--
 src/pages/Home.tsx                  |   8 +--
 src/pages/Post.tsx                  |   8 +--
 src/pages/Projects.tsx              |   8 +--
 13 files changed, 246 insertions(+), 240 deletions(-)
 create mode 100644 src/components/Card.tsx
 delete mode 100644 src/components/CardLink.tsx
 create mode 100644 src/components/Gallery.tsx
 delete mode 100644 src/components/ImageGalleryGrid.tsx
 create mode 100644 src/pages/404.tsx
 delete mode 100644 src/pages/404Page.tsx

(limited to 'src')

diff --git a/src/App.tsx b/src/App.tsx
index dba1c7c..ca7bcb4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
 import { Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar';
-import GearPage from './pages/Gear';
-import HomePage from './pages/Home';
-import ProjectsPage from './pages/Projects';
+import Gear from './pages/Gear';
+import Home from './pages/Home';
+import Projects from './pages/Projects';
 import Footer from './components/Footer';
-import NotFoundPage from './pages/404Page';
+import NotFound from './pages/404';
 import Blog from './pages/Blog';
 import Post from './pages/Post';
 
@@ -15,12 +15,12 @@ function App() {
       <Navbar />
       <section className="max-w-xl mx-auto py-5 px-4">
         <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/gear" element={<GearPage />} />
-          <Route path='/projects' element={<ProjectsPage />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/gear" element={<Gear />} />
+          <Route path='/projects' element={<Projects />} />
           <Route path='/blog' element={<Blog />} />
           <Route path='/blog/:slug' element={<Post />} />
-          <Route path='*' element={<NotFoundPage />} />
+          <Route path='*' element={<NotFound />} />
         </Routes>
       </section>
       <Footer />
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..e71cf33
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,82 @@
+import { useRef, useState } from "react";
+
+function Icon() {
+  return <svg className="no-global w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M18 13v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6M15 6h4m0 0v4m0-4L10 15" /></svg>;
+}
+
+interface Props {
+  title: string;
+  body: string;
+  href?: string;
+  imgSrc?: string;
+}
+
+export default function CardLink({ title, body, href, imgSrc }: Props) {
+  const divRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [opacity, setOpacity] = useState(0);
+
+  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (!divRef.current) return;
+    const rect = divRef.current.getBoundingClientRect();
+    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
+
+  const handleMouseEnter = () => setOpacity(0.6);
+  const handleMouseLeave = () => setOpacity(0);
+
+  return (
+    <div
+      ref={divRef}
+      className={`relative flex items-center gap-4 py-2 px-2 rounded-lg border border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 overflow-hidden ${
+        href ? "cursor-pointer" : ""
+      } 
+      [--spotlight-light:rgba(255,255,255,0.1)] 
+      [--spotlight-dark:rgba(0,0,0,0.1)]`}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...(href && {
+        onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
+        role: "link",
+        tabIndex: 0,
+      })}
+    >
+      {/* Spotlight overlay - light */}
+      <div
+        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out"
+        style={{
+          opacity,
+          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
+            var(--spotlight-light), 
+            transparent 80%)`,
+        }}
+      />
+      
+      {/* Spotlight overlay - dark mode */}
+      <div
+        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out dark:block"
+        style={{
+          opacity,
+          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
+            var(--spotlight-dark), 
+            transparent 80%)`,
+        }}
+      />
+
+      {/* Content */}
+      {imgSrc && (
+        <img 
+          src={imgSrc} 
+          className="w-20 h-20 object-cover rounded-lg" 
+          alt={title}
+        />
+      )}
+      <div className="flex-1">
+        <h3 className="font-medium">{title}</h3>
+        <p className="text-sm text-neutral-800 dark:text-neutral-400">{body}</p>
+      </div>
+      {href && <Icon />}
+    </div>
+  );
+}
diff --git a/src/components/CardLink.tsx b/src/components/CardLink.tsx
deleted file mode 100644
index e71cf33..0000000
--- a/src/components/CardLink.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useRef, useState } from "react";
-
-function Icon() {
-  return <svg className="no-global w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M18 13v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6M15 6h4m0 0v4m0-4L10 15" /></svg>;
-}
-
-interface Props {
-  title: string;
-  body: string;
-  href?: string;
-  imgSrc?: string;
-}
-
-export default function CardLink({ title, body, href, imgSrc }: Props) {
-  const divRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [opacity, setOpacity] = useState(0);
-
-  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    if (!divRef.current) return;
-    const rect = divRef.current.getBoundingClientRect();
-    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-  };
-
-  const handleMouseEnter = () => setOpacity(0.6);
-  const handleMouseLeave = () => setOpacity(0);
-
-  return (
-    <div
-      ref={divRef}
-      className={`relative flex items-center gap-4 py-2 px-2 rounded-lg border border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 overflow-hidden ${
-        href ? "cursor-pointer" : ""
-      } 
-      [--spotlight-light:rgba(255,255,255,0.1)] 
-      [--spotlight-dark:rgba(0,0,0,0.1)]`}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      {...(href && {
-        onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
-        role: "link",
-        tabIndex: 0,
-      })}
-    >
-      {/* Spotlight overlay - light */}
-      <div
-        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out"
-        style={{
-          opacity,
-          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
-            var(--spotlight-light), 
-            transparent 80%)`,
-        }}
-      />
-      
-      {/* Spotlight overlay - dark mode */}
-      <div
-        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out dark:block"
-        style={{
-          opacity,
-          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
-            var(--spotlight-dark), 
-            transparent 80%)`,
-        }}
-      />
-
-      {/* Content */}
-      {imgSrc && (
-        <img 
-          src={imgSrc} 
-          className="w-20 h-20 object-cover rounded-lg" 
-          alt={title}
-        />
-      )}
-      <div className="flex-1">
-        <h3 className="font-medium">{title}</h3>
-        <p className="text-sm text-neutral-800 dark:text-neutral-400">{body}</p>
-      </div>
-      {href && <Icon />}
-    </div>
-  );
-}
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
new file mode 100644
index 0000000..ffcf0e1
--- /dev/null
+++ b/src/components/Gallery.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+
+interface ImageItems {
+  images: Array<{
+    src: string;
+    alt?: string;
+    id?: string | number;
+  }>;
+}
+
+export default function Gallery({ images }: ImageItems) {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const closeModal = () => setSelectedIndex(null);
+  const prev = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setSelectedIndex((i) => (i !== null && i > 0 ? i - 1 : i));
+  };
+  const next = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setSelectedIndex((i) => (i !== null && i < images.length - 1 ? i + 1 : i));
+  };
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (selectedIndex === null) return;
+      if (event.key === 'ArrowLeft') {
+        prev();
+      } else if (event.key === 'ArrowRight') {
+        next();
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedIndex, images.length]);
+
+  return (
+    <>
+      <div className="grid gap-2 grid-cols-4 max-sm:grid-cols-3 p-4">
+        {images.map((image, idx) => (
+          <button
+            key={image.id ?? image.src}
+            className="relative overflow-hidden rounded-xl shadow-lg aspect-square group cursor-pointer"
+            onClick={() => setSelectedIndex(idx)}
+          >
+            <img
+              src={image.src}
+              alt={image.alt || 'Gallery image'}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            />
+          </button>
+        ))}
+      </div>
+
+      {/* Overlay */}
+      {selectedIndex !== null && (
+        <div
+          className="fixed inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+          onClick={closeModal}
+          role="dialog"
+          aria-modal="true"
+        >
+          {/* Prev arrow */}
+          <button
+            onClick={prev}
+            className="absolute left-4 text-black dark:text-white text-4xl disabled:opacity-30"
+            disabled={selectedIndex === 0}
+          >
+            &#8592;
+          </button>
+
+          <img
+            src={images[selectedIndex].src}
+            alt={images[selectedIndex].alt || 'Enlarged gallery'}
+            className="w-2/3 h-2/3 object-contain rounded-lg"
+          />
+
+          {/* Next arrow */}
+          <button
+            onClick={next}
+            className="absolute right-4 text-black dark:text-white text-4xl disabled:opacity-30"
+            disabled={selectedIndex === images.length - 1}
+            aria-label='Next image'
+          >
+            &#8594;
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              closeModal();
+            }}
+            className="absolute top-4 right-4 text-black dark:text-white text-3xl"
+          >
+            &times;
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ImageGalleryGrid.tsx b/src/components/ImageGalleryGrid.tsx
deleted file mode 100644
index 0b657cf..0000000
--- a/src/components/ImageGalleryGrid.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface ImageItems {
-  images: Array<{
-    src: string;
-    alt?: string;
-    id?: string | number;
-  }>;
-}
-
-export default function ImageGalleryGrid({ images }: ImageItems) {
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-  const closeModal = () => setSelectedIndex(null);
-  const prev = (e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    setSelectedIndex((i) => (i !== null && i > 0 ? i - 1 : i));
-  };
-  const next = (e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    setSelectedIndex((i) => (i !== null && i < images.length - 1 ? i + 1 : i));
-  };
-
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      if (selectedIndex === null) return;
-      if (event.key === 'ArrowLeft') {
-        prev();
-      } else if (event.key === 'ArrowRight') {
-        next();
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [selectedIndex, images.length]);
-
-  return (
-    <>
-      <div className="grid gap-2 grid-cols-4 max-sm:grid-cols-3 p-4">
-        {images.map((image, idx) => (
-          <button
-            key={image.id ?? image.src}
-            className="relative overflow-hidden rounded-xl shadow-lg aspect-square group cursor-pointer"
-            onClick={() => setSelectedIndex(idx)}
-          >
-            <img
-              src={image.src}
-              alt={image.alt || 'Gallery image'}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-            />
-          </button>
-        ))}
-      </div>
-
-      {/* Overlay */}
-      {selectedIndex !== null && (
-        <div
-          className="fixed inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
-          onClick={closeModal}
-          role="dialog"
-          aria-modal="true"
-        >
-          {/* Prev arrow */}
-          <button
-            onClick={prev}
-            className="absolute left-4 text-black dark:text-white text-4xl disabled:opacity-30"
-            disabled={selectedIndex === 0}
-          >
-            &#8592;
-          </button>
-
-          <img
-            src={images[selectedIndex].src}
-            alt={images[selectedIndex].alt || 'Enlarged gallery'}
-            className="w-2/3 h-2/3 object-contain rounded-lg"
-          />
-
-          {/* Next arrow */}
-          <button
-            onClick={next}
-            className="absolute right-4 text-black dark:text-white text-4xl disabled:opacity-30"
-            disabled={selectedIndex === images.length - 1}
-            aria-label='Next image'
-          >
-            &#8594;
-          </button>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              closeModal();
-            }}
-            className="absolute top-4 right-4 text-black dark:text-white text-3xl"
-          >
-            &times;
-          </button>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/index.css b/src/index.css
index fcfe02a..4e1f7d9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,10 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @layer base {
-  body {
+
+  html,
+  body,
+  #root {
     @apply bg-white dark:bg-black/95;
   }
 
@@ -31,15 +34,15 @@
     @apply text-xl font-semibold dark:text-gray-200;
   }
 
-  article>*>p {
+  .post p {
     @apply mb-4 leading-relaxed;
   }
 
-  article>*>ul {
+  .post ul {
     @apply list-disc pl-6 space-y-1;
   }
 
-  article>*>*>img {
+  .post img {
     @apply mx-auto mb-4 w-64 rounded-lg shadow;
   }
 
@@ -51,7 +54,7 @@
     @apply underline text-purple-500;
   }
 
-  pre {
+  .post pre {
     @apply whitespace-pre overflow-x-auto max-w-full max-h-80 rounded-lg border p-2 my-2 border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900;
   }
 
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..d9eed89
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,21 @@
+import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+
+export default function NotFound() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      navigate('/', { replace: true });
+    }, 4000);
+
+    return () => clearTimeout(timer);
+  }, [navigate]);
+
+  return (
+    <>
+      <h1>404 - Not found</h1>
+      <img src="/images/404.webp" className="rounded-lg" />
+    </>
+  );
+}
diff --git a/src/pages/404Page.tsx b/src/pages/404Page.tsx
deleted file mode 100644
index d7bfa10..0000000
--- a/src/pages/404Page.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { useEffect } from "react";
-
-export default function NotFoundPage() {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      navigate('/', { replace: true });
-    }, 4000);
-
-    return () => clearTimeout(timer);
-  }, [navigate]);
-
-  return (
-    <>
-      <h1>404 - Not found</h1>
-      <img src="/images/404.webp" className="rounded-lg" />
-    </>
-  );
-}
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index 47b44d6..fb07fb1 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -1,6 +1,6 @@
-import CardLink from "../components/CardLink";
+import Card from "../components/Card";
 
-interface PostMeta {
+interface Meta {
   slug: string;
   title: string;
   date: string;
@@ -10,13 +10,13 @@ interface PostMeta {
 
 const postFiles = import.meta.glob("../blog/*.md", { eager: true }) as Record<
   string,
-  { attributes: Omit<PostMeta, "slug"> }
+  { attributes: Omit<Meta, "slug"> }
 >;
 
-const posts: PostMeta[] = Object.entries(postFiles)
+const posts: Meta[] = Object.entries(postFiles)
   .map(([path, mod]) => ({
     slug: path.split("/").pop()!.replace(".md", ""),
-    ...(mod.attributes as Omit<PostMeta, "slug">),
+    ...(mod.attributes as Omit<Meta, "slug">),
   }))
   .sort(
     (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -24,18 +24,19 @@ const posts: PostMeta[] = Object.entries(postFiles)
 
 export default function Blog() {
   return (
-    <section className="container mx-auto px-4 py-10">
-      <h1 className="text-4xl font-bold mb-8">Blog</h1>
+    <>
+      <title>߸ projects</title>
+      <h1>Blog</h1>
       
       {posts.map((post) => (
         <a key={post.slug} href={`/blog/${post.slug}`} className="block py-1">
-          <CardLink
+          <Card
             title={post.title}
             body={post.excerpt}
             imgSrc={post.cover}
           />
         </a>
       ))}
-    </section>
+    </>
   );
 }
diff --git a/src/pages/Gear.tsx b/src/pages/Gear.tsx
index dbbcdfb..a1984ee 100644
--- a/src/pages/Gear.tsx
+++ b/src/pages/Gear.tsx
@@ -1,4 +1,4 @@
-import CardLink from '../components/CardLink';
+import Card from '../components/Card';
 
 import {
   dailyDrivers,
@@ -14,7 +14,7 @@ function PartsGroup({ title, parts }: { title?: string; parts: Part[] }) {
       <ul className="space-y-2">
         {parts.map((p) => (
           <li key={p.name}>
-            <CardLink
+            <Card
               title={p.name}
               body={p.description}
               href={p.url}
@@ -27,7 +27,7 @@ function PartsGroup({ title, parts }: { title?: string; parts: Part[] }) {
   );
 }
 
-export default function GearPage() {
+export default function Gear() {
   return (
     <>
       <title>߸ gear</title>
@@ -40,4 +40,4 @@ export default function GearPage() {
       <PartsGroup title="NAS" parts={nasParts} />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 2048122..9b73c05 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,6 @@
-import ImageGalleryGrid from "../components/ImageGalleryGrid";
+import Gallery from "../components/Gallery";
 
-export default function HomePage() {
+export default function Home() {
   return (
     <>
       <title>߸ hi</title>
@@ -10,7 +10,7 @@ export default function HomePage() {
         I have a passion for hardware and software, studying computer science. Currently building own 3d printing projects and learning nix.
       </p>
 
-      <ImageGalleryGrid
+      <Gallery
         images={[
           { src: "/images/3ds.webp", alt: "Nintendo 3DS", id: 1 },
           { src: "/images/esp32.webp", alt: "ESP 32", id: 2 },
@@ -33,4 +33,4 @@ export default function HomePage() {
       </ul>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
index b2b1d5b..76396ae 100644
--- a/src/pages/Post.tsx
+++ b/src/pages/Post.tsx
@@ -26,7 +26,7 @@ export default function Post() {
   const { attributes: meta, ReactComponent: Content } = post;
 
   return (
-    <article>
+    <>
       <a href="/blog" className="no-underline hover:underline">
         ← Back
       </a>
@@ -41,7 +41,9 @@ export default function Post() {
 
       <h1>{meta.title}</h1>
       <p className="text-sm text-zinc-500 mb-8">{formDate.format(new Date(meta.date))}</p>
-      <Content />
-    </article>
+      <div className="post">
+        <Content />
+      </div>
+    </>
   );
 }
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index d49a3d2..973eaa0 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,7 +1,7 @@
-import CardLink from '../components/CardLink';
+import Card from '../components/Card';
 import { projects, type Project } from '../data/projects';
 
-export default function ProjectsPage() {
+export default function Projects() {
   return (
     <>
       <title>߸ projects</title>
@@ -10,7 +10,7 @@ export default function ProjectsPage() {
       <ul className="space-y-2">
         {projects.map((p: Project) => (
           <li key={p.name}>
-            <CardLink
+            <Card
               title={p.name}
               body={p.description}
               href={p.url}
@@ -21,4 +21,4 @@ export default function ProjectsPage() {
       </ul>
     </>
   );
-}
\ No newline at end of file
+}
-- 
cgit v1.3.1