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

added accessibility and improved font performance

Browse source
This commit is contained in:
liyunze 2025-08-12 00:33:27 +10:00
parent 296bbbf45a
commit 1d4061a935
3 changed files with 68 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/projects/Project.astro
View file

@ -55,12 +55,12 @@ const leftProject = position == "left";
class:list={leftProject
? "left"
: "right"}
width="700"
width={700}
/>
<Image
src={image}
alt={alt}
width="700"
width={700}
class={`absolute max-w-full
aspect-video
opacity-100

113
src/components/ui/NavigationBar.tsx
View file

@ -132,54 +132,64 @@ export const HoverNavigation = ({
</div>
</motion.div>
</div>
<motion.div
animate={{
width: navVisible ? "auto" : "0px",
opacity: navVisible ? "100%" : "0%",
}}
transition={{
ease: "easeInOut",
}}
className={cn(
"hidden w-0 flex-row items-center justify-center overflow-hidden lg:flex lg:w-auto",
className,
)}
<nav
aria-label="Desktop Navigation"
className="flex items-center justify-center overflow-hidden"
>
{items.map((item, idx) => (
<a
href={item?.link}
key={item?.link}
className="group relative block h-fit 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>
<motion.ul
className="hidden w-0 flex-row items-center justify-center overflow-hidden lg:flex lg:w-auto"
animate={{
width: navVisible ? "auto" : "0px",
opacity: navVisible ? "100%" : "0%",
}}
transition={{
ease: "easeInOut",
}}
>
{items.map((item, idx) => (
<li key={item?.link}>
<a
href={item?.link}
className="group relative block h-fit 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>
</li>
))}
</motion.ul>
</nav>
<div className="hamburger-wrapper flex items-center justify-center lg:hidden">
<HamburgerCross
aria-label="Hamburger"
toggled={hamburgerOpen}
toggle={setHamburgerOpen}
size={20}
@ -200,13 +210,14 @@ export const HoverNavigation = ({
className="h-0 overflow-hidden"
>
{items.map((item, idx) => (
<a
href={item?.link}
key={item?.link}
className="group relative block px-5 py-2 text-center lg:hidden"
>
{item.label}
</a>
<li key={item?.link}>
<a
href={item?.link}
className="group relative block px-5 py-2 text-center lg:hidden"
>
{item.label}
</a>
</li>
))}
</motion.ul>
</div>

4
src/layouts/Layout.astro
View file

@ -48,6 +48,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
@ -55,6 +56,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Antonio-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* Montserrat Fonts */
@ -63,6 +65,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
@ -70,6 +73,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
html {