Tweak colors and tighten up wording of blurbs

content/IsEarthStillWarming.md

@@ -7,9 +7,8 @@ repository: https://github.com/rosslh/IsEarthStillWarming.com
 image: isearthstillwarming
 thumbnail: fire
 thumbnailBorder: true
-excerpt: A website with up-to-date global warming information and data. It provides a high-level overview of what global warming is – how it's caused, how much the Earth has warmed, and its observed and predicted effects.
+excerpt: A website offering up-to-date global warming data and a high-level overview of its causes and effects.
 tags: [react, nodedotjs]
-# , cypress
 ---
 
 The goal of this webpage is to provide a high-level overview of what global warming is: how it's caused, how much the Earth has warmed, and its observed and predicted effects. Made with <a target="_blank" rel="noopener noreferrer" href="https://github.com/nozzle/react-static">React Static</a>, a static-site generator for React, IsEarthStillWarming.com fetches up-to-date climate data from NASA and NOAA servers and displays the data as charts to provide a visualization of how global warming is progressing.

content/QVFT.md

@@ -5,7 +5,7 @@ eventTypeLabel: Organization
 date: 2019-11-10
 endDate: 2020-04-20
 thumbnail: qvft
-excerpt: In charge of running weekly meetings, setting goals, and providing technical assistance to team members. The Systems Automation team is building an software system for adjusting environment variables, such as temperature or light intensity, in order to maximize crop yield.
+excerpt: Led weekly meetings, set goals, and supported the team in developing a system to manage a vertical farm, optimizing for crop yield.
 tags: [svelte, flask, arduino]
 repository: https://github.com/QVFT
 website: https://www.qvft.ca

content/doctalk.md

@@ -3,7 +3,7 @@ title: Full-Stack Developer – Doctalk
 date: 2020-11-23
 endDate: 2022-09-16
 thumbnail: doctalk-thumb
-excerpt: Developed an application for medical residents to collaborate on study notes using a rich text editor with tracked changes. Created a custom email generator with drag-and-drop functionality, auto-save, and drafts.
+excerpt: Built products that improved collaboration and communication for doctors, medical residents, and pharmaceutical companies.
 tags: [react, redux, django, postgresql]
 # heroku
 eventType: work

content/metaProjection.md

@@ -8,7 +8,7 @@ image: metaprojection
 thumbnail: metaprojection-thumb
 thumbnailBorder: true
 excerpt: An aggregator of Canadian federal electoral projections. It provides an overview of how the election is playing out, both federally and by district.
-tags: [gatsby, graphql, nodedotjs]
+tags: [typescript, gatsby, graphql, nodedotjs]
 ---
 
 MetaProjection is a website that aggregates multiple Canadian federal electoral projections in order to provide an overview of how the election is playing out, both federally and by district. A map is displayed at the top of the page which indicates how each electoral district is likely to vote. The application uses the user’s geolocation to find their district and display its likely winner.

content/nudge1.md

@@ -5,6 +5,6 @@ date: 2017-05-01
 endDate: 2017-08-20
 image: Nudge1
 thumbnail: nudge-thumb
-excerpt: Created a modern interface for Nudge employees to carry out administrative tasks. Interacting with a RESTful API, this interface allows an administrator to create, delete, or modify accounts, and to directly access and modify person and company data used by the sales platform.
+excerpt: Built a modern admin interface for managing accounts and modifying sales data, interacting with a RESTful API.
 tags: [react, redux]
 ---

content/nudge2.md

@@ -5,6 +5,6 @@ date: 2018-05-01
 endDate: 2018-08-20
 image: Nudge2
 thumbnail: nudge-thumb
-excerpt: Implemented a system for receiving, verifying, and handling GDPR requests. Added the capability for users to suggest changes to the information shown in our public pages with an intuitive interface.
+excerpt: Implemented a system to manage GDPR requests and enabled users to suggest changes to public page information through an intuitive interface.
 tags: [react, redux, dotnet, postgresql]
 ---

content/qhacks.md

@@ -6,8 +6,9 @@ date: 2018-04-21
 endDate: 2019-03-20
 image: qhacks
 thumbnail: qhacks-crown
-excerpt: Built the landing page for the hackathon and a web portal which over 1800 students used to apply. The websites were built with React and used GraphQL to retrieve data for the user interface.
+excerpt: Developed the hackathon landing page and a web portal used by over 1,800 students to apply.
 tags: [gatsby, graphql, postgresql]
+thumbnailBorder: true
 ---
 
 QHacks is a hackathon hosted at Queen’s University where software developers come together to collaborate on projects and win prizes. As part of the Technology team on the QHacks 2018/2019 Executive, my role was to help build a new website for the event that contains information on sponsors, the event schedule, and how to apply.

content/verafin.md

@@ -5,7 +5,7 @@ date: 2019-05-01
 endDate: 2019-08-20
 thumbnail: verafin-thumb
 image: verafin
-excerpt: Added features and made bug fixes to the core user interface. Created a software plugin that identifies high risk customers across hundreds of institutions based on transaction and biographical characteristics.
+excerpt: Enhanced the core user interface and developed a plugin to identify high-risk customers across institutions using transaction and biographical data.
 tags: [java, postgresql, backbonedotjs]
 website: https://verafin.com
 ---

content/webofdevs.md

@@ -5,7 +5,7 @@ date: 2023-03-05
 website: https://webofdevs.com
 thumbnail: webofdevs-thumb
 thumbnailBorder: true
-excerpt: Web of Devs is a community of developers with amazing webpages. You can browse personal sites, save your favorites, and share your own.
+excerpt: A community of developers with amazing webpages. You can browse personal sites, save your favorites, and share your own.
 tags: [typescript, svelte, nestjs, postgresql]
 # vercel, heroku
 ---

package.json

@@ -95,6 +95,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "svelte.config.js",
         "vite.config.ts",
         "src/**/*",
@@ -112,6 +113,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "data/posts.json",
         "scripts/getIcons.ts"
       ],
@@ -125,6 +127,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "content/**/*"
       ],
       "output": [
@@ -136,6 +139,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "assets/**/*.{png,jpg,jpeg}",
         "scripts/getWebp.ts"
       ],
@@ -148,6 +152,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "scripts/updateNvmrc.ts"
       ],
       "output": [
@@ -165,6 +170,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "**/*.{css,scss,svelte}",
         ".stylelintrc.json"
       ],
@@ -175,6 +181,7 @@
       "files": [
         "tsconfig.json",
         "package.json",
+        ".nvmrc",
         "src/**/*.{js,ts,svelte}",
         "scripts/**/*.{js,ts,svelte}",
         "svelte.config.js",

scripts/getIcons.ts

@@ -1,7 +1,7 @@
 import chroma from "chroma-js";
 import { APCAcontrast, sRGBtoY } from "apca-w3";
 import fs from "node:fs";
-import { hsluvToHex } from "hsluv-ts";
+import { hsluvToHex, hexToHsluv } from "hsluv-ts";
 import { keyBy, merge, escapeRegExp } from "lodash-es";
 
 import * as SimpleIcons from "simple-icons";
@@ -107,7 +107,19 @@ function getBestContrastForeground(
 }
 
 function getColorsForTag(icon: Icon, light: string, dark: string): TagColor {
-  const background = icon.hex;
+  const hsluv = hexToHsluv(`#${icon.hex}`);
+
+  const adjustedSaturation = Math.min(hsluv[1], 80);
+  const adjustedHsluv = [hsluv[0], adjustedSaturation, hsluv[2]] as const;
+
+  const background = hsluvToHex([
+    adjustedHsluv[0],
+    adjustedHsluv[1],
+    adjustedHsluv[2],
+  ])
+    .replace(/^#/, "")
+    .toUpperCase();
+
   const foreground = getBestContrastForeground(background, light, dark);
 
   return {

src/lib/styles/design-system.scss

@@ -35,10 +35,10 @@ $other-hue: 12;
       $marker-lightness
     )};
 
-  --color-heading: #{hsluv($theme-hue, $theme-saturation, 20%)};
-  --color-foreground: #{hsluv($theme-hue, $theme-saturation, 30%)};
+  --color-heading: #{hsluv($theme-hue, $theme-saturation, 22%)};
+  --color-foreground: #{hsluv($theme-hue, $theme-saturation, 38%)};
   --color-link: #{hsluv($theme-hue, 90%, 40%)};
-  --color-subtitle: #{hsluv($theme-hue, $theme-saturation, 38%)};
+  --color-subtitle: #{hsluv($theme-hue, $theme-saturation, 44%)};
   --color-focus-outline: #{hsluv($theme-hue, $theme-saturation, 60%)};
   --color-timeline: #{hsluv($theme-hue, $theme-saturation, 65%)};
   --color-border: #{hsluv($theme-hue, $theme-saturation, 90%)};
@@ -77,9 +77,9 @@ $other-hue: 12;
   --color-other-marker: var(--color-other);
 
   --color-heading: #{hsluv($theme-hue, $theme-saturation, 95%)};
-  --color-foreground: #{hsluv($theme-hue, $theme-saturation, 87%)};
+  --color-foreground: #{hsluv($theme-hue, $theme-saturation, 82%)};
   --color-link: #{hsluv($theme-hue, 90%, 77%)};
-  --color-subtitle: #{hsluv($theme-hue, $theme-saturation, 75%)};
+  --color-subtitle: #{hsluv($theme-hue, $theme-saturation, 70%)};
   --color-focus-outline: #{hsluv($theme-hue, $theme-saturation, 35%)};
   --color-timeline: #{hsluv($theme-hue, $theme-saturation, 35%)};
   --color-border: #{hsluv($theme-hue, $theme-saturation, 21%)};
@@ -164,8 +164,8 @@ $other-hue: 12;
   --color-subtitle: #{hsluv($theme-hue, $theme-saturation, 67%)};
   --color-focus-outline: #{hsluv($theme-hue, $theme-saturation, 35%)};
   --color-timeline: #{hsluv($theme-hue, $theme-saturation, 21%)};
-  --color-border: #{hsluv($theme-hue, $theme-saturation, 21%)};
-  --color-panel-background: #{hsluv($theme-hue, $theme-saturation, 0%)};
+  --color-border: #{hsluv($theme-hue, $theme-saturation, 10%)};
+  --color-panel-background: #{hsluv($theme-hue, $theme-saturation, 3%)};
   --color-background: #{hsluv($theme-hue, $theme-saturation, 0%)};
 
   font-family:
@@ -180,6 +180,10 @@ $other-hue: 12;
     "Apple Color Emoji",
     "Segoe UI Emoji",
     "Segoe UI Symbol";
+
+  a {
+    text-decoration: underline;
+  }
 }
 
 .app-wrapper {

src/lib/styles/global.scss

@@ -114,6 +114,7 @@ h4,
 h5 {
   color: var(--color-heading);
   font-weight: 600 !important;
+  letter-spacing: 0.006rem;
 }
 
 h1 {