Enhance resume print styles

package.json

@@ -22,6 +22,7 @@
     "@fortawesome/fontawesome-free": "^7.3.1",
     "astro": "^7.2.10",
     "less": "^4.9.1",
+    "marked": "^15.0.12",
     "sharp": "^0.35.0"
   },
   "allowScripts": {

src/data/resume.json

@@ -6,7 +6,7 @@
     "email": "hi@valentin.io",
     "phone": "+40 721 809 508",
     "url": "https://valentin.io",
-    "summary": "Front-end engineer with 9 years of experience building user interfaces and the systems that support them. Developed Skype's messaging interface with React Native and helped build Hootsuite Analytics from the ground up with React. Took a career break from 2022 to 2025 while pursuing a BSc in Computer Science. Now seeking for exciting work opportunities, open to in-office, relocation, and remote.",
+    "summary": "Front-end engineer with 9 years of experience building user interfaces and the systems that support them. Developed Skype's messaging interface with React Native and helped build Hootsuite Analytics from the ground up with React. Took a career break from 2022 to 2025 while pursuing a BSc in Computer Science. Now seeking new front-end opportunities and open to office-based roles, relocation, or remote work.",
     "location": {
       "address": "",
       "postalCode": "",
@@ -36,7 +36,7 @@
     "summary": "Built and maintained Skype's messaging interface using React Native and JavaScript.",
     "highlights": [
       "Implemented the ability to quote multiple messages in Skype chat",
-      "Took part in a cross-team effort to enable conversations between Skype and Microsoft Teams",
+      "Contributed to a cross-team effort that enabled conversations between Skype and Microsoft Teams",
       "Developed a Microsoft Teams feature for iOS and Android that allowed users to invite contacts by phone number"
     ]
   }, {
@@ -47,7 +47,7 @@
     "endDate": "2018-11-01",
     "summary": "Helped craft the UI for Timely, a fully automatic time tracking solution that leverages the power of AI.",
     "highlights": [
-      "Reimplemented the billing interface styles from designs provided by the product designer",
+      "Implemented a redesigned billing interface based on product designs",
       "Expanded the implementation of the calendar sync UI",
       "Worked primarily with React, Redux, Reselect, Sass and Jest"
     ]
@@ -64,7 +64,7 @@
       "Worked primarily with React, Redux, LESS, Webpack and Jest"
     ]
   }, {
-    "name": "Independent / Upwork",
+    "name": "Independent (via Upwork)",
     "position": "Freelance Front-End Developer",
     "url": "https://www.upwork.com/",
     "startDate": "2013-01-01",
@@ -117,10 +117,16 @@
   }],
   "languages": [{
     "language": "English",
-    "fluency": "Native or bilingual proficiency"
+    "fluency": "Advanced (C2)"
   }, {
     "language": "Romanian",
-    "fluency": "Native or bilingual proficiency"
+    "fluency": "Native"
+  }, {
+    "language": "Italian",
+    "fluency": "Beginner (A2)"
+  }, {
+    "language": "Czech",
+    "fluency": "Beginner (A1)"
   }],
   "interests": [],
   "references": [],
@@ -142,7 +148,7 @@
     "highlights": [
       "React, Django, PostgreSQL, Python",
       "Loads a dataset with 30M submissions and 7M unique tracks into memory and produces recommendations based on listening history in under 100ms",
-      "Live demo: https://taste-mender.com/"
+      "Live demo: [https://taste-mender.com/](https://taste-mender.com/)"
     ],
     "url": "https://github.com/RadValentin/taste-mender"
   }]

src/pages/resume.astro

@@ -4,6 +4,7 @@ import FormattedDate from '../components/FormattedDate.astro';
 import resumePdf from '../assets/valentin-radulescu-resume.pdf';
 import avatar from '../assets/valentin-radulescu.jpg';
 import data from '../data/resume.json';
+import { marked } from 'marked';
 import '../styles/resume.css';
 
 const urlWithoutProtocol = (url: string) => new URL(url).host;
@@ -49,11 +50,11 @@ const structuredData = {
             <div class="name">{data.basics.name}</div>
             <div class="role">{data.basics.label}</div>
           </div>
-          <img class="avatar" src={avatar.src} alt={data.basics.name}/>
+          <img class="avatar screen-only" src={avatar.src} alt={data.basics.name}/>
         </h1>
         <ul class="social" aria-label="resume links">
           {data.basics.profiles.map(p =>
-            <li>
+            <li class="screen-only">
               <a href={p.url} title={p.network}>
                 <i class={p.icon} aria-hidden="true"></i> {p.username}
               </a>
@@ -67,7 +68,7 @@ const structuredData = {
           </li>
           <li>
             <a href={data.basics.location.url}>
-              <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
+              <i class="fa-solid fa-location-dot" aria-hidden="true"></i>{" "}
               {data.basics.location.city}, {data.basics.location.countryCode}
             </a>
           </li>
@@ -140,7 +141,7 @@ const structuredData = {
             </p>
             <p class="subsection-summary">{pro.description}</p>
             <ul class="subsection-highlights">
-              {pro.highlights.map(h => <li>{h}</li>)}
+              {pro.highlights.map(h => <li set:html={marked.parseInline(h)} />)}
             </ul>
           </article>
         )}

src/styles/resume.css

@@ -2,7 +2,9 @@
 :root {
   /* Colors */
   --accent-color: #5a2bbf;
-  --border-color: #8a8a8a;
+  --border-primary-color: #8a8a8a;
+  --border-secondary-color: #dedede;
+
   --text-primary-color: #272727;
   --text-secondary-color: #595959;
 
@@ -36,6 +38,10 @@
 }
 
 @media print {
+  html {
+    font-size: 10pt;
+  }
+
   /* Prevent the table from breaking across pages */
   table, figure {
     page-break-inside: avoid;
@@ -111,14 +117,14 @@ main {
 header {
   margin-bottom: 2.25rem;
 
-  h1 {
+  & h1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 0;
-    margin-bottom: calc(1.25 * var(--default-spacing));
-    padding-bottom: calc(1.25 * var(--default-spacing));
-    border-bottom: 3px solid var(--border-color);
+    margin-bottom: var(--default-spacing);
+    padding-bottom: var(--default-spacing);
+    border-bottom: 3px solid var(--border-primary-color);
     line-height: 1.2;
   }
 
@@ -160,12 +166,12 @@ header {
     column-gap: 1rem;
     row-gap: 0.25rem;
     padding: 0;
-    margin: 0 0 calc(1.25 * var(--default-spacing));
+    margin: 0 0 var(--default-spacing);
     list-style-type: none;
   }
 
   & .skills {
-    margin: 1.25rem 0 0;
+    margin: 1rem 0 0;
   }
 
   & .skills p {
@@ -177,6 +183,12 @@ header {
       grid-template-columns: 1fr 1fr;
     }
   }
+
+  @media print {
+    & .social {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
 }
 
 
@@ -185,7 +197,7 @@ section {
   margin-bottom: 2rem;
 
   & h2 {
-    border-bottom: 2px solid var(--border-color);
+    border-bottom: 2px solid var(--border-primary-color);
     margin: 0 0 calc(1.25 * var(--default-spacing));
     padding-bottom: calc(var(--default-spacing) / 2);
     font-size: 1.35rem;
@@ -225,15 +237,19 @@ section {
     margin-top: 0.45rem;
   }
 
+  & .subsection {
+    break-inside: avoid;
+  }
+
   & .subsection + .subsection {
-    border-top: 1px solid #dedede;
+    border-top: 1px solid var(--border-secondary-color);
     margin-top: 1.35rem;
     padding-top: 1.15rem;
   }
 
   & .subsection-cards {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
   }
 
   & .subsection-cards strong {
@@ -245,9 +261,5 @@ section {
       margin-top: 1.1rem;
       padding-top: 0.9rem;
     }
-
-    & ul {
-      padding-left: 1.5rem;
-    }
   }
 }