Over the past month I’ve been slowly handcrafting a new website for myself to better showcase what I do and have a future home for experiments I may want to tinker with. Designing the whole thing in the browser using HTML, CSS, and a tiny bit of plain JavaScript has been truly a joy.
The current version is the 10th iteration of this website, although there’re even older versions which I’m not counting anymore. They used to live on a completely different domain for a completely different purpose and to be fair, I’d be too ashamed to include them into my archive of old versions at this point in time anymore.
What’s special about the newest version, is that I’ve brought here more than just the blog and made it somewhat focus on what I do as a design engineer and systems architect at my current job.
This includes creating a space for some of my past work, companies who trust the tools I’ve built, testimonials from the past clients and colleagues, and also listing out services that I’m good at. I would still also like to create a proper portfolio section at some point to include real case studies, but that’s still on my wishlist of things to add later.
Version 10.0 of arielsalminen.com.
Behind the Scenes #
As mentioned earlier, all of the website is built using standard web technologies; including HTML, CSS and plain JavaScript. I’m also using Eleventy behind the scenes to power the blog and for example to generate the JSON search index for the Ctrl+K search feature.
While on the surface things may look really simple, I’ve included a lot of small and fun functionality here and there that you may discover as you browse the website more. Some of this includes:
- Search feature using Ctrl+K.
- Ability to surface keyboard commands with Alt+L.
- Design modes, including surfacing the layout grid, color blind mode, invert mode, and low vision mode to aid design work.
- Ability to quickly copy contents of the code examples using a single copy button.
- Tiny but fun animations on the accessibility, error, and home pages.
- Webrings that this website is now part of.
- Sticky year indicators on the writings page when you scroll it down.
- It’s a progressive web app with offline support.
- There’s an archive of old versions of this website on the FAQ page.
- Uses logical properties and view transitions.
- Focus on making the website more accessible for everyone.
Layout grid mode that can be triggered with Alt+A.
Keyboard Shortcuts #
The new website includes some functionality that can be accessed via keyboard shortcuts. These can be found from the footer of the website or by pressing Alt+L. Mainly this is me having fun with some experimental features such as the design modes. The full set of shortcuts include:
- Press Ctrl+K to open the search.
- Press ⏎ to select a search result.
- Press ↓ to navigate to the next search result.
- Press ↑ to navigate to the previous search result.
- Press Esc to dismiss the search or a modal.
- Press ⇥ to navigate forward on the page.
- Press ⇧+⇥ to navigate backward on the page.
- Press Alt+A to toggle the layout grid.
- Press Alt+R to toggle the color blind mode.
- Press Alt+I to toggle the invert mode.
- Press Alt+E to toggle the low vision mode.
- Press Alt+L to open the shortcuts modal.
Screenshot of the keyboard shortcuts modal.
Focus on Accessibility #
Universality is in the core of the World Wide Web, so we should embrace it and build experiences that are available to, and accessible by, everyone.
Because of this, I’ve put a lot of effort on trying to build an experience that would be accessible by all people, regardless of their abilities or technology used. I’m also continuously trying to work towards improving the accessibility of this website to ensure I provide equal access to everyone.
This work is ongoing and I know there’re still some issues to iron out, especially with the Combobox Pattern used for the search. But I’m fairly happy with how much more inclusive the experience is already compared to my previous website.
Lighthouse results for arielsalminen.com.
Delight with Animations #
I like to keep things rather simple when it comes to my personal website, but that doesn’t mean one can’t have some fun as well. When you browse this website, you may stumble upon a few small but delightful animations that I’ve created. Some examples of this include:
- The stamp animation on the Accessibility Page.
- The galaxy animation on the 404 Error / Offline Error pages.
- The subtle floating animation on the Home Page photograph.
- The very basic view transitions as you switch between the pages using the main navigation.
Galaxy animation used on the error pages.
The Final Outcome #
This is what the final outcome looks like. Feel free to explore yourself, the new website is available here: https://arielsalminen.com ❤️
Further Reading #
While writing this post some of the sections started to grow to such magnitudes that I felt like they would work better as completely separate posts. So I did just that and published two three more posts for you to read:
Website Wishlist #
There’re a few things on my wishlist that I would still like to do around here:
- Finish dark mode support. I have a draft PR open for this, but haven’t found the energy to finish it yet.
- Create proper case studies for the client projects.
- Potentially bring some of my open source projects here.
Improve keyboard accessibility of the Combobox Pattern used in search.Improve screen reader accessibility of the Combobox Pattern used in search.
Hope you enjoy it!