@grid: 20x20 / 100vmax; pointer-events: auto; border: .5px solid rgba(0, 0, 0, .06); :after { content: ''; position: absolute; inset: 0; background-color: rgba(100, 149, 237, .3); opacity: 0; transition: opacity 1.5s ease-out; animation: @p( none, none, none, none, none, none, none, none, fade @r(2.25s, 6s) ease-in-out @r(-6s, 0s) infinite ); } :hover { :after { background-color: rgba(100, 149, 237, .5); opacity: 1; transition: opacity .05s linear; } } @keyframes fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @grid: 50x50 / 100vmax; pointer-events: auto; border: .5px solid rgba(0, 0, 0, .06); :after { content: ''; position: absolute; inset: 0; background-color: rgba(100, 149, 237, .3); opacity: 0; transition: opacity 1.5s ease-out; animation: @p( none, none, none, none, none, none, none, none, fade @r(2.25s, 6s) ease-in-out @r(-6s, 0s) infinite ); } :hover { :after { background-color: rgba(100, 149, 237, .5); opacity: 1; transition: opacity .05s linear; } } @keyframes fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

Hi, I'm Henry!

I'm an award-winning frontend developer in Philadelphia.

I develop user-focused, empathy-driven websites and interactive experiences. Here is some of the work I've done on the web and elsewhere.