pablo/pablo.shortman.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

framer navbar effect

Browse Source
This commit is contained in:
mr-shortman 2024-12-02 13:43:08 +01:00
parent b0664a82dc
commit 400cc17f00
3 changed files with 64 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/globals.css
View File

@ -127,3 +127,28 @@ body {
); );
} }
} }
nav.navbar {
background-color: transparent;
background-image: radial-gradient(
transparent 1px,
var(--token-f32baa44-90b8-42a5-8bca-ffba9d95b23a, hsl(var(--background)))
1px
);
background-size: 4px 4px;
backdrop-filter: blur(3px);
mask: linear-gradient(rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
opacity: 1;
}
nav.navbar::before {
display: block;
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
opacity: 0.2;
}

74
src/components/navbar.tsx
View File

@ -18,43 +18,45 @@ function Navbar() {
const pathname = usePathname(); const pathname = usePathname();
const isActive = (path: string) => pathname === path.replace(/\/#/g, ""); const isActive = (path: string) => pathname === path.replace(/\/#/g, "");
return ( return (
<nav className="container p-4 flex justify-between items-center "> <div className="w-full fixed top-0 right-0 left-0 z-50">
<div className="flex items-center gap-4"> <nav className="container p-4 flex justify-between items-center navbar">
<Link <div className="flex items-center gap-4">
className="text-sm hidden md:block" <Link
href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`} className="text-sm hidden md:block"
> href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`}
{process.env.NEXT_PUBLIC_EMAIL} >
</Link> {process.env.NEXT_PUBLIC_EMAIL}
{!isActive("/contact") && ( </Link>
<Button asChild size={"sm"} className="hidden md:flex"> {!isActive("/contact") && (
<Link href={"/contact"}>Work with me</Link> <Button asChild size={"sm"} className="hidden md:flex">
</Button> <Link href={"/contact"}>Work with me</Link>
)} </Button>
</div> )}
</div>
<Breadcrumb> <Breadcrumb>
<BreadcrumbList> <BreadcrumbList>
{appNavigator.map(({ label, path }, idx) => ( {appNavigator.map(({ label, path }, idx) => (
<div key={path} className="flex items-center gap-2"> <div key={path} className="flex items-center gap-2">
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink <BreadcrumbLink
className={cn(isActive(path) && "text-foreground")} className={cn(isActive(path) && "text-foreground")}
href={path} href={path}
> >
{label} {label}
</BreadcrumbLink> </BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
{idx + 1 < appNavigator.length && ( {idx + 1 < appNavigator.length && (
<BreadcrumbSeparator> <BreadcrumbSeparator>
<span>/</span> <span>/</span>
</BreadcrumbSeparator> </BreadcrumbSeparator>
)} )}
</div> </div>
))} ))}
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
</nav> </nav>
</div>
); );
} }

2
src/components/setions/hero.tsx
View File

@ -14,7 +14,7 @@ function Hero() {
<div className="text-5xl lg:text-7xl rounded-md group font-bold max-w-xs lg:max-w-md mx-auto text-right flex flex-col relative cursor-default "> <div className="text-5xl lg:text-7xl rounded-md group font-bold max-w-xs lg:max-w-md mx-auto text-right flex flex-col relative cursor-default ">
<span <span
className={cn( className={cn(
`absolute left-4 lg:left-0 bottom-full z-50 ${textHover}`, `absolute left-4 lg:left-0 bottom-full z-10 ${textHover}`,
hovered === "text-2" && "text-background blur-sm" hovered === "text-2" && "text-background blur-sm"
)} )}
onMouseEnter={() => setHovered("text-1")} onMouseEnter={() => setHovered("text-1")}