Got the homepage sorted
This commit is contained in:
108
src/components/NavigationBar.tsx
Normal file
108
src/components/NavigationBar.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
41
src/components/SocialLinks.astro
Normal file
41
src/components/SocialLinks.astro
Normal file
@ -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>
|
||||
74
src/components/TechLinks.astro
Normal file
74
src/components/TechLinks.astro
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user