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
45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import type { Portfolio, Resume } from '@/lib/types'
|
|
import styles from './hero.module.css'
|
|
|
|
type Props = { resume: Resume; portfolio: Portfolio; mailHref: string; showProjects: boolean }
|
|
|
|
export default function Hero({ resume, portfolio, mailHref, showProjects }: Readonly<Props>) {
|
|
const hero = useRef<HTMLElement>(null)
|
|
|
|
// The floor sways a couple of degrees with the pointer, like nudging the viewport.
|
|
const onPointerMove = (event: React.PointerEvent) => {
|
|
if (event.pointerType !== 'mouse' || !hero.current) return
|
|
const offset = event.clientX / window.innerWidth - 0.5
|
|
hero.current.style.setProperty('--sway', `${(offset * 3).toFixed(2)}deg`)
|
|
}
|
|
|
|
return (
|
|
<section className={styles.hero} id="top" ref={hero} onPointerMove={onPointerMove}>
|
|
<div className={styles.content}>
|
|
<p className={styles.status}>
|
|
<span className={styles.dot} />
|
|
{resume.availability}
|
|
</p>
|
|
<h1 className={styles.name}>{resume.name}</h1>
|
|
<p className={styles.role}>{resume.role}</p>
|
|
<p className={styles.bio}>{resume.bio}</p>
|
|
<div className={styles.actions}>
|
|
{showProjects && <a className={`${styles.button} ${styles.primary}`} href="#projects">See projects</a>}
|
|
<a className={`${styles.button} ${showProjects ? styles.secondary : styles.primary}`} href={portfolio.href} target="_blank" rel="noreferrer">
|
|
Full portfolio
|
|
</a>
|
|
<a className={styles.link} href={mailHref}>Email me</a>
|
|
</div>
|
|
</div>
|
|
<div className={styles.stage} aria-hidden="true">
|
|
<div className={styles.floor}>
|
|
<div className={styles.plane} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|