updated look
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ThemeToggle } from './ThemeToggle';
|
||||
|
||||
export function Navbar() {
|
||||
const pathname = usePathname();
|
||||
@@ -9,35 +10,49 @@ export function Navbar() {
|
||||
const isActive = (path: string) => pathname?.startsWith(path);
|
||||
|
||||
return (
|
||||
<nav aria-label="Main navigation" className="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-zinc-50/80 dark:bg-zinc-950/80 border-b border-zinc-200/50 dark:border-zinc-800/50">
|
||||
<div className="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<Link href="/" className="font-bold text-lg tracking-tight hover:opacity-70 transition-opacity">
|
||||
AK
|
||||
<nav
|
||||
aria-label="Main navigation"
|
||||
className="fixed left-0 top-0 z-50 w-full border-b border-line bg-paper-overlay"
|
||||
>
|
||||
<div className="mx-auto flex h-14 max-w-[72rem] items-center justify-between gap-6 px-5 sm:px-6">
|
||||
<Link href="/" className="flex items-baseline gap-2.5 transition-opacity hover:opacity-75">
|
||||
<span className="text-[0.96rem] font-medium tracking-[-0.03em] text-ink">
|
||||
Akshay Kolli
|
||||
</span>
|
||||
<span className="hidden font-mono text-[0.65rem] uppercase tracking-[0.14em] text-muted-strong sm:inline">
|
||||
Research
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm font-medium text-zinc-600 dark:text-zinc-400">
|
||||
<div className="flex items-center gap-4 text-[0.68rem] font-mono uppercase tracking-[0.14em] text-muted-strong sm:gap-5">
|
||||
<Link
|
||||
href="/"
|
||||
className={`transition-colors ${pathname === '/' ? 'text-ink' : 'hover:text-ink'}`}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog"
|
||||
className={`transition-colors ${isActive('/blog') ? 'text-zinc-900 dark:text-zinc-100 font-bold' : 'hover:text-zinc-900 dark:hover:text-zinc-100'}`}
|
||||
className={`transition-colors ${isActive('/blog') ? 'text-ink' : 'hover:text-ink'}`}
|
||||
>
|
||||
Blog
|
||||
Writing
|
||||
</Link>
|
||||
<Link
|
||||
href="/resume"
|
||||
className={`transition-colors ${isActive('/resume') ? 'text-zinc-900 dark:text-zinc-100 font-bold' : 'hover:text-zinc-900 dark:hover:text-zinc-100'}`}
|
||||
className={`transition-colors ${isActive('/resume') ? 'text-ink' : 'hover:text-ink'}`}
|
||||
>
|
||||
Resume
|
||||
</Link>
|
||||
<div className="w-px h-4 bg-zinc-200 dark:bg-zinc-800 hidden sm:block"></div>
|
||||
<a href="https://code.akkolli.net/lepton" target="_blank" rel="noopener noreferrer" aria-label="Code repositories" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
|
||||
Code
|
||||
</a>
|
||||
<a href="https://github.com/akkolli" target="_blank" rel="noopener noreferrer" aria-label="GitHub profile" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
|
||||
<a
|
||||
href="https://github.com/akkolli"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub profile"
|
||||
className="hidden transition-colors hover:text-ink sm:block"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://x.com/thekolliakshay" target="_blank" rel="noopener noreferrer" aria-label="Twitter profile" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
|
||||
Twitter
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user