rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 07:44:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

navbar working

Browse source
This commit is contained in:
liyunze 2025-08-08 12:15:03 +10:00
parent 29c69e73a5
commit b7ef1bdc4b
10 changed files with 127 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/global/NavBar.astro Normal file
View file

@ -0,0 +1,38 @@
---
import { HoverNavigation } from "@/components/ui/HoverNavigation";
const navLinks = [
{
label: "Home",
link: "/",
},
{
label: "Experience",
link: "/experience",
},
{
label: "Projects",
link: "/projects",
},
{
label: "Skills",
link: "/skills",
},
{
label: "Contact",
link: "/contact",
},
];
---
<div
class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
>
<img
src="/images/pfp_new.webp"
alt="Ryan"
width={50}
class="rounded-full"
/>
<HoverNavigation items={navLinks} client:load />
</div>

37
src/components/global/NavBar.tsx
View file

@ -1,37 +0,0 @@
import { HoverNavigation } from "@/components/ui/HoverNavigation";
export default function Navigationbar() {
const navLinks = [
{
label: "Home",
link: "/",
},
{
label: "Experience",
link: "/experience",
},
{
label: "Projects",
link: "/projects",
},
{
label: "Skills",
link: "/skills",
},
{
label: "Contact",
link: "/contact",
},
];
return (
<div className="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3">
<img
src="/images/pfp_new.webp"
alt="Ryan"
width={50}
className="rounded-full"
/>
<HoverNavigation items={navLinks} />
</div>
);
}

105
src/components/ui/HoverNavigation.tsx
View file

@ -40,44 +40,79 @@ export const HoverNavigation = ({
});
return (
<motion.div
animate={{
width: visible ? "auto" : "0px",
}}
className={cn(
"flex flex-row items-center justify-center overflow-hidden",
className,
)}
>
{items.map((item, idx) => (
<>
<motion.div
animate={{
width: visible ? "0px" : "auto",
opacity: visible ? "0%" : "100%",
}}
transition={{
ease: "easeInOut",
}}
className={cn(
"flex w-0 flex-row items-center justify-center whitespace-nowrap",
className,
)}
>
<a
href={item?.link}
key={item?.link}
className="group relative block h-full px-5 py-2"
onMouseEnter={() => setHoveredIndex(idx)}
onMouseLeave={() => setHoveredIndex(null)}
href="/contact"
className={`overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500 ${!visible ? "" : "inline-block"}`}
>
<AnimatePresence>
{hoveredIndex === idx && (
<motion.span
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { duration: 0.15 },
}}
exit={{
opacity: 0,
transition: { duration: 0.15, delay: 0.2 },
}}
/>
)}
</AnimatePresence>
<NavBarLink>{item.label}</NavBarLink>
Available for work
</a>
))}
</motion.div>
<div
className={`relative z-50 ml-3 w-5 ${visible ? "hidden" : "inline-block"}`}
>
<div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
<div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
</div>
</motion.div>
<motion.div
animate={{
width: visible ? "auto" : "0px",
opacity: visible ? "100%" : "0%",
}}
transition={{
ease: "easeInOut",
}}
className={cn(
"flex flex-row items-center justify-center overflow-hidden",
className,
)}
>
{items.map((item, idx) => (
<a
href={item?.link}
key={item?.link}
className="group relative block h-full px-5 py-2"
onMouseEnter={() => setHoveredIndex(idx)}
onMouseLeave={() => setHoveredIndex(null)}
>
<AnimatePresence>
{hoveredIndex === idx && (
<motion.span
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { duration: 0.15 },
}}
exit={{
opacity: 0,
transition: {
duration: 0.15,
delay: 0.2,
},
}}
/>
)}
</AnimatePresence>
<NavBarLink>{item.label}</NavBarLink>
</a>
))}
</motion.div>
</>
);
};

0
src/components/ui/displayOnScroll.tsx
View file

2
src/pages/contact.astro
View file

@ -1,5 +1,5 @@
---
import NavBar from "../components/global/NavBar.tsx";
import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import ContactComponent from "../components/contact/ContactComponent.svelte";
import Card from "../components/global/Card.astro";

2
src/pages/experience.astro
View file

@ -1,5 +1,5 @@
---
import NavBar from "../components/global/NavBar.tsx";
import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
import MoreExperience from "../components/experience/MoreExperience.astro";

4
src/pages/index.astro
View file

@ -1,5 +1,5 @@
---
import NavBar from "../components/global/NavBar.tsx";
import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import NetworkLine from "../components/global/NetworkLine.astro";
import Intro from "../components/home/Intro.astro";
@ -14,7 +14,7 @@ import Footer from "../components/global/FooterComponent.astro";
title="Ryan's Portfolio"
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
>
<NavBar client:load />
<NavBar />
<div id="home" class="flex items-center justify-center pt-32">
<Intro />
</div>

2
src/pages/projects.astro
View file

@ -1,5 +1,5 @@
---
import NavBar from "../components/global/NavBar.tsx";
import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
import MoreProjects from "../components/projects/MoreProjects.svelte";

2
src/pages/skills.astro
View file

@ -1,5 +1,5 @@
---
import NavBar from "../components/global/NavBar.tsx";
import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import SkillsComponent from "../components/skills/SkillsComponent.astro";
import MoreSkills from "../components/skills/MoreSkills.astro";

14
src/styles/global.css
View file

@ -25,6 +25,7 @@
--animate-fadeIn: fadeIn 0.5s ease-in-out;
--animate-fadeUp: fadeUp 0.5s ease-in-out;
--animate-glow: glow 2s ease infinite;
@keyframes fadeIn {
0% {
@ -42,11 +43,22 @@
translate: 0px 10px;
}
100% {
50% {
opacity: 100%;
translate: 0px 0px;
}
}
@keyframes glow {
0% {
scale: 1;
opacity: 100%;
}
100% {
scale: 4;
opacity: 5%;
}
}
}
.view-fadeUp {