claude is an audio engineer fr

added a theme wiping animation on my portfolio with the view transitions api 👀

In CSS, there are cases where you want to dynamically style an element based on its index relative to its siblings. For instance, in this demo, we want to dynamically set each element’s 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍-𝚌𝚘𝚕𝚘𝚛 and 𝚣-𝚒𝚗𝚍𝚎𝚡 properties. Usually, you would retrieve an element’s index value through array mapping in JavaScript by destructuring it. But what if I told you there’s a way to retrieve each element’s index value with 0 JavaScript? There are two CSS functions I want to talk about in particular: 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() and 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚌𝚘𝚞𝚗𝚝(), which were recently marked baseline across all major browsers. 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() gives you the position of the current element relative to its siblings. For example, the first element would be 1, the next would be 2, and so on. 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚌𝚘𝚞𝚗𝚝() gives you the total number of sibling elements (direct children of the parent). Using these functions, you can style elements as follows (relevant styles from the video): .𝚜𝚒𝚋𝚕𝚒𝚗𝚐 { --𝚑𝚞𝚎: 𝚌𝚊𝚕𝚌(𝟸𝟶𝟶 + 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() * 𝟹𝟶); 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍-𝚌𝚘𝚕𝚘𝚛: 𝚑𝚜𝚕(𝚟𝚊𝚛(--𝚑𝚞𝚎, 𝟺𝟻𝚍𝚎𝚐) 𝟻𝟻% 𝟻𝟻%); 𝚣-𝚒𝚗𝚍𝚎𝚡: 𝚌𝚊𝚕𝚌(𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚌𝚘𝚞𝚗𝚝() - 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡()); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: 𝚖𝚊𝚛𝚐𝚒𝚗-𝚒𝚗𝚕𝚒𝚗𝚎-𝚜𝚝𝚊𝚛𝚝 𝟸𝟶𝟶𝚖𝚜 𝚎𝚊𝚜𝚎-𝚒𝚗-𝚘𝚞𝚝; } .𝚙𝚊𝚛𝚎𝚗𝚝-𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛:𝚑𝚘𝚟𝚎𝚛 .𝚜𝚒𝚋𝚕𝚒𝚗𝚐 { 𝚖𝚊𝚛𝚐𝚒𝚗-𝚒𝚗𝚕𝚒𝚗𝚎-𝚜𝚝𝚊𝚛𝚝: -𝟶.𝟻𝚛𝚎𝚖; }

thanks for all the support! tracemark is currently at 12 users :) I plan on making QOL updates the following weeks, so stay tuned! tracemark.fun/

what the hell, rauno you always manage to teach me something new everyday 😭🙏

a lot of great design also happens to be intentional design. having relevant context/understanding of a specific product/topic is what fuels creativity -> leads to good design.

I added a new creative works section to my portfolio, showcasing some of the frontend work I’ve done in the past! it was also a good reminder of the importance of respecting user preferences, especially reduced motion by default, videos autoplay when they enter the viewport and loop without controls but for users who prefer reduced motion, videos won’t autoplay or loop, and controls are enabled so they can watch at their own pace

about a year and a half ago, I had the honor of shipping @magichourai's new landing page I've just written and posted a case study on it :) (link below: ↓)

my @IBM PR got merged 🥹 (granted it's a pretty simple one)

seeing this never fails to bring joy to my face

some more portfolio updates 👀 each preexisting craft item I had now have their own dedicated notes that you can take a look at these notes contain: - a high level explanation of how a given craft item works - any issues I encountered while making it - and how it was made (↓ link below)

hot take: PLEASE stop using margin to space items inside of a container, just use flexbox with gap

always nice to see an @infisical ad on the subway

hey man there isn't anything wrong with geist 😔

is writing vanilla css from scratch considered a flex in 2026?

reminder: just cause you don't understand something now, doesn't mean you won't ever understand it

really happy with how this vertical carousel turned out! here's how it works: every card is absolutely positioned, so they all start stacked in the center an interval increments an 𝚊𝚌𝚝𝚒𝚟𝚎𝙸𝚗𝚍𝚎𝚡 state, wrapped with modulo so it always stays within the array each card's offset is just its 𝚒𝚗𝚍𝚎𝚡 minus 𝚊𝚌𝚝𝚒𝚟𝚎𝙸𝚗𝚍𝚎𝚡. that one number drives its position, scale, tilt, and opacity a small correction wraps the offset, so cards leaving the top come back in at the bottom the wheel effect is a 𝚛𝚘𝚝𝚊𝚝𝚎𝚇 based on distance from the center, plus perspective. the spacing accounts for how much shorter each tilted card looks, so the gaps stay even

scratch to reveal 👀 it genuinely is amazing how you can create whatever your mind thinks of with the use of agents, so long as you communicate clearly since I've built a markup chrome extension in the past that involved html canvas (shameless plug: tracemark.fun/), I knew that we could replicate the "scratch"/"erasing" behavior with a 𝚐𝚕𝚘𝚋𝚊𝚕𝙲𝚘𝚖𝚙𝚘𝚜𝚒𝚝𝚎𝙾𝚙𝚎𝚛𝚊𝚝𝚒𝚘𝚗 of 𝚍𝚎𝚜𝚝𝚒𝚗𝚊𝚝𝚒𝚘𝚗-𝚘𝚞𝚝 from there, I asked my agent to calculate the ratio at which the promo code area is considered scratched enough to be revealed, and used that to reveal the copy button lastly, I asked my agent to generate a scratching sound, and thought that the first iteration was already really good so I ended up using it!