Skip to content

Commit b7ef1bd

Browse files
liyunze-codingliyunze-coding
committed
navbar working
1 parent 29c69e7 commit b7ef1bd

File tree

10 files changed

+127
-79
lines changed

10 files changed

+127
-79
lines changed

‎src/components/global/NavBar.astro‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
import { HoverNavigation } from "@/components/ui/HoverNavigation";
3+
4+
const navLinks = [
5+
{
6+
label: "Home",
7+
link: "/",
8+
},
9+
{
10+
label: "Experience",
11+
link: "/experience",
12+
},
13+
{
14+
label: "Projects",
15+
link: "/projects",
16+
},
17+
{
18+
label: "Skills",
19+
link: "/skills",
20+
},
21+
{
22+
label: "Contact",
23+
link: "/contact",
24+
},
25+
];
26+
---
27+
28+
<div
29+
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"
30+
>
31+
<img
32+
src="/images/pfp_new.webp"
33+
alt="Ryan"
34+
width={50}
35+
class="rounded-full"
36+
/>
37+
<HoverNavigation items={navLinks} client:load />
38+
</div>

‎src/components/global/NavBar.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/components/ui/HoverNavigation.tsx‎

Lines changed: 70 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -40,44 +40,79 @@ export const HoverNavigation = ({
4040
});
4141

4242
return (
43-
<motion.div
44-
animate={{
45-
width: visible ? "auto" : "0px",
46-
}}
47-
className={cn(
48-
"flex flex-row items-center justify-center overflow-hidden",
49-
className,
50-
)}
51-
>
52-
{items.map((item, idx) => (
43+
<>
44+
<motion.div
45+
animate={{
46+
width: visible ? "0px" : "auto",
47+
opacity: visible ? "0%" : "100%",
48+
}}
49+
transition={{
50+
ease: "easeInOut",
51+
}}
52+
className={cn(
53+
"flex w-0 flex-row items-center justify-center whitespace-nowrap",
54+
className,
55+
)}
56+
>
5357
<a
54-
href={item?.link}
55-
key={item?.link}
56-
className="group relative block h-full px-5 py-2"
57-
onMouseEnter={() => setHoveredIndex(idx)}
58-
onMouseLeave={() => setHoveredIndex(null)}
58+
href="/contact"
59+
className={`overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500 ${!visible ? "" : "inline-block"}`}
5960
>
60-
<AnimatePresence>
61-
{hoveredIndex === idx && (
62-
<motion.span
63-
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
64-
layoutId="hoverBackground"
65-
initial={{ opacity: 0 }}
66-
animate={{
67-
opacity: 1,
68-
transition: { duration: 0.15 },
69-
}}
70-
exit={{
71-
opacity: 0,
72-
transition: { duration: 0.15, delay: 0.2 },
73-
}}
74-
/>
75-
)}
76-
</AnimatePresence>
77-
<NavBarLink>{item.label}</NavBarLink>
61+
Available for work
7862
</a>
79-
))}
80-
</motion.div>
63+
<div
64+
className={`relative z-50 ml-3 w-5 ${visible ? "hidden" : "inline-block"}`}
65+
>
66+
<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>
67+
<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>
68+
</div>
69+
</motion.div>
70+
<motion.div
71+
animate={{
72+
width: visible ? "auto" : "0px",
73+
opacity: visible ? "100%" : "0%",
74+
}}
75+
transition={{
76+
ease: "easeInOut",
77+
}}
78+
className={cn(
79+
"flex flex-row items-center justify-center overflow-hidden",
80+
className,
81+
)}
82+
>
83+
{items.map((item, idx) => (
84+
<a
85+
href={item?.link}
86+
key={item?.link}
87+
className="group relative block h-full px-5 py-2"
88+
onMouseEnter={() => setHoveredIndex(idx)}
89+
onMouseLeave={() => setHoveredIndex(null)}
90+
>
91+
<AnimatePresence>
92+
{hoveredIndex === idx && (
93+
<motion.span
94+
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
95+
layoutId="hoverBackground"
96+
initial={{ opacity: 0 }}
97+
animate={{
98+
opacity: 1,
99+
transition: { duration: 0.15 },
100+
}}
101+
exit={{
102+
opacity: 0,
103+
transition: {
104+
duration: 0.15,
105+
delay: 0.2,
106+
},
107+
}}
108+
/>
109+
)}
110+
</AnimatePresence>
111+
<NavBarLink>{item.label}</NavBarLink>
112+
</a>
113+
))}
114+
</motion.div>
115+
</>
81116
);
82117
};
83118

‎src/components/ui/displayOnScroll.tsx‎

Whitespace-only changes.

‎src/pages/contact.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import NavBar from "../components/global/NavBar.tsx";
2+
import NavBar from "../components/global/NavBar.astro";
33
import Layout from "../layouts/Layout.astro";
44
import ContactComponent from "../components/contact/ContactComponent.svelte";
55
import Card from "../components/global/Card.astro";

‎src/pages/experience.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import NavBar from "../components/global/NavBar.tsx";
2+
import NavBar from "../components/global/NavBar.astro";
33
import Layout from "../layouts/Layout.astro";
44
import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
55
import MoreExperience from "../components/experience/MoreExperience.astro";

‎src/pages/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import NavBar from "../components/global/NavBar.tsx";
2+
import NavBar from "../components/global/NavBar.astro";
33
import Layout from "../layouts/Layout.astro";
44
import NetworkLine from "../components/global/NetworkLine.astro";
55
import Intro from "../components/home/Intro.astro";
@@ -14,7 +14,7 @@ import Footer from "../components/global/FooterComponent.astro";
1414
title="Ryan's Portfolio"
1515
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
1616
>
17-
<NavBar client:load />
17+
<NavBar />
1818
<div id="home" class="flex items-center justify-center pt-32">
1919
<Intro />
2020
</div>

‎src/pages/projects.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import NavBar from "../components/global/NavBar.tsx";
2+
import NavBar from "../components/global/NavBar.astro";
33
import Layout from "../layouts/Layout.astro";
44
import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
55
import MoreProjects from "../components/projects/MoreProjects.svelte";

‎src/pages/skills.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import NavBar from "../components/global/NavBar.tsx";
2+
import NavBar from "../components/global/NavBar.astro";
33
import Layout from "../layouts/Layout.astro";
44
import SkillsComponent from "../components/skills/SkillsComponent.astro";
55
import MoreSkills from "../components/skills/MoreSkills.astro";

‎src/styles/global.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
--animate-fadeIn: fadeIn 0.5s ease-in-out;
2727
--animate-fadeUp: fadeUp 0.5s ease-in-out;
28+
--animate-glow: glow 2s ease infinite;
2829

2930
@keyframes fadeIn {
3031
0% {
@@ -42,11 +43,22 @@
4243
translate: 0px 10px;
4344
}
4445

45-
100% {
46+
50% {
4647
opacity: 100%;
4748
translate: 0px 0px;
4849
}
4950
}
51+
52+
@keyframes glow {
53+
0% {
54+
scale: 1;
55+
opacity: 100%;
56+
}
57+
100% {
58+
scale: 4;
59+
opacity: 5%;
60+
}
61+
}
5062
}
5163

5264
.view-fadeUp {

0 commit comments

Comments
 (0)