Add header section to resume PDF with more info

hidragos · Oct 9, 2024 · b45a7e7 · b45a7e7
1 parent 4c231b1
commit b45a7e7
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 24 deletions.
diff --git a/src/app/pages/resume/resume-component/resume.component.html b/src/app/pages/resume/resume-component/resume.component.html
@@ -87,15 +87,17 @@ <h3 class="text-center resume-subtitle">
     [title]="t('resume.sections.education.label')"
   >
   </app-resume-card>
-</ng-container>
 
-<div class="download-button-container">
-  <button
-    color="primary"
-    class="download-button z-50"
-    mat-mini-fab
-    (click)="resumeService.generatePdf()"
-  >
-    <mat-icon>download</mat-icon>
-  </button>
-</div>
+  <div class="download-button-container">
+    <button
+      color="primary"
+      class="download-button z-50"
+      mat-mini-fab
+      (click)="resumeService.generatePdf()"
+      matTooltip="{{ t('labels.resume.download') }}"
+      matTooltipPosition="left"
+    >
+      <mat-icon>download</mat-icon>
+    </button>
+  </div>
+</ng-container>
diff --git a/src/app/pages/resume/resume-component/resume.component.scss b/src/app/pages/resume/resume-component/resume.component.scss
@@ -4,8 +4,6 @@ span {
 
 .download-button-container {
   @apply sticky bottom-0 flex justify-end;
-  max-width: 640px;
-  margin: 0 auto;
   padding: 32px;
 
   .download-button {

diff --git a/src/app/pages/resume/resume.service.ts b/src/app/pages/resume/resume.service.ts
@@ -1,7 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { TranslocoService } from '@jsverse/transloco';
 import pdfMake from 'pdfmake/build/pdfmake';
-import pdfFonts from 'pdfmake/build/vfs_fonts';
 import { Content, TDocumentDefinitions } from 'pdfmake/interfaces';
 
 export interface ResumeEntry {
@@ -83,6 +82,59 @@ export class ResumeService {
     ];
   }
 
+  buildResumeHeader(): Content {
+    // static data, a row of 3 texts
+    // website, location, and email
+    return [
+      {
+        columns: [
+          {
+            text: '📍',
+            style: {
+              font: 'NotoEmoji',
+            },
+            width: 16,
+          },
+          {
+            text: `${this.translocoService.translate(
+              'labels.resume.location'
+            )}`,
+          },
+        ],
+      },
+      {
+        columns: [
+          {
+            text: '🔗',
+            style: {
+              font: 'NotoEmoji',
+            },
+            width: 16,
+          },
+          {
+            text: 'hidragos.dev',
+            link: 'https://hidragos.dev',
+          },
+        ],
+      },
+      {
+        columns: [
+          {
+            text: '✉️',
+            style: {
+              font: 'NotoEmoji',
+            },
+            width: 16,
+          },
+          {
+            text: 'dragos.andrei.iliescu@gmail.com',
+            link: 'mailto:dragos.andrei.iliescu@gmail.com',
+          },
+        ],
+      },
+    ];
+  }
+
   buildResumeSection(data: ResumeSection): Content {
     const content = {
       stack: [...data.content.map((item) => this.buildResumeCard(item))],
@@ -118,12 +170,14 @@ export class ResumeService {
   }
 
   generatePdf(): void {
-    pdfMake.vfs = pdfFonts.pdfMake.vfs;
     pdfMake.fonts = {
       Merriweather: {
         normal: `${window.location.origin}/assets/fonts/Merriweather-Regular.ttf`,
         bold: `${window.location.origin}/assets/fonts/Merriweather-Bold.ttf`,
       },
+      NotoEmoji: {
+        normal: `${window.location.origin}/assets/fonts/NotoEmoji-Regular.ttf`,
+      },
     };
 
     const documentDefinition: TDocumentDefinitions = {
@@ -143,6 +197,7 @@ export class ResumeService {
             alignment: 'center',
           },
         },
+        this.buildResumeHeader(),
         {
           text: '\n',
         },
@@ -151,6 +206,9 @@ export class ResumeService {
             'resume.sections.about.short_intro'
           )}`,
         },
+        {
+          text: '\n',
+        },
         this.buildResumeKeyVal({
           key: this.translocoService.translate(
             'resume.sections.about.buzzwords.key'
@@ -168,15 +226,6 @@ export class ResumeService {
           ),
         }),
 
-        {
-          text: 'hidragos.dev',
-          link: 'https://hidragos.dev',
-          alignment: 'right',
-          style: {
-            fontSize: 8,
-          },
-        },
-
         this.buildResumeSeparator(),
         this.buildResumeSection({
           label: this.translocoService.translate(

diff --git a/src/assets/fonts/NotoEmoji-Regular.ttf b/src/assets/fonts/NotoEmoji-Regular.ttf
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -77,6 +77,7 @@
   "editor.resetTextColor": "Reset Text Color",
   "editor.resetBackgroundColor": "Reset Background Color",
   "labels.resume.download": "Download CV",
+  "labels.resume.location": "Valencia, Spain",
   "about.sections.intro.lines": [
     "I'm a software engineer with a passion for creating seamless user experiences. I have been working in the tech industry building enterprise web applications since 2017. Turning ideas into robust digital experiences that are both visually appealing and highly functional brings deep satisfaction to me and are the reason I love what I do.",
     "With a solid foundation in Angular, .NET Core, and the Azure cloud platform, my experience spans the development of the entire application lifecycle. Good software design principles, clean code, and a strong focus on user experience are the pillars of my work and are what I strive to deliver in every project I undertake.",

diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
@@ -77,6 +77,7 @@
   "editor.resetTextColor": "Restablecer Color de Texto",
   "editor.resetBackgroundColor": "Restablecer Color de Fondo",
   "labels.resume.download": "Descargar CV",
+  "labels.resume.location": "Valencia, España",
   "about.sections.intro.lines": [
     "Soy un ingeniero de software con una pasión para crear experiencias fluidas. Estoy trabajando en la industria tecnológica construyendo aplicaciones web empresariales desde 2017. Convertir ideas en experiencias digitales robustas que sean también atractivas y altamente funcionales me brinda una profunda satisfacción y son la razón por la que amo lo que hago.",
     "Con una sólida base en Angular, .NET Core y la plataforma Azure, mi experiencia abarca el desarrollo de todo el ciclo de vida de la aplicación. Buenos principios de diseño de software, el código limpio y un fuerte enfoque en la experiencia del usuario son los pilares de mi trabajo y son lo que me esfuerzo por ofrecer en cada proyecto que emprendo.",