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 class:list={leftProject
? "left" ? "left"
: "right"} : "right"}
width="700" width={700}
/> />
<Image <Image
src={image} src={image}
alt={alt} alt={alt}
width="700" width={700}
class={`absolute max-w-full class={`absolute max-w-full
aspect-video aspect-video
opacity-100 opacity-100

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

@ -132,54 +132,64 @@ export const HoverNavigation = ({
</div> </div>
</motion.div> </motion.div>
</div> </div>
<motion.div <nav
animate={{ aria-label="Desktop Navigation"
width: navVisible ? "auto" : "0px", className="flex items-center justify-center overflow-hidden"
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,
)}
> >
{items.map((item, idx) => ( <motion.ul
<a className="hidden w-0 flex-row items-center justify-center overflow-hidden lg:flex lg:w-auto"
href={item?.link} animate={{
key={item?.link} width: navVisible ? "auto" : "0px",
className="group relative block h-fit px-5 py-2" opacity: navVisible ? "100%" : "0%",
onMouseEnter={() => setHoveredIndex(idx)} }}
onMouseLeave={() => setHoveredIndex(null)} transition={{
> ease: "easeInOut",
<AnimatePresence> }}
{hoveredIndex === idx && ( >
<motion.span {items.map((item, idx) => (
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200" <li key={item?.link}>
layoutId="hoverBackground" <a
initial={{ opacity: 0 }} href={item?.link}
animate={{ className="group relative block h-fit px-5 py-2"
opacity: 1, onMouseEnter={() =>
transition: { duration: 0.15 }, setHoveredIndex(idx)
}} }
exit={{ onMouseLeave={() =>
opacity: 0, setHoveredIndex(null)
transition: { }
duration: 0.15, >
delay: 0.2, <AnimatePresence>
}, {hoveredIndex === idx && (
}} <motion.span
/> className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
)} layoutId="hoverBackground"
</AnimatePresence> initial={{ opacity: 0 }}
<NavBarLink>{item.label}</NavBarLink> animate={{
</a> opacity: 1,
))} transition: {
</motion.div> 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"> <div className="hamburger-wrapper flex items-center justify-center lg:hidden">
<HamburgerCross <HamburgerCross
aria-label="Hamburger"
toggled={hamburgerOpen} toggled={hamburgerOpen}
toggle={setHamburgerOpen} toggle={setHamburgerOpen}
size={20} size={20}
@ -200,13 +210,14 @@ export const HoverNavigation = ({
className="h-0 overflow-hidden" className="h-0 overflow-hidden"
> >
{items.map((item, idx) => ( {items.map((item, idx) => (
<a <li key={item?.link}>
href={item?.link} <a
key={item?.link} href={item?.link}
className="group relative block px-5 py-2 text-center lg:hidden" className="group relative block px-5 py-2 text-center lg:hidden"
> >
{item.label} {item.label}
</a> </a>
</li>
))} ))}
</motion.ul> </motion.ul>
</div> </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"); src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
@ -55,6 +56,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Antonio-Bold.ttf") format("truetype"); src: url("/fonts/Antonio-Bold.ttf") format("truetype");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap;
} }
/* Montserrat Fonts */ /* Montserrat Fonts */
@ -63,6 +65,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Montserrat-Bold.ttf") format("truetype"); src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
@ -70,6 +73,7 @@ import { ClientRouter } from "astro:transitions";
src: url("/fonts/Montserrat-Regular.ttf") format("truetype"); src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap;
} }
html { html {