From d83cf4671e45d8487fe0398676c2975335e1f70e Mon Sep 17 00:00:00 2001 From: Ross Hill Date: Wed, 18 Sep 2024 22:52:53 -0400 Subject: [PATCH] Tweak colors and tighten up wording of blurbs --- .nvmrc | 2 +- content/IsEarthStillWarming.md | 3 +-- content/QVFT.md | 2 +- content/doctalk.md | 2 +- content/metaProjection.md | 2 +- content/nudge1.md | 2 +- content/nudge2.md | 2 +- content/qhacks.md | 3 ++- content/verafin.md | 2 +- content/webofdevs.md | 2 +- package.json | 7 +++++++ scripts/getIcons.ts | 18 +++++++++++++++--- src/lib/styles/design-system.scss | 18 +++++++++++------- src/lib/styles/global.scss | 1 + 14 files changed, 45 insertions(+), 21 deletions(-) diff --git a/.nvmrc b/.nvmrc index b8e593f5..741b4916 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20.15.1 +18.14.0 \ No newline at end of file diff --git a/content/IsEarthStillWarming.md b/content/IsEarthStillWarming.md index 8dc3a03f..430aa948 100644 --- a/content/IsEarthStillWarming.md +++ b/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 React Static, 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. diff --git a/content/QVFT.md b/content/QVFT.md index 8acc9570..8be0fcd1 100644 --- a/content/QVFT.md +++ b/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 diff --git a/content/doctalk.md b/content/doctalk.md index 53453686..1286eefe 100644 --- a/content/doctalk.md +++ b/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 diff --git a/content/metaProjection.md b/content/metaProjection.md index 63807206..1066c37c 100644 --- a/content/metaProjection.md +++ b/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. diff --git a/content/nudge1.md b/content/nudge1.md index c09a7344..be3055c3 100644 --- a/content/nudge1.md +++ b/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] --- diff --git a/content/nudge2.md b/content/nudge2.md index 7aae8235..3dfb052d 100644 --- a/content/nudge2.md +++ b/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] --- diff --git a/content/qhacks.md b/content/qhacks.md index b1f8a1b3..0c4ffd38 100644 --- a/content/qhacks.md +++ b/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. diff --git a/content/verafin.md b/content/verafin.md index 8a62a409..7d790015 100644 --- a/content/verafin.md +++ b/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 --- diff --git a/content/webofdevs.md b/content/webofdevs.md index c0e44aca..1646a84e 100644 --- a/content/webofdevs.md +++ b/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 --- diff --git a/package.json b/package.json index e13eb9e0..3112c03f 100644 --- a/package.json +++ b/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", diff --git a/scripts/getIcons.ts b/scripts/getIcons.ts index ad811565..d6480b26 100644 --- a/scripts/getIcons.ts +++ b/scripts/getIcons.ts @@ -1,8 +1,8 @@ import chroma from "chroma-js"; import { APCAcontrast, sRGBtoY } from "apca-w3"; import fs from "node:fs"; -import { hsluvToHex } from "hsluv-ts"; -import { keyBy, merge, escapeRegExp } from "lodash-es"; +import { hsluvToHex, hexToHsluv } from "hsluv-ts"; +import { keyBy, merge, escapeRegExp, isNil } from "lodash-es"; import * as SimpleIcons from "simple-icons"; import type { SimpleIcon } 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 { diff --git a/src/lib/styles/design-system.scss b/src/lib/styles/design-system.scss index d45bc805..836ea14b 100644 --- a/src/lib/styles/design-system.scss +++ b/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 { diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss index b5eaab56..3fedb663 100644 --- a/src/lib/styles/global.scss +++ b/src/lib/styles/global.scss @@ -114,6 +114,7 @@ h4, h5 { color: var(--color-heading); font-weight: 600 !important; + letter-spacing: 0.006rem; } h1 {