diff --git a/package-lock.json b/package-lock.json index c347b3e..8aa249f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "UNLICENSED", "dependencies": { "@astrojs/check": "^0.8.2", + "@fontsource-variable/outfit": "^5.0.13", "astro": "^4.12.2", "astro-icon": "^1.1.0", "beeftools": "^0.1.6", @@ -2699,6 +2700,12 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource-variable/outfit": { + "version": "5.0.13", + "resolved": "https://registry.npmjs.org/@fontsource-variable/outfit/-/outfit-5.0.13.tgz", + "integrity": "sha512-y5yl8YcLqoQghwLfPaM420PKxG0DMKmobryGptXmv7Q5CX8F1vg8h714qEptXdtyoS9rHIMwLl/hJYLzZgSE4w==", + "license": "OFL-1.1" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -6081,9 +6088,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.0.tgz", - "integrity": "sha512-Vb3xHHYnLseK8vlMJQKJYXJ++t4u1/qJ3vykuVrVjvdiOEhYyT1AuP4x03G8EnPmYvYOhe9T+dADTmthjRQMkA==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.1.tgz", + "integrity": "sha512-FKbOCOQ5QRB3VlIbl1LZQefWIYwszlBloaXcY2rbfpu9ioJnNh3TK03YtIDKDo3WKBi8u+YV4+Fn2CkEozgf4w==", "license": "ISC" }, "node_modules/emmet": { @@ -10866,9 +10873,9 @@ } }, "node_modules/postcss": { - "version": "8.4.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", - "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", + "version": "8.4.40", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", + "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", "funding": [ { "type": "opencollective", @@ -12597,6 +12604,48 @@ "dev": true, "license": "MIT" }, + "node_modules/tinyglobby": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.0.tgz", + "integrity": "sha512-+clyYQfAnNlt5a1x7CCQ6RLuTIztDfDAl6mAANvqRUlz6sVy5znCzJOhais8G6oyUyoeeaorLopO3HptVP8niA==", + "dev": true, + "license": "ISC", + "dependencies": { + "fdir": "^6.2.0", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.2.0.tgz", + "integrity": "sha512-9XaWcDl0riOX5j2kYfy0kKdg7skw3IY6kA4LFT8Tk2yF9UdrADUy8D6AJuBLtf7ISm/MksumwAHE3WVbMRyCLw==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/to-data-view": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/to-data-view/-/to-data-view-1.1.0.tgz", @@ -13192,9 +13241,9 @@ } }, "node_modules/vite": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz", - "integrity": "sha512-Cw+7zL3ZG9/NZBB8C+8QbQZmR54GwqIz+WMI4b3JgdYJvX+ny9AjJXqkGQlDXSXRP9rP0B4tbciRMOVEKulVOA==", + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz", + "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==", "license": "MIT", "dependencies": { "esbuild": "^0.21.3", @@ -13247,15 +13296,15 @@ } }, "node_modules/vite-plugin-pwa": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.20.0.tgz", - "integrity": "sha512-/kDZyqF8KqoXRpMUQtR5Atri/7BWayW8Gp7Kz/4bfstsV6zSFTxjREbXZYL7zSuRL40HGA+o2hvUAFRmC+bL7g==", + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.20.1.tgz", + "integrity": "sha512-M6Pk4b18i5ryrhKgiIF8Zud0HGphYiCbEfLsCdlvmwn/CEnS6noVwfIDG/+3V7r6yxpPV/gLiKw+rIlCCiCCoQ==", "dev": true, "license": "MIT", "dependencies": { "debug": "^4.3.4", - "fast-glob": "^3.3.2", "pretty-bytes": "^6.1.1", + "tinyglobby": "^0.2.0", "workbox-build": "^7.1.0", "workbox-window": "^7.1.0" }, diff --git a/package.json b/package.json index 910935f..baad5e6 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ }, "dependencies": { "@astrojs/check": "^0.8.2", + "@fontsource-variable/outfit": "^5.0.13", "astro": "^4.12.2", "astro-icon": "^1.1.0", "beeftools": "^0.1.6", diff --git a/public/assets/bg-earwurm.webp b/public/assets/bg-earwurm.webp index 7c0aa9e..b48b96a 100644 Binary files a/public/assets/bg-earwurm.webp and b/public/assets/bg-earwurm.webp differ diff --git a/public/assets/dulmage-social.png b/public/dulmage-social.png similarity index 100% rename from public/assets/dulmage-social.png rename to public/dulmage-social.png diff --git a/src/assets/img/README.md b/src/assets/img/README.md new file mode 100644 index 0000000..2aac4c2 --- /dev/null +++ b/src/assets/img/README.md @@ -0,0 +1,3 @@ +# Images + +Place any images here that we want optimized by Astro. Otherwise, put pre-optimized images in the `/public` folder. diff --git a/src/assets/img/cursor-auto.png b/src/assets/img/cursor-auto.png deleted file mode 100644 index c95fac3..0000000 Binary files a/src/assets/img/cursor-auto.png and /dev/null differ diff --git a/src/assets/img/cursor-dead.png b/src/assets/img/cursor-dead.png deleted file mode 100644 index f5338e7..0000000 Binary files a/src/assets/img/cursor-dead.png and /dev/null differ diff --git a/src/assets/img/cursor-pointer-clicked.png b/src/assets/img/cursor-pointer-clicked.png deleted file mode 100644 index c99ebc1..0000000 Binary files a/src/assets/img/cursor-pointer-clicked.png and /dev/null differ diff --git a/src/assets/img/cursor-pointer.png b/src/assets/img/cursor-pointer.png deleted file mode 100644 index 8a8f1f3..0000000 Binary files a/src/assets/img/cursor-pointer.png and /dev/null differ diff --git a/src/assets/img/cursor-rock-clicked.png b/src/assets/img/cursor-rock-clicked.png deleted file mode 100644 index 288d921..0000000 Binary files a/src/assets/img/cursor-rock-clicked.png and /dev/null differ diff --git a/src/assets/img/cursor-rock.png b/src/assets/img/cursor-rock.png deleted file mode 100644 index 372ddca..0000000 Binary files a/src/assets/img/cursor-rock.png and /dev/null differ diff --git a/src/assets/img/cursor-text.png b/src/assets/img/cursor-text.png deleted file mode 100644 index 89f3fd0..0000000 Binary files a/src/assets/img/cursor-text.png and /dev/null differ diff --git a/src/assets/svg/cursors/CursorAuto.svg b/src/assets/svg/cursors/CursorAuto.svg new file mode 100644 index 0000000..27124bc --- /dev/null +++ b/src/assets/svg/cursors/CursorAuto.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/assets/svg/cursors/CursorDead.svg b/src/assets/svg/cursors/CursorDead.svg new file mode 100644 index 0000000..a32d7fb --- /dev/null +++ b/src/assets/svg/cursors/CursorDead.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/src/assets/svg/cursors/CursorDeadClicked.svg b/src/assets/svg/cursors/CursorDeadClicked.svg new file mode 100644 index 0000000..7c8bfb4 --- /dev/null +++ b/src/assets/svg/cursors/CursorDeadClicked.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/src/assets/svg/cursors/CursorHorns.svg b/src/assets/svg/cursors/CursorHorns.svg new file mode 100644 index 0000000..13bb4e1 --- /dev/null +++ b/src/assets/svg/cursors/CursorHorns.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/assets/svg/cursors/CursorHornsClicked.svg b/src/assets/svg/cursors/CursorHornsClicked.svg new file mode 100644 index 0000000..21c51df --- /dev/null +++ b/src/assets/svg/cursors/CursorHornsClicked.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/assets/svg/cursors/CursorPointer.svg b/src/assets/svg/cursors/CursorPointer.svg new file mode 100644 index 0000000..4dbfb53 --- /dev/null +++ b/src/assets/svg/cursors/CursorPointer.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/assets/svg/cursors/CursorPointerClicked.svg b/src/assets/svg/cursors/CursorPointerClicked.svg new file mode 100644 index 0000000..0d2bfb7 --- /dev/null +++ b/src/assets/svg/cursors/CursorPointerClicked.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/assets/svg/cursors/CursorText.svg b/src/assets/svg/cursors/CursorText.svg new file mode 100644 index 0000000..4b16968 --- /dev/null +++ b/src/assets/svg/cursors/CursorText.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Contact.astro b/src/components/Contact.astro index 0572ffe..96ee20f 100644 --- a/src/components/Contact.astro +++ b/src/components/Contact.astro @@ -128,7 +128,7 @@ import {SecretEmail} from '@scripts/SecretEmail'; display: block; padding-left: 1rem; font-size: var(--h4-size); - font-weight: 600; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; white-space: nowrap; diff --git a/src/components/ContentBlock.astro b/src/components/ContentBlock.astro index 31c09ec..61aa29f 100644 --- a/src/components/ContentBlock.astro +++ b/src/components/ContentBlock.astro @@ -63,6 +63,10 @@ const inactive = !title || !subtitle; /* Just a small nudge for better vertical centering */ padding-top: calc(var(--space-tightest) + 0.1rem); + & > h3 { + font-weight: 800; + } + @media (--min-tablet) { padding: var(--space-tighter); } diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro index 372237c..9a717e5 100644 --- a/src/components/Hamburger.astro +++ b/src/components/Hamburger.astro @@ -26,11 +26,10 @@ const {id, controlsId} = Astro.props; @import '@styles/shared.css'; :root { + /* `height` and `padding` variables come from `globla.css` */ --hamburger-width-min: 2.4rem; --hamburger-width-max: 3rem; - --hamburger-height: 2rem; --hamburger-line-height: 0.3rem; - --hamburger-padding: var(--space-tightest); /* Computed value: `height - line-height` */ --hamburger-patty3-y: 1.7rem; diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index db3fa4f..75670df 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -38,12 +38,6 @@ const {id, items = []} = Astro.props; @import '@styles/shared.css'; :root { - /* TODO: Figure out how to share `Hamburger` variables. */ - --hamburger-height: 2rem; - --hamburger-padding: var(--space-tightest); - - /* Component */ - --nav-offset-safety: 0.2rem; --nav-item-shift-x: 0.3rem; @@ -162,11 +156,11 @@ const {id, items = []} = Astro.props; padding-bottom: var(--nav-label-padding-y); padding-left: var(--nav-label-padding-left); font-size: var(--p-size); - font-weight: 700; + font-weight: 600; text-transform: uppercase; letter-spacing: 0.2rem; white-space: nowrap; - /* Required for the `rock` cursor to work. */ + /* Required for the `horns` cursor to work. */ pointer-events: none; } @@ -188,7 +182,7 @@ const {id, items = []} = Astro.props; html[data-current-index='12'] .Item:nth-child(13) .Link, html[data-current-index='13'] .Item:nth-child(14) .Link, html[data-current-index='14'] .Item:nth-child(15) .Link { - cursor: url('../assets/img/cursor-rock.png'), not-allowed; + cursor: url('../assets/svg/cursors/CursorHorns.svg'), not-allowed; color: var(--color-primary); translate: calc(var(--nav-item-shift-x) * -1) 0; } @@ -208,7 +202,7 @@ const {id, items = []} = Astro.props; html[data-current-index='12'] .Item:nth-child(13) .Link:active, html[data-current-index='13'] .Item:nth-child(14) .Link:active, html[data-current-index='14'] .Item:nth-child(15) .Link:active { - cursor: url('../assets/img/cursor-rock-clicked.png'), not-allowed; + cursor: url('../assets/svg/cursors/CursorHornsClicked.svg'), not-allowed; } html[data-current-index='0'] .Item:nth-child(1) .Link::before, diff --git a/src/components/ProjectLogo.astro b/src/components/ProjectLogo.astro index 98ba486..6742f60 100644 --- a/src/components/ProjectLogo.astro +++ b/src/components/ProjectLogo.astro @@ -49,6 +49,10 @@ const iconProps = { :root { --project-logo-size: 18rem; + @media (--max-phone-height) { + --project-logo-size: 16rem; + } + @media (--min-tablet) { --project-logo-size: 24rem; } @@ -64,7 +68,11 @@ const iconProps = { } div.ProjectLogo { - cursor: url('../assets/img/cursor-dead.png'), not-allowed; + cursor: url('../assets/svg/cursors/CursorDead.svg'), not-allowed; + + &:active { + cursor: url('../assets/svg/cursors/CursorDeadClicked.svg'), not-allowed; + } } .ProjectLogo > [data-icon] { @@ -76,67 +84,55 @@ const iconProps = { /* Unique logo sizes per section id */ - :global(#Chicken) { + :global(#Chicken), + :global(#PreservationSociety) { --project-logo-size: 14rem; + @media (--max-phone-height) { + --project-logo-size: 12rem; + } + @media (--min-tablet) { --project-logo-size: 20rem; } } + :global(#Earwurm), :global(#CommerceAwards), :global(#Polaris) { --project-logo-size: 12rem; - @media (--min-tablet) { - --project-logo-size: 18rem; + @media (--max-phone-height) { + --project-logo-size: 10rem; } - } - - :global(#Draggable) { - --project-logo-size: 16rem; - - @media (--min-tablet) { - --project-logo-size: 22rem; - } - } - - :global(#Earwurm) { - --project-logo-size: 12rem; @media (--min-tablet) { --project-logo-size: 18rem; } } - :global(#Fringe) { - --project-logo-size: 20rem; - - @media (--min-tablet) { - --project-logo-size: 26rem; - } - } - + :global(#Draggable), :global(#NA2012), :global(#NorthernArmy) { --project-logo-size: 16rem; - @media (--min-tablet) { - --project-logo-size: 22rem; + @media (--max-phone-height) { + --project-logo-size: 14rem; } - } - - :global(#PreservationSociety) { - --project-logo-size: 14rem; @media (--min-tablet) { - --project-logo-size: 20rem; + --project-logo-size: 22rem; } } + :global(#Fringe), :global(#Tetchi) { --project-logo-size: 20rem; + @media (--max-phone-height) { + --project-logo-size: 18rem; + } + @media (--min-tablet) { --project-logo-size: 26rem; } diff --git a/src/components/Stars.astro b/src/components/Stars.astro index 1d63f3b..b28e436 100644 --- a/src/components/Stars.astro +++ b/src/components/Stars.astro @@ -46,7 +46,6 @@ const {default: patternStarsHtml} = await import( .Stars { position: fixed; inset: 0; - overflow: hidden; pointer-events: none; background: linear-gradient( 48deg, diff --git a/src/data/sections.ts b/src/data/sections.ts index fe7c4d6..4ae086a 100644 --- a/src/data/sections.ts +++ b/src/data/sections.ts @@ -73,7 +73,7 @@ const earwurm: ProjectEntry = { name: 'Earwurm', description: 'Easier web audio for UI sound effects', thumbnail: '/assets/bg-earwurm.webp', - channels: [207, 1, 93], + channels: [231, 131, 93], logo: 'LogoEarwurm', url: 'https://beefchimi.github.io/earwurm/', attribution: 'Curtis Dulmage', @@ -202,13 +202,13 @@ export const sections: [intro: SectionEntry, ...projects: ProjectEntry[]] = [ preserve, fringe, yat, - northernArmy, + earwurm, northNavy, + northernArmy, sandwich, - commerceAwards, - na2012, - draggable, - chicken, tetchi, - earwurm, + chicken, + draggable, + na2012, + commerceAwards, ]; diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index b92e69a..d30b4bf 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -1,6 +1,10 @@ --- import {pwaInfo} from 'virtual:pwa-info'; +// FontSource packages cannot be imported within CSS. +// Supports weights `100-900`. +import '@fontsource-variable/outfit'; + import '@styles/reset.css'; import '@styles/global.css'; import '@styles/utility.css'; @@ -19,7 +23,7 @@ const {id, title = 'Curtis Dulmage | UX Developer'} = Astro.props; const DESCRIPTION = 'UX development portfolio for Curtis Dulmage'; const PERMALINK = new URL(Astro.url.pathname, Astro.site).href; -const OG_IMAGE = new URL('/assets/dulmage-social.png', Astro.site).href; +const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href; --- diff --git a/src/pages/404.astro b/src/pages/404.astro index 8eb5b4b..ad74bec 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -56,7 +56,7 @@ import Stars from '@components/Stars.astro'; gap: var(--space-tight); padding: var(--space); text-align: center; - max-width: 80rem; + max-width: 90rem; animation: rainbowSpin 4s linear infinite both; } diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro index b0cd776..8d4c265 100644 --- a/src/sections/Intro.astro +++ b/src/sections/Intro.astro @@ -14,13 +14,17 @@ const {id, thumbnail} = Astro.props;

Dulmage

-

UX Developer

+ +
+

UX Developer

+

Ottawa, ON

+
-