lepton/Webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated look
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
Details

Browse Source
This commit is contained in:
Akshay Kolli
2026-04-11 23:27:29 -04:00
parent aa7fe8ecc7
commit 382edaab75
21 changed files with 740 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/layout/AmbientCanvas.tsx Normal file
View File

@@ -0,0 +1,7 @@
export function AmbientCanvas() {
return (
<div aria-hidden className="ambient-canvas">
<div className="ambient-canvas__wash" />
</div>
);
}

24
components/layout/Footer.tsx
View File

@@ -1,11 +1,23 @@
export function Footer() {
return (
<footer className="w-full py-8 text-center text-xs text-zinc-400 dark:text-zinc-600 font-mono border-t border-zinc-200/50 dark:border-zinc-800/50 mt-auto">
<div className="max-w-4xl mx-auto px-6 flex flex-col sm:flex-row justify-between items-center gap-4">
<div className="flex gap-4">
<a href="https://x.com/thekolliakshay" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Twitter</a>
<a href="https://github.com/akkolli" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">GitHub</a>
<footer className="mt-auto border-t border-line">
<div className="mx-auto flex max-w-[72rem] flex-col gap-3 px-5 py-6 sm:flex-row sm:items-center sm:justify-between sm:px-6">
<p className="text-[0.82rem] leading-6 text-muted">
Research, writing, and software.
</p>
<div className="flex flex-wrap gap-4 text-[0.82rem] text-ink">
<a href="mailto:akshaykolli@hotmail.com" className="transition-colors hover:text-accent">
Email
</a>
<a href="https://github.com/akkolli" target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-accent">
GitHub
</a>
<a href="https://www.linkedin.com/in/akshay-kolli-/" target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-accent">
LinkedIn
</a>
<a href="https://x.com/thekolliakshay" target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-accent">
X
</a>
</div>
</div>
</footer>

47
components/layout/Navbar.tsx
View File

@@ -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>

66
components/layout/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,66 @@
"use client";
type Theme = "light" | "dark";
const STORAGE_KEY = "theme-preference";
function applyTheme(theme: Theme) {
document.documentElement.dataset.theme = theme;
window.localStorage.setItem(STORAGE_KEY, theme);
}
function getCurrentTheme(): Theme {
const currentTheme = document.documentElement.dataset.theme;
if (currentTheme === "light" || currentTheme === "dark") {
return currentTheme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
export function ThemeToggle() {
const toggleTheme = () => {
const nextTheme = getCurrentTheme() === "dark" ? "light" : "dark";
applyTheme(nextTheme);
};
return (
<button
type="button"
onClick={toggleTheme}
title="Toggle color theme"
aria-label="Toggle color theme"
className="theme-toggle inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-muted-strong transition-colors hover:border-line hover:text-ink"
>
<span className="sr-only">Toggle color theme</span>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
className="theme-toggle__sun h-3.5 w-3.5 fill-none stroke-current"
strokeWidth="1.7"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2.5v2.2" />
<path d="M12 19.3v2.2" />
<path d="m4.9 4.9 1.6 1.6" />
<path d="m17.5 17.5 1.6 1.6" />
<path d="M2.5 12h2.2" />
<path d="M19.3 12h2.2" />
<path d="m4.9 19.1 1.6-1.6" />
<path d="m17.5 6.5 1.6-1.6" />
</svg>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
className="theme-toggle__moon h-3.5 w-3.5 fill-none stroke-current"
strokeWidth="1.7"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
</svg>
</button>
);
}