EmilandClaude Sonnet 5
15d36d6437
Colours move into theme tokens (light values in :root, dark in [data-theme=dark]); the closing contact band inverts on each theme. The choice is stored in localStorage and applied by a head script before the first paint. Voxel covers and image shadows follow the theme. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
27 lines
897 B
TypeScript
27 lines
897 B
TypeScript
'use client'
|
|
|
|
import { useScrolled } from '@/lib/useScroll'
|
|
import ThemeToggle from './ThemeToggle'
|
|
import styles from './topbar.module.css'
|
|
|
|
type Props = { name: string; mailHref: string; showProjects: boolean }
|
|
|
|
export default function TopBar({ name, mailHref, showProjects }: Readonly<Props>) {
|
|
const scrolled = useScrolled()
|
|
return (
|
|
<header className={`${styles.bar} ${scrolled ? styles.solid : ''}`}>
|
|
<div className={styles.inner}>
|
|
<a className={styles.mark} href="#top">{name}</a>
|
|
<nav className={styles.nav} aria-label="Sections">
|
|
{showProjects && <a href="#projects">Projects</a>}
|
|
<a href="#skills">Skills</a>
|
|
<a href="#experience">Experience</a>
|
|
<a href="#education">Education</a>
|
|
</nav>
|
|
<ThemeToggle />
|
|
<a className={styles.mail} href={mailHref}>Email me</a>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|