EmilandClaude Sonnet 5
04c1cc5877
Adds a Russian version (data/resume.ru.json, default language) with an RU/EN switch stored under the key shared with the front page and the portfolio. The top bar becomes the site-wide one (brand, Resume, Portfolio, Gitea, Contact, language, theme) with a second row of anchors for this page's sections, and the fonts move to Unbounded and Onest so the three pages share one type system. Portfolio links now point at /portfolio/. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { Bi } from '@/lib/i18n'
|
|
import type { Portfolio, Resume } from '@/lib/types'
|
|
import styles from './hero.module.css'
|
|
|
|
type TextKey = 'name' | 'role' | 'bio' | 'availability'
|
|
type Props = { en: Resume; ru: Resume; portfolio: Portfolio; mailHref: string; showProjects: boolean }
|
|
|
|
export default function Hero({ en, ru, portfolio, mailHref, showProjects }: Readonly<Props>) {
|
|
const hero = useRef<HTMLElement>(null)
|
|
const text = (key: TextKey) => <Bi ru={ru[key] || en[key]} en={en[key]} />
|
|
|
|
// 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} />
|
|
<span>{text('availability')}</span>
|
|
</p>
|
|
<h1 className={styles.name}>{text('name')}</h1>
|
|
<p className={styles.role}>{text('role')}</p>
|
|
<p className={styles.bio}>{text('bio')}</p>
|
|
<div className={styles.actions}>
|
|
{showProjects && (
|
|
<a className={`${styles.button} ${styles.primary}`} href="#projects"><Bi ru="Проекты" en="See projects" /></a>
|
|
)}
|
|
<a className={`${styles.button} ${showProjects ? styles.secondary : styles.primary}`} href={portfolio.href}>
|
|
<Bi ru={portfolio.label ?? 'Всё портфолио'} en={portfolio.label ?? 'Full portfolio'} />
|
|
</a>
|
|
<a className={styles.link} href={mailHref}><Bi ru="Написать" en="Email me" /></a>
|
|
</div>
|
|
</div>
|
|
<div className={styles.stage} aria-hidden="true">
|
|
<div className={styles.floor}>
|
|
<div className={styles.plane} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|