This blog is now a desktop
Hello there!
If you have visited before, you have probably noticed that things look a little different. The blog no longer has a sky, a house and a hamburger menu. It is a desktop now.
This is the biggest change to the site since I started writing here again in 2024. The previous design served me well, but it was a blog with a few pages around it. I wanted a place that could also show the projects I work on, and I wanted it to be a bit more fun to visit.
A desktop instead of pages
The whole interface was replaced. There is a menu bar at the top, icons on the desktop and an animated wallpaper behind them. About, Blog, Projects and Links each open in their own window, which you can drag, resize and stack on top of each other. There is also a Trash, and yes, you can drag icons onto it.
The important part for me was not breaking anything. Every existing address still works and is still rendered on the server:
/opens the About window,/blogopens the Blog window,/blog/<slug>opens the article in its own window.
So a link to an article that you shared a year ago still lands on that article, and search engines still get a complete page instead of an empty shell.
The Blog window
The Blog window keeps the things the old list had and makes them a bit simpler. Search goes over all posts, you can sort by name or by date, and rows are loaded ten at a time as you scroll. Articles open in their own window and keep the copy button on code blocks that I added just before the redesign.
Projects
The new Projects window is the main reason I started this. It lists personal and professional projects, from the Harness Useful family to older things like Track Things and Project Palette. A few of them are not finished yet or are still early, and the window says so.
The list is not maintained by hand. It lives in src/lib/data/projects.json, and a small script regenerates it from the data of my CV, so both places describe the same projects:
bun run sync:projects <path to svelte-cv/src/lib/cv.json>The most recent addition is Network Flow, a set of interactive, animated explanations of how the internet works: DNS, TCP, TLS, HTTP and HTTPS, CORS and CDNs, with packets crossing an isometric network.
Themes and the terminal
The Special menu has nine themes, from the default Paper + Ink to Blueprint and Phosphor. The site remembers the one you pick. The first visit in a tab also plays a short boot screen.
And there is a terminal. help lists the basics: ls lists posts, cat 6 reads one, open projects opens a window. The help text also hints that there is more than it shows. I will not spoil all of it here, but ls -la is a good place to start, and you might want to try vim if you are comfortable getting out of it.
On a phone
On screens up to 720px wide, windows open full screen and cannot be dragged or resized. Dragging tiny windows with a finger is not fun, and reading an article should not require it.
Less under the hood
The redesign removed more than it added in terms of dependencies. Tailwind, shadcn, Bits UI and the other packages that only the old interface used are gone. Styling is now plain CSS in app.css and in the components, on top of Svelte 5, SvelteKit 3 and Vite.
A few smaller changes came with it:
- every page has canonical, Open Graph, X card and JSON-LD metadata,
- the site now serves
/sitemap.xml,/robots.txt,/llms.txtand/llms-full.txt, while/rss.xmlstays as it was, - the social media drafts that I keep in each article are stripped from the compiled metadata, so they no longer end up in the client bundle,
- the build now fails on a malformed or unknown frontmatter field instead of quietly publishing it.
The whole site is still open source, so if you want a desktop of your own, feel free to fork it and replace the content.
What next
The content stays the same as before: articles about the things I build and use. The difference is that the projects now have a home next to them. If something looks broken in your browser, or you find a trick in the terminal that I did not mention, let me know.
Greetings,
Maciej