caperren/caperren-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive navigation fully working, placeholders for all major items on site, resume pages working, abstracted site-layout, preparing for unit and e2e testing, added flotbite + tailwind + vitest + playwright

Browse Source
This commit is contained in:
Corwin Perren
2025-11-05 03:13:05 -08:00
parent b342f7b1cb
commit 6f728ad146
66 changed files with 1509 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Footer.astro
View File

@@ -1,5 +1,7 @@
---
---
<footer class="flex justify-center items-center text-center">
{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"} | {import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}@{import.meta.env.PUBLIC_PROJECT_VERSION || "0.0.0"}
</footer>
<footer class="fixed bottom-0 left-0 z-20 w-full px-6 py-2 bg-black border-t border-t-caperren-green text-caperren-green text-sm flex items-center justify-between">
<span>{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"}</span>
<span>{import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}@{import.meta.env.PUBLIC_PROJECT_VERSION || "0.0.0"}</span>
</footer>

167
src/components/Navbar.astro
View File

@@ -1,150 +1,27 @@
---
import {Image} from 'astro:assets';
import {Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems} from "astro-navbar";
import NestedNavbarEntry from "@components/NestedNavbarEntries.astro";
import logoTitle from "../assets/logo-title.svg";
const navItems = [
{name: 'Home', href: '/'},
{
name: 'Experience↓',
href: "#",
dropdown: [
{name: 'SpaceX - Hardware Test Engineer II', href: '/experience/spacex-hardware-test-engineer'},
{
name: 'SpaceX - Avionics Test Engineer (Intern)',
href: '/experience/spacex-avionics-test-engineer-intern'
},
{name: 'SARL - Automation Engineer (Student)', href: '/experience/sarl-automation-engineer-student'},
{
name: 'CEOAS OMG - Software/Electronics Engineer (Student)',
href: '/experience/ceoas-omg-software-electronics-engineer-student'
},
{
name: 'OSURC - Member/Officer/Sub-Team Lead (Student)',
href: '/experience/osurc-member-officer-sub-team-lead'
},
]
},
{name: 'Projects↓', href: '/project/project'},
{name: 'Hobbies↓', href: '/hobby/hobby'},
{name: 'Resume', href: '/resume'},
{name: 'Contact', href: '/contact'}
];
import logoTitle from "@assets/logo-title.svg?raw";
import {siteLayout} from "@data/site-layout.ts";
---
<header class="navbar md:flex p-5 gap-5">
<Astronav>
<div class="flex w-full justify-between">
<a href="/">
<Image src={logoTitle} alt="Logo Title" height="50" loading="eager"/>
</a>
<div class="block md:hidden">
<MenuIcon class="w-4 h-4 text-gray-800"/>
</div>
<nav class="border-b border-b-caperren-green text-caperren-green">
<div class="flex flex-wrap items-center justify-between mx-auto p-6">
<a href="/">
<Fragment class="logo-title" set:html={logoTitle}/>
</a>
<button data-collapse-toggle="navbar-multi-level" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden focus:ring-2 focus:ring-caperren-green"
aria-controls="navbar-multi-level" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-multi-level">
<NestedNavbarEntry items={siteLayout}/>
</div>
<MenuItems class="hidden md:flex">
<ul class="flex flex-col md:flex-row md:gap-5">
<li>
<a href="/">Home</a>
</li>
<!--<li>-->
<!-- <Dropdown class="group">-->
<!-- <button class="flex items-center">-->
<!-- <span> Experience </span>-->
<!-- <svg-->
<!-- xmlns="http://www.w3.org/2000/svg"-->
<!-- fill="none"-->
<!-- viewBox="0 0 24 24"-->
<!-- stroke-width="3"-->
<!-- stroke="currentColor"-->
<!-- class="w-3 h-3 mt-0.5 group-open:rotate-180">-->
<!-- <path-->
<!-- stroke-linecap="round"-->
<!-- stroke-linejoin="round"-->
<!-- d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <DropdownItems class="relative">-->
<!-- <div class="bg-black px-1 py-2 absolute top-0">-->
<!-- <ul>-->
<!-- <li>-->
<!-- <a class="whitespace-nowrap" href="#">SpaceX</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="whitespace-nowrap" href="#">Sinnhuber Aquatic Research Laboratory</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="whitespace-nowrap" href="#">CEOAS Ocean Mixing Group</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </DropdownItems>-->
<!-- </Dropdown>-->
<!--</li>-->
<!--<li>-->
<!-- <Dropdown class="group">-->
<!-- <button class="flex items-center">-->
<!-- <span> Projects </span>-->
<!-- <svg-->
<!-- xmlns="http://www.w3.org/2000/svg"-->
<!-- fill="none"-->
<!-- viewBox="0 0 24 24"-->
<!-- stroke-width="3"-->
<!-- stroke="currentColor"-->
<!-- class="w-3 h-3 mt-0.5 group-open:rotate-180">-->
<!-- <path-->
<!-- stroke-linecap="round"-->
<!-- stroke-linejoin="round"-->
<!-- d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <DropdownItems class="relative">-->
<!-- <div class="bg-black absolute top-0">-->
<!-- <ul>-->
<!-- <li>-->
<!-- <a href="#">Placeholder 1</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </DropdownItems>-->
<!-- </Dropdown>-->
<!--</li>-->
<!--<li>-->
<!-- <Dropdown class="group">-->
<!-- <button class="flex items-center">-->
<!-- <span> Hobbies </span>-->
<!-- <svg-->
<!-- xmlns="http://www.w3.org/2000/svg"-->
<!-- fill="none"-->
<!-- viewBox="0 0 24 24"-->
<!-- stroke-width="3"-->
<!-- stroke="currentColor"-->
<!-- class="w-3 h-3 mt-0.5 group-open:rotate-180">-->
<!-- <path-->
<!-- stroke-linecap="round"-->
<!-- stroke-linejoin="round"-->
<!-- d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <DropdownItems class="relative">-->
<!-- <div class="bg-black absolute top-0">-->
<!-- <ul>-->
<!-- <li>Menu 1</li>-->
<!-- <li>Menu 2</li>-->
<!-- <li>Menu 3</li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </DropdownItems>-->
<!-- </Dropdown>-->
<!--</li>-->
<!--<li>-->
<!-- <a href="/resume">Resume</a>-->
<!--</li>-->
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</MenuItems>
</Astronav>
</header>
</div>
</nav>

47
src/components/NestedNavbarEntries.astro Normal file
View File

@@ -0,0 +1,47 @@
---
import type {navLink} from "@interfaces/site-layout.ts";
const items: navLink[] = Astro.props.items;
const depth: number = Astro.props.depth ?? 0;
const paths: string[] = Astro.props.paths ?? [];
const getNavLinkSuffix = (entry: navLink): string => {
return "-" + [...paths, entry.path].join("-")
}
const getHrefPath = (entry: navLink): string => {
return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
}
---
<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "" : "md:flex-row md:space-x-8 md:mt-0")}>
{
items.map((entry, index) => (
<li >
{Array.isArray(entry.children) && entry.children.length ? (
<button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
data-dropdown-placement="bottom"
class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light md:hover:bg-transparent md:border-0 md:hover:text-caperren-green-light md:p-0 ">
{entry.title}
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="m1 1 4 4 4-4"/>
</svg>
</button>
<div id={"dropdownNavbar" + getNavLinkSuffix(entry)}
class="z-10 hidden bg-black border border-caperren-green shadow-sm w-screen md:w-max">
<Astro.self items={entry.children} paths={[...paths, entry.path]} depth={depth + 1}/>
</div>
) : (
<a href={getHrefPath(entry)}
class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark md:p-0"
aria-current="page">{entry.title}</a>
)}
</li>
))}
</ul>