migrate axum and askama

remove tailwind config
remove cargo build "improvements"
2025-06-16 21:19:11 +02:00 · 2025-06-16 21:19:11 +02:00 · 2025-06-16 21:19:11 +02:00 · 2025-06-16 21:19:11 +02:00 · 2025-06-16 21:19:11 +02:00 · 2025-06-16 21:19:11 +02:00
55 changed files with 2597 additions and 2637 deletions
--- a/.gitea/workflows/release.yaml
+++ b/.gitea/workflows/release.yaml
@ -13,7 +13,7 @@ jobs:
    name: release
    runs-on: ubuntu-latest
    container: 
-      image: node:18
+      image: node:22
    steps:
      - uses: actions/checkout@v4
      - uses: dtolnay/rust-toolchain@stable
--- a/.gitignore
+++ b/.gitignore
@ -23,3 +23,6 @@ Cargo.lock

 # Image generator
 generated_images/
+
+node_modules/
+package-lock.json
--- a/.zellij/dev-layout.kdl
+++ b/.zellij/dev-layout.kdl
@ -1,29 +1,26 @@
 layout {
-    pane split_direction="vertical" focus=true {
-        pane edit="src/main.rs"
-        pane split_direction="horizontal" size=60 {
-            just { args "server_dev"; }
-            just { args "test"; }
+    default_tab_template {
+        children
+        pane size=2 borderless=true {
+            plugin location="zellij:status-bar"
+        }
+        pane size=1 borderless=true {
+            plugin location="zellij:tab-bar"
        }
    }
    pane_template name="just" {
        command "just"
-        start_suspended true
    }
-	floating_panes {
-		pane {
-            command "just"
-            args "tailwind"
+
+    tab split_direction="vertical" focus=true {
+        pane  {
+                just { args "server_dev"; }
+                just { args "test"; }
        }
-		pane {
-            command "just"
-            args "decap_server"
+    	pane {
+             just { args "tailwind"; }
+             just { args "decap_server"; }
        }
-	}
-    pane size=2 borderless=true {
-        plugin location="zellij:status-bar"
-    }
-    pane size=1 borderless=true {
-        plugin location="zellij:tab-bar"
    }
+    tab
 }
--- a/Cargo.toml
+++ b/Cargo.toml
@ -6,17 +6,16 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

 [dependencies]
-askama = { version = "0.12", features = ["with-axum", "mime", "mime_guess"] }
-askama_axum = "0.4.0"
-axum = "0.7.3"
+askama = { version = "0.14" }
+axum = "0.8.0"
 chrono = { version = "0.4.31", features = ["serde"] }
-pulldown-cmark = { version = "0.10" }
+pulldown-cmark = { version = "0.13" }
 gray_matter = "0.2.6"
 rss = "2.0.7"
 serde = "1.0.195"
 serde_json = "1.0.111"
 tokio = { version = "1.35.1", features = ["full"] }
-tower-http = { version = "0.5.0", features = ["trace", "fs"] }
+tower-http = { version = "0.6.0", features = ["trace", "fs"] }
 tower-livereload = "0.9.2"
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
@ -25,24 +24,8 @@ anyhow = "1.0.86"
 rayon = "1.10.0"
 syntect = "5.2.0"
 indoc = "2.0.5"
-askama_escape = "0.10.3"
+askama_escape = "0.13.0"
+mime_guess = "2.0.5"

-[build]
-rustflags = ["-Z", "threads=8"]
-
-# [target.x86_64-unknown-linux-gnu]
-# rustflags = [
-#     "-C", "link-arg=-fuse-ld=lld"
-# ]
-
-[profile.dev]
-debug = true
-opt-level = 0
-# codegen-units = 16
-# lto = "thin"
-panic = "unwind"
-strip = false
-incremental = true
-
-[profile.dev.package.askama_derive]
-opt-level = 3
+[dev-dependencies]
+pretty_assertions = "1"
--- a/README.md
+++ b/README.md
@ -1,88 +1,44 @@
-# sapper-template
+# michalvanko.dev site

-The default [Sapper](https://github.com/sveltejs/sapper) template, with branches for Rollup and webpack. To clone it and get started:
+This is the repository for my own site hosted at https://michalvanko.dev

-```bash
-# for Rollup
-npx degit "sveltejs/sapper-template#rollup" my-app
-# for webpack
-npx degit "sveltejs/sapper-template#webpack" my-app
-cd my-app
-npm install # or yarn!
-npm run dev
-```
+Feel free to use and ammend to code to your needs.
+Respect the [Creative Commons BY-NC-ND 4.0 License](https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1) for the content of the site.

-Open up [localhost:3000](http://localhost:3000) and start clicking around.
+## Architecture

-Consult [sapper.svelte.dev](https://sapper.svelte.dev) for help getting started.
+The site is hosted as a static generated HTML files on the server via [Caddy](https://caddyserver.com/) reverse proxy. There is an [example Caddyfile](./Caddyfile-preview) that can be used for deployment on server.
+During development the axum web framework serves content as a HTTP server in a classic SSR HTML.

+### Development

-## Structure
+Look at the [justfile](./justfile) for the available commands that are being used for development and deployment.

-Sapper expects to find two directories in the root of your project —  `src` and `static`.
+Use `just server_dev` or `just dev` for running the server for development purpose.

+### Tools and libraries used for generating the content

-### src
+- [Decap CMS](https://decapcms.org/)
+- [Rust](https://www.rust-lang.org/)
+- [axum web framework](https://github.com/tokio-rs/axum)
+- [tailwind](https://tailwindcss.com/)
+- [wget](https://www.gnu.org/software/wget/) for SSG

-The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.
+### Deployment

+Deployment requires these steps:

-#### src/routes
+1. Ensure all images are generated
+  1.1 Run server in either `dev` or `production` mode `just prod` 
+  1.2 Crawl the site with `just ssg` command to ensure all routes are being hit to indicate that all images have to be generated.
+  1.3 Wait till the server stops generating images. Monitor the CPU load until it drops. Takes few minutes.
+2. `just export` will start the server in `production` mode and use `wget` to recursively crawl the site. Remember, content has to be linked somewhere on the site to be discovered by `wget`.
+3. `just deploy` will synchronise the `/dist` folder with the server with `rsync`

-This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
+### Image generation

-**Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
+I want all images to be served to users optimally. 
+All images that are used are generated in several sizes so they are optimized for different displays sizes.
+Browsers will pick and download the appropriate size.

-**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
-
-There are three simple rules for naming the files that define your routes:
-
-* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
-* The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
-* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
-
-
-### static
-
-The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv).
-
-In your [service-worker.js](app/service-worker.js) file, you can import these as `files` from the generated manifest...
-
-```js
-import { files } from '@sapper/service-worker';
-```
-
-...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
-
-
-## Bundler config
-
-Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
-
-
-## Production mode and deployment
-
-To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins.
-
-You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands:
-
-```bash
-npm install -g now
-now
-```
-
-
-## Using external components
-
-When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
-
-Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
-
-```bash
-npm install -D @sveltejs/svelte-virtual-list
-```
-
-
-## Bugs and feedback
-
-Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).
+I'd love to link some references for this problem, but I haven't found the exact use case that I was trying to solve.
--- a/_posts/blog/2021-05-07-introduction-javascript-to-javascript-application-testing.md
+++ b/_posts/blog/2021-05-07-introduction-javascript-to-javascript-application-testing.md
@ -3,7 +3,6 @@ layout: blog
 title: Introduction to JavaScript Application testing 
 segments:
  - blog
-  - featured
 published: true
 date: 2021-05-07T14:44:57.102Z # update date accordingly
 tags:
--- a/_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md
+++ b/_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md
@ -1,7 +1,6 @@
 ---
 segments:
  - blog
-  - featured
 notes: ""
 layout: blog
 title: "Our attempt at Rusty game jam - Weekly #25-2022"
--- a/_posts/blog/2024-10-26-this-site-has-been-rewritten-again.md
+++ b/_posts/blog/2024-10-26-this-site-has-been-rewritten-again.md
@ -0,0 +1,76 @@
+---
+title: This site has been rewritten again
+segments:
+  - blog
+  - featured
+published: true
+date: 2024-11-05T11:26:00.000Z
+thumbnail: /images/uploads/m-logo.svg
+tags:
+  - News
+  - Development
+  - Rust
+notes: Bu
+---
+Hey world,
+
+After a few months of work, I can finally present to you a new style for this site. The style isn't the only thing that changed.
+I've **completely rewritten** how this site is produced. 
+
+## Motivation
+
+With the front-end tech world spinning too fast I've noticed this cool little library called *[HTMX](https://htmx.org/)* that takes front-end development back 10 years and provides a completely different look at how web development could've been done. 
+I've also done some experiments with [Qwik](https://qwik.dev/) before, but I'm glad that I've abandoned this route as I would like to write less and less *TypeScript* `||` *Javascript* in the future.
+After doing last year's [Advent of Code](https://adventofcode.com/) in *OCaml* I've figured that I'd like to use tools that I think make me productive and also provide me help on the path of producing the most safe, predictable and performant code.
+That's the reason **I've chosen *Rust*** for this site and most of my side projects in the last couple of years.
+
+## What has changed
+
+### Tech stack
+
+I've mentioned *HTMX*, but it only inspired me and I took it a few steps back and I haven't opted for any *JavaScript* included by default. You can find some *JavaScript* on this site but it is only inlined without any build step. However, there still has to be a build step. Instead of setting up *[Vite](https://vite.dev/)* for 5th time. I opted for something classic but still new. I've just found the [just](https://github.com/casey/just) command runner. It is very similar to how many *Makefiles* look, but the API is modern and **written in Rust BTW**. So if any developer wants to look at what commands are being used during the development or deployment, they are all located in [`.justfile`](https://github.com/michalvankodev/michalvankodev-site/blob/main/justfile). All commands are just `bash` commands and some `bash` scripts with few instructions for `just` to combine commands by their dependencies.
+
+### Templates
+
+During development, the site is being hosted with [axum Rust web framework](https://github.com/tokio-rs/axum). I want to write my templates in HTML so they can be as easily reused in any other web project with any tech stack. For Rust, there is a **type-safe** Jinja like template parser [Askama](https://github.com/djc/askama) and even though I'm not very confident whether I would use it again, I can still easily migrate to any other template parser there is.
+
+### Styling
+
+I've completely redesigned the site. Dodging *TypeScript-based* solutions for <abbr title="Cascade style sheets">CSS</abbr>. Opting for [tailwind](https://tailwindcss.com/) running *just* in the background. The experience with *tailwind* is something that I've never felt previously with any other <abbr title="Cascade style sheets">CSS</abbr> framework before. I'm satisfied with it although it has some downsides, **the productivity hasn't been matched**.
+
+## What stayed the same
+
+### All the content
+
+I haven't even moved the files to a different folder. I've just slightly adjusted the models in the [DecapCMS](https://decapcms.org/) config for [/showcase](/showcase) page. DecapCMS is pretty much just the same Netlify CMS that it has been before the rebranding.
+I'd like to recommend it as *THE CMS*, but I can't. I like the way how the content is managed, I also like *git-based* workflow for managing content. However, there are many struggles to set it up for use with clients that are not programmers. With more changes to the models you also start to **miss the capability of running migrations** on all files/records. Everyone would be better off just hosting *[Strapi](https://strapi.io/)*. The ecosystem has started to get healthy. Setting up a custom media library is also a thing that has to be considered.
+
+### Media library hosting
+
+[Netlify has deprecated](https://answers.netlify.com/t/large-media-feature-deprecated-but-not-removed/100804) its [Large Media](https://docs.netlify.com/git/large-media/setup/) service. I don't mind tracking media with `git` LFS plugin. What I do mind is where I store these assets. \[Github's] free quota is pretty low considering sharing photo galleries. For now, I've moved all assets on my *"powered by"* [selfhosted](https://awesome-selfhosted.net/index.html) server, running my own [Gitea](https://gitea.katelyn.michalvanko.dev/) instance.
+
+### Static site generation
+
+The site is still distributed as <abbr title="Static site generation">SSG</abbr> HTML files. You could argue that the logic for generating every page is just like any other <abbr title="Server Side Rendered">SSR</abbr> website.
+
+For <abbr title="Server side generation">SSG</abbr> I've come up with a `wget` command that downloads all the necessary dependencies for all pages. It is capable of recursively crawling the whole site following all links. It was pretty hard to come up with the correct set of parameters for the `wget` command to be able to produce the same routing capabilities as with the `SSR` running server used during the development. Here I can **praise all the generative AI tools**. You could find multiple prompts asking for an explanation of all the options for `wget` and how I should use them for the desired output in my history.
+
+The final `wget` command for generating this site looks like this:
+
+```sh
+wget --no-convert-links -r -p -E -P dist --no-host-directories localhost:3080
+```
+
+You can also [prompt for the explanation](https://lmgpthat.com/render.html?search=wget%20--no-convert-links%20-r%20-p%20-E%20-P%20dist%20--no-host-directories%20localhost%3A3080).
+
+## Aim for future
+
+I still have to **write articles**.
+Many many articles that I haven't yet written down. I did some but haven't published them, and probably I never will. But so many things happened in the meantime. How do you call an update that is old? *"Outofdate"*?
+It would also be handy to have some article recommendations when you finish reading this article, right?
+
+I am still gathering feedback for the new design. I am considering many of the suggestions that I get. Our [Discord server](https://discord.gg/2cGg7kwZEh) is getting warm.
+
+I was also thinking about what would I use for CMS and having a *[SQLite](https://www.sqlite.org/docs.html)* database saved in the repository, it would still count as **git-based management**.
+
+*'Let your ambition carry you!"*
--- a/_posts/blog/2024-11-06-renaissance-of-hypermedia-systems.md
+++ b/_posts/blog/2024-11-06-renaissance-of-hypermedia-systems.md
@ -0,0 +1,22 @@
+---
+title: Renaissance of Hypermedia Systems
+segments:
+  - broadcasts
+  - featured
+published: true
+date: 2024-11-06T16:20:00.000Z
+thumbnail: /images/uploads/screenshot-from-2024-08-06-19-01-03.png
+tags:
+  - Development
+  - HTMX
+  - Hyperview
+---
+My goal for this year was to make a presentation. I've told this to my friend Lukáš Orgován and he offered me an opportunity to come present at their workplace with him.  This was a great event and I'm so glad I could attend.
+
+I've chosen a topic very close to my heart and wanted to show a different approach to building mobile and web applications.
+
+The presentation is in Slovak with English subtitles.
+
+<div class="video-embed">
+<iframe height="100%" width="100%" src="https://www.youtube.com/embed/hn7rR9wIfIY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
--- a/_posts/blog/2024-11-08-my-first-published-cargo-crate.md
+++ b/_posts/blog/2024-11-08-my-first-published-cargo-crate.md
@ -0,0 +1,34 @@
+---
+title: My first published Cargo crate
+segments:
+  - blog
+  - featured
+published: true
+date: 2024-11-08T17:09:00.000Z
+thumbnail: /images/uploads/aperture-icon.svg
+tags:
+  - News
+  - Development
+  - Rust
+---
+I've become obsessed with cameras, during our Tenerife trip, where I got to use a borrowed mirrorless camera for the first time. After that, I researched which camera I'd buy for myself for five months. While watching all the reviews, I was interested in the **exposure settings** for each picture presented. I've displayed many photographs in our [Tenerife vlog with my wife](https://www.youtube.com/watch?v=tEpoVHQW4Qs&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl). I've decided that I'd like to show those exposure settings in my other videos as they might **inspire other photographers**.
+
+I've tried many image editors and tools, but not one was able to **fulfill my demands** on how I'd like to display those settings underneath each picture. Many **tools supported** some kind of **framing**, however it was always **in a limited way**.
+
+## Hello `metaframer`
+
+I knew straight away that this would be a cool and **small side-project** that I could create. I could use my **favorite technologies** and have good **content for my streams**. 
+
+At first, I thought, that I would have to **render the text** right **into the image**. It will however be in some aspect a **deformation to the quality** of the original image. There was also a question of **how should the text be displayed** in a way that for **any image size**, the text will be of a similar or determinable size.
+
+Instead of **rendering pixels** into every different format I've opted for creating an **SVG file** that sits **alongside the original image**. This way the text also **scales with the image** itself. The complexity was lowered instantly. Rendering SVG is just like rendering HTML. I've used [handlebars template parser](https://handlebarsjs.com/). There are more favorable template parsers in Rust like [Askama](https://djc.github.io/askama/askama.html). But I wanted to allow users to **create their own templates** so the templates are not part of the executables and they can be stored in the user's `.config` folder. I had to test the **support of my video editing software** (I use [Kdenlive](https://kdenlive.org/) BTW) and the decision for SVG was set in stone (a.k.a. [README](https://github.com/michalvankodev/metaframer)).
+
+There were still complications along the way. **SVG** is still a much **less capable format than HTML** and **positioning elements** in a `space-around` fashion **has to be calculated**. There are also many different options and resolutions that I had to consider and I put all of them into the CLI arguments with [clap](https://docs.rs/clap/latest/clap/). [Clap](https://docs.rs/clap/latest/clap/) is a fantastic **command line argument parser** for Rust. I had to do many calculations on the resolutions and whether the image was a portrait or not. In the end, It wasn't as small of a side-project as I thought. I'm still very proud of it.
+
+I got to experience the ease of publishing crates on [crates.io](https://crates.io/) with [cargo](https://doc.rust-lang.org/cargo/guide/).
+
+This week, I've **automatized the [release process](https://github.com/michalvankodev/metaframer/blob/main/.github/workflows/release.yml)** and published binaries for multiple platforms.
+
+## On to the next one
+
+I can't wait to use [`metaframer`](https://github.com/michalvankodev/metaframer) in my new videos. I've already **ordered my first mirrorless camera** and it is on the way. **Be ready for new content**. What should be my next project?
--- a/_posts/blog/2024-11-23-autocommit-push-git-repositories.md
+++ b/_posts/blog/2024-11-23-autocommit-push-git-repositories.md
@ -0,0 +1,35 @@
+---
+title: Auto-commit & push git repositories
+segments:
+  - blog
+published: true
+date: 2024-11-23T15:23:00.000Z
+thumbnail: /images/uploads/git-icon-logo-svg-vector.svg
+tags:
+  - News
+  - Development
+  - Rust
+notes: ""
+---
+## Motivation
+
+I've been **writing my notes** for over 4 years in **markdown**. I write my notes in similar style of a [Zettelkasten method](https://zettelkasten.de/introduction/). I was **inspired by [foambubble](https://github.com/foambubble/foam) project** and was using it for quite some time. The goal of foambubble was to re-use as much **free technology** for writing and **keeping second brain**. The author [Jani Eväkallio](https://jevakallio.dev/) has chosen to write **a plugin for VSCode** and **utilize git workflow**.
+This approach as complicated for average human was very appealing to me as I was already user of certain tools.
+
+Since then, I stopped using VSCode as my code editor and therefore, as there wasn't support for *foam* outside of VSCode I've **migrated to a simpler workflow** using [zk](https://github.com/zk-org/zk).
+
+Since then, I have struggled a lot with **forgetting to commit** my changes as I often write updates, mark completed tasks, or write new TODOs throughout the day.
+I use a computer and a laptop when on the road and it is miserable when you forget to push your changes. I'm still trying to find a perfect workflow for **synchronizing notes with my mobile phone**. I've used many different applications, but they **all failed** me as soon as there was a **git conflict**. I think I have a solution for this thought through.
+
+A very easy solution would be to run a [script generated with GPT](https://letmegpt.com/?q=I'd%20like%20to%20automatically%20commit%20and%20push%20to%20my%20git%20repository%20after%205%20minutes%20of%20inactivity%20on%20my%20changes.) to **auto-commit**. It has the downsides of always having to remember to start it and it would not be easy to **share and apply to other repositories**. So, I came up with another **Rust crate**. 
+
+## Welcome `git_afk`
+
+`git_afk` might stand for *get always forgotten knowledge*. It doesn't. I've **chosen Rust** again. As I use it more frequently, my appreciation for it grows. I feel like Rust just makes you manage the state in the place where the state belongs. Working on this project taught me how to keep and share asynchronous callbacks in a way that makes sense but isn't so obvious at first glance. The **compiler is always very helpful**. While in other languages you would need to keep `unsubscribe` handles all over the place to **avoid memory leaks**. Rust makes you think differently about how to structure the code and data around it.
+
+The application is a **CLI app** that has a basic ability to add repositories to the watch list and then run `watch` command.
+Anytime there is a change in the configuration file it will reload watchers and start watching all files in the repositories for changes. It uses [`inotify`](https://www.man7.org/linux/man-pages/man7/inotify.7.html) a kernel interface for watching. You can find the [source code on GitHub](https://github.com/michalvankodev/git_afk).
+
+As the Rust ecosystem is so simple you can install `git_afk` with [`cargo`](https://crates.io/) `cargo install git_afk`. Submitting packages is easy. Installing them as well. **Automatic documentation generation** is awesome. Every package has the same style of documentation. Very easy to navigate. Rust is growing up on me. I'd very much like to use it as my main tool for my job.
+
+Now I can safely *git away from keyboard*.
--- a/3
+++ b/3
@ -2,7 +2,7 @@ port := env_var_or_default('PORT', '3080')

 # Tailwind in watch mode
 tailwind:
-	npx tailwindcss -i ./styles/input.css -o ./styles/output.css --watch
+	npx @tailwindcss/cli -i ./styles/input.css -o ./styles/output.css --watch

 # svg sprite creation
 svgstore:
@ -53,6 +53,7 @@ clean:
 ssg:
 	- wget --no-convert-links -r -p -E -P dist --no-host-directories 127.0.0.1:{{port}}
 	- wget --no-convert-links --content-on-error -p -E -P dist --no-host-directories 127.0.0.1:{{port}}/not-found
+	- wget --no-convert-links -p -E -P dist --no-host-directories 127.0.0.1:{{port}}/showcase/m-logo-svg
 	find generated_images/ -name "*_og*" -exec cp --parents {} dist/ \;
  
 # Preview server
--- a/package.json
+++ b/package.json
@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.10",
+    "tailwindcss": "^4.1.10"
+  }
+}
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}
--- a/src/feed.rs
+++ b/src/feed.rs
@ -1,11 +1,21 @@
+use askama::Values;
 use axum::http::{header, StatusCode};
 use axum::response::IntoResponse;
 use chrono::Utc;
-use rss::{ChannelBuilder, GuidBuilder, Item, ItemBuilder};
+use rss::{ChannelBuilder, EnclosureBuilder, GuidBuilder, Item, ItemBuilder};

 use crate::blog_posts::blog_post_model::{BlogPostMetadata, BLOG_POST_PATH};
+use crate::filters::{parse_markdown, truncate_md};
 use crate::post_utils::post_listing::get_post_list;

+struct EmptyValues;
+
+impl Values for EmptyValues {
+    fn get_value<'a>(&'a self, _key: &str) -> Option<&'a dyn std::any::Any> {
+        return None;
+    }
+}
+
 pub async fn render_rss_feed() -> Result<impl IntoResponse, StatusCode> {
    let mut post_list = get_post_list::<BlogPostMetadata>(BLOG_POST_PATH)
        .await
@ -25,8 +35,30 @@ pub async fn render_rss_feed() -> Result<impl IntoResponse, StatusCode> {
            ItemBuilder::default()
                .title(Some(post.metadata.title))
                .link(Some(format!("https://michalvanko.dev/blog/{}", post.slug)))
-                // TODO Description should be just a preview
-                .description(None)
+                .description({
+                    let truncated = truncate_md(&post.body, &EmptyValues, 2)
+                        .unwrap_or("Can't parse post body".to_string());
+                    let parsed_md = parse_markdown(&truncated, &EmptyValues)
+                        .unwrap_or("Can't process truncated post body".to_string());
+                    Some(parsed_md)
+                })
+                .content({
+                    let parsed_md = parse_markdown(&post.body, &EmptyValues)
+                        .unwrap_or("Can't process full post body".to_string());
+                    Some(parsed_md)
+                })
+                .enclosure({
+                    post.metadata.thumbnail.map(|src| {
+                        let mime_type = mime_guess::from_path(&src)
+                            .first()
+                            .map(|mime| mime.to_string())
+                            .unwrap_or("image".to_string());
+                        EnclosureBuilder::default()
+                            .url(src)
+                            .mime_type(mime_type)
+                            .build()
+                    })
+                })
                .guid(Some(
                    GuidBuilder::default()
                        .value(format!("https://michalvanko.dev/blog/{}", post.slug))
--- a/src/filters/markdown.rs
+++ b/src/filters/markdown.rs
@ -1,3 +1,4 @@
+use core::fmt;
 use std::path::Path;

 use image::image_dimensions;
@ -19,7 +20,10 @@ enum TextKind {
 }

 // pub fn parse_markdown(markdown: &str) -> ::askama::Result<String>
-pub fn parse_markdown(markdown: &str) -> ::askama::Result<String> {
+pub fn parse_markdown<T: fmt::Display>(
+    markdown: T,
+    _: &dyn askama::Values,
+) -> ::askama::Result<String> {
    let mut options = Options::empty();
    options.insert(Options::ENABLE_TABLES);
    options.insert(Options::ENABLE_FOOTNOTES);
@ -34,7 +38,8 @@ pub fn parse_markdown(markdown: &str) -> ::askama::Result<String> {
    let theme = theme_set.themes.get("InspiredGitHub").unwrap();
    let mut heading_ended: Option<bool> = None;

-    let parser = Parser::new_ext(markdown, options).map(|event| match event {
+    let mds = markdown.to_string();
+    let parser = Parser::new_ext(&mds, options).map(|event| match event {
        /*
        Parsing images considers `alt` attribute as inner `Text` event
        Therefore the `[alt]` is rendered in html as subtitle
--- a/src/filters/pretty_date.rs
+++ b/src/filters/pretty_date.rs
@ -1,7 +1,7 @@
 use chrono::{DateTime, Utc};

 // This filter does not have extra arguments
-pub fn pretty_date(date_time: &DateTime<Utc>) -> ::askama::Result<String> {
+pub fn pretty_date(date_time: &DateTime<Utc>, _: &dyn askama::Values) -> ::askama::Result<String> {
    let formatted = format!("{}", date_time.format("%e %B %Y"));
    Ok(formatted)
 }
--- a/src/filters/truncate_md.rs
+++ b/src/filters/truncate_md.rs
@ -2,7 +2,7 @@

 const FORBIDDEN_LINES: [&str; 5] = [" ", "#", "-", "!", "<"];

-pub fn truncate_md(body: &str, rows: usize) -> ::askama::Result<String> {
+pub fn truncate_md(body: &str, _: &dyn askama::Values, rows: usize) -> ::askama::Result<String> {
    let description = body
        .lines()
        .filter(|line| {
--- a/src/main.rs
+++ b/src/main.rs
@ -38,6 +38,7 @@ async fn main() {
        .nest_service("/egg-fetcher", ServeDir::new("static/egg-fetcher"))
        .nest_service("/svg", ServeDir::new("static/svg"))
        .nest_service("/config.yml", ServeDir::new("static/resources/config.yml")) // Decap CMS config
+        .nest_service("/resources", ServeDir::new("static/resources"))
        .nest_service("/robots.txt", ServeDir::new("robots.txt"));

    #[cfg(debug_assertions)]
@ -55,5 +56,5 @@ async fn main() {
 // - fotos
 // THINK deploy to alula? rather then katelyn? can be change whenever
 //
-// TODO view page transitions
 // TODO cookbook
+// TODO remove m-logo-svg from justfile and mention it in some article!!!
--- a/src/pages/admin.rs
+++ b/src/pages/admin.rs
@ -1,9 +1,17 @@
 use askama::Template;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};

 #[derive(Template)]
 #[template(path = "admin.html")]
 pub struct AdminPageTemplate {}

-pub async fn render_admin() -> AdminPageTemplate {
-    AdminPageTemplate {}
+pub async fn render_admin() -> Result<impl IntoResponse, StatusCode> {
+    Ok(Html(
+        AdminPageTemplate {}
+            .render()
+            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR),
+    ))
 }
--- a/src/pages/animated_logo.rs
+++ b/src/pages/animated_logo.rs
@ -0,0 +1,13 @@
+use askama::Template;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};
+
+#[derive(Template)]
+#[template(path = "assets/animated_logo.html")]
+pub struct AnimatedLogoTemplate {}
+
+pub async fn render_animated_logo() -> Result<impl IntoResponse, StatusCode> {
+    Ok(Html(AnimatedLogoTemplate {}.render().unwrap()))
+}
--- a/src/pages/blog_post_list.rs
+++ b/src/pages/blog_post_list.rs
@ -1,6 +1,8 @@
+use askama::Template;
 use axum::{
    extract::{OriginalUri, Path},
    http::StatusCode,
+    response::{Html, IntoResponse},
 };
 use tokio::try_join;
 use tracing::debug;
@ -22,7 +24,7 @@ use super::post_list::PostListTemplate;
 pub async fn render_blog_post_list(
    tag: Option<Path<String>>,
    OriginalUri(original_uri): OriginalUri,
-) -> Result<PostListTemplate, StatusCode> {
+) -> Result<impl IntoResponse, StatusCode> {
    // I will forget what happens here in a week. But essentially it's pattern matching and shadowing
    let tag = tag.map(|Path(tag)| tag);

@ -50,14 +52,18 @@ pub async fn render_blog_post_list(
        ("Blog posts".to_string(), "Blog posts".to_string())
    };

-    Ok(PostListTemplate {
-        title,
-        og_title,
-        segment: Segment::Blog,
-        posts,
-        header_props,
-        tags: blog_tags,
-        featured_projects,
-        current_url: original_uri.to_string(),
-    })
+    Ok(Html(
+        PostListTemplate {
+            title,
+            og_title,
+            segment: Segment::Blog,
+            posts,
+            header_props,
+            tags: blog_tags,
+            featured_projects,
+            current_url: original_uri.to_string(),
+        }
+        .render()
+        .unwrap(),
+    ))
 }
--- a/src/pages/blog_post_page.rs
+++ b/src/pages/blog_post_page.rs
@ -1,9 +1,12 @@
 use askama::Template;
 use axum::extract::OriginalUri;
+use axum::response::{Html, IntoResponse};
 use axum::{extract::Path, http::StatusCode};
 use chrono::{DateTime, Utc};

-use crate::blog_posts::blog_post_model::BLOG_POST_PATH;
+use crate::blog_posts::blog_post_model::{Segment, BLOG_POST_PATH};
+use crate::post_utils::post_listing::get_post_list;
+use crate::post_utils::post_parser::ParseResult;
 use crate::{
    blog_posts::blog_post_model::BlogPostMetadata, components::site_header::Link, filters,
    post_utils::post_parser::parse_post,
@ -18,47 +21,84 @@ pub struct BlogPostTemplate {
    pub body: String,
    pub date: DateTime<Utc>,
    pub tags: Vec<String>,
-    pub segment: String,
+    pub segment: Segment,
    pub header_props: HeaderProps,
    pub slug: String,
    pub thumbnail: Option<String>,
+    pub recommended_posts: Vec<ParseResult<BlogPostMetadata>>,
 }

 pub async fn render_blog_post(
    Path(post_id): Path<String>,
    OriginalUri(original_uri): OriginalUri,
-) -> Result<BlogPostTemplate, StatusCode> {
+) -> Result<impl IntoResponse, StatusCode> {
    let path = format!("{}/{}.md", BLOG_POST_PATH, post_id);
-    let parse_post = parse_post::<BlogPostMetadata>(&path);
-    let parsed = parse_post.await?;
+    let post = parse_post::<BlogPostMetadata>(&path).await?;
    let segment = if original_uri.to_string().starts_with("/blog") {
-        "blog"
+        Segment::Blog
    } else if original_uri.to_string().starts_with("/broadcasts") {
-        "broadcasts"
+        Segment::Broadcasts
    } else {
-        "blog"
+        Segment::Blog
    };

+    let mut recommended_posts = get_recommended_posts(&segment, &post.metadata.tags).await?;
+    recommended_posts.retain(|post| post.slug != post_id);
+    recommended_posts.sort_by_key(|post| post.slug.to_string());
+    recommended_posts.reverse();
+    let recommended_posts = recommended_posts.into_iter().take(2).collect::<Vec<_>>();
+
    let header_props = match segment {
-        "blog" => HeaderProps::with_back_link(Link {
+        Segment::Blog => HeaderProps::with_back_link(Link {
            href: "/blog".to_string(),
            label: "All posts".to_string(),
        }),
-        "broadcasts" => HeaderProps::with_back_link(Link {
+        Segment::Broadcasts => HeaderProps::with_back_link(Link {
            href: "/broadcasts".to_string(),
            label: "All broadcasts".to_string(),
        }),
        _ => HeaderProps::default(),
    };

-    Ok(BlogPostTemplate {
-        title: parsed.metadata.title,
-        date: parsed.metadata.date,
-        tags: parsed.metadata.tags,
-        body: parsed.body,
-        slug: parsed.slug,
-        segment: segment.to_string(),
-        thumbnail: parsed.metadata.thumbnail,
-        header_props,
-    })
+    Ok(Html(
+        BlogPostTemplate {
+            title: post.metadata.title,
+            date: post.metadata.date,
+            tags: post.metadata.tags,
+            body: post.body,
+            slug: post.slug,
+            segment,
+            thumbnail: post.metadata.thumbnail,
+            header_props,
+            recommended_posts,
+        }
+        .render()
+        .unwrap(),
+    ))
+}
+
+async fn get_recommended_posts(
+    segment: &Segment,
+    tags: &[String],
+) -> Result<Vec<ParseResult<BlogPostMetadata>>, StatusCode> {
+    let posts = get_post_list::<BlogPostMetadata>(BLOG_POST_PATH).await?;
+
+    let recommended_posts = posts
+        .into_iter()
+        .filter(|post| {
+            let is_same_segment = post
+                .metadata
+                .segments
+                .iter()
+                .any(|post_segment| post_segment == segment);
+            let has_same_tags = post
+                .metadata
+                .tags
+                .iter()
+                .any(|post_tag| tags.contains(post_tag));
+            is_same_segment && has_same_tags
+        })
+        .collect::<Vec<_>>();
+
+    Ok(recommended_posts)
 }
--- a/src/pages/broadcast_list.rs
+++ b/src/pages/broadcast_list.rs
@ -1,6 +1,8 @@
+use askama::Template;
 use axum::{
    extract::{OriginalUri, Path},
    http::StatusCode,
+    response::{Html, IntoResponse},
 };
 use tokio::try_join;
 use tracing::debug;
@ -21,7 +23,7 @@ use super::post_list::PostListTemplate;
 pub async fn render_broadcast_post_list(
    tag: Option<Path<String>>,
    OriginalUri(original_uri): OriginalUri,
-) -> Result<PostListTemplate, StatusCode> {
+) -> Result<impl IntoResponse, StatusCode> {
    // I will forget what happens here in a week. But essentially it's pattern matching and shadowing
    let tag = tag.map(|Path(tag)| tag);

@ -50,14 +52,18 @@ pub async fn render_broadcast_post_list(
        "Broadcasts".to_string()
    };

-    Ok(PostListTemplate {
-        title: title.clone(),
-        og_title: title,
-        segment: Segment::Broadcasts,
-        posts,
-        header_props,
-        tags: popular_tags,
-        featured_projects,
-        current_url: original_uri.to_string(),
-    })
+    Ok(Html(
+        PostListTemplate {
+            title: title.clone(),
+            og_title: title,
+            segment: Segment::Broadcasts,
+            posts,
+            header_props,
+            tags: popular_tags,
+            featured_projects,
+            current_url: original_uri.to_string(),
+        }
+        .render()
+        .unwrap(),
+    ))
 }
--- a/src/pages/contact.rs
+++ b/src/pages/contact.rs
@ -1,5 +1,8 @@
 use askama::Template;
-use axum::http::StatusCode;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};

 use crate::components::site_header::HeaderProps;

@ -18,7 +21,7 @@ pub struct ContactPageTemplate {
    pub links: Vec<ContactLink>,
 }

-pub async fn render_contact() -> Result<ContactPageTemplate, StatusCode> {
+pub async fn render_contact() -> Result<impl IntoResponse, StatusCode> {
    let links = vec![
        ContactLink {
            href: "mailto:michalvankosk@gmail.com".to_string(),
@ -44,6 +47,12 @@ pub async fn render_contact() -> Result<ContactPageTemplate, StatusCode> {
            title: "YouTube channel".to_string(),
            svg: "youtube".to_string(),
        },
+        ContactLink {
+            href: "https://mastodon.online/@michalvankodev".to_string(),
+            label: "Mastodon".to_string(),
+            title: "Mastodon profile".to_string(),
+            svg: "mastodon".to_string(),
+        },
        ContactLink {
            href: "https://instagram.com/michalvankodev".to_string(),
            label: "Instagram".to_string(),
@ -70,9 +79,13 @@ pub async fn render_contact() -> Result<ContactPageTemplate, StatusCode> {
        },
    ];

-    Ok(ContactPageTemplate {
-        title: "Contact".to_owned(),
-        header_props: HeaderProps::default(),
-        links,
-    })
+    Ok(Html(
+        ContactPageTemplate {
+            title: "Contact".to_owned(),
+            header_props: HeaderProps::default(),
+            links,
+        }
+        .render()
+        .unwrap(),
+    ))
 }
--- a/src/pages/index.rs
+++ b/src/pages/index.rs
@ -1,7 +1,10 @@
 use std::rc::Rc;

 use askama::Template;
-use axum::http::StatusCode;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};
 use tokio::try_join;

 use crate::{
@ -26,7 +29,7 @@ pub struct IndexTemplate {
    featured_broadcasts: Vec<Rc<ParseResult<BlogPostMetadata>>>,
 }

-pub async fn render_index() -> Result<IndexTemplate, StatusCode> {
+pub async fn render_index() -> Result<impl IntoResponse, StatusCode> {
    let (blog_tags, broadcasts_tags, all_posts, featured_projects) = try_join!(
        get_popular_tags(Some(Segment::Blog)),
        get_popular_tags(Some(Segment::Broadcasts)),
@ -44,12 +47,16 @@ pub async fn render_index() -> Result<IndexTemplate, StatusCode> {
    let featured_broadcasts =
        ref_get_posts_by_segment(&all_posts_rc, &[Segment::Broadcasts, Segment::Featured]);

-    Ok(IndexTemplate {
-        header_props: HeaderProps::default(),
-        blog_tags,
-        broadcasts_tags,
-        featured_blog_posts,
-        featured_projects,
-        featured_broadcasts,
-    })
+    Ok(Html(
+        IndexTemplate {
+            header_props: HeaderProps::default(),
+            blog_tags,
+            broadcasts_tags,
+            featured_blog_posts,
+            featured_projects,
+            featured_broadcasts,
+        }
+        .render()
+        .unwrap(),
+    ))
 }
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@ -1,4 +1,5 @@
 pub mod admin;
+pub mod animated_logo;
 pub mod blog_post_list;
 pub mod blog_post_page;
 pub mod broadcast_list;
--- a/src/pages/not_found.rs
+++ b/src/pages/not_found.rs
@ -1,5 +1,9 @@
 use askama::Template;
-use axum::{extract::OriginalUri, http::StatusCode};
+use axum::{
+    extract::OriginalUri,
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};
 use tracing::info;

 use crate::components::site_header::HeaderProps;
@ -13,13 +17,17 @@ pub struct NotFoundPage {

 pub async fn render_not_found(
    OriginalUri(original_uri): OriginalUri,
-) -> Result<(StatusCode, NotFoundPage), StatusCode> {
+) -> Result<(StatusCode, impl IntoResponse), StatusCode> {
    info!("{original_uri} not found");
    Ok((
        StatusCode::NOT_FOUND,
-        NotFoundPage {
-            title: "This page does not exists".to_owned(),
-            header_props: HeaderProps::default(),
-        },
+        Html(
+            NotFoundPage {
+                title: "This page does not exists".to_owned(),
+                header_props: HeaderProps::default(),
+            }
+            .render()
+            .unwrap(),
+        ),
    ))
 }
--- a/src/pages/portfolio.rs
+++ b/src/pages/portfolio.rs
@ -1,5 +1,8 @@
 use askama::Template;
-use axum::http::StatusCode;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};
 use serde::Deserialize;

 use crate::{
@ -50,7 +53,7 @@ pub struct PortfolioTemplate {
    pub technology_list: Vec<String>,
 }

-pub async fn render_portfolio() -> Result<PortfolioTemplate, StatusCode> {
+pub async fn render_portfolio() -> Result<impl IntoResponse, StatusCode> {
    let portfolio = parse_post::<PortfolioPageModel>("_pages/portfolio.md").await?;

    let mut project_list = get_post_list::<ProjectMetadata>("_projects").await?;
@ -80,12 +83,12 @@ pub async fn render_portfolio() -> Result<PortfolioTemplate, StatusCode> {
            title: "E-mail address".to_string(),
            svg: "mail".to_string(),
        },
-        ContactLink {
-            href: "tel:+421-905-372-947".to_string(),
-            label: "+421 905 372 947".to_string(),
-            title: "Phone".to_string(),
-            svg: "phone".to_string(),
-        },
+        // ContactLink {
+        //     href: "tel:+421-905-372-947".to_string(),
+        //     label: "+421 905 372 947".to_string(),
+        //     title: "Phone".to_string(),
+        //     svg: "phone".to_string(),
+        // },
        ContactLink {
            href: "https://github.com/michalvankodev".to_string(),
            label: "GitHub".to_string(),
@ -126,14 +129,18 @@ pub async fn render_portfolio() -> Result<PortfolioTemplate, StatusCode> {
    .map(|str| str.to_owned())
    .collect();

-    Ok(PortfolioTemplate {
-        title: "Portfolio".to_owned(),
-        body: portfolio.body,
-        header_props: HeaderProps::default(),
-        project_list,
-        workplace_list,
-        education_list,
-        contact_links,
-        technology_list,
-    })
+    Ok(Html(
+        PortfolioTemplate {
+            title: "Portfolio".to_owned(),
+            body: portfolio.body,
+            header_props: HeaderProps::default(),
+            project_list,
+            workplace_list,
+            education_list,
+            contact_links,
+            technology_list,
+        }
+        .render()
+        .unwrap(),
+    ))
 }
--- a/src/pages/project_list.rs
+++ b/src/pages/project_list.rs
@ -1,5 +1,8 @@
 use askama::Template;
-use axum::http::StatusCode;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};

 use crate::{
    components::site_header::HeaderProps,
@ -16,16 +19,20 @@ pub struct ProjectListTemplate {
    pub header_props: HeaderProps,
 }

-pub async fn render_projects_list() -> Result<ProjectListTemplate, StatusCode> {
+pub async fn render_projects_list() -> Result<impl IntoResponse, StatusCode> {
    let mut project_list = get_post_list::<ProjectMetadata>("_projects").await?;

    project_list.sort_by_key(|post| post.slug.to_string());
    project_list.retain(|project| project.metadata.displayed);
    project_list.reverse();

-    Ok(ProjectListTemplate {
-        title: "Showcase".to_owned(),
-        header_props: HeaderProps::default(),
-        project_list,
-    })
+    Ok(Html(
+        ProjectListTemplate {
+            title: "Showcase".to_owned(),
+            header_props: HeaderProps::default(),
+            project_list,
+        }
+        .render()
+        .unwrap(),
+    ))
 }
--- a/src/pages/showcase/egg_fetcher.rs
+++ b/src/pages/showcase/egg_fetcher.rs
@ -1,5 +1,8 @@
 use askama::Template;
-use axum::http::StatusCode;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse},
+};

 use crate::components::site_header::HeaderProps;

@ -9,8 +12,12 @@ pub struct EggFetcherShowcaseTemplate {
    header_props: HeaderProps,
 }

-pub async fn render_egg_fetcher() -> Result<EggFetcherShowcaseTemplate, StatusCode> {
-    Ok(EggFetcherShowcaseTemplate {
-        header_props: HeaderProps::default(),
-    })
+pub async fn render_egg_fetcher() -> Result<impl IntoResponse, StatusCode> {
+    Ok(Html(
+        EggFetcherShowcaseTemplate {
+            header_props: HeaderProps::default(),
+        }
+        .render()
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR),
+    ))
 }
--- a/src/picture_generator/image_src_generator.rs
+++ b/src/picture_generator/image_src_generator.rs
@ -23,6 +23,11 @@ pub fn generate_image_with_src(
    let resolutions = [(width, height, 1.)];

    let exported_formats = get_export_formats(orig_img_path);
+
+    if exported_formats.is_empty() {
+        return Ok(orig_img_path.to_string());
+    }
+
    let exported_format = *exported_formats.first().unwrap();

    let path_to_generated_arc = Arc::new(path_to_generated);
--- a/src/picture_generator/picture_markup_generator.rs
+++ b/src/picture_generator/picture_markup_generator.rs
@ -262,7 +262,8 @@ pub fn get_export_formats(orig_img_path: &str) -> Vec<ExportFormat> {
 fn test_get_export_formats() {
    assert_eq!(
        get_export_formats("/images/uploads/img_name.jpg"),
-        vec![ExportFormat::Avif, ExportFormat::Jpeg]
+        // vec![ExportFormat::Avif, ExportFormat::Jpeg]
+        vec![ExportFormat::Jpeg]
    )
 }
 #[test]
@ -292,24 +293,21 @@ fn test_generate_picture_markup() {
    let height = 200;
    let orig_img_path = "/images/uploads/2020-03-23_20-24-06_393.jpg";
    let result = indoc! {
-        r#"<picture>
-            <source
-                srcset="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.avif 1x, /generated_images/images/uploads/2020-03-23_20-24-06_393_450x300.avif 1.5x, /generated_images/images/uploads/2020-03-23_20-24-06_393_600x400.avif 2x, /generated_images/images/uploads/2020-03-23_20-24-06_393_900x600.avif 3x, /generated_images/images/uploads/2020-03-23_20-24-06_393_1200x800.avif 4x"
-                type="image/avif"
-            >
-<source
-                srcset="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.jpg 1x, /generated_images/images/uploads/2020-03-23_20-24-06_393_450x300.jpg 1.5x, /generated_images/images/uploads/2020-03-23_20-24-06_393_600x400.jpg 2x, /generated_images/images/uploads/2020-03-23_20-24-06_393_900x600.jpg 3x, /generated_images/images/uploads/2020-03-23_20-24-06_393_1200x800.jpg 4x"
-                type="image/jpeg"
-            >
-            <img
-            src="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.jpg"
-            width="300"
-            height="200"
-            alt="Testing image alt"
-        >
-        </picture>"#,
+r#"<picture>
+    <source
+    srcset="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.jpg 1x, /generated_images/images/uploads/2020-03-23_20-24-06_393_450x300.jpg 1.5x, /generated_images/images/uploads/2020-03-23_20-24-06_393_600x400.jpg 2x, /generated_images/images/uploads/2020-03-23_20-24-06_393_900x600.jpg 3x, /generated_images/images/uploads/2020-03-23_20-24-06_393_1200x800.jpg 4x"
+    type="image/jpeg"
+>
+    <img
+    src="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.jpg"
+    width="300"
+    height="200"
+    alt="Testing image alt"
+    
+>
+</picture>"#,
    };
-    assert_eq!(
+    pretty_assertions::assert_eq!(
        generate_picture_markup(orig_img_path, width, height, "Testing image alt", None,)
            .expect("picture markup has to be generated"),
        result
--- a/src/router.rs
+++ b/src/router.rs
@ -1,14 +1,21 @@
 use crate::{
    feed::render_rss_feed,
    pages::{
-        admin::render_admin, blog_post_list::render_blog_post_list,
-        blog_post_page::render_blog_post, broadcast_list::render_broadcast_post_list,
-        contact::render_contact, index::render_index, not_found::render_not_found,
-        portfolio::render_portfolio, project_list::render_projects_list,
-        showcase::egg_fetcher::render_egg_fetcher,
+        admin::render_admin, animated_logo::render_animated_logo,
+        blog_post_list::render_blog_post_list, blog_post_page::render_blog_post,
+        broadcast_list::render_broadcast_post_list, contact::render_contact, index::render_index,
+        not_found::render_not_found, portfolio::render_portfolio,
+        project_list::render_projects_list, showcase::egg_fetcher::render_egg_fetcher,
    },
 };
-use axum::{extract::MatchedPath, http::Request, routing::get, Router};
+use askama::Template;
+use axum::{
+    extract::MatchedPath,
+    http::{Request, StatusCode},
+    response::IntoResponse,
+    routing::get,
+    Router,
+};
 use tower_http::trace::TraceLayer;
 use tracing::info_span;

@ -16,14 +23,15 @@ pub fn get_router() -> Router {
    Router::new()
        .route("/", get(render_index))
        .route("/blog", get(render_blog_post_list))
-        .route("/blog/tags/:tag", get(render_blog_post_list))
-        .route("/blog/:post_id", get(render_blog_post))
+        .route("/blog/tags/{tag}", get(render_blog_post_list))
+        .route("/blog/{post_id}", get(render_blog_post))
        .route("/broadcasts", get(render_broadcast_post_list))
-        .route("/broadcasts/tags/:tag", get(render_broadcast_post_list))
-        .route("/broadcasts/:post_id", get(render_blog_post))
+        .route("/broadcasts/tags/{tag}", get(render_broadcast_post_list))
+        .route("/broadcasts/{post_id}", get(render_blog_post))
        .route("/contact", get(render_contact))
        .route("/showcase", get(render_projects_list))
-        .route("/showcase/:project_slug", get(render_egg_fetcher))
+        .route("/showcase/m-logo-svg", get(render_animated_logo))
+        .route("/showcase/{project_slug}", get(render_egg_fetcher))
        .route("/portfolio", get(render_portfolio))
        .route("/admin", get(render_admin))
        .route("/feed.xml", get(render_rss_feed))
--- a/static/images/uploads/aperture-icon.svg
+++ b/static/images/uploads/aperture-icon.svg
@ -0,0 +1,3 @@
+<svg height="{{height}}" width="{{width}}" x="{{x}}" y="{{y}}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0h48v48h-48z" fill="none"/><path d="M18.8 21l9.53-16.51c-1.39-.31-2.84-.49-4.33-.49-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68l-7.32 12.68h19.31zm.52 2h-14.98l.58 1 9.53 16.5c3.26-3.56 5.27-8.29 5.27-13.5 0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5c-3.26 3.56-5.27 8.29-5.27 13.5 0 1.37.14 2.71.4 4h14.98l-2.31-4zm-12.15 6c1.84 5.85 6.3 10.52 11.99 12.68l7.32-12.68h-19.31zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51l-7.33-12.69-1.85 3.2z"/>
+  </svg>
--- a/static/images/uploads/git-icon-logo-svg-vector.svg
+++ b/static/images/uploads/git-icon-logo-svg-vector.svg
@ -0,0 +1 @@
+<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M251.172 116.594L139.4 4.828c-6.433-6.437-16.873-6.437-23.314 0l-23.21 23.21 29.443 29.443c6.842-2.312 14.688-.761 20.142 4.693 5.48 5.489 7.02 13.402 4.652 20.266l28.375 28.376c6.865-2.365 14.786-.835 20.269 4.657 7.663 7.66 7.663 20.075 0 27.74-7.665 7.666-20.08 7.666-27.749 0-5.764-5.77-7.188-14.235-4.27-21.336l-26.462-26.462-.003 69.637a19.82 19.82 0 0 1 5.188 3.71c7.663 7.66 7.663 20.076 0 27.747-7.665 7.662-20.086 7.662-27.74 0-7.663-7.671-7.663-20.086 0-27.746a19.654 19.654 0 0 1 6.421-4.281V94.196a19.378 19.378 0 0 1-6.421-4.281c-5.806-5.798-7.202-14.317-4.227-21.446L81.47 39.442l-76.64 76.635c-6.44 6.443-6.44 16.884 0 23.322l111.774 111.768c6.435 6.438 16.873 6.438 23.316 0l111.251-111.249c6.438-6.44 6.438-16.887 0-23.324" fill="#DE4C36"/></svg>
--- a/static/resources/anime.min.js
+++ b/static/resources/anime.min.js
--- a/static/svg/input/mastodon.svg
+++ b/static/svg/input/mastodon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>
--- a/styles/input.css
+++ b/styles/input.css
@ -1,63 +1,113 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Baloo2", "Baloo2 Noto Fallback", "Baloo2 Fallback", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --text-readxl: 1.75rem;
+  --text-readxl--line-height: 2.25rem;
+  --text-readxl--letter-spacing: -0.015rem;
+  --text-readxl--font-weight: 400;
+
+  --spacing-note: 60rem;
+  --spacing-read: 64rem;
+  --spacing-image: min(70rem, 95vw);
+  --spacing-maxindex: 100rem;
+
+  --color-blue-50: #f1f7fe;
+  --color-blue-100: #e1effd;
+  --color-blue-200: #bddefa;
+  --color-blue-300: #82c3f7;
+  --color-blue-400: #42a6f0;
+  --color-blue-500: #1789e0;
+  --color-blue-600: #0a6cbf;
+  --color-blue-700: #0a569a;
+  --color-blue-800: #0c4980;
+  --color-blue-900: #103e6a;
+  --color-blue-950: #0b2746;
+
+  --color-pink-50: #fff4fd;
+  --color-pink-100: #ffe7fb;
+  --color-pink-200: #ffcff7;
+  --color-pink-300: #fea6eb;
+  --color-pink-400: #fc76dd;
+  --color-pink-500: #f342ca;
+  --color-pink-600: #d722a9;
+  --color-pink-700: #b31889;
+  --color-pink-800: #92166e;
+  --color-pink-900: #771859;
+  --color-pink-950: #500238;
+
+  --color-purple-50: #F8F5FC;
+  --color-purple-100: #D5C2ED;
+  --color-purple-200: #B28EDE;
+  --color-purple-300: #8F5BCF;
+  --color-purple-400: #6D30B9;
+  --color-purple-500: #5F2AA2;
+  --color-purple-600: #52248A;
+  --color-purple-700: #441E73;
+  --color-purple-800: #36185C;
+  --color-purple-900: #281244;
+  --color-purple-950: #1A0C2D;
+}
+
+@font-face {
+  font-family: 'Baloo2';
+  font-style: normal;
+  font-display: swap;
+  src:
+    local('Baloo2'),
+    url(/fonts/baloo2/Baloo2-Latin-Variable-wght.woff2) format('woff2');
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Baloo 2';
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url(/fonts/baloo2/Baloo2-Latin-Variable-ext-wght.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Baloo2 Fallback';
+  font-style: normal;
+  font-weight: 400;
+  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Helvetica Neue'),
+    local('Arial');
+  ascent-override: 111.2%;
+  descent-override: 54.05%;
+  line-gap-override: 0%;
+  size-adjust: 96.95%;
+}
+
+@font-face {
+  font-family: 'Baloo2 Noto Fallback';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Noto Sans');
+  ascent-override: 88%;
+  descent-override: none;
+  line-gap-override: 0%;
+  size-adjust: 92%;
+}

@layer base {
-  @font-face {
-    font-family: 'Baloo2';
-    font-style: normal;
-    font-display: swap;
-    src:
-      local('Baloo2'),
-      url(/fonts/baloo2/Baloo2-Latin-Variable-wght.woff2) format('woff2');
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'Baloo 2';
-    font-style: normal;
-    font-weight: 400 800;
-    font-display: swap;
-    src: url(/fonts/baloo2/Baloo2-Latin-Variable-ext-wght.woff2) format('woff2');
-    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
-      U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  a {
+    @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
  }

-  @font-face {
-    font-family: 'Baloo2 Fallback';
-    font-style: normal;
-    font-weight: 400;
-    src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Helvetica Neue'),
-      local('Arial');
-    ascent-override: 111.2%;
-    descent-override: 54.05%;
-    line-gap-override: 0%;
-    size-adjust: 96.95%;
+  strong {
+    @apply font-medium;
  }
-
-  @font-face {
-    font-family: 'Baloo2 Noto Fallback';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Noto Sans');
-    ascent-override: 88%;
-    descent-override: none;
-    line-gap-override: 0%;
-    size-adjust: 92%;
-  }
-}
-
-a {
-  @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
-}
-
-strong {
-  @apply font-medium;
 }

 .article-body {
  h1 {
    @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
  }
+
  h2 {
    @apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
  }
@ -82,15 +132,16 @@ strong {
    @apply p-4;

    img {
-      @apply rounded shadow-md mx-auto lg:max-w-image;
+      @apply rounded-sm shadow-md mx-auto lg:max-w-image;
    }
  }
+
  figcaption {
    @apply mt-2 text-center text-sm italic text-blue-800 md:text-base lg:text-lg;
  }

  table {
-    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
+    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded-sm md:text-base lg:text-xl lg:my-8;
  }

  thead {
@ -119,11 +170,11 @@ strong {
  }

  :not(pre) code {
-    @apply text-pink-900 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
+    @apply text-pink-900 rounded-sm border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
  }

  pre code pre {
-    @apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
+    @apply mx-2 rounded-sm lg:mx-auto lg:text-lg shadow-xs lg:max-w-note;
  }

  ul,
@ -138,12 +189,13 @@ strong {
  ul {
    @apply list-disc;
  }
+
  ol {
    @apply list-decimal;
  }

  iframe {
-    @apply rounded shadow-md mx-auto lg:max-w-image;
+    @apply rounded-sm shadow-md mx-auto lg:max-w-image;
  }
 }

@ -280,4 +332,4 @@ article a {
 /* animation-duration: 5.5s; */
 /* transition: transform 5.4s ease-in-out; */
 /* opacity: 1; */
-/* } */
+/* } */
--- a/styles/output.css
+++ b/styles/output.css
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,112 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	content: ["./templates/**/**.html"],
-	theme: {
-		extend: {
-			fontFamily: {
-				sans: [
-					"Baloo2",
-					"Baloo2 Noto Fallback",
-					"Baloo2 Fallback",
-					"ui-sans-serif",
-					"system-ui",
-					"sans-serif",
-					"Apple Color Emoji",
-					"Segoe UI Emoji",
-					"Segoe UI Symbol",
-					"Noto Color Emoji",
-				],
-			},
-			spacing: {
-				note: "60rem",
-				read: "64rem",
-				image: "min(70rem, 95vw)",
-				maxindex: "100rem",
-			},
-			width: {
-				note: "60rem",
-				read: "64rem",
-				image: "min(70rem, 95vw)",
-				maxindex: "100rem",
-			},
-			fontSize: {
-				readxl: [
-					"1.75rem",
-					{
-						lineHeight: "2.25rem",
-						letterSpacing: "-0.015em",
-						fontWeight: "400",
-					},
-				],
-			},
-			colors: {
-				// blue: {
-				// 	50: "#ecf6fe",
-				// 	100: "#d9edfc",
-				// 	200: "#b3dbf9",
-				// 	300: "#8ecaf6",
-				// 	400: "#68b8f3",
-				// 	500: "#42a6f0",
-				// 	600: "#3585c0",
-				// 	700: "#286490",
-				// 	800: "#1F4E71",
-				// 	900: "#173A54",
-				// 	950: "#0F2637",
-				// },
-				blue: {
-					50: "#f1f7fe",
-					100: "#e1effd",
-					200: "#bddefa",
-					300: "#82c3f7",
-					400: "#42a6f0",
-					500: "#1789e0",
-					600: "#0a6cbf",
-					700: "#0a569a",
-					800: "#0c4980",
-					900: "#103e6a",
-					950: "#0b2746",
-				},
-				// pink: {
-				// 	50: "#FFFBFE",
-				// 	100: "#FFE4F9",
-				// 	200: "#FECEF4",
-				// 	300: "#FEB8EF",
-				// 	400: "#fea6eb",
-				// 	500: "#D38AC3",
-				// 	600: "#B476A7",
-				// 	700: "#96628B",
-				// 	800: "#774E6E",
-				// 	900: "#593A52",
-				// 	950: "#3A2636",
-				// },
-				pink: {
-					50: "#fff4fd",
-					100: "#ffe7fb",
-					200: "#ffcff7",
-					300: "#fea6eb",
-					400: "#fc76dd",
-					500: "#f342ca",
-					600: "#d722a9",
-					700: "#b31889",
-					800: "#92166e",
-					900: "#771859",
-					950: "#500238",
-				},
-				purple: {
-					50: "#F8F5FC",
-					100: "#D5C2ED",
-					200: "#B28EDE",
-					300: "#8F5BCF",
-					400: "#6D30B9",
-					500: "#5F2AA2",
-					600: "#52248A",
-					700: "#441E73",
-					800: "#36185C",
-					900: "#281244",
-					950: "#1A0C2D",
-				},
-			},
-		},
-	},
-	plugins: [],
-};
--- a/templates/assets/animated_logo.html
+++ b/templates/assets/animated_logo.html
@ -0,0 +1,81 @@
+    {% include "icons/m-logo-animated.svg" %}
+    <script src="/resources/anime.min.js"></script>
+    <script>
+      var svg = document.getElementById("m-logo")
+      svg.setAttribute("visibility", "visible");
+      var borderTimeline = anime.timeline({
+        duration: 2000,
+        easing: 'easeInOutSine',
+      })
+      
+      borderTimeline.add({
+        targets: '#m-logo #border-start',
+        strokeDashoffset: [anime.setDashoffset, -310],
+        duration: 2000,
+        easing: 'easeOutExpo',
+        begin: (animation) => {
+          const target = animation.animatables[0].target
+          target.setAttribute("visibility", "visible")
+        }
+      }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter-start',
+        strokeDashoffset: [anime.setDashoffset, -447.4],
+        easing: 'easeOutExpo',
+        duration: 2000,
+        begin: (animation) => {
+          const target = animation.animatables[0].target
+          target.setAttribute("visibility", "visible")
+        }
+       }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #border',
+        strokeDashoffset: [anime.setDashoffset, 0],
+        easing: 'easeInOutSine',
+        duration: 2000,
+        complete: (animation) => {
+          //debugger;
+          const target = animation.animatables[0].target
+          target.setAttribute("fill", "url('#bg-gradient')")
+          var bgAnimationTimeline = anime.timeline()
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "0%",
+            stopColor: "rgba(216, 246, 255, 0.8)",
+            easing: 'easeInQuint',
+            duration: 123,
+           }) 
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "100%",
+            easing: 'easeOutExpo',
+            duration: 333,
+            complete: (animation) => {
+              const target = animation.animatables[0].target
+              target.setAttribute("stop-color", "rgba(216, 246, 255, 0.8)")
+              anime({
+                targets: '#m-logo #bg-gradient #bg-stop',
+                stopColor: "rgba(216, 246, 255, 0.3)",
+                easing: 'easeOutQuad',
+                duration: 3333,
+                direction: 'alternate',
+                loop: true,
+              });
+            }
+           }) 
+        }
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter',
+        strokeDashoffset: [anime.setDashoffset, 0],
+        easing: 'easeInOutSine',
+        duration: 1800,
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter',
+        easing: 'easeInOutSine',
+        duration: 333,
+        fill: "#32a8eb",
+        strokeWidth: "0",
+       })
+   </script>
--- a/templates/base.html
+++ b/templates/base.html
@ -16,6 +16,10 @@
      href="/feed.xml"
    />

+    <!-- Mastodon --> 
+    <link rel="me" href="https://mastodon.online/@michalvankodev" />
+    <meta name="fediverse:creator" content="@michalvankodev@mastodon.online">
+
    {% block og_meta %}
    <meta property="og:title" content="{% block title %} {{ title }} {% endblock %} @michalvankodev" />
    <meta property="og:type" content="website" />
--- a/templates/blog_post.html
+++ b/templates/blog_post.html
@ -33,7 +33,32 @@
 </article>

 <!-- TODO: Next recommendations for reading -->
-<!-- TODO: Bact to all posts -->
+<!-- TODO: Back to all posts -->

-{# footer #}
+<footer class="max-w-maxindex mx-auto">
+
+{% if recommended_posts.len() > 0 %}
+<section id="recommended-articles">
+  <hr class="border-slate-300 m-5 md:my-8">
+
+  <h2 class="m-5 mt-8 text-2xl md:text-2xl lg:text-4xl lg:mt-10 text-blue-900 lg:mb-10 font-bold">Further reading</h2>
+  <ul class="mx-5 xl:flex xl:justify-start xl:gap-10">
+    {% for post in recommended_posts %}
+    <li class="flex-1">
+      {% include "components/blog_post_preview.html" %}
+      <hr class="border-slate-300 my-5 md:my-8 xl:hidden">
+    </li>
+    {% if !loop.last %}
+      <div class="h-auto w-0 border-l border-slate-300 hidden xl:block"></div>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</section>
+{% endif %}
+
+<section class="text-center my-3 md:text-lg">
+ <a href="/blog">see all blog posts</a> 
+</section>
+</footer>
 {% endblock %}
+ <!-- xl:border-l xl:border-slate-300 xl:first:border-l-0 xl: -->
--- a/templates/components/blog_post_preview.html
+++ b/templates/components/blog_post_preview.html
@ -17,7 +17,7 @@
 		  <a rel="prefetch" href="/{{segment}}/{{post.slug}}" class="text-blue-950 visited:text-purple-700 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
-	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|truncate_md(2)|parse_markdown|safe}}</section>
+	<section class="text-base leading-7 text-slate-800 md:text-xl text-justify">{{post.body|truncate_md(2)|parse_markdown|safe}}</section>
 	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0 clear-both sm:clear-none">
    <ul class="inline-block" style="view-transition-name: post_tags_{{post.slug}}">
     {% for tag in post.metadata.tags %}
--- a/templates/components/education_card.html
+++ b/templates/components/education_card.html
@ -1,18 +0,0 @@
-<section class="flex border rounded bg-white p-3">
-	<aside class="flex justify-center items-center pr-3 shrink-0">
-  {% match education.thumbnail %}
-  {% when Some with (source) %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, "education cover", Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
-  <figure class="mx-4 my-2">
-     {{picture|safe}}
-  </figure>
-  {% when None %}
-  {% endmatch %}
-	</aside>
-	<section>
-		<header>
-			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{education.name}}</h3>
-		</header>
-		<section class="text-sm leading-tight text-slate-800 md:text-lg md:leading-tight">{{education.description|parse_markdown|safe}}</section>
-	</section>
-</section>
--- a/templates/components/project_preview_card.html
+++ b/templates/components/project_preview_card.html
@ -1,4 +1,4 @@
-<section class="border rounded-md bg-white p-4 break-inside-avoid" style="view-transition-name: project_preview_{{project.slug}};">
+<section class="border border-slate-200 rounded-md bg-white p-4 break-inside-avoid" style="view-transition-name: project_preview_{{project.slug}};">
  <header class="px-4 mb-3"> 
    <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
      {% match project.metadata.link %}
--- a/templates/components/skill_card.html
+++ b/templates/components/skill_card.html
@ -1,9 +1,8 @@
-<section class="flex border rounded bg-white p-3">
+<section class="flex border border-slate-200 rounded bg-white p-3">
 	<aside class="flex justify-center items-center pr-3 shrink-0">
  {% match skill.thumbnail %}
  {% when Some with (source) %}
-	{% let skill_name = skill.name.clone() %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, format!("{skill_name} cover"), Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, &format!("{} cover", skill.name), Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
  <figure class="mx-4 my-2">
     {{picture|safe}}
  </figure>
--- a/templates/components/social_card.html
+++ b/templates/components/social_card.html
@ -1,6 +1,6 @@
 {% macro social_card_start(svg, url, heading, img, class) %}

-<a href="{{url}}" class="block no-underline border rounded-md bg-pink-200 m-4 p-4 max-w-[392px] {{class}}">
+<a href="{{url}}" class="block no-underline border border-slate-200 rounded-md bg-pink-200 m-4 p-4 max-w-[392px] {{class}}">
 	<header class="flex text-center justify-center items-center gap-2 mb-2">
 		 <svg role="img" aria-label="{{svg}} icon" aria-hidden="true" class="h-7 w-7 fill-blue-950">
 	    <use href="#{{svg}}" />
@ -9,6 +9,6 @@
 	</header>
 	{% let alt_text = format!("{svg} thumbnail") %}

-	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 360, 128, alt_text, Some("h-auto mx-auto rounded-sm")).unwrap_or("thumbnail not found".to_string())|safe }}
+	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 360, 128, alt_text, Some("h-auto mx-auto rounded-xs")).unwrap_or("thumbnail not found".to_string())|safe }}
 </a>
 {% endmacro %}
--- a/templates/components/talent_card.html
+++ b/templates/components/talent_card.html
@ -1,5 +1,5 @@
 {% macro talent_card(svg, heading, description) %}
-<section class="flex border rounded bg-white p-3">
+<section class="flex border border-slate-200 rounded-sm bg-white p-3">
 	<aside class="flex justify-center items-center pr-3">
 	  <svg role="img" aria-label="{{svg}} icon" aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
 	    <use href="#{{svg}}" />
--- a/templates/components/workplace_card.html
+++ b/templates/components/workplace_card.html
@ -1,18 +0,0 @@
-<section class="flex border rounded bg-white p-3">
-	<aside class="flex justify-center items-center pr-3 shrink-0">
-  {% match workplace.thumbnail %}
-  {% when Some with (source) %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, "Workplace cover", Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
-  <figure class="mx-4 my-2">
-     {{picture|safe}}
-  </figure>
-  {% when None %}
-  {% endmatch %}
-	</aside>
-	<section>
-		<header>
-			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{workplace.name}}</h3>
-		</header>
-		<section class="text-sm leading-tight text-slate-800 md:text-lg md:leading-tight">{{workplace.description|parse_markdown|safe}}</section>
-	</section>
-</section>
--- a/templates/icons/m-logo-animated.svg
+++ b/templates/icons/m-logo-animated.svg
@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="m-logo"
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   fill="none"
+   version="1.1"
+   sodipodi:docname="m-logo-animated.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   visibility="hidden"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <defs id="custom-defs">
+    <radialGradient id="bg-gradient" r="91%">
+      <stop id="bg-stop" offset="100%" stop-color="rgba(216, 246, 255, 0)" />
+      <stop offset="100%" stop-color="#32a8eb" />
+    </radialGradient>
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.6089441"
+     inkscape:cx="28.590179"
+     inkscape:cy="341.52833"
+     inkscape:window-width="2560"
+     inkscape:window-height="1371"
+     inkscape:window-x="26"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="m-logo" />
+  <path
+     id="border"
+     d="m 256,477 c -56.348,0 -98.269,-0.006 -129.636,-3.491 C 94.967,470.02 75.025,463.118 61.953,450.047 48.882,436.975 41.98,417.033 38.491,385.636 35.006,354.269 35,312.348 35,256 35,199.652 35.006,157.731 38.491,126.364 41.98,94.9671 48.882,75.0246 61.953,61.9534 75.025,48.8822 94.967,41.9797 126.364,38.4912 157.731,35.0059 199.652,35 256,35 c 56.348,0 98.269,0.006 129.636,3.4912 31.3969,3.4885 51.3394,10.391 64.4106,23.4622 13.0712,13.0712 19.9737,33.0137 23.4622,64.4106 C 476.9941,157.731 477,199.652 477,256 c 0,56.348 -0.006,98.269 -3.4912,129.636 -3.4885,31.397 -10.391,51.339 -23.4622,64.411 -13.0712,13.071 -33.0137,19.973 -64.4106,23.462 C 354.269,476.994 312.348,477 256,477 Z"
+     fill="rgba(216, 246, 255, 0)"
+     stroke="#32a8eb"
+     stroke-width="8"
+     stroke-linejoin="round" />
+  <path
+     d="M347.694 326.566H360V235.186C360 203.566 340.791 185 310.176 185C290.066 185 270.257 193.413 256.15 208.208C248.046 193.123 232.739 185 212.629 185C194.62 185 177.212 191.382 163.405 202.696L161.004 187.031H152V326.566H164.306V212.269C176.912 201.535 193.12 195.153 209.628 195.153C234.84 195.153 249.847 210.528 249.847 236.927V326.566H262.153V235.186C262.153 227.934 261.253 221.262 259.152 215.46C272.058 202.696 289.466 195.153 307.175 195.153C332.687 195.153 347.694 210.528 347.694 236.927V326.566Z"
+     stroke="#32a8eb"
+     fill="rgba(216, 246, 255, 0)"
+     stroke-width="2"
+     id="m-letter" />
+  <path
+     id="border-start"
+     d="m 509.27383,509.07982 c -13.78829,-18.55493 -32.05408,-24.58114 -81.31406,-26.9168 -101.10905,-4.7941 -48.5241,-5.4316 -220.91427,-5.25658"
+     stroke="#32a8eb"
+     stroke-width="8"
+     stroke-linejoin="round"
+     visibility="hidden"
+     sodipodi:nodetypes="csc" />
+  <path
+     d="M 507.76664,507.59022 C 453.73997,452.69049 121.4145,522.45057 289.19959,354.47858 c 10.11721,-10.12848 19.63171,-17.88383 30.25282,-22.95349 6.77433,-3.23351 15.74106,-4.08485 28.19639,-5.03375"
+     id="m-letter-start"
+     stroke="#32a8eb"
+     stroke-width="2"
+     visibility="hidden"
+     sodipodi:nodetypes="cssc" />
+</svg>
--- a/templates/icons/sprite.svg
+++ b/templates/icons/sprite.svg
@ -14,6 +14,6 @@
      </g>
    </g>
  </g>
-</symbol><symbol id="linkedin" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></symbol><symbol id="mail" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></symbol><symbol id="person-chalkboard" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M192 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm-8 384V352h16V480c0 17.7 14.3 32 32 32s32-14.3 32-32V192h56 64 16c17.7 0 32-14.3 32-32s-14.3-32-32-32H384V64H576V256H384V224H320v48c0 26.5 21.5 48 48 48H592c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v80H243.1 177.1c-33.7 0-64.9 17.7-82.3 46.6l-58.3 97c-9.1 15.1-4.2 34.8 10.9 43.9s34.8 4.2 43.9-10.9L120 256.9V480c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></symbol><symbol id="phone" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></symbol><symbol id="rss" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></symbol><symbol id="tiktok-2" viewBox="0 0 24 24">
+</symbol><symbol id="linkedin" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></symbol><symbol id="mail" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></symbol><symbol id="mastodon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></symbol><symbol id="person-chalkboard" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M192 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm-8 384V352h16V480c0 17.7 14.3 32 32 32s32-14.3 32-32V192h56 64 16c17.7 0 32-14.3 32-32s-14.3-32-32-32H384V64H576V256H384V224H320v48c0 26.5 21.5 48 48 48H592c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v80H243.1 177.1c-33.7 0-64.9 17.7-82.3 46.6l-58.3 97c-9.1 15.1-4.2 34.8 10.9 43.9s34.8 4.2 43.9-10.9L120 256.9V480c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></symbol><symbol id="phone" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></symbol><symbol id="rss" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></symbol><symbol id="tiktok-2" viewBox="0 0 24 24">
 <path d="M16.8217 5.1344C16.0886 4.29394 15.6479 3.19805 15.6479 2H14.7293M16.8217 5.1344C17.4898 5.90063 18.3944 6.45788 19.4245 6.67608C19.7446 6.74574 20.0786 6.78293 20.4266 6.78293V10.2191C18.645 10.2191 16.9932 9.64801 15.6477 8.68211V15.6707C15.6477 19.1627 12.8082 22 9.32386 22C7.50043 22 5.85334 21.2198 4.69806 19.98C3.64486 18.847 2.99994 17.3331 2.99994 15.6707C2.99994 12.2298 5.75592 9.42509 9.17073 9.35079M16.8217 5.1344C16.8039 5.12276 16.7861 5.11101 16.7684 5.09914M6.9855 17.3517C6.64217 16.8781 6.43802 16.2977 6.43802 15.6661C6.43802 14.0734 7.73249 12.7778 9.32394 12.7778C9.62087 12.7778 9.9085 12.8288 10.1776 12.9124V9.40192C9.89921 9.36473 9.61622 9.34149 9.32394 9.34149C9.27287 9.34149 8.86177 9.36884 8.81073 9.36884M14.7244 2H12.2097L12.2051 15.7775C12.1494 17.3192 10.8781 18.5591 9.32386 18.5591C8.35878 18.5591 7.50971 18.0808 6.98079 17.3564" stroke="#000000" stroke-linejoin="round"/>
 </symbol><symbol id="tiktok" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></symbol><symbol id="twitch" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></symbol><symbol id="twitter" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></symbol><symbol id="youtube" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></symbol></svg>
--- a/templates/portfolio.html
+++ b/templates/portfolio.html
@ -10,28 +10,121 @@

 {% block content %}

-<header class="max-w-read mx-auto">
-  <h1 class="px-4 my-2 text-4xl text-blue-950 font-extrabold md:text-6xl xl:text-7xl xl:mb-4 xl:mt-10">Michal Vanko</h1>
-  <h3 class="px-4 my-1 text-2xl text-blue-900 font-bold italic md:text-3xl xl:text-4xl">Software Architect by passion</h3>
-  <section id="contact" class="mt-4">
-    <ul class="max-w-[24rem] mx-auto md:mx-6">
-      {% for link in contact_links %}
-      <li class="my-2">
-        <a
-          class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
-          href="{{link.href}}"
-          title="{{link.title}}"
-        >
-          <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
-            <use xlink:href="#{{link.svg}}" />
-          </svg>
-          <span class="text-lg font-semibold print:hidden">{{link.label}}</span>
-          <span class="hidden print:inline text-sm">{{link.href}}</span>
-        </a>
-      </li>
-      {% endfor %}
-    </ul>
-  </section>
+<header class="max-w-read mx-auto md:grid md:grid-cols-[1fr_auto]">
+  <div>
+    <h1 class="px-4 my-2 text-4xl text-blue-950 font-extrabold md:text-6xl xl:text-7xl xl:mb-4 xl:mt-10">Michal Vanko</h1>
+    <h3 class="px-4 my-1 text-2xl text-blue-900 font-bold italic md:text-3xl xl:text-4xl">Software Architect by passion</h3>
+    <section id="contact" class="mt-4">
+      <ul class="max-w-[24rem] mx-auto md:mx-6">
+        {% for link in contact_links %}
+        <li class="my-2">
+          <a
+            class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
+            href="{{link.href}}"
+            title="{{link.title}}"
+          >
+            <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
+              <use xlink:href="#{{link.svg}}" />
+            </svg>
+            <span class="text-lg font-semibold print:hidden">{{link.label}}</span>
+            <span class="hidden print:inline text-sm">{{link.href}}</span>
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+  <aside id="logo-container" class="hidden md:block h-[320px] w-[320px] m-10">
+    <style>
+      #logo-container svg {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+    {% include "icons/m-logo-animated.svg" %}
+    <script src="/resources/anime.min.js"></script>
+    <script>
+      var svg = document.getElementById("m-logo")
+      svg.setAttribute("visibility", "visible");
+      var borderTimeline = anime.timeline({
+        duration: 2000,
+        easing: 'easeInOutSine',
+      })
+      
+      borderTimeline.add({
+        targets: '#m-logo #border-start',
+        strokeDashoffset: [anime.setDashoffset, -310],
+        duration: 2000,
+        easing: 'easeOutExpo',
+        begin: (animation) => {
+          const target = animation.animatables[0].target
+          target.setAttribute("visibility", "visible")
+        }
+      }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter-start',
+        strokeDashoffset: [anime.setDashoffset, -447.4],
+        easing: 'easeOutExpo',
+        duration: 2000,
+        begin: (animation) => {
+          const target = animation.animatables[0].target
+          target.setAttribute("visibility", "visible")
+        }
+       }, 0)
+      borderTimeline.add({
+        targets: '#m-logo #border',
+        strokeDashoffset: [anime.setDashoffset, 0],
+        easing: 'easeInOutSine',
+        duration: 2000,
+        complete: (animation) => {
+          //debugger;
+          const target = animation.animatables[0].target
+          target.setAttribute("fill", "url('#bg-gradient')")
+          var bgAnimationTimeline = anime.timeline()
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "0%",
+            stopColor: "rgba(216, 246, 255, 1)",
+            easing: 'easeInQuint',
+            duration: 123,
+           }) 
+          bgAnimationTimeline.add({
+            targets: '#m-logo #bg-gradient #bg-stop',
+            offset: "100%",
+            easing: 'easeOutExpo',
+            duration: 333,
+           }) 
+        }
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter',
+        strokeDashoffset: [anime.setDashoffset, 0],
+        easing: 'easeInOutSine',
+        duration: 1800,
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #m-letter',
+        easing: 'easeInOutSine',
+        duration: 333,
+        fill: "#32a8eb",
+        strokeWidth: "0",
+       })
+      // background
+      /*borderTimeline.add({
+        targets: '#m-logo #border',
+        easing: 'easeInCirc',
+        fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
+        duration: 1500,
+       }, 160)
+      borderTimeline.add({
+        targets: '#m-logo #border',
+        easing: 'easeInCirc',
+        fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
+        duration: 1500,
+       }, 160) */
+
+   </script>
+  </aside>
 </header>

 <section id="portfolio-body" class="article-body">
@ -81,7 +174,7 @@

    <ul class="m-6 flex gap-2 flex-wrap justify-center">
      {% for technology in technology_list %}
-      <li class="p-2 text-pink-900 bg-blue-100 text-sm border rounded border-blue-300 font-mono">
+      <li class="p-2 text-pink-900 bg-blue-100 text-sm border rounded-sm border-blue-300 font-mono">
        {{technology}}
      </li>
      {% endfor %}
--- a/templates/site_header.html
+++ b/templates/site_header.html
@ -10,7 +10,7 @@
    </a>
    {% when None %}
    {% endmatch %}
-      <aside class="flex logo-section flex-grow justify-end content-end">
+      <aside class="flex logo-section grow justify-end content-end">
        <a class="logo p-3 text-base" href="/">
          @michalvankodev
        </a>
Author	SHA1	Message	Date
Michal Vanko	6a5a9c890f	migrate axum and askama Some checks failed test / cargo test (push) Failing after 1m10s Details	2025-06-16 21:19:11 +02:00
Michal Vanko	5ba193cd56	remove tailwind config	2025-06-16 21:19:11 +02:00
Michal Vanko	95b105762d	remove cargo build "improvements"	2025-06-16 21:19:11 +02:00
Michal Vanko	38e26ebf1f	fix tests	2025-06-16 21:19:11 +02:00
Michal Vanko	fa9b104f60	bum bam	2025-06-16 21:19:11 +02:00
Michal Vanko	b47e8e18d0	bum tailwind	2025-06-16 21:19:11 +02:00
Michal Vanko	546bf4400d	custom migration	2025-06-16 21:19:11 +02:00
Michal Vanko	134159f79c	added logo bg pulsing effect Some checks failed test / cargo test (push) Failing after 1m41s Details	2025-06-15 22:20:00 +02:00
Michal Vanko	489156fe87	add mastodon	2025-06-15 22:20:00 +02:00
Michal Vanko	83a24557bd	Merge pull request #16 from michalvankodev/renovate/axum-monorepo Update Rust crate axum to 0.8.0	2025-06-13 20:51:04 +02:00
Michal Vanko	facb304a52	Merge pull request #19 from michalvankodev/renovate/askama_escape-0.x Update Rust crate askama_escape to 0.13.0	2025-06-13 20:50:52 +02:00
Michal Vanko	1e8f48b6fe	Merge pull request #18 from michalvankodev/renovate/askama-0.x Update Rust crate askama to 0.14	2025-06-13 20:50:28 +02:00
renovate[bot]	1473b676f4	Update Rust crate axum to 0.8.0	2025-06-13 18:50:03 +00:00
renovate[bot]	74f875460a	Update Rust crate askama to 0.14	2025-06-13 18:50:00 +00:00
Michal Vanko	cd639a830b	Merge pull request #20 from michalvankodev/renovate/askama_axum-0.x Update Rust crate askama_axum to 0.5.0	2025-06-13 20:49:28 +02:00
renovate[bot]	cde3faa3c6	Update Rust crate askama_axum to 0.5.0	2025-04-18 15:32:49 +00:00
renovate[bot]	e8f9ecc241	Update Rust crate askama_escape to 0.13.0	2025-03-27 20:15:53 +00:00
Michal Vanko	1a059a005a	Merge pull request #17 from michalvankodev/renovate/pulldown-cmark-0.x Update Rust crate pulldown-cmark to 0.13	2025-02-12 22:53:34 +01:00
renovate[bot]	ff087b0577	Update Rust crate pulldown-cmark to 0.13	2025-02-12 18:27:55 +00:00
Michal Vanko	13820f58eb	Recommended articles Some checks failed test / cargo test (push) Failing after 59s Details	2024-11-24 15:38:05 +01:00
Michal Vanko	f7eb6cc95d	Logic for recommended articles	2024-11-24 14:56:54 +01:00
Michal Vanko	fec60900f5	add images to rss feed Some checks failed test / cargo test (push) Failing after 1m8s Details	2024-11-24 14:06:14 +01:00
Michal Vanko	96ead1a38f	Description in RSS feed	2024-11-24 13:35:23 +01:00
Michal Vanko	0509565c2b	git_afk blog post Some checks failed test / cargo test (push) Failing after 1m22s Details	2024-11-24 13:15:48 +01:00
Michal Vanko	0b3da60cad	featured articles Some checks failed test / cargo test (push) Failing after 1m31s Details	2024-11-11 12:58:54 +01:00
Michal Vanko	0228429ad0	metaframer article Some checks failed test / cargo test (push) Failing after 1m5s Details	2024-11-08 18:06:13 +01:00
Michal Vanko	39596cb39c	update readme Some checks failed test / cargo test (push) Failing after 1m5s Details	2024-11-08 17:06:04 +01:00
Michal Vanko	55c8f29b24	Merge pull request #12 from michalvankodev/renovate/tower-http-0.x Some checks failed test / cargo test (push) Failing after 1m3s Details Update Rust crate tower-http to 0.6.0	2024-11-08 10:37:50 +01:00
Michal Vanko	289763baec	Merge pull request #14 from michalvankodev/renovate/node-22.x Update Node.js to v22	2024-11-08 10:35:09 +01:00
Michal Vanko	5338dcd0ba	Merge pull request #11 from michalvankodev/renovate/pulldown-cmark-0.x Some checks failed test / cargo test (push) Failing after 1m34s Details Update Rust crate pulldown-cmark to 0.12	2024-11-08 10:33:37 +01:00
Michal Vanko	921b2a493f	Merge branch 'main' into renovate/pulldown-cmark-0.x	2024-11-08 09:51:31 +01:00
Michal Vanko	b0e49a904a	broadcast hypermedia systems Some checks failed test / cargo test (push) Failing after 1m6s Details	2024-11-06 17:42:09 +01:00
Michal Vanko	355a4c4d04	post update Some checks failed test / cargo test (push) Failing after 1m1s Details	2024-11-06 10:02:17 +01:00
Michal Vanko	e44b4a099c	site update article Some checks failed test / cargo test (push) Failing after 1m27s Details	2024-11-05 08:39:39 +01:00
renovate[bot]	e1384d1812	Update Node.js to v22	2024-10-31 18:27:13 +00:00
Michal Vanko	2ec4ed6c4e	animated logo Some checks failed test / cargo test (push) Failing after 1m4s Details	2024-10-31 19:25:53 +01:00
renovate[bot]	39b976b182	Update Rust crate tower-http to 0.6.0	2024-10-31 09:11:09 +00:00
renovate[bot]	34b67d9ac1	Update Rust crate pulldown-cmark to 0.12	2024-10-31 09:11:04 +00:00
Michal Vanko	2ff39c6c1d	Merge pull request #10 from michalvankodev/renovate/configure Configure Renovate	2024-10-31 10:10:45 +01:00
renovate[bot]	9dca2bfac1	Add renovate.json	2024-10-31 09:06:39 +00:00
Michal Vanko	8341320b23	perfected the animation Some checks failed test / cargo test (push) Failing after 1m16s Details	2024-10-25 21:58:53 +02:00
Michal Vanko	85e86b28bb	animated logo in portfolio	2024-10-25 20:29:49 +02:00
				`@ -0,0 +1 @@`
				<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M251.172 116.594L139.4 4.828c-6.433-6.437-16.873-6.437-23.314 0l-23.21 23.21 29.443 29.443c6.842-2.312 14.688-.761 20.142 4.693 5.48 5.489 7.02 13.402 4.652 20.266l28.375 28.376c6.865-2.365 14.786-.835 20.269 4.657 7.663 7.66 7.663 20.075 0 27.74-7.665 7.666-20.08 7.666-27.749 0-5.764-5.77-7.188-14.235-4.27-21.336l-26.462-26.462-.003 69.637a19.82 19.82 0 0 1 5.188 3.71c7.663 7.66 7.663 20.076 0 27.747-7.665 7.662-20.086 7.662-27.74 0-7.663-7.671-7.663-20.086 0-27.746a19.654 19.654 0 0 1 6.421-4.281V94.196a19.378 19.378 0 0 1-6.421-4.281c-5.806-5.798-7.202-14.317-4.227-21.446L81.47 39.442l-76.64 76.635c-6.44 6.443-6.44 16.884 0 23.322l111.774 111.768c6.435 6.438 16.873 6.438 23.316 0l111.251-111.249c6.438-6.44 6.438-16.887 0-23.324" fill="#DE4C36"/></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>