Merge pull request #97 from shortpoet/feature-pdf-base

fix pdf print

Author: shortpoet

CHANGELOG.md

@@ -218,10 +218,12 @@ span.skill {
   color: $primary;
 }
 .skill-type {
-  // margin: .5rem;
+  // Adjusted for balance with body text in PDF
+  // Previously .80rem felt heavy relative to paragraphs/headings
+  // Keep capitalization but reduce size for better visual hierarchy
   color: $primary;
   text-transform: capitalize;
-  font-size: .80rem;
+  font-size: .80rem; // was .80rem
 }
 .skill-grid-render {
   padding: .1rem
@@ -242,10 +244,12 @@ span.skill {
 }
 
 .skill-render {
+  // Pill text for individual skills — tone it down slightly
+  // Smaller text + same padding preserves readability while reducing visual weight
   color: $forest-green;
   display: inline-block;
   padding: 0.05rem 0.15rem 0.05rem 0.15rem;
-  font-size: 80%;
+  font-size: 70%; // was 80%
   // font-weight: 700;
   line-height: 1;
   text-align: center;
@@ -276,3 +280,74 @@ span.skill {
 .workingKnowledge {
   color: lighten($forest-green, 45%)
 }
+
+/*
+ * Print: stabilize header spacing in Experience entries
+ * -----------------------------------------------------
+ * WHAT: Normalize heading margins/line-height, prevent intra-block page breaks,
+ *       and align baselines for the row containing job title and dates.
+ * WHY:  Chrome's print UA styles + condensed display font can introduce a
+ *       visible gap between job title and company. Page-break decisions can
+ *       also leave stray space. Resetting margins, tightening line-height,
+ *       and avoiding breaks keeps the block visually tight and consistent.
+ * HOW:  Scope to @media print so screen layout remains unchanged.
+ */
+@media print {
+  // Reset UA defaults and tame line-height for condensed headings
+  .heading-pdf {
+    margin: 0;                 // remove default heading margins that create gaps
+    line-height: 1.1;          // match condensed font metrics in print
+    letter-spacing: normal;    // ensure no unintended tracking expansion
+    word-spacing: normal;
+  }
+
+  // Ensure specific heading levels used in Experience also reset
+  h5.heading-5,
+  h6.heading-6 {
+    margin: 0;                 // eliminate residual top/bottom margins
+    line-height: 1.1;          // keep baselines consistent across lines
+  }
+
+  // Keep the three-line header (title, company, dates) together
+  #job-position,
+  .pdf-company,
+  .pdf-experience-dates {
+    break-inside: avoid;       // avoid internal page breaks that leave gaps
+    page-break-inside: avoid;
+  }
+
+  .pdf-experience-dates {
+    white-space: nowrap;       // prevent wrap that can push adjacent lines down
+    margin: 0;                 // guard against UA margins
+    line-height: 1.1;
+  }
+
+  .pdf-company {
+    // a subtle top margin keeps separation without introducing a visible gap
+    margin: 0.1rem 0 0 0;
+    line-height: 1.1;
+  }
+
+  // Align title and dates on their typographic baselines for a tighter row
+  .d-flex.flex-row.justify-content-between {
+    align-items: baseline !important;
+  }
+}
+
+/*
+ * Print-only spacing for skill lists
+ * ----------------------------------
+ * WHAT: Reduce the vertical gap between skill rows without tightening text line-height.
+ * WHY:  Bootstrap's `.mb-2` adds generous spacing that feels oversized in the print layout.
+ * HOW:  Override only within print media for the two containers used in PDF skills sections.
+ */
+@media print {
+  // Explicitly override Bootstrap margins on each row item
+  // Reduce vertical gap between stacked skill rows without affecting column gutters
+  .skill-list-container .skill-list.mb-2 {
+    margin-bottom: 0.16rem !important; // was ~0.5rem; tuned for condensed print
+  }
+  .skill-list-container .skill-list:last-child {
+    margin-bottom: 0 !important; // avoid trailing whitespace at the block end
+  }
+}

app/src/assets/scss/pdf/_global-pdf.scss

@@ -216,6 +216,7 @@ declare global {
   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePDFButtonInteractions: typeof import('./composables/usePDFButtonInteractions.js')['usePDFButtonInteractions']
+  const usePDFGeneration: typeof import('./composables/usePDFGeneration.js')['usePDFGeneration']
   const usePDFPageSaveButton: typeof import('./composables/usePDFButtonInteractions.js')['usePDFPageSaveButton']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
@@ -522,6 +523,7 @@ declare module 'vue' {
     readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly usePDFButtonInteractions: UnwrapRef<typeof import('./composables/usePDFButtonInteractions.js')['usePDFButtonInteractions']>
+    readonly usePDFGeneration: UnwrapRef<typeof import('./composables/usePDFGeneration.js')['usePDFGeneration']>
     readonly usePDFPageSaveButton: UnwrapRef<typeof import('./composables/usePDFButtonInteractions.js')['usePDFPageSaveButton']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>

app/src/auto-imports.d.ts

@@ -1,29 +1,43 @@
 <template>
   <section class="resume-section mt-3" id="skills">
     <div class="my-auto">
-      <h4 style="font-family: 'Saira Extra Condensed';" class="heading-pdf heading-4 subheading mb-3 ms-0">
+      <h4
+        style="font-family: 'Saira Extra Condensed'"
+        class="heading-pdf heading-4 subheading mb-3 ms-0">
         Programming Languages &amp; Tools
       </h4>
-      <div id="skill-grid-container" class="d-flex flex-column justify-content-between">
+      <div
+        id="skill-grid-container"
+        class="d-flex flex-column justify-content-between">
         <div class="skill-grid-row-1 d-flex flex-row justify-content-between">
           <div v-for="(type, it) in skills" :key="it" class="skill-grid-render">
             <div class="list-devicons-pdf d-flex justify-content-around">
-              <PDFDevIcon v-for="(icon, ii) in mapIcons(type.type)" :key="ii" :source="icon.icon" :name="icon.name" />
+              <PDFDevIcon
+                v-for="(icon, ii) in mapIcons(type.type)"
+                :key="ii"
+                :source="icon.icon"
+                :name="icon.name" />
             </div>
-            <div class="skill-type-render d-flex flex-row align-items-center justify-content-around my-0">
+            <div
+              class="skill-type-render d-flex flex-row align-items-center justify-content-around my-0">
               <div>
-                <div :class="'pdf-skill-type-' + (it + 1)" style="font-family: 'Open Sans';">{{ typeFilter(type.type) }}
+                <div
+                  :class="'pdf-skill-type-' + (it + 1)"
+                  style="font-family: 'Open Sans'">
+                  {{ typeFilter(type.type) }}
                 </div>
               </div>
             </div>
-            <PDFBorder class="d-block my-2" :size=".25" />
+            <PDFBorder class="d-block my-2" :size="0.25" />
             <div class="skill-list-container d-flex flex-column mb-2">
-              <div v-for="(skill, is) in listSkills(type.details)" :key="is"
-                class="skill-list d-flex flex-column mx-2 mb-2">
+              <div
+                v-for="(skill, is) in listSkills(type.details)"
+                :key="is"
+                class="skill-list d-flex flex-column mx-1 mb-1">
                 <div class="skill-pill-container d-flex justify-content-around">
                   <!-- adding extra spans to create grid -->
                   <span></span>
-                  <span style="font-family: 'Open Sans';" class="skill-render">
+                  <span style="font-family: 'Open Sans'" class="skill-render">
                     {{ skill }}
                   </span>
                   <span></span>
@@ -38,9 +52,9 @@
 </template>
 
 <script>
-import PDFDevIcon from '@/components/Resume/PDF/PDFDevIcon.vue'
-import PDFBorder from '@/components/Resume/PDF/PDFBorder.vue'
-import icons from '@/assets/icons/icons.js'
+import PDFDevIcon from '@/components/Resume/PDF/PDFDevIcon.vue';
+import PDFBorder from '@/components/Resume/PDF/PDFBorder.vue';
+import icons from '@/assets/icons/icons.js';
 
 export default {
   name: 'PDFSkillsRender',
@@ -59,53 +73,52 @@ export default {
       iconMap: icons.iconMap,
       windowWidth: window.innerWidth,
       isMediumLarge: false
-    }
-  },
-  computed: {
+    };
   },
+  computed: {},
   methods: {
     listSkills(skills) {
-      return skills.split(',')
+      return skills.split(',');
     },
     mapIcons(skill) {
       let iconKeys = this.iconMap.filter(im => {
-        console.log(im.skill, skill)
-        return im.skill === skill
-      })[0]['icons']
+        console.log(im.skill, skill);
+        return im.skill === skill;
+      })[0]['icons'];
       return iconKeys.map(ik => {
-        console.log(ik)
-        return this.icons.filter(i => i.name === ik)[0]
-      })
+        console.log(ik);
+        return this.icons.filter(i => i.name === ik)[0];
+      });
     },
     screenCheck() {
       // console.log(document)
       // let skillGridWidth = document.getElementById('skill-grid-container').scrollWidth
-      let windowWidth = this.windowWidth
+      let windowWidth = this.windowWidth;
       // for medium-large screens
       if (768 < windowWidth && windowWidth < 985) {
-        console.log('the grid should be medium-large')
-        this.isMediumLarge = true
+        console.log('the grid should be medium-large');
+        this.isMediumLarge = true;
       } else {
-        this.isMediumLarge = false
+        this.isMediumLarge = false;
       }
     },
     typeFilter(type) {
       if (type === 'Document Db') {
-        type = 'Doc Db'
+        type = 'Doc Db';
       } else if (type === 'Data Vizualization') {
-        type = 'Data Viz'
+        type = 'Data Viz';
       }
-      return type
+      return type;
     }
   },
   mounted() {
-    this.screenCheck()
+    this.screenCheck();
   }
-}
+};
 </script>
 <style lang="scss">
 .fa-user-ninja:before {
   font-family: 'Font Awesome 5 Free';
-  content: "\f504";
+  content: '\f504';
 }
 </style>

app/src/components/Resume/PDF/PDFSkillsRender.vue

@@ -1,6 +1,6 @@
 # PDF Modernization
 
-With updates resumes to submit, the first step was to enhance the PDF generation feature of my website. This site was first built right at the start of my coding journey -- back when vibe coding involved stack overflow, github sample repos, and the debugger. The PDF generation using the canvas API seemed like magic. It rasterizes the DOM and uses another library to convert to PDF. This worked great, but I often found myself having to resize the PDF or simply copy/paste the content to adhere to updload size and/or OCR (optical character recognition) requirements.
+With updated resumes to submit, the first step was to enhance the PDF generation feature of my website. This site was first built right at the start of my coding journey -- back when vibe coding involved stack overflow, github sample repos, and the debugger. The PDF generation using the canvas API seemed like magic. It rasterizes the DOM and uses another library to convert to PDF. This worked great, but I often found myself having to resize the PDF or simply copy/paste the content to adhere to updload size and/or OCR (optical character recognition) requirements.
 
 When speaking with site visitors, many didn't seem to make it to the PDF generation. Part of my desire is to streamline the resume requests, which require good discoverability. So as part of this feature, I added and additinal landing page button as well as slight animations on scroll and page load to draw the user's attention.
 
@@ -13,6 +13,7 @@ The browser print option is the quick win that allows me to ship the solution. T
 
 The Cloudflare Worker option offers some distinct advantages that I am looking forward to exploring. Particularly, as it builds on some of my previous cloudflare edge working experimentation which can be found at [edge auth playground](https://ssr-dev.shortpoet.com/).
 
+And, for a bit of sensationalism... Of course there was a pitfall - "Browser wars." Somehow, years later, it feels like much of tech, and by extension, our lives, are determined by the desire to control what users browse. No big surprise there. And so, of course, I had to deal with a Chrome edgecase.
 
 * **PDF modernization (Phase 1):** print-optimized route, selectable text, before/after (size, time-to-first-display).
   Post: *“Optimization as Product Decision: when 95% smaller isn’t the whole story.”*

docs/article-drafts/pdf.md

@@ -0,0 +1,5 @@
+# Thanks
+
+I want to dedicate a thank you to the awesome colleagues at Lazlo 326 that made my experience there so rewarding. Through the cycle of challenges aand growth, it was a mutally enriching experience. I want to specially thank my teammates (and friends) Tchimwa, Sergiy, Michael, Alex, and Sagi. Thank you for your camraderie, techncial acumen, philosphical generosity, and the many laughs we shared. I will truly miss our time together.
+
+I was deeply touched by the support and endorsements I received. While times of change can be daunting, the overwhelming positivity and kindness is most encouraging. Thanks again! :)