fix: resume skill item grid alignment (#121)

.github/workflows/tests.yml

@@ -1,9 +1,9 @@
 name: Tests
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   tests:
@@ -37,29 +37,31 @@ jobs:
         with:
           crate: just
 
-      - name: Install tytanic from github
+      - name: Install tytanic
-        uses: baptiste0928/cargo-install@v3
+        uses: taiki-e/cache-cargo-install-action@v2
         with:
-          crate: tytanic
+          tool: tytanic@0.2.2
 
       - name: Setup typst
         uses: typst-community/setup-typst@v3
         with:
           typst-version: ${{ matrix.typst-version }}
-    
+
       - name: Install fonts
         run: |
-            sudo apt update
+          sudo apt update
-            sudo apt-get install fonts-roboto
+          sudo apt-get install fonts-roboto
-            ./scripts/install-fontawesome
+          ./scripts/install-fontawesome
-            ./scripts/install-source-sans
+          ./scripts/install-source-sans
-            typst fonts
+          typst fonts
 
-      - name: Install locally
+      - name: Uninstall previous local install
-        run: just install
+        run: just uninstall
 
       - name: Run test suite
-        run: just test
+        run: |
+          just install
+          tt run --font-path ~/.fonts --no-fail-fast
 
       - name: Archive diffs
         uses: actions/upload-artifact@v4
@@ -75,7 +77,7 @@ jobs:
       - name: Build docs
         if: ${{ matrix.doc }}
         run: just doc
-     
+
       - name: Upload docs
         uses: actions/upload-artifact@v4
         with:

lib.typ

@@ -477,6 +477,25 @@
   justified-header(certification, date)
 }
 
+/// Styling for resume skill categories.
+/// - category (string): The category
+#let resume-skill-category(category) = {
+  align(left)[
+    #set text(hyphenate: false)
+    == #category
+  ]
+}
+
+/// Styling for resume skill values/items
+/// - values (array): The skills to display
+#let resume-skill-values(values) = {
+  align(left)[
+    #set text(size: 11pt, style: "normal", weight: "light")
+    // This is a list so join by comma (,)
+    #values.join(", ")
+  ]
+}
+
 /// Show a list of skills in the resume under a given category.
 /// - category (string): The category of the skills
 /// - items (list): The list of skills. This can be a list of strings but you can also emphasize certain skills by using the `strong` function.
@@ -486,16 +505,30 @@
 
   pad[
     #grid(
-      columns: (20fr, 80fr),
+      columns: (3fr, 8fr),
       gutter: 10pt,
-      align(right)[
+      resume-skill-category(category), resume-skill-values(items),
-        #set text(hyphenate: false)
+    )
-        == #category
+  ]
-      ],
+}
-      align(left)[
+
-        #set text(size: 11pt, style: "normal", weight: "light")
+/// Show a grid of skill lists with each row corresponding to a category of skills, followed by the skills themselves. The dictionary given to this function should have the skill categories as the dictionary keys and the values should be an array of values for the corresponding key.
-        #items.join(", ")
+/// - categories_with_values (dictionary): key value pairs of skill categories and it's corresponding values (skills)
-      ],
+#let resume-skill-grid(categories_with_values: (:)) = {
+  set block(below: 1.25em)
+  set pad(top: 2pt)
+
+  pad[
+    #grid(
+      columns: (auto, auto),
+      gutter: 10pt,
+      ..categories_with_values
+        .pairs()
+        .map(((key, value)) => (
+          resume-skill-category(key),
+          resume-skill-values(value),
+        ))
+        .flatten()
     )
   ]
 }
@@ -700,7 +733,7 @@
           stroke: 0pt,
           radius: 2cm,
           width: 4cm,
-          height: 4cm,
+          height: auto,
           profile-picture,
         )
       ],

scripts/install-source-sans

@@ -8,4 +8,14 @@ mkdir -p ~/.fonts
 find ~/source-sans-fonts -type f -name "*.otf" -exec cp {} ~/.fonts \;
 rm ~/source-sans.zip
 rm -rf ~/source-sans-fonts
+
+wget -O ~/source-sans-pro.zip https://github.com/adobe-fonts/source-sans-pro/archive/2.020R-ro/1.075R-it.zip
+mkdir -p ~/source-sans-pro-fonts
+unzip ~/source-sans-pro.zip -d ~/source-sans-pro-fonts
+mkdir -p ~/.fonts
+find ~/source-sans-pro-fonts -type f -name "*.otf" -exec cp {} ~/.fonts \;
+# clean up
+rm ~/source-sans-pro.zip
+rm -rf ~/source-sans-pro-fonts
+
 fc-cache -f -v

template/resume.typ

@@ -20,7 +20,7 @@
       "Developer",
     ),
   ),
-  profile-picture: none,
+  profile-picture: image("profile.png"),
   date: datetime.today().display(),
   language: "en",
   colored-headers: true,
@@ -94,10 +94,11 @@
 = Skills
 
 #resume-skill-item(
-  "Languages",
+  "Programming Languages",
   (
     strong("C++"),
     strong("Python"),
+    "Rust",
     "Java",
     "C#",
     "JavaScript",
@@ -114,6 +115,41 @@
     "Visual Studio",
   ),
 )
+// spacing fix, not needed if you use `resume-skill-grid`
+#block(below: 0.65em)
+
+// An alternative way of list out your resume skills
+// #resume-skill-grid(
+//   categories_with_values: (
+//     "Programming Languages": (
+//       strong("C++"),
+//       strong("Python"),
+//       "Rust",
+//       "Java",
+//       "C#",
+//       "JavaScript",
+//       "TypeScript",
+//     ),
+//     "Spoken Languages": (
+//       strong("English"),
+//       "Spanish",
+//       "Greek",
+//     ),
+//     "Programs": (
+//       strong("Excel"),
+//       "Word",
+//       "Powerpoint",
+//       "Visual Studio", 
+//       "git",
+//       "Zed"
+//     ),
+//     "Really Really Long Long Long Category": (
+//       "Thing 1",
+//       "Thing 2",
+//       "Thing 3"
+//     )
+//   ),
+// )
 
 = Education