From 4b3720cb634c5bb09fe6edff244f65787f0e9ca1 Mon Sep 17 00:00:00 2001 From: beefchimi Date: Fri, 26 Jul 2024 11:36:21 -0400 Subject: [PATCH 1/4] :recycle: [OpenGraph] Add some additional twitter tags --- src/layouts/Page.astro | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index d30b4bf..75c6b09 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -84,6 +84,8 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href; + + From cc8bfc3f677f524c8b065faa80cefe19504b9488 Mon Sep 17 00:00:00 2001 From: beefchimi Date: Fri, 26 Jul 2024 11:45:07 -0400 Subject: [PATCH 2/4] :bug: [Cursors] Bring back preloading --- src/components/ContentBlock.astro | 6 ++++++ src/sections/Intro.astro | 7 ++++--- src/styles/global.css | 25 +++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/components/ContentBlock.astro b/src/components/ContentBlock.astro index 61aa29f..3871967 100644 --- a/src/components/ContentBlock.astro +++ b/src/components/ContentBlock.astro @@ -63,6 +63,12 @@ const inactive = !title || !subtitle; /* Just a small nudge for better vertical centering */ padding-top: calc(var(--space-tightest) + 0.1rem); + /* Consider improveing the legibility of text */ + /* + background-color: rgb(255, 255, 255, 0.04); + backdrop-filter: blur(2px); + */ + & > h3 { font-weight: 800; } diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro index 8d4c265..1fd0a4e 100644 --- a/src/sections/Intro.astro +++ b/src/sections/Intro.astro @@ -24,11 +24,12 @@ const {id, thumbnail} = Astro.props; Background image photographed by: Curtis Dulmage

- diff --git a/src/styles/global.css b/src/styles/global.css index c988c20..cc38de9 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -305,3 +305,28 @@ button { cursor: url('../assets/svg/cursors/CursorPointerClicked.svg'), pointer; } } + +.preload-cursors { + /* + Required to preload the variant cursor. Otherwise, there will be + a delay upon click when switching to the different cursor asset. + */ + + > b { + cursor: url('../assets/svg/cursors/CursorDeadClicked.svg'), auto; + } + + > u { + cursor: url('../assets/svg/cursors/CursorHornsClicked.svg'), pointer; + } + + > i { + cursor: url('../assets/svg/cursors/CursorPointerClicked.svg'), pointer; + } + + /* + > strong { + cursor: url('../assets/svg/cursors/CursorGrabClicked.svg'), pointer; + } + */ +} From cd8fa6261b03445d207e3964046a30de67c27e34 Mon Sep 17 00:00:00 2001 From: beefchimi Date: Fri, 26 Jul 2024 12:44:23 -0400 Subject: [PATCH 3/4] :dizzy: [Page] Improve page loading --- src/layouts/Page.astro | 44 ++++++++++++++++++++++++++++++---------- src/pages/404.astro | 12 ++++++++--- src/pages/index.astro | 4 +++- src/scripts/PageLoad.ts | 40 ++++++++++++++++++++++++++++++++++++ src/sections/Intro.astro | 8 +++++--- src/styles/global.css | 39 ++++++++++------------------------- 6 files changed, 101 insertions(+), 46 deletions(-) create mode 100644 src/scripts/PageLoad.ts diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 75c6b09..77e59b9 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -27,7 +27,7 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href; --- - + diff --git a/src/pages/404.astro b/src/pages/404.astro index ad74bec..7756be6 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -47,17 +47,23 @@ import Stars from '@components/Stars.astro'; } } - .ErrorContent { + :global(#Main404) { --color-portfolio: hsl(var(--color-rainbow) 100% 50%); + animation: rainbowSpin 4s linear infinite both; + } - position: relative; + .ErrorContent { display: grid; justify-content: center; gap: var(--space-tight); padding: var(--space); text-align: center; max-width: 90rem; - animation: rainbowSpin 4s linear infinite both; + + /* Page load (fade-in) */ + position: relative; + z-index: var(--index-thermosphere); + animation: fadeIn var(--speed-slower) var(--speed-slow) var(--ease) both; } .ErrorContent h4 a { diff --git a/src/pages/index.astro b/src/pages/index.astro index 42b0d92..b23de78 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,6 +4,7 @@ import Page from '@layouts/Page.astro'; import {NAV_ID, NAV_TOGGLE_ID, OVERLAY_ID} from '@data/app'; import {sections} from '@data/sections'; +import Contact from '@components/Contact.astro'; import Hamburger from '@components/Hamburger.astro'; import Navigation from '@components/Navigation.astro'; import Project from '@components/Project.astro'; @@ -14,8 +15,9 @@ import ProjectOverlay from '@sections/ProjectOverlay.astro'; const [intro, ...portfolioSections] = sections; --- - + + diff --git a/src/scripts/PageLoad.ts b/src/scripts/PageLoad.ts new file mode 100644 index 0000000..86cc8fa --- /dev/null +++ b/src/scripts/PageLoad.ts @@ -0,0 +1,40 @@ +export type HtmlReady = 'loading' | 'done' | 'error'; + +export class PageLoad { + static MOTION_DELAY = 1200; + + static documentState() { + return document.readyState; + } + + static isHome() { + const {pathname} = window.location; + return pathname === '' || pathname === '/'; + } + + static isLoaded() { + return document.documentElement.dataset.ready === 'done'; + } + + static schedule() { + if (PageLoad.documentState() === 'complete') { + PageLoad.#updateDocument(); + return; + } + + document.addEventListener('readystatechange', PageLoad.#handleReadyState); + } + + static #handleReadyState() { + window.scrollTo(0, 0); + window.setTimeout(PageLoad.#updateDocument, PageLoad.MOTION_DELAY); + } + + static #updateDocument() { + document.documentElement.dataset.ready = 'done'; + document.removeEventListener( + 'readystatechange', + PageLoad.#handleReadyState, + ); + } +} diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro index 1fd0a4e..57d2b9f 100644 --- a/src/sections/Intro.astro +++ b/src/sections/Intro.astro @@ -1,6 +1,5 @@ --- import {type SectionEntry} from '@data/types'; -import Contact from '@components/Contact.astro'; interface Props { id: SectionEntry['id']; @@ -32,8 +31,6 @@ const {id, thumbnail} = Astro.props; Please get in touch if you have any questions. Thank you.

- - @@ -53,6 +50,11 @@ const {id, thumbnail} = Astro.props; @media (--min-tablet) { gap: var(--space); } + + /* Page load (fade-in) */ + position: relative; + z-index: var(--index-thermosphere); + animation: fadeIn var(--speed-slower) var(--speed-slow) var(--ease) both; } .Details { diff --git a/src/styles/global.css b/src/styles/global.css index cc38de9..5c757c7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -87,34 +87,6 @@ body { cursor: url('../assets/svg/cursors/CursorAuto.svg'), auto; } -/* --- Page load --- */ -/* TODO: Consider something better with `document.readystate`. */ - -@keyframes pageLoad { - from { - opacity: 1; - visibility: visible; - } - to { - opacity: 0; - visibility: hidden; - } -} - -body { - position: relative; - - &::after { - content: ''; - z-index: var(--index-mesosphere); - position: fixed; - inset: 0; - pointer-events: none; - background-color: black; - animation: pageLoad var(--speed-slow) var(--speed) var(--ease) forwards; - } -} - /* --- Smooth scroll + snapping --- */ /* Disabled because it breaks "dynamic chrome" behaviour on iOS */ @@ -330,3 +302,14 @@ button { } */ } + +/* --- Global animations --- */ + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} From e238be4cf949df835eee3ba99ba36573a50319e2 Mon Sep 17 00:00:00 2001 From: beefchimi Date: Fri, 26 Jul 2024 13:09:07 -0400 Subject: [PATCH 4/4] :hammer_and_wrench: [PWA] Revise config --- astro.config.mjs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index b04f6fe..5135dc1 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -34,9 +34,11 @@ export default defineConfig({ AstroPWA({ workbox: { // Not sure how this differs from `includeAssets`... - // globPatterns: ['**/*.{js,css,html,ico,png,svg}'], + globPatterns: ['**/*.{css,js,html,woff2}', 'assets/*.{png,webp}'], // Not sure if we actually want to specify this fallback. - navigateFallback: '/404', + navigateFallback: '/', + // The `chicken` image is 2.2MB, so we increase the limit to 3MB. + maximumFileSizeToCacheInBytes: 3000000, }, // Specify which public assets (in addition to the default html/css/js)