Make the resume bilingual and part of the shared site chrome

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

components/Hero.tsx

@@ -1,13 +1,16 @@
 '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 Props = { resume: Resume; portfolio: Portfolio; mailHref: string; showProjects: boolean }
+type TextKey = 'name' | 'role' | 'bio' | 'availability'
+type Props = { en: Resume; ru: Resume; portfolio: Portfolio; mailHref: string; showProjects: boolean }
 
-export default function Hero({ resume, portfolio, mailHref, showProjects }: Readonly<Props>) {
+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) => {
@@ -21,17 +24,19 @@ export default function Hero({ resume, portfolio, mailHref, showProjects }: Read
       <div className={styles.content}>
         <p className={styles.status}>
           <span className={styles.dot} />
-          {resume.availability}
+          <span>{text('availability')}</span>
         </p>
-        <h1 className={styles.name}>{resume.name}</h1>
-        <p className={styles.role}>{resume.role}</p>
-        <p className={styles.bio}>{resume.bio}</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">See projects</a>}
-          <a className={`${styles.button} ${showProjects ? styles.secondary : styles.primary}`} href={portfolio.href} target="_blank" rel="noreferrer">
-            Full portfolio
+          {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}>Email me</a>
+          <a className={styles.link} href={mailHref}><Bi ru="Написать" en="Email me" /></a>
         </div>
       </div>
       <div className={styles.stage} aria-hidden="true">