diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 76a9f95..10a1cfe 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -23,5 +23,9 @@ const t = useTranslations(lang); margin-top: auto; margin: 1.5rem auto; text-align: center; + + @media print { + display: none; + } } diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index d2eb449..de0688a 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -135,6 +135,10 @@ const targets = [ z-index: -1; pointer-events: none; } + + @media print { + display: none; + } } .logo { diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts index ce614a4..7a9baed 100644 --- a/src/i18n/langs/en.ts +++ b/src/i18n/langs/en.ts @@ -91,6 +91,13 @@ export default { 'resume.languages': 'Languages', 'resume.proficiency.full_professional': 'Professional', 'resume.proficiency.native': 'Native', + 'resume.skills.technical': 'Technical', + 'resume.skills.business': 'Business', + 'resume.skills.interpersonal': 'Interpersonal', + 'resume.skills.community': 'Community', + 'resume.skills.creative': 'Creative', + 'resume.print': 'Print/download as PDF', + 'resume.noscript_print': 'Print this page using your browser to get a PDF!', /* PROJECTS */ 'projects.uniten.title': 'UNITEN', diff --git a/src/i18n/langs/fr.ts b/src/i18n/langs/fr.ts index c23a564..337b689 100644 --- a/src/i18n/langs/fr.ts +++ b/src/i18n/langs/fr.ts @@ -93,6 +93,13 @@ export const fr: typeof en = { 'resume.languages': 'Langues', 'resume.proficiency.full_professional': 'Professionnel', 'resume.proficiency.native': 'Natif', + 'resume.skills.technical': 'Techniques', + 'resume.skills.business': 'Méthodologiques', + 'resume.skills.interpersonal': 'Interpersonnelles', + 'resume.skills.community': 'Communautaires', + 'resume.skills.creative': 'Créatives', + 'resume.print': 'Imprimer/Télécharger le PDF', + 'resume.noscript_print': 'Imprimez cette page avec votre navigateur pour obtenir un PDF !', /* PROJECTS */ 'projects.uniten.title': 'UNITEN', diff --git a/src/pages/[lang]/resume/_StandardListItem.astro b/src/pages/[lang]/resume/_StandardListItem.astro index 7243f7b..ef861b0 100644 --- a/src/pages/[lang]/resume/_StandardListItem.astro +++ b/src/pages/[lang]/resume/_StandardListItem.astro @@ -38,11 +38,6 @@ const ariaLabel = t('resume.fromto') ---
  • -

    {heading}

    -

    - -

    -
    - @@ -58,6 +53,11 @@ const ariaLabel = t('resume.fromto') }
    +

    {heading}

    +

    + +

    + { description && (
    @@ -76,6 +76,7 @@ const ariaLabel = t('resume.fromto') padding-inline-start: calc(var(--marker-size) / 2 + 1rem); margin-inline-start: calc(var(--marker-size) / 2); padding-block-end: 2rem; + inline-size: 100%; @media (max-width: 600px) { padding-inline-start: 0; @@ -83,6 +84,14 @@ const ariaLabel = t('resume.fromto') border: none; } + @media print { + padding-inline-start: 0; + margin-inline-start: 0; + border: none; + padding-block-end: 0.5rem; + min-block-size: 2lh; + } + &::before { content: ''; display: block; @@ -100,13 +109,15 @@ const ariaLabel = t('resume.fromto') @media (max-width: 600px) { display: none; } + + @media print { + display: none; + } } } .period-location { - position: absolute; - inset-block-start: 0; - inset-inline-end: 0; + float: right; text-align: end; @media (max-width: 600px) { @@ -126,10 +137,22 @@ const ariaLabel = t('resume.fromto') h3 { max-inline-size: 40ch; + + @media print { + max-inline-size: max-content; + font-size: 9.5pt; + display: inline; + } } .subheading { margin-block-end: 0.5rem; + + @media print { + display: inline; + margin-block-end: 0; + margin-inline-start: 0.5ch; + } } .subheading, diff --git a/src/pages/[lang]/resume/index.astro b/src/pages/[lang]/resume/index.astro index 73de38c..4fe4cf4 100644 --- a/src/pages/[lang]/resume/index.astro +++ b/src/pages/[lang]/resume/index.astro @@ -8,6 +8,8 @@ import type { LexValue } from '@atproto/lex'; import { getLocaleFromUrl, useTranslations } from '@i18n'; import Layout from 'src/layouts/Layout.astro'; import StandardListItem from './_StandardListItem.astro'; +import Button from '@components/Button.astro'; +import Resume from '@assets/icons/resume.svg'; const lang = getLocaleFromUrl(Astro.url); const t = useTranslations(lang); @@ -64,6 +66,10 @@ function sortRecords( } --- + +
    @@ -74,11 +80,21 @@ function sortRecords( {location.locality}, {location.region}, {location.country} - • - +33 6 64 57 15 69 • - clembs@clembs.com • + | + +33 6 64 57 15 69 | + clembs@clembs.com | clembs.com/contact
    + + + +
    @@ -188,7 +204,7 @@ function sortRecords( { skillCategories.map((s) => (
  • - {s.name} : + {t(`resume.skills.${s.name}`)} : {s.skills.map((s) => ( @@ -223,20 +239,63 @@ function sortRecords( max-inline-size: 800px; margin-inline: auto; padding-inline: 1rem; + + @media print { + padding: 0; + margin: 0; + } + } + + #print { + margin-block-start: 1rem; + + @media print { + display: none; + } + } + + @media print { + :global(:root, p) { + font-size: 8.5pt !important; + font-weight: 300 !important; + } + } + + @page { + size: a4; + margin-block: 10mm; + margin-inline: 10mm; } h1 { color: var(--color-500); margin-block-end: 0.25em; + + @media print { + font-size: 18pt; + font-weight: 600; + } } section { margin-block-start: 3rem; + + @media print { + margin-block-start: 0.5rem; + } } h2 { margin-block-end: 0.75em; border-block-end: 2px solid var(--color-400); + + @media print { + font-size: 11pt; + margin-block-end: 0.5rem; + color: var(--color-500); + font-variant: small-caps; + font-weight: 700; + } } .top-level-list { @@ -247,24 +306,35 @@ function sortRecords( } #skills li { - margin-block-end: 1rem; + @media not print { + margin-block-end: 0.5rem; + } - .chips { - display: inline-flex; - flex-wrap: wrap; - align-items: center; - gap: 0.25rem; + strong { + font-weight: 600; } .chip { display: inline-block; - padding-block: 0.125rem; - padding-inline: 0.5rem; - border: 1px solid var(--color-600); - background-color: var(--color-white); - border-radius: 999px; - font-size: 0.875rem; - font-weight: 300; + + @media not print { + padding-block: 0.125rem; + padding-inline: 0.5rem; + border: 1px solid var(--color-600); + background-color: var(--color-white); + border-radius: 999px; + font-size: 0.875em; + font-weight: 300; + margin-block-end: 0.25rem; + margin-inline-end: 0.25rem; + } + + @media print { + &:not(:last-child)::after { + content: ', '; + margin-inline-end: 0.5ch; + } + } } }