CV as Code (#13)

* init post Signed-off-by: razzle <harry@razzle.cloud> * content Signed-off-by: razzle <harry@razzle.cloud> * content Signed-off-by: razzle <harry@razzle.cloud> * iframe Signed-off-by: razzle <harry@razzle.cloud> * ready to release Signed-off-by: razzle <harry@razzle.cloud> --------- Signed-off-by: razzle <harry@razzle.cloud>
Noxsios · Jan 8, 2024 · d17ff5b · d17ff5b
1 parent e63a826
commit d17ff5b
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 deletions.
diff --git a/content/2024-01-07.md b/content/2024-01-07.md
@@ -0,0 +1,78 @@
++++
+title = "CV as Code"
+description = "My single-page, clean and simple developer CV written with Typst, tailwindcss colors and published to GitHub Pages."
+slug = "cv-as-code"
+date = 2024-01-07
+draft = false
+
+[taxonomies]
+tags = ["cv","typst"]
+
+[extra]
+meta = [
+    {property = "og:image", content = "https://og.razzle.cloud/og?title=CV%20as%20Code"},
+]
++++
+
+> **TL;DR** My single-page, clean and simple developer [CV](https://noxsios.github.io/cv/) written with [typst](https://typst.app/), [tailwindcss colors](https://github.com/kaarmu/typst-palettes/blob/main/doc/main.pdf) and published to GitHub Pages.
+
+<!-- more -->
+
+## Why Not `X`?
+
+Most CVs are written in Microsoft Word or Google Docs. Once initial formatting is done, they only require minimal
+adjustments and additions. So why go through the hassle of creating a build system for a CV?
+
+- **Version Control** - I can track changes to my CV over time and revert to previous versions if needed (I could also setup AI generated mutations based on the CV+job description+some extra metadata from my career).
+- **Automation** - I can update my CV in a PR, perform automated checks, then merge to main and it will be automatically published to an easily accessible URL (no need to manually keep track).
+- **Separation of Concerns** - I can separate the content of my CV from the formatting. A large detriment to using Word/Docs is that the content and formatting are tightly coupled. If I want to change the formatting, I have to manually update every usage of that formatting. Using Typst, I can change the formatting in one place and it will be applied to every usage.
+- **Ownership** - One of the glorious benefits of Git is that I own my data, and each `git clone` is a full copy of the CV that can be brought over to any other system.
+
+## Putting it all together
+
+For generating the PDF, I chose to use [Typst](https://typst.app/).
+
+> Typst is a new markup-based typesetting system for the sciences. It is designed to be an alternative both to advanced tools like LaTeX and simpler tools like Word and Google Docs. Our goal with Typst is to build a typesetting tool that is highly capable and a pleasure to use. [docs](https://typst.app/docs)
+
+I liked Typst's pseudo markdown syntax, its simple yet extremely powerful scripting language, and the fact I could hot reload the PDF as I was editing the CV (`typst watch`).
+
+Combined with the VS Code extensions for Typst and PDF preview, I was able to get a very nice editing experience (+ CoPilot suggestions).
+
+![ide](/ss/2024-01-07-2.png)
+
+The CV's format was heavily inspired by the recently trending <https://github.com/BartoszJarocki/cv> repo.
+
+To replicate the colors used in that CV website, I used the `splash` Typst package <https://github.com/typst/packages/tree/main/packages/preview/splash/0.3.0> because one of the color palettes it exports is a `tailwindcss` port.
+
+My go-to font recently has been the PT Sans family <https://fonts.google.com/specimen/PT+Sans>, so I went with that as I find it very readable on both screens and printed.
+
+> In CI, I opted to use `brew`'s <https://github.com/Homebrew/homebrew-cask-fonts> to install the fonts.
+
+To publish the PDF to a website, I grabbed the [GitHub Pages static workflow template](https://github.com/actions/starter-workflows/blob/main/pages/static.yml) and made a few tweaks.
+
+![pages workflow](/ss/2024-01-07-1.png)
+
+To "hack" GitHub pages to serve the CV PDF at the root of the URL, I made a simple `index.html` file that loads the PDF in an `iframe`.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Harry Randazzo's CV</title>
+</head>
+
+<body>
+    <iframe src="./harry-randazzo-cv.pdf" width="100%" height="100%" style="position:absolute;left:0;top:0;">
+    </iframe>
+</body>
+
+</html>
+```
+
+Checkout the full source code here: <https://github.com/Noxsios/cv>, and checkout the live CV here: <https://noxsios.github.io/cv/>.
+
+<iframe src="https://noxsios.github.io/cv/harry-randazzo-cv.pdf" width="100%" height="1000px">
+</iframe>
diff --git a/static/ss/2024-01-07-1.png b/static/ss/2024-01-07-1.png
diff --git a/static/ss/2024-01-07-2.png b/static/ss/2024-01-07-2.png