Add page breaks

backend/app.ts

@@ -14,9 +14,9 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(express.static('public'));
 
-import userData from './userKnowledge.json';
-
-app.get('/', function (req: Request, res: Response) {
+app.get('/', async function (req: Request, res: Response) {
+  const file = Bun.file('./userKnowledge.json');
+  const userData = await file.json();
   res.render('cv2', { userData });
 });
 

backend/public/assets/javascripts/main.js

@@ -149,35 +149,33 @@ let resumeButton = document.getElementById("resume-button");
 // Generate PDF with html2pdf.js
 function generateResume() {
     // PDF filename change depending of the light/dark mode
-    if (document.body.classList.contains(darkTheme)) {
-        // html2pdf.js options
-        let opt = {
-            margin: 0,
-            filename: 'myResumeCV-dark.pdf',
-            image: { type: 'jpeg', quality: 0.98 },
-            html2canvas: { scale: 4, useCORS: true },
-            jsPDF: { format: 'a4', orientation: 'portrait' }
-        };
-        html2pdf(areaCV, opt);
-    } else {
-        // html2pdf.js options
-        let opt = {
-            margin: 0,
-            filename: 'myResumeCV-light.pdf',
-            image: { type: 'jpeg', quality: 0.98 },
-            html2canvas: { scale: 4, useCORS: true },
-            jsPDF: { format: 'a4', orientation: 'portrait' }
-        };
-        html2pdf(areaCV, opt);
-    }
+    let theme = document.body.classList.contains(darkTheme) ? 'dark' : 'light';
+
+    // html2pdf.js options
+    let opt = {
+        margin: 0,
+        filename: 'myResumeCV-' + theme + '.pdf',
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 4, useCORS: true },
+        jsPDF: { format: 'a4', orientation: 'portrait' },
+        pagebreak: { mode: 'css', avoid: ['.experience_content', '.education_content', '.section-title'] }
+    };
+
+    return html2pdf().set(opt).from(areaCV).toContainer().then(function () {
+        // Stretch the copy being rendered to a whole number of pages, so the
+        // left column background reaches the bottom of the last page.
+        // 1px less avoids a blank extra page from rounding.
+        let pageHeight = this.prop.pageSize.inner.px.height;
+        let resume = this.prop.container.firstElementChild;
+        let pages = Math.ceil(resume.offsetHeight / pageHeight);
+        resume.style.minHeight = (Math.floor(pages * pageHeight) - 1) + 'px';
+    }).save();
 }
 
 // Action executed by clicking on the button => generation of the final PDF CV CV
 resumeButton.addEventListener("click", () => {
     // Adapt the area of the PDF
     addScaleCV();
-    // Generate the PDF
-    generateResume();
-    // Remove adaptation after 1 second (you can choose to set more than 1 second if your PDF download time is long)
-    setTimeout(removeScaleCV, 1000);
+    // Generate the PDF, then remove the adaptation once it is saved
+    generateResume().finally(removeScaleCV);
 });

backend/public/assets/stylesheets/style.css

@@ -123,7 +123,20 @@ body.scale-cv {
 }
 
 .scale-cv .resume {
-    height: 1122px;
+    /* At least one A4 page; grows so html2pdf can split it onto more pages */
+    min-height: 1122px;
+}
+
+/* Keep entries and section titles together when breaking to a new page */
+.scale-cv .experience_content,
+.scale-cv .education_content,
+.scale-cv .section-title {
+    break-inside: avoid;
+}
+
+/* Put <div class="page-break"></div> in the template to start a new PDF page there */
+.page-break {
+    break-before: page;
 }
 
 .scale-cv .resume_left {

backend/userKnowledge.json

@@ -6,23 +6,31 @@
   "birth": "14, November, 2000",
   "living_location": "Ljubljana, Slovenia",
   "web_link": "https://petrovv.com",
-  "git_link": "https://git.petrovv.com/explore",
+  "git_link": "https://git.petrovv.com",
   "email": "nikola@petrovv.com",
-  "instagram_handle":"@nikolainsta7",
-  "instagram_link":"https://www.instagram.com/nikolainsta7",
+  "instagram_handle": "@nikolainsta7",
+  "instagram_link": "https://www.instagram.com/nikolainsta7",
   "about_me": "I am Nikola, currently pursuing my studies at the Faculty of Electrical Engineering and Computer Science (FERI) in Maribor. My academic journey is largely driven by my interest in application and web development. I find the process of creating functional and user-friendly digital solutions both challenging and rewarding. This field allows me to blend creativity with technical skills, which I find particularly engaging.",
   "experience": [
+    {
+      "title": "Full-Stack Developer / IT",
+      "company": "Nimrod d.o.o / MISIT Mitja Hlede s.p.",
+      "time": "15/06/2026 - CURRENT",
+      "des": "Set up Vaultwarden and Gitea runners for automatic deployment of internal apps. Rewrote a legacy internal app (PHP/jQuery/Vue/Bootstrap 4) into a PHP backend with a Vue and Bootstrap 5 frontend. Built an internal CMMS from scratch. Also maintained and repaired the company's computers."
+    }
+  ],
+  "student_experience": [
     {
       "title": "HW Developer",
       "company": "Spica International",
       "time": "17/03/2025 - 01/08/2025",
-      "des": "Worked on access menegment systems. Programed integrated devices, based on Buildroot using c++ and python web server."
+      "des": "Worked on access management systems. Programmed integrated devices, based on Buildroot using c++ and python web server."
     },
     {
       "title": "Backend/Frontend",
       "company": "RRC d.o.o",
       "time": "01/09/2024 - 31/12/2024",
-      "des": "Worked on goverment websites for collage enrolment and student dorm requests."
+      "des": "Worked on government websites for college enrollment and student dorm requests."
     },
     {
       "title": "Developer",
@@ -34,7 +42,7 @@
       "title": "Developer/IT",
       "company": "LightAct",
       "time": "01/07/2022 - 01/09/2022",
-      "des": "I helped maintaining data base, worked on the application (integrated a capture card and IP camera), assembled new server rack, installed new UTP/power connectors in the office."
+      "des": "I helped maintain the database, worked on the application (integrated a capture card and IP camera), assembled new server rack, installed new UTP/power connectors in the office."
     },
     {
       "title": "Mentor",
@@ -52,7 +60,7 @@
   "education": [
     {
       "title": "(FERI) Faculty of Electrical Engineering and Computer Science, University of Maribor",
-      "time": "01/10/2021 - CURRENT",
+      "time": "01/10/2021 - 01/01/2026",
       "des": "Graduate engineer of computer science and information technology."
     },
     {

backend/views/cv2.hbs

@@ -159,9 +159,8 @@
 
       <div class="resume_right">
 
-        <!-- EXPERIENCE -->
         <section class="experience section" id="experience">
-          <h2 class="section-title">Experience</h2>
+          <h2 class="section-title">Work Experiences</h2>
 
           <div class="experience_container bd-grid">
 
@@ -188,6 +187,37 @@
           </div>
         </section>
 
+        <!-- EXPERIENCE -->
+        <section class="experience section" id="experience">
+          <h2 class="section-title">Student Work Experiences</h2>
+
+          <div class="experience_container bd-grid">
+
+            {{#each student_experience}}
+            <div class="experience_content">
+              <div class="experience_time">
+                <span class="experience_rounder"></span>
+                {{#unless @last}}
+                <span class="experience_line"></span>
+                {{/unless}}
+              </div>
+              <div class="experience_data bd-grid">
+                <h3 class="experience_title">{{title}}</h3>
+                <span class="experience_company">{{company}}</span>
+                <span class="experience_year">{{time}}</span>
+                <p class="experience_description">
+                  {{des}}
+                </p>
+              </div>
+            </div>
+            {{/each}}
+
+
+          </div>
+        </section>
+        
+        <div class="page-break"></div>
+        
         <!-- EDUCATION -->
         <section class="education section" id="education">
           <h2 class="section-title">Education</h2>

notes.txt

@@ -0,0 +1,6 @@
+
+Nimrod.
+
+Set up Vaultwarden and Gitea runners for automatic deployment of internal apps. Rewrote a legacy internal app (PHP/jQuery/Vue/Bootstrap 4) into a PHP backend with a Vue and Bootstrap 5 frontend. Built an internal CMMS from scratch. Also maintained and repaired the company's computers.
+
+Set up and maintained the company's internal infrastructure, including a self-hosted Vaultwarden password manager and Gitea Actions runners that automatically deploy internal applications. Rewrote a legacy internal application, moving it from a mix of PHP, jQuery, Vue, plain JavaScript and Bootstrap 4 to a clean PHP backend with a Vue and Bootstrap 5 frontend. Designed and built an internal CMMS (Computerized Maintenance Management System) from scratch to track equipment, maintenance tasks and repairs. Also provided IT support: maintaining, repairing and setting up the company's computers.

tsconfig.json

@@ -28,7 +28,6 @@
     "noPropertyAccessFromIndexSignature": false,
     "types": [
       "bun-types"
-    ],
-    "baseUrl": "./"
+    ]
   }
 }