Keyboard shortcuts

T
Switch light / dark theme
P
Jump to projects
E
Jump to experience
C
Jump to contact
N
Open notes
H
Back to the top
?
Show these shortcuts
All notes
· 3 min read

Drawing project illustrations in code

I replaced generated images with small SVG illustrations that use the site's colour tokens and act out each project on hover.

  • SVG
  • Design

My project cards used to have AI-generated concept images. They were big, noisy, and didn't say anything about what the projects actually do. I replaced them with small diagrams drawn in SVG.

Why SVG in code

  • They follow the theme. Every fill comes from CSS classes that read the same colour tokens as the rest of the site, so they switch with light and dark mode.
  • They stay sharp at any size and weigh almost nothing compared with large PNGs.
  • They show the idea of each project: a role-based task board, a Spark pipeline, a donation workflow, a résumé being matched to jobs.

Making them move

The resting drawing is the default. On hover, CSS keyframes act out the project: a task card travels across the board and gets ticked off, Spark workers light up in turn, donation steps tick off in order, match bars fill from best to weakest. On each project's own page the animation loops, so people on phones see it too.

.work-item-card:hover .ill-a-move {
  animation: ill-move 4.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

Everything is gated behind prefers-reduced-motion, and the drawings are marked decorative, so screen readers skip them and get the project text instead.