Logo and responsiveness changes

This commit is contained in:
2025-05-28 01:07:13 -06:00
parent 0b02d6d5a0
commit b2426a6071
10 changed files with 489 additions and 435 deletions

View File

@ -44,49 +44,49 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
return (
<div
class={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
class={`fixed bottom-3 sm: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">
<ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
<li class="mx-0.5 sm:mx-1">
<a href="/" class={currentPath === "/" ? "menu-active" : ""}>
<div class="tooltip" data-tip="Home">
<Home />
<Home size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>
<li class="mx-1">
<li class="mx-0.5 sm:mx-1">
<a
href="/posts"
class={isPostsPath(currentPath) ? "menu-active" : ""}
>
<div class="tooltip" data-tip="Posts">
<NotebookPen />
<NotebookPen size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>
<li class="mx-1">
<li class="mx-0.5 sm:mx-1">
<a
href="/resume"
class={currentPath === "/resume" ? "menu-active" : ""}
>
<div class="tooltip" data-tip="Resume">
<FileText />
<FileText size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>
<li class="mx-1">
<li class="mx-0.5 sm:mx-1">
<a
href="/projects"
class={currentPath.startsWith("/projects") ? "menu-active" : ""}
>
<div class="tooltip" data-tip="Projects">
<CodeXml />
<CodeXml size={18} class="sm:w-5 sm:h-5" />
</div>
</a>
</li>