Skip to content

Commit

Permalink
Tweak colors and tighten up wording of blurbs
Browse files Browse the repository at this point in the history
  • Loading branch information
rosslh committed Sep 19, 2024
1 parent 816a599 commit a42fdb0
Show file tree
Hide file tree
Showing 14 changed files with 44 additions and 20 deletions.
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
20.15.1
18.14.0
3 changes: 1 addition & 2 deletions content/IsEarthStillWarming.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion content/QVFT.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion content/doctalk.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion content/metaProjection.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion content/nudge1.md
Original file line number Diff line number Diff line change
Expand Up @@ -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]
---
2 changes: 1 addition & 1 deletion content/nudge2.md
Original file line number Diff line number Diff line change
Expand Up @@ -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]
---
3 changes: 2 additions & 1 deletion content/qhacks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion content/verafin.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
---
2 changes: 1 addition & 1 deletion content/webofdevs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
---
7 changes: 7 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"svelte.config.js",
"vite.config.ts",
"src/**/*",
Expand All @@ -112,6 +113,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"data/posts.json",
"scripts/getIcons.ts"
],
Expand All @@ -125,6 +127,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"content/**/*"
],
"output": [
Expand All @@ -136,6 +139,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"assets/**/*.{png,jpg,jpeg}",
"scripts/getWebp.ts"
],
Expand All @@ -148,6 +152,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"scripts/updateNvmrc.ts"
],
"output": [
Expand All @@ -165,6 +170,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"**/*.{css,scss,svelte}",
".stylelintrc.json"
],
Expand All @@ -175,6 +181,7 @@
"files": [
"tsconfig.json",
"package.json",
".nvmrc",
"src/**/*.{js,ts,svelte}",
"scripts/**/*.{js,ts,svelte}",
"svelte.config.js",
Expand Down
16 changes: 14 additions & 2 deletions scripts/getIcons.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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 {
Expand Down
18 changes: 11 additions & 7 deletions src/lib/styles/design-system.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%)};
Expand Down Expand Up @@ -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%)};
Expand Down Expand Up @@ -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:
Expand All @@ -180,6 +180,10 @@ $other-hue: 12;
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";

a {
text-decoration: underline;
}
}

.app-wrapper {
Expand Down
1 change: 1 addition & 0 deletions src/lib/styles/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ h4,
h5 {
color: var(--color-heading);
font-weight: 600 !important;
letter-spacing: 0.006rem;
}

h1 {
Expand Down

0 comments on commit a42fdb0

Please sign in to comment.