My new website design

    Reading time
    1 minute read

    I went to a photo studio recently so I could update my Eleventy website banner. Here’s what I’ve been working on for several hours now.

    That image swapping as the window resizes happens via the <picture> element so the browser only loads the specific image when the user actually needs it, instead of loading both and hiding the other on certain breakpoints. No JS needed for this too!

    My website as viewed on a medium-width viewport on portrait orientation.
    I eventually added a different photo for tablet-ish sizes just to add some variety because I just saw this shot out of the 319 photos I ended up taking from the shoot yesterday. I think it looks quite lovely.

    I got comments from my Mastodonian friends and apparently they like it:

    Send a shoutout!

    Did you post a response to this in your own website? Send me a webmention!

    Don't have a website? Send a response via commentpara.de ! Copy and paste the URL of this webpage, and paste it on there along with your response. Comments can be anonymous, too!

    You on the Fediverse yet?

    If you have a Fediverse account, you can also send me a shoutout by commenting on this post:

    The reason I went to a photo studio is so I could update my @eleventy website banner. Here's what I've been working on for several hours now.

    That image swapping as the window resizes happens via the <picture> element so the browser only loads the specific image when the user actually needs it, instead of loading both and hiding the other on certain breakpoints. No JS needed for this too!

    🔗: francisrub.io

    Francis Rubio francisrub.io returns june 20, 2025 A web designer, developer, and educator from the Philippines

    Comments from the Fediverse

    teacherbuknoy Francis Rubio

    I added a different photo for tablet-ish sizes just to add some variety because I just saw this shot out of the 319 photos I ended up taking from the shoot yesterday. I think it looks quite lovely ablobcatattentionreverse

    My website at tablet-widths. It now shows a shot of my torso wearing a hoodie with the word "future" embroidered on the chest in different colors.
    teacherbuknoy Francis Rubio

    Sorry, I had to delete and redraft several times because the screen capture didn't look right 😅

    kagan@wandering.shop Kagan MacTane (he/him)

    @teacherbuknoy Everything about this is so good. Not just the various, awesome, responsive designs, and the fact that it's no-JS, but also the photo choices, all the way to the desktop background and the song. Truly 💯✨. Love it all!