Profile pic refresh

Upgrade dependencies
Styling tweaks

package.json

@@ -24,8 +24,8 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@iconify/json": "^2.2.102",
-    "@playwright/test": "^1.37.0",
+    "@iconify/json": "^2.2.103",
+    "@playwright/test": "^1.37.1",
     "@sveltejs/adapter-netlify": "^2.0.8",
     "@sveltejs/kit": "1.22.6",
     "@types/apca-w3": "^0.1.0",
@@ -48,7 +48,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-svelte": "^2.32.4",
     "eslint-plugin-unicorn": "^48.0.1",
@@ -60,16 +60,15 @@
     "lodash-es": "^4.17.21",
     "logrocket": "^5.0.1",
     "markdown-json": "^1.6.1",
-    "npm-check-updates": "^16.11.1",
+    "npm-check-updates": "^16.12.2",
     "postcss-html": "^1.5.0",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "prettier-plugin-svelte": "^3.0.3",
-    "sass": "^1.65.1",
-    "simple-icons": "^9.10.0",
+    "sass": "^1.66.1",
+    "simple-icons": "^9.11.0",
     "slugify": "^1.6.6",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^10.0.0",
-    "sugarss": "^4.0.1",
     "svelte": "4.2.0",
     "svelte-check": "^3.5.0",
     "svelte-meta-tags": "^2.8.0",

src/lib/components/sidebar/Sidebar.svelte

@@ -50,10 +50,10 @@
         {:else}
           <picture>
             <source srcset="/headshot.webp" type="image/webp" />
-            <source srcset="/headshot.png" type="image/png" />
+            <source srcset="/headshot.jpg" type="image/jpeg" />
             <img
               data-testid="headshot-image"
-              src="/headshot.png"
+              src="/headshot.jpg"
               alt="Ross Hill"
               width={remsToPixels(10)}
               height={remsToPixels(10)}
@@ -84,7 +84,7 @@
       <AnimatedName />
     </div>
     <p class="subtitle role do-transition" data-testid="job-title">
-      Software Developer
+      Software Engineer
     </p>
     <p class="subtitle email">
       <a href="mailto:[email protected]" data-testid="email-address"

src/lib/styles/design-system.scss

@@ -60,7 +60,7 @@ $other-hue: 135;
 }
 
 @mixin dark-theme() {
-  $theme-saturation: 25%;
+  $theme-saturation: 35%;
   $category-saturation: 75%;
   $category-lightness: 65%;
 
@@ -102,7 +102,7 @@ $other-hue: 135;
 
 @mixin cyberpunk-theme() {
   $yellow: hsluv(75, 82%, 85%);
-  $pink-hue: 320;
+  $pink-hue: 310;
   $blue-hue: 270;
 
   $job-hue: 40;
@@ -132,21 +132,19 @@ $other-hue: 135;
   --color-foreground: #{hsluv($blue-hue, $foreground-saturation, 80%)};
   --color-link: #{$yellow};
   --color-subtitle: #{hsluv($blue-hue, $foreground-saturation, 70%)};
-  --color-focus-outline: #{hsluv($pink-hue, $border-saturation, 35%)};
+  --color-focus-outline: #{hsluv($pink-hue, $border-saturation, 37%)};
   --color-timeline: #{hsluv($blue-hue, $background-saturation, 28%)};
-  --color-border: #{hsluv($pink-hue, $border-saturation, 35%)};
+  --color-border: #{hsluv($pink-hue, $border-saturation, 37%)};
   --color-panel-background: #{hsluv($blue-hue, $background-saturation, 6%)};
-  --color-background: #{hsluv($blue-hue, $background-saturation, 3.5%)};
+  --color-background: #{hsluv($blue-hue, $background-saturation, 3%)};
 
   font-family: "IBM Plex Mono", monospace;
 }
 
-// If prefers-color-scheme unsupported, default to light theme
 .app-wrapper {
   @include light-theme();
 }
 
-// Unless manually overridden, use system preferred theme
 @media (prefers-color-scheme: light) {
   div.app-wrapper {
     @include light-theme();
@@ -158,7 +156,6 @@ $other-hue: 135;
   }
 }
 
-// If manually set, use that theme
 div.app-wrapper[data-theme="light"] {
   @include light-theme();
 }

src/lib/styles/normalize.css

@@ -31,8 +31,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  font-family: "IBM Plex Mono", monospace;
   font-size: 1em;
 }
 small {

src/routes/+page.svelte

@@ -11,7 +11,7 @@
   import CopyrightNotice from "$lib/components/CopyrightNotice.svelte";
 
   const intro =
-    "I am a software developer and I'm always on the lookout for cool new technologies. I like to spend my time reading, working on side projects, and exploring the great city of Toronto.";
+    "I develop software and I'm always on the lookout for cool new technologies. I like to spend my time reading, working on side projects, and exploring the great city of Toronto.";
 
   const meta = {
     title: "Ross Hill: Website and Portfolio",

tests/specs/sidebar.spec.ts

@@ -48,7 +48,7 @@ test("Sidebar information is displayed", async ({ page }) => {
   await expectCount(headshotImage, 1);
 
   const jobTitle = getLocator([sidebar, "job-title"]);
-  await expectTextContent(jobTitle, "Software Developer");
+  await expectTextContent(jobTitle, "Software Engineer");
 
   const emailAddress = getLocator([sidebar, "email-address"]);
   await expectTextContent(emailAddress, "[email protected]");