Renovating this website (2025)

Photography portfolio

If I look at my logbook, the first new design I come up with was a page to present a "photography sessions" (i.e. a bunch of shots grouped together). Not very interesting, but being able to add my photography portfolio was one of the reason of that whole website renovation. So I started by having a look at what I could do there.

One of the key constraint in designing that portfolio page was my usage of captions. I write a caption for all my photography which acts as an alt-text for visually impaired people. I could just have implemented it as only alt attributes on images but I spend so much time writing them that I don't see a reason to only make them visible to people with screen readers. Thus, I developed a system that allow me to arbitrarly place them in-between images.

Another issue with those captions is that because they act as alt-text, they become "metadata" of the image. But then where do I write it ? If I put it in the rst document this mean I couldn't use the image elsewhere with that caption. Embed the caption in the image metadata ? That's cumbersome because editing image metadata require external tools. My choice instead was to create an additional "meta" file for each image. I wanted the format to be very human friendly, so no json, but I didn't want an external dependency that yaml would have required. So I made my own very simple syntax ( that fits in 38 lines of code).

And now that have I have a specific file for the caption, why not also use it to specify other type of metadata that I wish to display along the photography ?

Example of .meta file:

__format__: 1
date: 2024-06
location: France - Lyon - Croix-Rousse
film: Kodak Portra 400 35mm
lens: Minolta MD 35mm
camera: Minolta X-500
caption: No Facho ! A powerfull message on the white wall of some private property.
    Even more contrasty due to the intense sun there was on that day.
    And it's understandable given the context, we are in middle of the french
    legislative elections; the far right as menacing as ever.
    Those message of resistance has been flourishing all over the neighbourhood.

Note that keys have no meaning (except for caption ) and I can add as much as I want in every file.

An interesting issue that came along the way was how to display images in fullscreen ? I.e. you click the image and it fill the screen height while reducing opacity for anything else. The easiest solution would probably be Javascript but I really wanted to see how far I could go without using it on my website at all. One of the solution I found was pretty satisfying: https://sylvaindurand.org/overlay-image-in-pure-css/. It's biggest drawback being that you have to duplicate the image, fortunately the way I add images is handled by a rst directive so duplicating content is hassle-free.

<a href="#2406bbb-240702_negscan2406.894.v0001">
    <img loading="lazy" src="...jpg" alt="...">
</a>
<a href="#_" class="img-fullscreen" id="2406bbb-240702_negscan2406.894.v0001">
    <img loading="lazy" src="...jpg" alt="...">
</a>

.img-fullscreen {
    display: flex;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 100vh;
    width: 100vw;
    max-width: unset;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s;

    img {
        width: 100%;
        object-fit: contain;
        margin: 2rem;
        padding: 0;
    }
}
.img-fullscreen:target {
    visibility: visible;
    opacity: 1;
}

The next part of my photography portfolio was designing the landing page. Where the visitor can have a quick look at all my projects. I wanted something original, quite eye-catchy but that doesn't sacrifice picture presentation. I think I found the main direction pretty quickly as I remembered an incredible recent website that archived a lot of film box packaging: https://fp-archive.com/ And on there I immediately stopped on the Fujifilm boxes, of course because of their strong usage of green. Their packaging instantly became my main reference for designing the page.

And this is the final wireframe design I sketched in Figma:

• I had to somehow keep the iconic Fuji logo, that brings an important complementary color. I tried first to have my first + last name but it was not pretty and ended up only using my first name. I couldn't keep all the original logo characteristics because of the different letters so I aimed for something that feels like it but looks good on its own.

• the packaging has a lot of text but a photography portfolio usually doesn't. To add a bit more text I found the idea of translating some of the headings in other languages, as it's already the case on the reference. I choose French, my native language, with Polish and Italian that are some of my family origins.

• for the font I had to find something quite similar and was mostly limited by the free foundries I already had. I could probably have found better but ended-up using Clash Display.

• I kept the popular "square grid layout" from social medias to display sessions. I don't like to have my images cropped but it allow for a more compact and tidy view. All shots are individually displayed in their original aspect-ratio in another section below.

And this is what it looks like once implemented in html and css:

You can obviously check it by yourself by visiting the page itself (that may have changed since).

One important difference is the background. I tried to reproduce the grainy feeling of the packaging's cardboard texture. This is done by mixing a bunch of svg noise with blending modes:

background: url("noise.dust.dark.svg"), url("noise.dust.light.svg"), url("noise.svg"), var(--bg-color);
background-blend-mode: normal, normal, overlay;

The svg were generated with the help of https://noice.vercel.app/ and https://www.fffuel.co/nnnoise/.

⇐ The last tricky part for this page was making it responsive. As you can see the header relies a lot on horizontality which become quite limited on smartphones.

I think I'm satisfied with the result but it's not fantastic, the "fuji style" logo is intended to be displayed in a corner which would have made a lot of vertical space wasted if implemented as such.

The main heading wrapping is not very pretty but I think that's better than making it smaller to fit.

But to conclude the work on the photography section of my site, I had to upload everything I shot and already published on other socials. And I think that was the most annoying task. I can spend an hour just to add a single session. Picking the images, the layout, rewriting some captions, ...

The importance of typography.

I am not very good with typography, but I do love them. I love endlessy scrolling fonts library or visiting excentric designer website to find the perfect typeface.

However my process for finding fonts initially started as for most developer: browsing Google Fonts. Just because it's convenient and easy to integrate in your website. But fuck Google, I haven't migrated from Gmail to Tuta just to have those blood-suckers also squatting my website. Fortunately I discovered a workaround a few weeks ago: https://fonts.bunny.net/. It's as convenient as google font to use, has all google fonts, but is not google. It just sucks for finding fonts.

Still, why I am being so lazy ? I just said I love browsing fonts, I have bookmarked quite a few typographic website so why do I stick with the "google font library" ? Just because of the vendor-hosting ? Common you can just copy/paste a bunch of otf/ttf/woff and write 2 lines of css. The real reason was mostly that I didn't need anything fancy, the most popular fonts are in the Google catalogue and works just fine. But hey I said I want to get fancy for this website ! Time to go off-road ...

I think my approach to pick fonts was the inverse of what designer usually do. I started to browse for fonts I like visually first, and then build the page style and design around that font; or at least get inspired from it.

With the thousands of free fonts online it's hard to make a choice right ? Well amongst some of the type foundries I got some with a really interesting feature: they are political.

⚧ LIBRE FONTS BY WOMXN

https://www.design-research.be/by-womxn/

La typothèque Bye Bye Binary

https://typotheque.genderfluid.space/fr

And political is what I wanted my website to be more. I want to showcase the work of minorities. I want to highlight creators when I can. This is also the reason that all the decorative fonts on the index and work pages have their name and a link displayed next to them. They are such a crucial piece of puzzle for a website that they deserve credits.

And as of the time I'm writting this post, these are the fonts I ended up using:

Making a C.V.

A C.V. is often asked for any job candidature, and you know how asking for files online is still a mess. However having it as an html page means you can just drop a link which is quite convenient ! Still, we need the .pdf because not all automated forms expect an url and will ask a file, .pdf having the most chance of being opened.

One cool trick I learned is that you can easily export html to pdf using your browser ! Press ctrl+p (print shortcut), instead of a printer choose "Export as PDF" and voilà.

However you might run in formatting issue now. If the cv is part of our website we dont want the navigation bar or the footer. My solution was to create 2 cv pages, one for browsing from the site with the usual navigation. The other I called "full screen" which is just the cv content. It was quite straightforward to build using Jinja template inheritance to avoid duplicating code.

• cv.html

• cv.fullscreen.html

Another trick I found is for styling, because you might not want a screen wide html page to be layout the same as a A4-like document. There I use the special CSS media query print:

@media print {
    /* we need much smaller horizontal margin when "printing" */
    .read-area {
        margin: 5% 10%;
    }
}

Also because I had to reduce the overall document scale in the dialog to have it fit, graphics that were 1px thin like borders became barely visible. I used the same css trick above to make all borders 2px wide when "printing".

Search Bar

I think finding information is a critical part for most websites. Maybe not that critical for small personal websites but it can be frustrating for the user to lost himself on your site, or even for you if you write resources that are never found.

Yet finding content was kept at the minimum viable level for this redesign: a clear nav bar and structure. I actually removed some navigation compared to what Pelican was offering me.

But at the few days before wrapping up this post and the site redesign someone shared on Mastodon exactly what I was looking for:

Pagefind | Pagefind — Static low-bandwidth search at scale

https://pagefind.app/

A search function for static sites ! And it can be pip installed. Most impressive is that as hinted by the mastodon post author, it only took a few dozen of minutes to have it fully integrated in this website (few more to squash some bugs and polish the style) !

Guest Sketchbook

This is probably the section I love the most. A touch of genuine human experience: sharing stranger's art. I don't think the idea was fully for me; I remember seeing some website with a similar concept and finding it so cool. Allowing some interaction between the visitor and you. Offering a small piece of your digital space for someone else without expecting anything in exchange.

The implementation is quite manual: visitors must go through a Notion form to submit their drawing. I manually inspect the form results and add them to the website. (I wish for another less vendor-locked solution than Notion but that was the most simple for now).

One of the biggest issue I had to solve was how to layout the images ? Should I manually place them ? For now I choose to randomly place them at build time, with a seed determined by a constant index attached to each image; avoiding image to jump places between each build.

There was also the question of responsivness, what happen when the viewport width get smaller ? I choose to preserve their position at the cost of reducing the image to very small sizes. This is not perfect but the only solution I had in mind for now.

Other stuff

I added a resources page. It's goal overlap a bit with the blog and work pages but I think it's a large enough need that it required its own page. Also it replace the previous subpage "asset" that I created for 2 specific cases. I made sure to redirect those to their new resources location.

Compared to Pelican I removed the tags/author/categories pages that allowed to browse all the blog post with that specific field. I didn't feel it bring much value for now as I don't have that much content. It is kind of replaced by the search feature.

I added RSS support. Well Pelican actually had it, though it was Atom feed, which I never used or checked anyway. Using https://everest-pipkin.com/teaching/handmadeRSS and the official documentation I made sure anyone could suscribe to some pages (blog, photography and resources) by autogenerating rss feeds as part of the build system.

I changed logo ! Same idea, I wanted something more organic. I plan to make a page that showcase all the logo I had and will explain their background in details.

Oh and I added small easter-eggs all around 👀 (as in, you need an interaction to find them).

Getting rid of gmail

I don't think it's necessary to explain why one would want to get rid of Google, or at least I'm too lazy to put the effort into an explanation. But those bastard doesn't align with my values and I don't want anymore to justify giving credits to fascism simply for my personal confort.

Amongst the alternative I stumbled upon Tuta and Proton Mail. Proton unfortunately had a few backlashes in the previous year that made me quite mitigated. Though I have been given some contradictory sources I went with Tuta (and I skip over the other alternatives I haven't really looked into).

Changing your email provider is a big thing, this mean that in theory you need to inform all websites, entity and person to use that new email adress. Imagine the new provider you choose suck ? You will have to go through all that mess again to migrate back ? Well there's a solution: routing your email through a custom domain. All email providers provides you a custom domain, like username@gmail.com or username@tuta.io but some allow you to use your own.

A beginner’s guide to creating and using your own domain name

https://growyourown.services/a-beginners-guide-to-creating-and-using-your-own-domain-name/

Owning a custom domain was a first for me, I had a lot of questions but it ended-up okay of an experience. I went with Gandi as domain provider (they are french-based) and bought liamcollod.xyz (11€ for 2years). I then followed the Tuta instructions to use it as custom domain for my email, that way I could have as much email adresseses I want on that domain. However after doing a bunch of tests, and email update on some websites I found one issue: the .xyz top-domain is more prone to be blocked by spam filters 😨 That's really bad if you send a mail and you can't know if it end-up in the recipient spam that they may never check ... (I also learn that some filters blocks new domains for the first month after their creation). Welp, I had to buy another domain liamcollod.eu. It seems that anyway, except for the bigger email provider domains, everything is a potential spam for some.

Now that I have a custom domain, I need to pick the email adress I want to use, because the domain is only the part right to the @, you need to pick a left part. And the magic is that you can setup as much as you want ! For example I picked contact@liamcollod.eu as a general email address. But I have another one that looks like heyo@liamcollod.eu that I will only give to my relatives and mutuals. Depending on how your email providers works, you can also setup aliases, an infinity of email adresses that can be unique per website you create an account on !

That's one advantage, the other is that I can now change email provider (like if I decide to finally go from Tuta to Proton Mail) without having to update my email adress anywhere. I just need to update a few settings on my domain provider to tell to redirect the mail from Tuta to Proton. My email stays contact@liamcollod.eu.

Gmail was my main Google dependency. I didn't get rid of it as I can't just stop using my 12 years-old email address but it feels good to know I may just delete it and it will not be catastrophic. Slowly, I am building alternatives and that makes me confident.

The next step is getting rid of other Google dependencies, luckly my usage was already pretty small:

• Google Calendar: replaced by Tuta Calendar !

• Google Authentificator: gone now, see next section !

• Google Drive: never used, I was already on Mega since years.

• Google Sheets: not simple, there's not that much resources online. Excel is not not a solution. I'm just using it for accountability so I may explore solutions outside the traditional spreadsheet format.

• YouTube: well it's hard to get rid of this one but I'm still investigating.

• Google Maps: I need to start using OpenStreetMap but I don't know how robust their "itinary" feature is (and also how much solid is their local business referencing and reviewing).

To be continued ...

Improving how I manage my passwords

Until know, my method was the good old physical notebook of passwords. Very secure but quite dangerous (I only have ony copy!) and inpractical (always take a few seconds to find the password for the exact site you need).

I might be digital-tech-savy, I don't know much about cyber-security if the very basics. So it's quite hard to navigate amongst all the possibility to store a password. Should I really trust a password manager ? How can it fail to protect my data ?

I still can't answer those questions because as much as I like to go in depth for each topic I explore, I already had too much on my plate and just went on relying on what the majority use: Bitwarden (with the help of a few comparison articles).

From what I understand, it's basically an encrypted database that is stored on some company cloud. Only you can decrypt the database with your master password. So it better be a good password, but the only one you have to remember !

While looking at password manager I also discovered another concept: passphrases.

I don't know how hard I should trust those but it seems quite reliable so I gave it a go.

To generate a passphrase I found:

Diceware Password Generator

https://diceware.dmuth.org/

Tired of forgetting passwords? We got you covered! All passwords consist of real words, chosen at random.

But also a slighty different generator with a very nice user interface:

StrongPhrase.net

https://strongphrase.net/

Create a memorable, strong passphrase to use with your password manager, computer, etc.

And bitwarden password generator also offers passphrases.

With that it was time to start the big update ! Going through every website I had on my notebook and update the password and email, registering them in Bitwarden.

• I didn't registred all the websites in my password manager: the ~5 most critical are still in my physical notebook.

• I actually didn't update all the website I ever had an account on. I made a list and sorted them by importance, only updating the most used. For the other I will update them progressively, when login back to them.

For few of this websites, I had 2FA in place. Until now I was using Google Authentificator to managed my codes but I want to get rid of Google. Again, I search for some comparison with alternatives and end up on Aegis. Most importantly it allow to export your tokens as backup. I can loose my smartphone and not become locked-out of those important accounts.

Nuking facebook (fuck you Zuckenberg)

With how Meta decided aiming at being one the leaders of the new techno-fascist empire the USA are building I came to the conclusion I also want to delete my Facebook account. I haven't used Facebook for years so I'm lucky that's not a big deal for me.

I check if there is anything to backup, maybe a few photos, ha wait ... messenger. I still have one group of friend using it.

“Ask them to migrate to another platform”, worth a try, expect I know they are lazy bastard and that creating a new account on a new app just for one group chat with me is too much. I will have to convince them with time, but in the meanwhile I need another solution right now.

And I already have another solution. A year ago when Meta had to offer Facebook-less messenger account to its user after an EU law I did created one. So let’s check it out.

First thing I want to check is can I share my messenger contact easily ? I ask my partner to search for my account on messenger, as if they wanted to contact me, but they only find my facebook-linked account. Hmm, how do you share and find a messenger account, there must be some kind of user name or identifier right ? And indeed there is, you are supposed to have a messenger username that allow to share you account using a https://m.me/ link. Expect mine is empty. Like I don’t have an username 😵‍ Well lucky for me there is an option to edit your username, let’s give that a try.

However whatever username I try to put in the field just give me an error, not “username taken” or anything explicit, just no it’s not possible, for anything goofy or serious that I try. So I look at their documentation that explains what is allowed as username but all my attempts match their requirements so what is going on ??

Turns out that from a reddit post, its because my account don’t have a verified phone number, so I can’t edit my username ! And they obviously don't tell you !

Ok let’s add a phone number then. I go my account settings > personal information > add phone number, enter my phone number … huh ? The “Next” button is greyed-out and I can’t click it. Again whatever phone number I fill I just can’t validate it. Absolutely crazy ! And can’t find what is the reason this time. I give up for today and will try again tomorrow ...

Next day, but you know what never mind, let’s nuke the account and start from scratch. Wait what !? 30 days before the account is deleted ? and if its cancelled if I login with it ? Well I will have to use another email address in the meanwhile but fine.

Ok so new account, after deleting the other one I’m automatically put on a screen which ask me to login with my existing Facebook account or another one, I try to click "Another Account", I get a new login page but also a button to create a new account at the bottom (I would have expected it to be hidden elsewhere). Great finally something straightforward, so create account, without Facebook option, I choose to use my phone number over my email, all good, until the step I must submit my confirmation code that is sent to my phone number. Waiting 1,5,10min nothing. And there is no option to ask to send another code. Unlucky or just another intentional blocker ? Well let’s go back a few step until it ask the phone number again and refill everything ... same issue I never receive the code.

Fuck this, let’s cancel the whole process and go back on the login screen, I get a popup that ask me if I really want to cancel the account creation, so yes. Let’s try agaaaain, create a new account ... huh ? Now I get redirected to a webpage that tells me it’s not possible to create a new account at this moment !!?? Welp time to give up and come back later.

Turns out I just had to close the messenger app to retry the account creation, but I still get blocked in the end at the phone verification step ...

You want to know how the story ends ? I retry 3 days later to create a new account and this time everything works without issue 💀

Custom domain for my website

I explained how I acquired 2 custom domains in Getting rid of gmail and their usage for my emails, but it is most evident that the main other reason you want a custom domain is for your website.

I didn't use my .xyz domain for email because of spam detection, but this should be less of a problem for a website url. And .xyz is much more relevant than .eu for my profile (3d space coordinates ...) ! Therefore I want my website to be accessible at liamcollod.xyz.

To use that domain, I had a first look at the GitHub documentation. My first issue is that the documentation explain the how, but not really the why or showcase the end-result. Like what is an apex-domain ? I just want to use my custom domain for my Mrlixm.github.io repository, not the other repository where I host other sites.

Cross-referencing information from different sites I decide to just follow all the steps and just see what it does:

1. I configure the apex domain

2. I update the repo with the CNAME file

3. I configure the www subdomain

First step was without issue but step 2. and 3. were more complicated. For 2., this file is automatically created by GitHub when you edit the repository settings as they tell you to do. But it is created as a new commit on the gh-pages branch (or whatever is published to github pages), which will be lost when I deploy a new site version. What need to be done is add the CNAME file (with its correct content) to the source branch and make sure that when I deploy the site, it is copied at the root.

For 3. it was a mix of different problems:

• I wrongly set the CNAME record on Gandi side, I was missing the dot at the end of the value (mrlixm.github.io.)

• The DNS propagataion was quite slow, the subdomain only worked the next day; after I spend one hour double checking I did everything correctly.

The end-result is that all my other repository also got my custom domain; like https://mrlixm.github.io/picture-lab-lxm/ redirects to https://liamcollod.xyz/picture-lab-lxm/. I didn't really want for this but I also don't want to spend more time on this, so I just leave it as it is.