aqandrew/aqandrew.com

👨🏽‍💻 My personal website 3.0, built with Astro

👋🏽 I'm Andrew, a frontend developer in Southern California. My specialties are CSS/animation, modern JavaScript (React, Svelte), and interactive visual experiences (data visualization with D3, three.js).

• 👨🏽‍💻 I'm currently working on svelte-onion and a few React projects:
  • baybayin
  • crayola-oklch
  • kulintang
  • FretZone
• 🌱 I'm currently learning:
  • three.js
  • how to play octavina
• 💬 Ask me about prog metal, jazz, or The Food Lab
• 📫 How to reach me: Twitter or email
• ⚡ Fun fact: Two of my CodePens have been picked for CodePen's front page.
  1. React music visualizer
  2. ginger beer cat infinite zoom

aqandrew.com's Issues

Markdown code without a specified language lacks symmetrical y-margins

https://github.com/dawneraq/aqandrew.com/blob/master/utils/transforms/contentParser.js#L112

^codeClass is only added if a pre's class starts with language

Open Graph cover image gets cropped to center square when shared to Twitter

https://cards-dev.twitter.com/validator

slugify doesn't get rid of apostrophe in Markdown heading IDs

https://aqandrew.com/blog/introducing-fretzone/#what's-fretzone
https://aqandrew.com/blog/0.30000000000000004/#what's-going-on-here

serve project images from CDN

aqandrew.com/src/content/projects/square.mdx

Line 13 in 2416eaf

{/* TODO host images in a CDN like CloudFlare */}

optimize images

I heard eleventy-img is good

floating point blog post URL is hella long

https://aqandrew.com/blog/0.30000000000000004/ is a hard URL to share.

A better approach:

1. Rename the post to /blog/304/
2. Add a _redirects file that redirects the old URL to the new short one

Or maybe keep the URL the same, and have /blog/304 redirect to it? 🤔

refactor CSS to use cascade layers

Adam Argyle stated in a video that cascade layers are a helpful CSS feature for declaring the order in which styles will be overwritten.

These sequential imports can then be condensed into a single line of CSS:

aqandrew.com/src/layouts/BaseLayout.astro

Lines 5 to 7 in 6ae39f2

	import '../assets/css/variables.css';
	import '../assets/css/global.css';
	import '../assets/css/utils.css';

hero animation throws errors on navigation

1. when clicking to a subpage from the homepage, the setInterval for changing hero text colors still runs:

   (index):46 Uncaught TypeError: Cannot read properties of null (reading 'style')
   at (index):46:16
   at Array.forEach (<anonymous>)
   at setGradientColorCustomProperties ((index):45:16)
   at activateMagicGradient ((index):63:5)
   

2. when clicking back to the homepage from a subpage, registerProperty tries to re-register color properties:

   VM337:26 Uncaught DOMException: Failed to execute 'registerProperty' on 'CSS': The name provided has already been registered.
   at <anonymous>:26:9
   at Array.forEach (<anonymous>)
   

compress/optimize Square images

50 sec to load 110 MB of images/video is a lot 😬

they definitely don't need to be 2x, which is what macOS screenshot tool defaults to