EmilandClaude Sonnet 5
7471d65f54
The top bar's accent button becomes Portfolio (Email stays in the hero and the contact band), the hero gets a Full portfolio button, and the project list ends with a large block linking to it. The link points at Gitea's list of repos with the portfolio topic; the sync supplies the count and the resume file can override the target and label. Also eases the display weight and tracking of the name in the dark theme. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import { useScrolled } from '@/lib/useScroll'
|
|
import type { Portfolio } from '@/lib/types'
|
|
import ThemeToggle from './ThemeToggle'
|
|
import styles from './topbar.module.css'
|
|
|
|
type Props = { name: string; portfolio: Portfolio; showProjects: boolean }
|
|
|
|
export default function TopBar({ name, portfolio, 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>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
<ThemeToggle />
|
|
<a className={styles.cta} href={portfolio.href} target="_blank" rel="noreferrer">{portfolio.label ?? 'Portfolio'}</a>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|