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(
}
---
+
+
+
+
+
+
@@ -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;
+ }
+ }
}
}