Merge pull request #54 from icd2k3/better-fonts

fix: Better fonts for web & print

Author: icd2k3

.github/actions/move-fonts/action.yml

@@ -0,0 +1,16 @@
+name: 'Move src/fonts to dist/fonts'
+description: 'Moves the fonts directory from src to dist'
+runs:
+  using: "composite"
+  steps:
+    - name: Create dist directory
+      run: |
+        mkdir -p dist || true
+        echo "Dist directory created successfully!"
+
+    - name: 'Move fonts directory'
+      shell: bash
+      run: |
+        mkdir -p dist/fonts || true
+        cp -R src/fonts dist
+        echo "Fonts moved successfully!"

.github/workflows/release.yml

@@ -18,6 +18,7 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v4
+      - uses: ./.github/actions/move-fonts/
       - uses: ./.github/actions/install-node/
       - uses: ./.github/actions/install-and-cache-node-modules/
       - uses: ./.github/actions/install-linux-dependencies/

src/fonts/OpenSauceOne-Bold.ttf

@@ -7,13 +7,26 @@
 		<link rel="icon" href="https://www.justin-schrader.com/favicon.ico?v=2" />
 		<title>Justin Schrader's Resume</title>
 		<style>
+			/* fonts */
+			@font-face {
+				font-family: 'Open Sauce Two Regular';
+				src: url('./fonts/OpenSauceOne-Regular.ttf') format('truetype');
+			}
+			@font-face {
+				font-family: 'Open Sauce Two Light';
+				src: url('./fonts/OpenSauceOne-Light.ttf') format('truetype');
+			}
+			@font-face {
+				font-family: 'Open Sauce Two Bold';
+				src: url('./fonts/OpenSauceOne-Bold.ttf') format('truetype');
+			}
 			/* global rules */
 			html {
 				background: #f1f1f1;
 			}
 			body {
-				font-family: Helvetica, Arial, sans-serif;
-				font-size: 14px;
+				font-family: 'Open Sauce Two Regular', Helvetica, Arial, sans-serif;
+				font-size: 0.8em;
 				margin: 0 auto;
 				width: auto;
 				max-width: 680px;
@@ -27,10 +40,12 @@
 			h2,
 			h3,
 			h4 {
+				font-family: 'Open Sauce Two Bold', Helvetica, Arial, sans-serif;
 				margin: 0;
 			}
 			h2 {
 				color: #616161;
+				font-family: 'Open Sauce Two Light', Helvetica, Arial, sans-serif;
 				font-size: 12px;
 				text-align: right;
 				text-transform: uppercase;
@@ -51,6 +66,9 @@
 			address {
 				font-style: normal;
 			}
+			strong {
+				font-family: 'Open Sauce Two Bold', Helvetica, Arial, sans-serif;
+			}
 			a {
 				color: #000;
 				text-decoration: none;
@@ -142,10 +160,9 @@
 				padding: 0 17px;
 			}
 
-			span.years {
-				color: #000;
+			strong.years {
 				padding-left: 4px;
-				font-weight: bold;
+				font-size: 0.85em;
 			}
 
 			/* techs */
@@ -172,6 +189,7 @@
 				align-items: center;
 			}
 			ul.stack li {
+				font-size: 0.8em;
 				display: inline-block;
 				padding: 0 5px;
 				background: #f1f1f1;
@@ -270,7 +288,7 @@
 				}
 				body {
 					padding-bottom: 0;
-					font-size: 12px;
+					font-size: 0.75em;
 					line-height: 18px;
 				}
 				body section {
@@ -284,7 +302,7 @@
 				}
 				dd.desc,
 				p {
-					color: #363636;
+					color: #424242;
 				}
 			}
 		</style>
@@ -357,7 +375,7 @@ <h4>Senior Software Engineer</h4>
 						</dd>
 						<dd>
 							<time datetime="2018-10-01">Oct. 2018</time> - Present
-							<span class="years">(6 years)</span>
+							<strong class="years">(6 years)</strong>
 						</dd>
 						<dd>
 							<ul class="stack">
@@ -373,10 +391,9 @@ <h4>Senior Software Engineer</h4>
 							</ul>
 						</dd>
 						<dd class="desc">
-							Helping users understand <strong>petabytes</strong> of system
-							transaction data through Distributed Tracing, enabling them to
-							resolve errors, improve latency, and monitor their complex
-							architectures.
+							Helping users understand petabytes of system transaction data
+							through Distributed Tracing, enabling them to resolve errors,
+							improve latency, and monitor their complex architectures.
 							<ul>
 								<li>
 									Collaborate with design, PMs, and fellow engineers to
@@ -415,7 +432,7 @@ <h4>Senior Frontend Engineer</h4>
 						<dd>
 							<time datetime="2016-11-01">Nov. 2016</time> -
 							<time datetime="2018-10-01">Oct. 2018</time>
-							<span class="years">(2 years)</span>
+							<strong class="years">(2 years)</strong>
 						</dd>
 						<dd>
 							<ul class="stack">
@@ -463,7 +480,7 @@ <h4>Lead Frontend Engineer</h4>
 						<dd>
 							<time datetime="2018-03-01">Mar. 2013</time> -
 							<time datetime="2015-10-01">Oct. 2016</time>
-							<span class="years">(3 years)</span>
+							<strong class="years">(3 years)</strong>
 						</dd>
 						<dd>
 							<ul class="stack">
@@ -506,7 +523,7 @@ <h4>Senior Interactive Developer</h4>
 						<dd>
 							<time datetime="2008-07-01">Jul. 2008</time> -
 							<time datetime="2018-03-01">Mar. 2013</time>
-							<span class="years">(5 years)</span>
+							<strong class="years">(5 years)</strong>
 						</dd>
 						<dd class="desc">
 							Designed, animated, and developed advertising solutions for
@@ -526,7 +543,7 @@ <h4>Engineering & design</h4>
 						<dd>
 							<time datetime="2006-06-01">Jun. 2006</time> -
 							<time datetime="2008-09-01">Sept. 2008</time>
-							<span class="years">(2 years)</span>
+							<strong class="years">(2 years)</strong>
 						</dd>
 						<dd class="desc">
 							2007 summer internship at <strong>Big Spaceship</strong> working