Got the homepage sorted

2025-05-17 22:42:48 -06:00
parent b1cd87f20b
commit d86ae2f16b
49 changed files with 5226 additions and 1878 deletions
--- a/src/components/NavigationBar.tsx
+++ b/src/components/NavigationBar.tsx
@ -0,0 +1,108 @@
+import { useComputed, useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { Home, NotebookPen, FileText, CodeXml, MessageCircle } from 'lucide-preact';
+
+interface NavigationBarProps {
+  currentPath: string;
+}
+
+export default function NavigationBar({ currentPath }: NavigationBarProps) {
+  const isScrolling = useSignal(false);
+  const prevScrollPos = useSignal(0);
+  const isVisible = useComputed(() => {
+    if (prevScrollPos.value < 50) return true;
+
+    const currentPos = typeof window !== "undefined" ? globalThis.scrollY : 0;
+    return prevScrollPos.value > currentPos;
+  });
+
+  const isPostsPath = (path: string) => {
+    return path.startsWith("/posts") || path.startsWith("/post/");
+  };
+
+  useEffect(() => {
+    let scrollTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const handleScroll = () => {
+      isScrolling.value = true;
+      prevScrollPos.value = globalThis.scrollY;
+
+      if (scrollTimer) clearTimeout(scrollTimer);
+
+      scrollTimer = setTimeout(() => {
+        isScrolling.value = false;
+      }, 200);
+    };
+
+    globalThis.addEventListener("scroll", handleScroll);
+
+    return () => {
+      globalThis.removeEventListener("scroll", handleScroll);
+      if (scrollTimer) clearTimeout(scrollTimer);
+    };
+  }, []);
+
+  return (
+    <div
+      class={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
+        isScrolling.value ? "opacity-30" : "opacity-100"
+      } ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
+    >
+      <div class="overflow-visible">
+        <ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
+          <li class="mx-1">
+            <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
+              <div class="tooltip" data-tip="Home">
+                <Home />
+              </div>
+            </a>
+          </li>
+
+          <li class="mx-1">
+            <a
+              href="/posts"
+              class={isPostsPath(currentPath) ? "menu-active" : ""}
+            >
+              <div class="tooltip" data-tip="Posts">
+                <NotebookPen />
+              </div>
+            </a>
+          </li>
+
+          <li class="mx-1">
+            <a
+              href="/resume"
+              class={currentPath === "/resume" ? "menu-active" : ""}
+            >
+              <div class="tooltip" data-tip="Resume">
+                <FileText />
+              </div>
+            </a>
+          </li>
+
+          <li class="mx-1">
+            <a
+              href="/projects"
+              class={currentPath.startsWith("/projects") ? "menu-active" : ""}
+            >
+              <div class="tooltip" data-tip="Projects">
+                <CodeXml />
+              </div>
+            </a>
+          </li>
+
+          <li class="mx-1">
+            <a
+              href="/chat"
+              class={currentPath.startsWith("/chat") ? "menu-active" : ""}
+            >
+              <div class="tooltip" data-tip="Chat">
+                <MessageCircle />
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@ -0,0 +1,41 @@
+---
+import { Icon } from 'astro-icon/components';
+---
+
+<div class="flex flex-row gap-4 text-xl sm:text-3xl">
+    <a
+      href="mailto:me@atri.dad"
+      aria-label="Email me"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="mdi:email" />
+    </a>
+
+    <a
+      href="/feed"
+      aria-label="RSS Feed"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="mdi:rss" />
+    </a>
+
+    <a
+      href="https://git.atri.dad/atridad"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Forgejo (Git)"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:gitea" />
+    </a>
+
+    <a
+      href="https://bsky.app/profile/atri.dad"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Bluesky Profile"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:bluesky" />
+    </a>
+  </div>
--- a/src/components/TechLinks.astro
+++ b/src/components/TechLinks.astro
@ -0,0 +1,74 @@
+---
+import { Icon } from 'astro-icon/components';
+---
+<div class="flex flex-row gap-4 text-xl sm:text-3xl">
+    <a
+      href="https://react.dev/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="React"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:react" />
+    </a>
+
+    <a
+      href="https://www.typescriptlang.org/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="TypeScript"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:typescript" />
+    </a>
+
+    <a
+      href="https://astro.build/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Deno"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:astro" />
+    </a>
+
+    <a
+      href="https://go.dev/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Go"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:go" />
+    </a>
+
+    <a
+      href="https://www.postgresql.org/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="PostgreSQL"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:postgresql" />
+    </a>
+
+    <a
+      href="https://redis.io/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Redis"
+      class="hover:text-primary transition-colors"
+    >
+      <Icon name="simple-icons:redis" />
+    </a>
+
+    <a
+      href="https://www.docker.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Docker"
+      class="hover:text-primary transition-colors"
+    >
+        <Icon name="simple-icons:docker" />
+    </a>
+  </div>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -0,0 +1,26 @@
+---
+import NavigationBar from "../components/NavigationBar";
+const currentPath = Astro.url.pathname;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Atridad Lahiji</title>
+	</head>
+	<body>
+		
+	</body>
+	<body class="flex flex-col min-h-screen">
+        <main class="flex-grow flex flex-col gap-4 items-center justify-center">
+			<slot />
+        </main>
+
+        <NavigationBar currentPath={currentPath} />
+        <!-- <ScrollUpButton /> -->
+      </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,33 @@
+---
+import SocialLinks from '../components/SocialLinks.astro';
+import TechLinks from '../components/TechLinks.astro';
+import Layout from '../layouts/Layout.astro';
+import '../styles/global.css';
+---
+
+<Layout>
+	<img
+        src="/logo.webp"
+        alt="A drawing of Atridad Lahiji by Shelze!"
+        height={150}
+        width={150}
+      />
+
+      <h1 class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent text-4xl sm:text-6xl font-bold text-center">
+        Atridad Lahiji
+      </h1>
+
+      <h2 class="text-xl sm:text-3xl  font-bol text-center">
+        Researcher, Full-Stack Developer, and IT Professional.
+      </h2>
+
+      <h3 class="text-lg sm:text-2xl font-bold">Places I Exist:</h3>
+
+      <SocialLinks />
+
+      <h3 class="text-lg sm:text-2xl font-bold">Stuff I Use:</h3>
+
+      <TechLinks />
+
+      <!-- <HomeButtonLinks /> -->
+</Layout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -0,0 +1,36 @@
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "daisyui/theme" {
+    name: "chaoticbisexual";
+    default: true;
+    prefersdark: true;
+    color-scheme: "dark";
+    --color-base-100: oklch(25.33% 0.016 252.42);
+    --color-base-200: oklch(23.26% 0.014 253.1);
+    --color-base-300: oklch(21.15% 0.012 254.09);
+    --color-base-content: oklch(97.807% 0.029 256.847);
+    --color-primary: oklch(65% 0.241 354.308);
+    --color-primary-content: oklch(96% 0.018 272.314);
+    --color-secondary: oklch(60% 0.25 292.717);
+    --color-secondary-content: oklch(94% 0.028 342.258);
+    --color-accent: oklch(78% 0.154 211.53);
+    --color-accent-content: oklch(38% 0.063 188.416);
+    --color-neutral: oklch(40% 0.17 325.612);
+    --color-neutral-content: oklch(92% 0.004 286.32);
+    --color-info: oklch(74% 0.16 232.661);
+    --color-info-content: oklch(29% 0.066 243.157);
+    --color-success: oklch(76% 0.177 163.223);
+    --color-success-content: oklch(37% 0.077 168.94);
+    --color-warning: oklch(82% 0.189 84.429);
+    --color-warning-content: oklch(41% 0.112 45.904);
+    --color-error: oklch(71% 0.194 13.428);
+    --color-error-content: oklch(27% 0.105 12.094);
+    --radius-selector: 1rem;
+    --radius-field: 1rem;
+    --radius-box: 1rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 1;
+    --noise: 1;
+  }