CV.jsx

import { useTranslation } from 'react-i18next';

export default function CV() {
  const { t } = useTranslation();

  return (
    <>
      <header className="page-head">
        <span className="eyebrow">{t('nav.cv')}</span>
        <h1>{t('cv.title')}</h1>
        <p>{t('cv.subtitle')}</p>
        <div style={{ marginTop: 28 }}>
          <a className="btn btn--primary" href="/cv-chijia.pdf" download>
            {t('cv.download')}
          </a>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="cv">
            <aside className="cv__side">
              <h3 style={{ fontStyle: 'italic' }}>Chijia</h3>
              <p style={{ color: 'var(--color-muted)' }}>
                {t('about.intro.school')}
                <br />
                Madrid, España
              </p>

              <div style={{ marginTop: 32 }}>
                <span className="eyebrow">{t('cv.languages')}</span>
                <p>{t('about.skills.languagesList')}</p>
              </div>

              <div style={{ marginTop: 32 }}>
                <span className="eyebrow">{t('cv.skills')}</span>
                <p>{t('about.skills.softwareList')}</p>
                <p style={{ color: 'var(--color-muted)' }}>{t('about.skills.manualList')}</p>
              </div>
            </aside>

            <div className="cv__main">
              <section>
                <h3>{t('cv.education')}</h3>
                <div className="cv__row">
                  <div>
                    <strong>{t('about.education.degree')}</strong>
                    <p>{t('about.education.school')}</p>
                  </div>
                  <span>{t('about.education.year')}</span>
                </div>
                <p style={{ color: 'var(--color-muted)', marginTop: 8 }}>
                  {t('about.education.highlights')}
                </p>
              </section>

              <section>
                <h3>{t('cv.experience')}</h3>
                <p style={{ color: 'var(--color-muted)' }}>{t('cv.experienceEmpty')}</p>
              </section>

              <section>
                <h3>{t('cv.awards')}</h3>
                <p style={{ color: 'var(--color-muted)' }}>{t('cv.awardsEmpty')}</p>
              </section>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}