Use column layout and update CI tooling

Every single time I looked at my CV I got uncomfortable knowing that
part of the "most relevant" data was beyond the fold, or even worse, on
the second page when printed.

Although I'm not fan of columns, I think this is the best use for them,
since recruiters and hiring managers tend to qualify/discard most
resumes at simple glance (sadly).

As a public disclosure, I'm not a designer by any means so any feedback
on the visual part is appreciated :)

Signed-off-by: Jonnatan Jossemar Cordero <jossemargt@gmail.com>

.github/workflows/default.yml

@@ -14,7 +14,7 @@ jobs:
           cmds: |
             project init
             project update
-            do print
+            do pdf
       - uses: actions/upload-artifact@v3
         with:
           name: resume-artifacts

dagger.cue

@@ -19,12 +19,12 @@ dagger.#Plan & {
 					"*.pdf",
 				]
 			}
-			"./dist/site": write: contents: actions.generate.generatePage.export.directories."docs"
-			"./dist/pdf": write: contents: actions.print.printPDF.export.directories."dist"
+			"./dist/site": write: contents: actions.site.generatePage.export.directories."docs"
+			"./dist/pdf": write: contents: actions.pdf.printPDF.export.directories."dist"
 		}
 	}
 	actions: {
-		generate: {
+		site: {
 			// Pull build context
 			pandoc: docker.#Pull & {
 				source: "portown/alpine-pandoc"
@@ -73,7 +73,7 @@ dagger.#Plan & {
 			}
 
 		}
-		print: {
+		pdf: {
 			// Pull build context
 			printer: docker.#Pull & {
 				source: "madnight/docker-alpine-wkhtmltopdf"
@@ -82,7 +82,7 @@ dagger.#Plan & {
 			// Prepare environment
 			_addPage: docker.#Copy & {
 				input:    printer.output
-				contents: generate.generatePage.export.directories."docs"
+				contents: site.generatePage.export.directories."docs"
 				dest: "/data"
 			}
 

docs/resume.template

@@ -46,7 +46,7 @@ $endif$
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
       })();
     </script>
-
+    <base target="_blank">
 $for(header-includes)$
     $header-includes$
 $endfor$

docs/stylesheets/styles.css

@@ -19,6 +19,10 @@ h1,h2 {
   padding-bottom: 5px;
 }
 
+h2 + .level3 {
+  margin: 0;
+}
+
 p, li {
   font-size:  1.125rem;
   line-height: 1.7;
@@ -40,7 +44,7 @@ a:hover {
 
 table {
   width:100%;
-  margin: 15px 0 0;
+  margin: 15px 0;
 }
 
 thead { display: none; }
@@ -95,6 +99,78 @@ strong + em::before {
   text-align: justify;
 }
 
+section#work-experience {
+  float: left;
+  width: 84%;
+  margin-top: 10px;
+}
+
+section#skills {
+  float: right;
+  width: 13%;
+  margin-top: 10px;
+}
+
+section#education {
+  clear: both;
+  padding-top: 10px;
+  margin-top: 0;
+}
+
+section#work-experience h2, section#skills h2 {
+  margin-top: 0;
+}
+
+section#skills h2, section#skills ul {
+  text-align: center;
+}
+
+section#skills ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+section#skills li {
+  display: inline;
+  padding: 0;
+  font-size: 1rem;
+}
+
+section#skills li::after {
+  content: ', ';
+}
+
+section#skills li:last-child::after {
+  content: '';
+}
+
+@media not print {
+  @media (max-width: 820px) {
+    section#work-experience {
+      float: none;
+      width: 100%;
+    }
+
+    section#skills {
+      float: none;
+      width: 100%;
+    }
+
+    section#skills h2 {
+      text-align: left;
+    }
+
+    section#skills ul {
+      text-align: justify;
+    }
+
+    section#skills li {
+      font-size:  1.125rem;
+    }
+  }
+}
+
 @media print {
   body {
     padding: 0;
@@ -129,6 +205,18 @@ strong + em::before {
 
   #main-header { margin: 0 0 5pt; }
 
+  section#work-experience {
+    width: 85%;
+  }
+
+  section#skills li {
+    font-size: 10pt;
+  }
+
+  section#education {
+    padding-top: 0;
+  }
+
   .level1 h1 + p { display: none; }
 
   .title, .tag-line { display: block; }
@@ -140,6 +228,7 @@ strong + em::before {
   .level3 {
     break-inside: avoid;
     page-break-inside: avoid;
+    margin: 0;
   }
 
   h2 ~ .level3 h3 {