EmilandClaude Sonnet 5
b5ffc67a82
New design: studio backdrop with a perspective floor and X/Z axis lines, an orientation gizmo that orbits on scroll, Bricolage Grotesque and Instrument Sans (bundled, no build-time network). Projects are laid out as plates by a row planner that keeps every row full for any count; a demo image from the repo root is shown when present, otherwise a generated voxel sculpture. Text and projects still come live from Gitea. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import type { Resume } from '@/lib/types'
|
|
import styles from './hero.module.css'
|
|
|
|
type Props = { resume: Resume; mailHref: string; showProjects: boolean }
|
|
|
|
export default function Hero({ resume, 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={mailHref}>Email me</a>
|
|
</div>
|
|
</div>
|
|
<div className={styles.stage} aria-hidden="true">
|
|
<div className={styles.floor}>
|
|
<div className={styles.plane} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|