From 5c9891ecc58b24c54168aa0a851edd9e07c506ce Mon Sep 17 00:00:00 2001
From: donny <angelmankel@gmail.com>
Date: Thu, 28 May 2026 11:32:43 -0700
Subject: [PATCH] feat: update layout components, fix AccentLink styles, add
 Tooltip and Cursor components

---
 components/layout/Container.tsx      |  2 +-
 components/layout/Footer.tsx         |  2 +-
 components/layout/Header.tsx         |  2 +-
 components/layout/SectionLabel.tsx   |  2 +-
 components/navigation/AccentLink.tsx |  4 ++--
 components/ui/Cursor.tsx             | 36 ++++++++++++++++++++++++++++
 components/ui/Tooltip.tsx            | 24 +++++++++++++++++++
 7 files changed, 66 insertions(+), 6 deletions(-)
 create mode 100644 components/ui/Cursor.tsx
 create mode 100644 components/ui/Tooltip.tsx

diff --git a/components/layout/Container.tsx b/components/layout/Container.tsx
index 262a200..16594ce 100644
--- a/components/layout/Container.tsx
+++ b/components/layout/Container.tsx
@@ -5,7 +5,7 @@ export default function Container({
 }) {
   return (
     <div className="flex-1 min-h-0 overflow-y-auto">
-      <div className="mx-auto w-full max-w-2xl px-6 py-16">{children}</div>
+      <div className="mx-auto w-full max-w-2xl px-4 sm:px-6 lg:px-2 py-16">{children}</div>
     </div>
   );
 }
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index 1904b7c..4023a5b 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="mx-auto w-full max-w-2xl px-6 py-6 flex items-center justify-between border-t border-neutral-800 text-xs text-neutral-500">
+    <footer className="mx-auto w-full max-w-4xl px-6 py-6 flex items-center justify-between border-t border-neutral-800 text-xs text-neutral-500 sticky bottom-0 backdrop-blur-lg">
       <span>© 2026 Angel Mankel</span>
       <span>Self-hosted · Traefik · Next.js</span>
     </footer>
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 5e83453..7dcdc71 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -3,7 +3,7 @@ import Nav from "./Nav";
 
 export default function Header() {
   return (
-    <header className="mx-auto w-full max-w-2xl px-6 py-5 flex items-center justify-between">
+    <header className="mx-auto w-full max-w-4xl px-6 py-5 flex items-center justify-between sticky top-0 z-50 bg-[#0a0a0a]/70 backdrop-blur-lg">
       <Link
         href="/"
         className="text-sm font-semibold text-neutral-100 hover:text-white"
diff --git a/components/layout/SectionLabel.tsx b/components/layout/SectionLabel.tsx
index 3dbe9f4..8c9000e 100644
--- a/components/layout/SectionLabel.tsx
+++ b/components/layout/SectionLabel.tsx
@@ -1,5 +1,5 @@
 import { IconPointFilled } from '@tabler/icons-react';
-import { colors } from '@/constants/colors';
+import { colors } from '@/constants';
 
 export default function SectionLabel({ label }: { label: string }) {
   return (
diff --git a/components/navigation/AccentLink.tsx b/components/navigation/AccentLink.tsx
index 71d686c..c4a6f5d 100644
--- a/components/navigation/AccentLink.tsx
+++ b/components/navigation/AccentLink.tsx
@@ -1,9 +1,9 @@
 import { IconArrowNarrowRight } from '@tabler/icons-react';
-import { colors } from '@/constants/colors';
+import { colors } from '@/constants';
 
 export default function AccentLink({ link, label }: { link: string, label: string }) {
   return (
-    <a href={link} className='flex gap-1 items-center'>
+    <a href={link} className='flex gap-1 items-center hover:translate-x-2 hover:scale-110 transition-transform duration-200 w-fit'>
         <p style={{ color: colors.accent }}>{label}</p>
         <IconArrowNarrowRight color={colors.accent} />
     </a>
diff --git a/components/ui/Cursor.tsx b/components/ui/Cursor.tsx
new file mode 100644
index 0000000..a7d1f09
--- /dev/null
+++ b/components/ui/Cursor.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export default function Cursor() {
+  const dotRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Skip on touchscreens — pointer:fine === false there
+    if (!window.matchMedia("(pointer: fine)").matches) return;
+
+    const el = dotRef.current;
+    if (!el) return;
+
+    const move = (e: MouseEvent) => {
+      // Two translates: first moves to cursor coords, second re-centers the dot
+      el.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
+    };
+
+    window.addEventListener("mousemove", move);
+    return () => window.removeEventListener("mousemove", move);
+  }, []);
+
+  return (
+    <div
+      ref={dotRef}
+      aria-hidden
+      // Initial inline transform parks it off-screen until the first mousemove
+      style={{ transform: "translate(-100px, -100px)" }}
+      className="
+        pointer-events-none fixed left-0 top-0 z-[100]
+        size-3 rounded-full bg-white mix-blend-difference
+      "
+    />
+  );
+}
diff --git a/components/ui/Tooltip.tsx b/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..b8b471f
--- /dev/null
+++ b/components/ui/Tooltip.tsx
@@ -0,0 +1,24 @@
+type TooltipProps = {
+  text: string;
+  children?: React.ReactNode;
+};
+
+export default function Tooltip({ text, children }: TooltipProps) {
+  return (
+    <span className="group relative inline-flex">
+      {children}
+      <span
+        role="tooltip"
+        className="
+          pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2
+          rounded-md bg-neutral-800 px-2 py-1 text-xs text-neutral-100
+          whitespace-nowrap opacity-0
+          transition-opacity duration-150
+          group-hover:opacity-100 group-focus-within:opacity-100
+        "
+      >
+        {text}
+      </span>
+    </span>
+  );
+}