CSS vars fix, theme switcher label

Fixed

• theme switcher aria label
• CSS variables value set in :root instead of html selector

Logo refinements and theme switcher

Changed

• dark/light theme now changes with a toggle button and perists on localstorage
• homepage logo: thinner, no blur, heavier box shadow

Final touches

Fixed

• better nav spinner out transition
• prevented browser's native scroll restoration, as it conflicts with next router and page transitions

Changed

• videos now autoplay inline while being muted
• narrow media are now displayed on desktop side-by-side

Adding custom font, and a spinner

Changed

• more explicit page loading spinner in the Nav component
• use Trillium Web font instead of system fonts

Grid and minor tweaks

Changed

• tweaked grid config (slower waves, smaller dots, larger grid gaps, centered programmatic waves...)
• removed loading spinner, replaced with animated nav link underline
• nav menu keeps the mobile menu on desktop too
• use rAF when loading full res in lazy image
• updated browserlist

Fixed

• base64 thumb qualitty back to 10 (below 10 itt loses color info)
• project page's text size is same as about page
• netlify headers file uses placeholders instead of all the explicit routes

Webhint.io feedback — HTTP headers and meta viewport

Fixed

• moved shared tailwind config to separate file, avoids pulling all of tailwind deps (including full lodash) into the clientside bundle
• Content-Security-Policy and X-XSS-Protection HTTP headers applied only to HTML pages
• Correct Content-Type for .js and .webmanifest files
• Correct <meta name="vieport" /> tag

Slimming Contentful data, lazy-load images

Added

• contentful data download script:
  • singleton option
  • slim down API objects by removing all sys and fields
  • download all images base64 thumb and attach to API data
• media components:
  • lazy image
  • video
  • sizes presets

Changed

• project media structure: now split between wide and narrow pictures
• using lazy image in project tiles
• single project hero markup/background color, sections spacing

Fixed

• Force page to be scrolled to top inbetween page transitions.

Interactive grid, project page header

Added

• home page logo enter animation (per letter)
• home page logo neon effect
• home page lazy-loading interactive grid
• top right corner spinner while transitioning between pages
• individual project page header

Changed

• nav links compute selected property automously inside the Nav component
• project tiles background color

Project page and polishing polishing polishing

Added

• "selected" nav links
• staggered enter animations on about page
• project page: meta, title and description

Changed

• /post/[id] => /projects/[id]
• styles: created custom tailwind utilities, replacing custom css code
• ux: avoiding hover styles (improved touch screen experience)
• new home logo (shorter, stronger type hierarchy)
• nav links styles ('|_' replaced with dot)

Fixed

• prevented the home page from bouncing

About page

Added

• About page: using contentful data for meta
• Profile illustration
• Bio (rich text) rendering and styles