showcase page

_posts/blog/2020-02-28-how-ive-built-my-web-site.md

@@ -17,7 +17,9 @@ tags:
 
 Creating my own website with blog was something I had in my mind from start of my professional career after I left school.
 I had a lot of new experience with development which I wanted to elaborate on and save into a small library so I can take a look back on my thoughts how they evolve over time.
-This was like 6 years ago. I had a successful first attempt at doing so. I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
+This was like 6 years ago. I had a successful first attempt at doing so.
+
+I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
 
 For all those years I was trying to create it in my spare time (of which wasn't that much apparently). There were several attempts. One with _Angular_ when it was "the cool kid on the block". Another one with _cycle.js_ which was not that far from being done. I regret it now as it would be really satisfying to finish that one. I had created neat <abbr title="Server side rendering">SSR</abbr> layer which was not really difficult to accomplish with _cycle.js_ as it is reactive and it only required skipping first client render of _virtual-dom_ after page load. I'm still in love with _cycle.js_ but after _sapper_ was released I've found out of its ability to create a nice **static site** I wanted to try it out. I think that the approach of **compiling the source code** as classic client applications have been doing for many years makes a lot of sense on the internet as well. This is the one thing I'd really like to be able to accomplish with reactive frameworks like _cycle.js_.
 
@@ -115,7 +117,7 @@ For example this is the model of this blog post:
 Neat part of the _CMS_ are those widgets. In editor they will be presented by appropriate component as well as in the editor preview.
 I am very satisfied with it and I recommend it.
 
-## What's next
+## What's next {#whats-next}
 
 I've decided not to wait for perfect product and I want to release this blog as soon as possible. I will have same approach as with other products. Make a <abbr title="Minimum Viable Product">**MVP**</abbr> and then release features as they are done.
 I've put some features into _Github Projects Board_. I will very likely make a redesign with experimental layout changes. I'd like to experiment with colors and make the blog look distinguishable and personal while maintaining accessibility.

_posts/blog/2022-06-26-our-attempt-at-rusty-game-jam-weekly-25-2022.md

@@ -28,7 +28,7 @@ This week I've attended a [Rusty game jam #2](https://itch.io/jam/rusty-jam-2).
 
 ![Egg fetcher game preview](/images/uploads/screenshot-from-2022-06-26-22-37-16.png "Egg fetcher game preview")
 
-[You can check the rusult built with WASM here.](/showcase/egg-fetcher/)
+[You can check the result built with WASM here.](/showcase/egg-fetcher/)
 
 ## What's up with the weeklys
 

_projects/2020-04-04-panoramic.md

@@ -1,9 +1,6 @@
 ---
 title: Panoramic
 displayed: true
-description: "*Panoramic* was a company focused on building a web application
-  for data scientists to be able to create and share models and graphs in
-  between each other."
 classification: webapp
 tags:
   - Webapp
@@ -14,3 +11,6 @@ tags:
   - Data analytics
 featured: false
 ---
+*Panoramic* was a company focused on building a web application
+for data scientists to be able to create and share models and graphs in
+between each other.

_projects/2022-05-05-the-expert.md

@@ -1,11 +1,6 @@
 ---
 title: The Expert
 displayed: true
-description: _The Expert_ is a digital platform that connects clients to
-  interior designers around the world. For experts, it allows **managing** their
-  **portfolio and profile** and **schedule** in which they are open for
-  **consultations**. Clients are able to view their profiles and book
-  consultations.
 link: https://www.theexpert.com/
 cover_image: /images/uploads/the-expert-logo.svg
 classification: webapp
@@ -17,3 +12,8 @@ tags:
   - GraphQL
 featured: true
 ---
+_The Expert_ is a digital platform that connects clients to
+interior designers around the world. For experts, it allows **managing** their
+**portfolio and profile** and **schedule** in which they are open for
+**consultations**. Clients are able to view their profiles and book
+consultations.

_projects/2024-08-06-beinsports.md

@@ -1,12 +1,13 @@
 ---
 title: beinSports
 displayed: true
-description: "*beIN Sports* is a global network of sports channels jointly owned
+link: https://www.beinsports.com/en-us
-  and operated by *Qatari Sports Investments*, an affiliate of *Al Jazeera Media
-  Networks*"
 cover_image: /images/uploads/bein_logo.af017869.webp
 classification: website
 tags:
   - Freemarker
 featured: false
 ---
+*beIN Sports* is a global network of sports channels jointly owned
+and operated by *Qatari Sports Investments*, an affiliate of *Al Jazeera Media
+Networks*

_projects/2024-08-06-ckvive.md

@@ -1,11 +1,12 @@
 ---
 title: CK Vive
 displayed: true
-description: Websitefor *CK Vive* travel agency with a **custom CMS system** for
-  managing travel destinations.
 cover_image: /images/uploads/ck_vive_logo.svg
+link: https://ckvive.sk/
 classification: website
 tags:
   - PHP
 featured: false
 ---
+Websitefor *CK Vive* travel agency with a **custom CMS system** for
+managing travel destinations.

_projects/2024-08-06-dev-project-test.md

@@ -1,9 +1,9 @@
 ---
 title: dev project test
-displayed: true
+displayed: false
-description: Testing project
 classification: webapp
 tags:
   - Webapp
 featured: false
 ---
+Testing project

_projects/2024-08-06-docker-presentation.md

@@ -1,8 +1,6 @@
 ---
 title: Docker
 displayed: false
-description: An introduction to Docker containerization technology and how it
-  differs from virtualization.
 cover_image: /images/uploads/docker-use-cases.png
 classification: presentation
 tags:
@@ -10,3 +8,5 @@ tags:
   - Docker
 featured: false
 ---
+An introduction to Docker containerization technology and how it
+differs from virtualization.

_projects/2024-08-06-fx-sales.md

@@ -1,9 +1,7 @@
 ---
 title: FX Sales
 displayed: true
-description: "*Caplin FX Sales* allows sales people to **trade on behalf of
+link: https://www.caplin.com/business/fx-sales
-  their clients**. This needs to be an efficient workflow providing all the
-  relevant information to the sales user"
 cover_image: /images/uploads/fx_sales_screen2x.png
 classification: webapp
 tags:
@@ -12,3 +10,6 @@ tags:
   - Knockout
 featured: false
 ---
+*Caplin FX Sales* allows sales people to **trade on behalf of
+their clients**. This needs to be an efficient workflow providing all the
+relevant information to the sales user

_projects/2024-08-06-heylady.md

@@ -1,8 +1,7 @@
 ---
 title: HeyLady!
 displayed: true
-description: A thriving online community supporting women to learn and practise
+link: https://www.heylady.io/
-  speaking English.
 cover_image: /images/uploads/heyladylogo.svg
 classification: webapp
 tags:
@@ -14,3 +13,5 @@ tags:
   - PostgreSQL
 featured: false
 ---
+A thriving online community supporting women to learn and practise
+speaking English.

_projects/2024-08-06-košice-peace-marathon.md

@@ -1,8 +1,6 @@
 ---
 title: Košice Peace Marathon
 displayed: true
-description: "*Košice Peace Marathon* is the oldest marathon in Europe and the
-  third-oldest in the world."
 link: https://www.kosicemarathon.com/
 cover_image: /images/uploads/screenshot-from-2024-08-06-18-22-52.png
 classification: website
@@ -11,3 +9,5 @@ tags:
   - MySQL
 featured: false
 ---
+*Košice Peace Marathon* is the oldest marathon in Europe and the
+third-oldest in the world.

_projects/2024-08-06-livesport-tv.md

@@ -1,10 +1,10 @@
 ---
 title: Livesport.tv
 displayed: false
-description: "*Livesport.tv* is a network of premium online sports channels,
-  featuring all the top sports competitions from around the world."
 classification: website
 tags:
   - Freemarker
 featured: false
 ---
+*Livesport.tv* is a network of premium online sports channels,
+featuring all the top sports competitions from around the world.

_projects/2024-08-06-manualogic.md

@@ -1,10 +1,6 @@
 ---
 title: Manualogic
 displayed: false
-description: "*Manualogic* is a **single-page application** for product manual
-  creators. It contains **custom web editor** and management system of
-  **translatable pages, books** and **products.** Its main goal is to enable
-  customers to get manuals of their products in digital form."
 classification: webapp
 tags:
   - Webapp
@@ -12,3 +8,7 @@ tags:
   - RxJS
 featured: false
 ---
+*Manualogic* is a **single-page application** for product manual
+creators. It contains **custom web editor** and management system of
+**translatable pages, books** and **products.** Its main goal is to enable
+customers to get manuals of their products in digital form.

_projects/2024-08-06-renaissance-of-hypermedia-systems-1.md

@@ -1,8 +1,6 @@
 ---
 title: Renaissance of hypermedia systems
 displayed: true
-description: A presentation about hypermedia systems, HTMX, HyperView, and the
-  HATEOAS principles. 2024
 link: https://michalvankodev.github.io/presentation-renaissance-of-hypermedia-systems/#/intro
 cover_image: /images/uploads/screenshot-from-2024-08-06-19-01-03.png
 classification: presentation
@@ -12,3 +10,5 @@ tags:
   - HTMX
 featured: true
 ---
+A presentation about hypermedia systems, HTMX, HyperView, and the
+HATEOAS principles. 2024

_projects/2024-08-06-responzio.md

@@ -1,9 +1,7 @@
 ---
 title: responzIO
 displayed: true
-description: "***responzIO*** is a smart, easy-to-use monitoring and automation
+link: https://www.croptech.com/
-  system. The ultimate tool for various applications such as hydroponics,
-  aquariums, and gardens."
 cover_image: /images/uploads/responzio.png
 classification: embedded
 tags:
@@ -12,3 +10,6 @@ tags:
   - NodeJS
 featured: false
 ---
+***responzIO*** is a smart, easy-to-use monitoring and automation
+system. The ultimate tool for various applications such as hydroponics,
+aquariums, and gardens.

_projects/2024-08-06-ship-structured-heard-input-process.md

@@ -1,11 +1,11 @@
 ---
 title: SHIP (Structured heard input process)
 displayed: true
-description: "*SHIP* is a web application for **editors** who actively **track
-  trades offers and bids** on the commodity market."
 classification: webapp
 tags:
   - Webapp
   - Angular
 featured: false
 ---
+*SHIP* is a web application for **editors** who actively **track
+trades offers and bids** on the commodity market.

_projects/2024-08-06-signal-hub-manager.md

@@ -1,13 +1,13 @@
 ---
 title: Signal Hub Manager
 displayed: true
-description: "*Signal Hub* is an end-to-end **Big Data analytics platform** for
-  large enterprises. It accelerates the process of extracting insights and
-  intelligence from large volumes of data, including data of different types and
-  in different formats."
 classification: webapp
 tags:
   - Webapp
   - React
 featured: false
 ---
+*Signal Hub* is an end-to-end **Big Data analytics platform** for
+large enterprises. It accelerates the process of extracting insights and
+intelligence from large volumes of data, including data of different types and
+in different formats.

_projects/2024-08-06-skosy.md

@@ -1,10 +1,10 @@
 ---
 title: Skosy
 displayed: false
-description: "*Skosy* is a web application whose purpose is to **automate the
-  writing of integration tests** for websites."
 classification: webapp
 tags:
   - Webapp
 featured: false
 ---
+*Skosy* is a web application whose purpose is to **automate the
+writing of integration tests** for websites.

_projects/2024-08-06-spreading-the-web.md

@@ -1,9 +1,7 @@
 ---
 title: Spreading the Web
 displayed: true
-description: A presentation about the rising number of use cases for utilizing
+link: https://michalvankodev.github.io/spreading-the-web
-  web technologies outside of the web platform such as native mobile
-  applications and robotics. 2015
 cover_image: /images/uploads/screenshot-from-2024-08-06-18-48-02.png
 classification: presentation
 tags:
@@ -11,3 +9,6 @@ tags:
   - NodeJS
 featured: false
 ---
+A presentation about the rising number of use cases for utilizing
+web technologies outside of the web platform such as native mobile
+applications and robotics. 2015

_projects/2024-08-06-the-grand-escape.md

@@ -1,9 +1,6 @@
 ---
 title: The Grand Escape
 displayed: true
-description: A videogame where you need to steer your boat to avoid obstacles
-  and enemy bullets. The difficulty will be increased after a certain time and
-  new enemies will be spawned to make your escape harder.
 link: https://michalvankodev.itch.io/the-grand-escape
 cover_image: /images/uploads/logo.png
 classification: videogame
@@ -12,3 +9,6 @@ tags:
   - Bevy
 featured: true
 ---
+A videogame where you need to steer your boat to avoid obstacles
+and enemy bullets. The difficulty will be increased after a certain time and
+new enemies will be spawned to make your escape harder.

_projects/2024-08-06-unstoppable-growth-of-front-end-frameworks.md

@@ -1,12 +1,13 @@
 ---
 title: Unstoppable growth of front-end frameworks
 displayed: true
-description: A simple summary of the web front-end evolution. Describes how and
+link: https://michalvankodev.github.io/unstoppable-growth-of-frontend-frameworks/
-  why new tools in the NodeJS ecosystem improve & why there is still something
-  to explore.
 classification: presentation
 tags:
   - Presentation
   - NodeJS
 featured: false
 ---
+A simple summary of the web front-end evolution. Describes how and
+why new tools in the NodeJS ecosystem improve & why there is still something
+to explore.

_projects/2024-08-06-webassembly-presentation.md

@@ -1,8 +1,7 @@
 ---
 title: WebAssembly presentation
 displayed: true
-description: A presentation about what WebAssembly is about and how it might
+link: https://michalvankodev.github.io/presentation-webassembly/
-  affect the future of the world.
 cover_image: /images/uploads/screenshot-from-2024-08-06-18-52-41.png
 classification: presentation
 tags:
@@ -10,3 +9,5 @@ tags:
   - WebAssembly
 featured: false
 ---
+A presentation about what WebAssembly is about and how it might
+affect the future of the world.

axum_server/Cargo.toml

@@ -35,7 +35,7 @@ rustflags = ["-Z", "threads=8"]
 # ]
 
 [profile.dev]
-debug = false
+debug = true
 opt-level = 0
 # codegen-units = 16
 # lto = "thin"

axum_server/justfile

@@ -46,7 +46,7 @@ wait_for_port:
 
 # Kill the application running on port
 kill:
-	kill $(lsof -t -i:{{port}})
+	kill $(pidof axum_server)
 
 # Clean the dist folder
 clean:

axum_server/src/main.rs

@@ -35,6 +35,7 @@ async fn main() {
         .nest_service("/fonts", ServeDir::new("../static/fonts"))
         .nest_service("/generated_images", ServeDir::new("generated_images"))
         .nest_service("/svg", ServeDir::new("../static/svg"))
+        // TODO manifest logos have bad link, #directory-swap
         .nest_service(
             "/config.yml",
             ServeDir::new("../static/resources/config.yml"),
@@ -53,12 +54,11 @@ async fn main() {
 
 // TODO Socials
 // - fotos
-// TODO Colors
+// background gradient color
-// Text slate, and gray should be somehow customised
+// TODO Change DNS system
-// STRONG bold-medium
+// THINK deploy to alula? rather then katelyn? can be change whenever
-// TODO print css and other 404 css linked in base.html
-// TODO go live pipeline
 // TODO after release
-// - contact
+// OG tags
+// Remove old web completely
+// Restructure repository
 // - projects page
-// - linktree page

axum_server/src/pages/blog_post_list.rs

@@ -64,7 +64,7 @@ pub async fn render_blog_post_list(
     };
 
     Ok(PostListTemplate {
-        title: "Posts".to_owned(),
+        title: "Blog posts".to_owned(),
         posts,
         tag,
         header_props,

axum_server/src/pages/mod.rs

@@ -3,3 +3,4 @@ pub mod blog_post_list;
 pub mod blog_post_page;
 pub mod contact;
 pub mod index;
+pub mod project_list;

axum_server/src/pages/project_list.rs

@@ -0,0 +1,29 @@
+use askama::Template;
+use axum::http::StatusCode;
+
+use crate::{
+    components::site_header::HeaderProps,
+    post_utils::{post_listing::get_post_list, post_parser::ParseResult},
+    projects::project_model::ProjectMetadata,
+};
+
+#[derive(Template)]
+#[template(path = "project_list.html")]
+pub struct ProjectListTemplate {
+    pub title: String,
+    pub project_list: Vec<ParseResult<ProjectMetadata>>,
+    pub header_props: HeaderProps,
+}
+
+pub async fn render_projects_list() -> Result<ProjectListTemplate, StatusCode> {
+    let mut project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
+
+    project_list.retain(|project| project.metadata.displayed);
+    project_list.reverse();
+
+    Ok(ProjectListTemplate {
+        title: "Showcase".to_owned(),
+        header_props: HeaderProps::default(),
+        project_list,
+    })
+}

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -19,16 +19,34 @@ pub fn generate_picture_markup(
     width: u32,
     height: u32,
     alt_text: &str,
+    class_name: Option<&str>,
     generate_image: bool,
 ) -> Result<String, anyhow::Error> {
     let exported_formats = get_export_formats(orig_img_path);
+    let class_attr = if let Some(class) = class_name {
+        format!(r#"class="{class}""#)
+    } else {
+        "".to_string()
+    };
+
+    if exported_formats.is_empty() {
+        return Ok(formatdoc!(
+            r#"<img
+            src="{orig_img_path}"
+            width="{width}"
+            height="{height}"
+            {class_attr}
+            alt="{alt_text}"
+        >"#
+        ));
+    }
     let path_to_generated = get_generated_file_name(orig_img_path);
 
-    // TODO This should get removed when we move the project structure #move
+    // TODO This should get removed when we move the project structure #directory-swap
-    let dev_only_img_path =
+    let disk_img_path =
         Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
 
-    let orig_img_dimensions = image_dimensions(&dev_only_img_path)?;
+    let orig_img_dimensions = image_dimensions(&disk_img_path)?;
     let resolutions = get_resolutions(orig_img_dimensions, width, height);
 
     let path_to_generated_arc = Arc::new(path_to_generated);
@@ -40,8 +58,8 @@ pub fn generate_picture_markup(
 
     if generate_image {
         rayon::spawn(move || {
-            let orig_img = ImageReader::open(&dev_only_img_path)
+            let orig_img = ImageReader::open(&disk_img_path)
-                .with_context(|| format!("Failed to read instrs from {:?}", &dev_only_img_path))
+                .with_context(|| format!("Failed to read instrs from {:?}", &disk_img_path))
                 .unwrap()
                 .decode()
                 .unwrap();
@@ -88,6 +106,7 @@ pub fn generate_picture_markup(
             width="{width}"
             height="{height}"
             alt="{alt_text}"
+            {class_attr}
         >"#
     );
 
@@ -296,7 +315,14 @@ fn test_generate_picture_markup() {
         </picture>"#,
     };
     assert_eq!(
-        generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
+        generate_picture_markup(
+            orig_img_path,
+            width,
+            height,
+            "Testing image alt",
+            None,
+            false
+        )
         .expect("picture markup has to be generated"),
         result
     );

axum_server/src/post_utils/post_parser.rs

@@ -1,3 +1,4 @@
+use core::panic;
 use std::path::Path;
 
 use axum::http::StatusCode;
@@ -9,7 +10,7 @@ use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd};
 use serde::{de::DeserializeOwned, Deserialize, Deserializer};
 use syntect::{highlighting::ThemeSet, html::highlighted_html_for_string, parsing::SyntaxSet};
 use tokio::fs;
-use tracing::debug;
+use tracing::{debug, error, info};
 
 use crate::picture_generator::{
     picture_markup_generator::generate_picture_markup, resolutions::get_max_resolution,
@@ -89,6 +90,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
     let syntax_set = SyntaxSet::load_defaults_newlines();
     let theme_set = ThemeSet::load_defaults();
     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 {
         /*
@@ -125,8 +127,14 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             );
 
             // Place image into the content with scaled reso to a boundary
-            let picture_markup =
+            let picture_markup = generate_picture_markup(
-                generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
+                &dest_url,
+                max_width,
+                max_height,
+                &title,
+                None,
+                generate_images,
+            )
             .unwrap_or(formatdoc!(
                 r#"
                         <img
@@ -175,18 +183,25 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                     text.to_lowercase()
                         .replace(|c: char| !c.is_alphanumeric(), "-")
                 });
+                debug!("heading_id: {}", heading_id.clone());
+                match heading_ended {
+                    None => {
+                        error!("Heading should have set state");
+                        panic!("Heading should have set state");
+                    }
+                    Some(true) => Event::Html(text),
+                    Some(false) => {
+                        heading_ended = Some(true);
                         Event::Html(
                             formatdoc!(
-                        r##"
+                                r##"id="{heading_id}">
-                            <a name="{heading_id}" class="anchor" href="#{heading_id}">
+                            {text}"##
-                              <span class="header-link"></span>
-                            </a>
-                            {text}
-                            "##
                             )
                             .into(),
                         )
                     }
+                }
+            }
             _ => Event::Text(text),
         },
         Event::Start(Tag::Heading {
@@ -196,8 +211,10 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             attrs: _,
         }) => {
             let id_str = id.map(|id| id.to_string());
+            debug!("heading_start: {:?}, level: {}", &id_str, level);
             text_kind = TextKind::Heading(id_str);
-            Event::Html(format!("<{level}>").into())
+            heading_ended = Some(false);
+            Event::Html(format!("<{level} ").into())
         }
         Event::Start(_) => event,
         Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),
@@ -207,6 +224,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
         }
         Event::End(TagEnd::Heading(heading_level)) => {
             text_kind = TextKind::Text;
+            heading_ended = None;
             Event::End(TagEnd::Heading(heading_level))
         }
         _ => event,

axum_server/src/projects/featured_projects.rs

@@ -1,9 +1,6 @@
 use axum::http::StatusCode;
 
-use crate::post_utils::{
+use crate::post_utils::{post_listing::get_post_list, post_parser::ParseResult};
-    post_listing::get_post_list,
-    post_parser::{parse_html, ParseResult},
-};
 
 use super::project_model::ProjectMetadata;
 
@@ -13,10 +10,6 @@ pub async fn get_featured_projects() -> Result<Vec<ParseResult<ProjectMetadata>>
     let featured_projects = project_list
         .into_iter()
         .filter(|post| post.metadata.featured)
-        .map(|mut post| {
-            post.metadata.description = parse_html(&post.metadata.description, false);
-            post
-        })
         .collect();
 
     Ok(featured_projects)

axum_server/src/projects/project_model.rs

@@ -3,7 +3,6 @@ use serde::Deserialize;
 #[derive(Deserialize, Debug)]
 pub struct ProjectMetadata {
     pub title: String,
-    pub description: String,
     pub classification: String,
     pub displayed: bool,
     pub cover_image: Option<String>,
@@ -18,6 +17,7 @@ pub fn translate_classification(classification: &str) -> &str {
         "website" => "Web site",
         "presentation" => "Presentation",
         "videogame" => "Video game",
+        "embedded" => "Embedded system",
         any => any,
     }
 }

axum_server/src/router.rs

@@ -3,6 +3,7 @@ use crate::{
     pages::{
         admin::render_admin, blog_post_list::render_blog_post_list,
         blog_post_page::render_blog_post, contact::render_contact, index::render_index,
+        project_list::render_projects_list,
     },
 };
 use axum::{extract::MatchedPath, http::Request, routing::get, Router};
@@ -16,6 +17,7 @@ pub fn get_router() -> Router {
         .route("/blog/tags/:tag", get(render_blog_post_list))
         .route("/blog/:post_id", get(render_blog_post))
         .route("/contact", get(render_contact))
+        .route("/showcase", get(render_projects_list))
         .route("/admin", get(render_admin))
         .route("/feed.xml", get(render_rss_feed))
         .layer(

axum_server/styles/input.css

@@ -69,11 +69,11 @@
 }
 
 a {
-  @apply text-pink-800 underline underline-offset-2;
+  @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
-
-  &:hover {
-    @apply transition text-blue-500;
 }
+
+strong {
+  @apply font-medium;
 }
 
 .article-body {
@@ -95,12 +95,11 @@ a {
   p {
     @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
   }
-  strong {
+
-    @apply font-medium;
-  }
   pre {
     @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
   }
+
   figure {
     @apply p-4;
 
@@ -113,7 +112,7 @@ a {
   }
 
   table {
-    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-gray-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 md:text-base lg:text-xl lg:my-8;
   }
 
   thead {
@@ -151,7 +150,18 @@ a {
 
   ul,
   ol {
-    @apply px-4 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
+    @apply pl-10 pr-6 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl lg:pl-14;
+
+    & p {
+      @apply px-2;
+    }
+  }
+
+  ul {
+    @apply list-disc;
+  }
+  ol {
+    @apply list-decimal;
   }
 
   iframe {
@@ -159,6 +169,122 @@ a {
   }
 }
 
+article a {
+  @apply visited:text-purple-700;
+}
+
 .video-embed {
   @apply m-4 mx-auto max-w-image aspect-video;
 }
+
+.social-card-twitch:hover {
+  transform: translate3d(0.6rem, -0.6rem, 0px);
+  box-shadow: -3px 3px 0px 3px #6441a5;
+  transition-delay: 75ms;
+}
+
+.social-card-youtube:hover {
+  @apply rounded-none;
+  transform: scale(1.02);
+  transition-delay: 100ms;
+}
+
+.social-card-instagram:hover {
+  filter: brightness(84%);
+  transition-delay: 100ms;
+}
+
+.social-card-tiktok {
+  position: relative;
+
+  &:hover {
+    animation: tiktok-glitch 1.5s infinite;
+    animation-delay: 200ms;
+  }
+}
+
+@keyframes tiktok-glitch {
+  0% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0);
+  }
+
+  10% {
+    box-shadow:
+      -3px -3px 0 rgba(0, 255, 255, 0.8),
+      3px 3px 0 rgba(255, 0, 255, 0.8);
+    transform: translate(-1px, -1px);
+  }
+
+  15% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.6),
+      -2px 2px 0 rgba(255, 0, 255, 0.6);
+    transform: translate(2px, -2px);
+  }
+
+  20% {
+    box-shadow:
+      -1px 1px 0 rgba(0, 255, 255, 0.4),
+      1px -1px 0 rgba(255, 0, 255, 0.4);
+    transform: translate(1px, 1px);
+  }
+
+  25% {
+    box-shadow:
+      -4px 4px 0 rgba(0, 255, 255, 1),
+      4px -4px 0 rgba(255, 0, 255, 1);
+    transform: translate(-2px, 2px);
+  }
+
+  30% {
+    box-shadow:
+      3px -3px 0 rgba(0, 255, 255, 0.5),
+      -3px 3px 0 rgba(255, 0, 255, 0.5);
+    transform: translate(3px, -3px);
+  }
+
+  40% {
+    box-shadow:
+      -2px 2px 0 rgba(0, 255, 255, 0.9),
+      2px -2px 0 rgba(255, 0, 255, 0.9);
+    transform: translate(-1px, 1px);
+  }
+
+  50% {
+    box-shadow:
+      -1px -2px 0 rgba(0, 255, 255, 0.7),
+      2px -1px 0 rgba(255, 0, 255, 0.7);
+    transform: translate(1px, -1px);
+  }
+
+  60% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.3),
+      -2px 2px 0 rgba(255, 0, 255, 0.3);
+    transform: translate(2px, -2px);
+  }
+
+  75% {
+    box-shadow:
+      -3px 3px 0 rgba(0, 255, 255, 1),
+      3px -3px 0 rgba(255, 0, 255, 1);
+    transform: translate(-3px, 3px);
+  }
+
+  85% {
+    box-shadow:
+      -2px -2px 0 rgba(0, 255, 255, 0.2),
+      2px 2px 0 rgba(255, 0, 255, 0.2);
+    transform: translate(-2px, -2px);
+  }
+
+  100% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0);
+  }
+}

axum_server/styles/output.css

@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.12 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -654,8 +654,12 @@ video {
   grid-row: span 3 / span 3;
 }
 
-.m-0 {
+.float-start {
-  margin: 0px;
+  float: inline-start;
+}
+
+.clear-both {
+  clear: both;
 }
 
 .m-1 {
@@ -670,6 +674,10 @@ video {
   margin: 1.25rem;
 }
 
+.m-6 {
+  margin: 1.5rem;
+}
+
 .mx-0\.5 {
   margin-left: 0.125rem;
   margin-right: 0.125rem;
@@ -705,6 +713,16 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
@@ -727,6 +745,10 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-5 {
   margin-bottom: 1.25rem;
 }
@@ -735,6 +757,10 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -763,10 +789,6 @@ video {
   display: none;
 }
 
-.aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
 .h-12 {
   height: 3rem;
 }
@@ -775,10 +797,6 @@ video {
   height: 1.5rem;
 }
 
-.h-64 {
-  height: 16rem;
-}
-
 .h-7 {
   height: 1.75rem;
 }
@@ -787,6 +805,14 @@ video {
   height: 240px;
 }
 
+.h-auto {
+  height: auto;
+}
+
+.max-h-\[236px\] {
+  max-height: 236px;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -807,8 +833,12 @@ video {
   width: 180px;
 }
 
-.w-full {
+.max-w-\[32rem\] {
-  width: 100%;
+  max-width: 32rem;
+}
+
+.max-w-\[392px\] {
+  max-width: 392px;
 }
 
 .max-w-maxindex {
@@ -828,22 +858,23 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.grid-flow-col {
+.break-inside-avoid {
-  grid-auto-flow: column;
+  -moz-column-break-inside: avoid;
+       break-inside: avoid;
 }
 
-.grid-cols-\[max-content_1fr\] {
+.grid-flow-row {
-  grid-template-columns: max-content 1fr;
+  grid-auto-flow: row;
-}
-
-.grid-rows-\[max-content_1fr_max-content\] {
-  grid-template-rows: max-content 1fr max-content;
 }
 
 .flex-row {
   flex-direction: row;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .place-content-center {
   place-content: center;
 }
@@ -872,26 +903,22 @@ video {
   gap: 0.5rem;
 }
 
-.gap-4 {
+.gap-6 {
-  gap: 1rem;
+  gap: 1.5rem;
+}
+
+.self-start {
+  align-self: flex-start;
 }
 
 .self-center {
   align-self: center;
 }
 
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
 
-.rounded-2xl {
-  border-radius: 1rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -900,6 +927,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -908,10 +939,6 @@ video {
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(23 137 224 / var(--tw-border-opacity));
@@ -922,6 +949,11 @@ video {
   border-color: rgb(11 39 70 / var(--tw-border-opacity));
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@@ -942,19 +974,14 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.fill-blue-900 {
+  fill: #103e6a;
+}
+
 .fill-blue-950 {
   fill: #0b2746;
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-.p-0 {
-  padding: 0px;
-}
-
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -982,11 +1009,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-}
-
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -1091,21 +1113,16 @@ video {
   color: rgb(11 39 70 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-pink-950 {
   --tw-text-opacity: 1;
   color: rgb(80 2 56 / var(--tw-text-opacity));
 }
 
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
 .text-slate-800 {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
@@ -1115,11 +1132,6 @@ video {
   text-decoration-line: none;
 }
 
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1131,17 +1143,20 @@ a {
   color: rgb(146 22 110 / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-underline-offset: 2px;
-  &:hover {
+}
+
+a:hover {
   --tw-text-opacity: 1;
   color: rgb(23 137 224 / var(--tw-text-opacity));
-  }
-  &:hover {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
+strong {
+  font-weight: 500;
 }
 
 .article-body {
@@ -1407,9 +1422,6 @@ a {
       font-weight: 400;
     }
   }
-  strong {
-    font-weight: 500;
-  }
   pre {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
@@ -1512,7 +1524,7 @@ a {
   }
   table {
     --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+    border-color: rgb(226 232 240 / var(--tw-border-opacity));
   }
   table {
     font-size: 0.875rem;
@@ -1714,8 +1726,11 @@ a {
   }
   ul,
   ol {
-    padding-left: 1rem;
+    padding-left: 2.5rem;
-    padding-right: 1rem;
+  }
+  ul,
+  ol {
+    padding-right: 1.5rem;
   }
   ul,
   ol {
@@ -1736,6 +1751,12 @@ a {
       line-height: 1.75rem;
     }
   }
+  @media (min-width: 1024px) {
+    ul,
+  ol {
+      padding-left: 3.5rem;
+    }
+  }
   @media (min-width: 1024px) {
     ul,
   ol {
@@ -1745,6 +1766,19 @@ a {
       font-weight: 400;
     }
   }
+  ul,
+  ol {
+    & p {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+  }
+  ul {
+    list-style-type: disc;
+  }
+  ol {
+    list-style-type: decimal;
+  }
   iframe {
     margin-left: auto;
     margin-right: auto;
@@ -1764,6 +1798,10 @@ a {
   }
 }
 
+article a:visited {
+  color: rgb(68 30 115 );
+}
+
 .video-embed {
   margin: 1rem;
   margin-left: auto;
@@ -1772,21 +1810,192 @@ a {
   max-width: min(70rem, 95vw);
 }
 
+.social-card-twitch:hover {
+  transform: translate3d(0.6rem, -0.6rem, 0px);
+  box-shadow: -3px 3px 0px 3px #6441a5;
+  transition-delay: 75ms;
+}
+
+.social-card-youtube:hover {
+  border-radius: 0px;
+  transform: scale(1.02);
+  transition-delay: 100ms;
+}
+
+.social-card-instagram:hover {
+  filter: brightness(84%);
+  transition-delay: 100ms;
+}
+
+.social-card-tiktok {
+  position: relative;
+  &:hover {
+    animation: tiktok-glitch 1.5s infinite;
+    animation-delay: 200ms;
+  }
+}
+
+@keyframes tiktok-glitch {
+  0% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0);
+  }
+
+  10% {
+    box-shadow:
+      -3px -3px 0 rgba(0, 255, 255, 0.8),
+      3px 3px 0 rgba(255, 0, 255, 0.8);
+    transform: translate(-1px, -1px);
+  }
+
+  15% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.6),
+      -2px 2px 0 rgba(255, 0, 255, 0.6);
+    transform: translate(2px, -2px);
+  }
+
+  20% {
+    box-shadow:
+      -1px 1px 0 rgba(0, 255, 255, 0.4),
+      1px -1px 0 rgba(255, 0, 255, 0.4);
+    transform: translate(1px, 1px);
+  }
+
+  25% {
+    box-shadow:
+      -4px 4px 0 rgba(0, 255, 255, 1),
+      4px -4px 0 rgba(255, 0, 255, 1);
+    transform: translate(-2px, 2px);
+  }
+
+  30% {
+    box-shadow:
+      3px -3px 0 rgba(0, 255, 255, 0.5),
+      -3px 3px 0 rgba(255, 0, 255, 0.5);
+    transform: translate(3px, -3px);
+  }
+
+  40% {
+    box-shadow:
+      -2px 2px 0 rgba(0, 255, 255, 0.9),
+      2px -2px 0 rgba(255, 0, 255, 0.9);
+    transform: translate(-1px, 1px);
+  }
+
+  50% {
+    box-shadow:
+      -1px -2px 0 rgba(0, 255, 255, 0.7),
+      2px -1px 0 rgba(255, 0, 255, 0.7);
+    transform: translate(1px, -1px);
+  }
+
+  60% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.3),
+      -2px 2px 0 rgba(255, 0, 255, 0.3);
+    transform: translate(2px, -2px);
+  }
+
+  75% {
+    box-shadow:
+      -3px 3px 0 rgba(0, 255, 255, 1),
+      3px -3px 0 rgba(255, 0, 255, 1);
+    transform: translate(-3px, 3px);
+  }
+
+  85% {
+    box-shadow:
+      -2px -2px 0 rgba(0, 255, 255, 0.2),
+      2px 2px 0 rgba(255, 0, 255, 0.2);
+    transform: translate(-2px, -2px);
+  }
+
+  100% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0);
+  }
+}
+
+.visited\:text-blue-950:visited {
+  color: rgb(11 39 70 );
+}
+
+.visited\:text-purple-700:visited {
+  color: rgb(68 30 115 );
+}
+
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 207 247 / var(--tw-bg-opacity));
 }
 
+.hover\:fill-blue-400:hover {
+  fill: #42a6f0;
+}
+
+@media (min-width: 640px) {
+  .sm\:float-none {
+    float: none;
+  }
+
+  .sm\:clear-none {
+    clear: none;
+  }
+
+  .sm\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .sm\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:grid {
+    display: grid;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .sm\:grid-cols-\[max-content_1fr\] {
+    grid-template-columns: max-content 1fr;
+  }
+
+  .sm\:grid-rows-\[max-content_1fr_max-content\] {
+    grid-template-rows: max-content 1fr max-content;
+  }
+
+  .sm\:gap-4 {
+    gap: 1rem;
+  }
+
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
   }
 
-  .md\:grid {
-    display: grid;
-  }
-
   .md\:h-16 {
     height: 4rem;
   }
@@ -1865,6 +2074,16 @@ a {
     grid-row-start: 2;
   }
 
+  .lg\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .lg\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
   .lg\:mt-20 {
     margin-top: 5rem;
   }
@@ -1926,6 +2145,10 @@ a {
     grid-row-start: auto;
   }
 
+  .xl\:block {
+    display: block;
+  }
+
   .xl\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1934,3 +2157,9 @@ a {
     grid-template-columns: 1fr 2fr;
   }
 }
+
+@media print {
+  .print\:hidden {
+    display: none;
+  }
+}

axum_server/templates/base.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>{% block title %} {{title}} @michalvankodev {% endblock %}</title>
+    <title>{% block title %} {{title}} {% endblock %} @michalvankodev</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="theme-color" content="#333333" />
@@ -13,19 +13,16 @@
       rel="alternate"
       type="application/rss+xml"
       title="RSS feed for latest posts"
-      href="https://michalvanko.dev/feed.xml"
+      href="/feed.xml"
     />
 
     <!-- Tailwind output file -->
     <link rel="stylesheet" href="/styles/output.css" />
 
-    <link rel="stylesheet" href="/print.css" media="print" />
-    <link rel="stylesheet" href="/fonts.css" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/prism.css" />
 
-    <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="/images/m-logo.svg" />
-    <link rel="icon" type="image/png" href="/m-logo-192.png" />
+    <link rel="icon" type="image/png" href="/images/m-logo-192.png" />
   </head>
   <body class="bg-blue-50">
     {% include "site_header.html" %}

axum_server/templates/blog_post.html

@@ -8,7 +8,7 @@
   <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
   <aside class="flex justify-between flex-row">
     {% include "post_tag_list.html" %}
-    <section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">
+    <section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
       <span>Published on</span>
       <time datetime="{date}"> {{date|pretty_date}} </time>
     </section>
@@ -21,6 +21,7 @@
 </article>
 
 <!-- TODO: Next recommendations for reading -->
+<!-- TODO: Bact to all posts -->
 
 {# footer #}
 {% endblock %}

axum_server/templates/blog_post_list.html

@@ -9,7 +9,7 @@
     {% else %}
     <h1 class="m-5 text-4xl text-blue-950 font-extrabold md:text-6xl">
     {% if let Some(t) = tag %}
-    <em>{{t}}</em> 
+    #{{t}} 
     {% else %}
      Blog posts
     {% endif %}
@@ -25,13 +25,13 @@
       </ul>
     </section>
 
-    <hr class="border-blue-950 m-5 md:my-8">
+    <hr class="border-slate-300 m-5 md:my-8">
 
     <ul class="mx-5">
       {% for post in posts %}
       <li>
         {% include "components/blog_post_preview.html" %}
-        <hr class="border-blue-950 my-5 md:my-8">
+        <hr class="border-slate-300 my-5 md:my-8">
       </li>
       {% endfor %}
     </ul>
@@ -42,15 +42,18 @@
   </section> <!-- /#socials -->
   
   <section id="showcase" class="hidden lg:block">
-    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
+    <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl"><a href="/showcase" class="text-blue-950 no-underline">Showcase</a></h2>
 
-    <ul class="">
+    <ul class="mx-6">
      {% for project in featured_projects %}
-      <li class="my-2">
+      <li class="my-4">
         {% include "components/project_preview_card.html" %}
       </li>
      {% endfor %}
     </ul>
+    <section class="text-center my-3 md:text-lg">
+     <a href="/showcase">check out more projects</a> 
+    </section>
   </section> <!-- /#showcase -->
 </section> <!-- /#blog-container -->
 {% endblock %}

axum_server/templates/components/blog_post_default_thumbnail.html

@@ -1,3 +1,3 @@
-<div class="rounded-2xl w-[180px] h-[240px] bg-blue-100 border-4 border-blue-500 flex justify-center items-center">
+<div class="w-[180px] h-[240px] bg-blue-100 flex justify-center items-center">
   <span class="text-blue-500 text-8xl -translate-y-1.5">{{post.metadata.title|fmt("{:.1}")|lower}}</span>
 </div> 

axum_server/templates/components/blog_post_preview.html

@@ -1,8 +1,8 @@
-<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8">
+<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
-	<aside class="row-span-3 self-center">
+	<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
-		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
+		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", None, true).unwrap_or("thumbnail not found".to_string())|safe }}
 		{% when None %}
 		<div> 
 			{% include "components/blog_post_default_thumbnail.html" %}
@@ -11,11 +11,11 @@
 	</aside>
 	<header>
 		<h3 class="text-lg font-bold mb-1 md:text-3xl">
-		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
+		  <a rel="prefetch" href="/blog/{{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-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
+	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
-	<footer class="text-sm md:text-base lg:text-lg">
+	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}
       <li class="inline-block">

axum_server/templates/components/project_preview_card.html

@@ -1,4 +1,4 @@
-<article class="border rounded-md bg-white m-4 p-4">
+<section class="border rounded-md bg-white p-4 break-inside-avoid">
   <header class="px-4 mb-3"> 
     <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}
@@ -11,23 +11,24 @@
       {% endmatch %}
     </h2>
     <section class="description text-slate-800 my-2 md:text-xl text-justify">
-      {{project.metadata.description|safe}}
+      {{project.body|safe}}
     </section>
   </header>
   <!-- <hr class="border-blue-950 my-5"> -->
 
   {% match project.metadata.cover_image %}
   {% when Some with (source) %}
-  <figure class="mx-4 my-2">
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]"), true).unwrap_or("cover not found".to_string()) %}
+  <figure class="mx-4 my-2 flex justify-center">
       {% match project.metadata.link %}
       {% when Some with (href) %}
       <a href="{{href}}">
-        <img src="{{source}}" class="object-contain w-full aspect-video"/>
+       {{picture|safe}}
       </a>
       {% when None %}
-      <img src="{{source}}" />
+       {{picture|safe}}
       {% endmatch %}
-		<!-- TODO <figure> -->
+		<!-- TODO <figure> generate_image -->
   </figure>
   {% when None %}
   {% endmatch %}
@@ -45,4 +46,4 @@
       {% endfor %}
     </ul>
 	</footer>
-</article>
+</section>

axum_server/templates/components/social_card.html

@@ -1,15 +1,14 @@
-{% macro social_card_start(svg, heading) %}
+{% macro social_card_start(svg, url, heading, img, class) %}
 
-<section class="border rounded-md bg-pink-200 m-4 p-4">
+<a href="{{url}}" class="block no-underline border 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 aria-hidden="true" class="h-7 w-7 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
-		<h3 class="text-lg font-medium mb-1">{{heading|safe}}</h3>
+		<h3 class="text-lg font-medium mb-1 text-blue-950 visited:text-blue-950">{{heading|safe}}</h3>
 	</header>
+	{% let alt_text = format!("{svg} thumbnail") %}
 
-{% endmacro %}
+	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 360, 128, alt_text, Some("h-auto mx-auto rounded-sm"), true).unwrap_or("thumbnail not found".to_string())|safe }}
-
+</a>
-{% macro social_card_end() %}
-	</section>
 {% endmacro %}

axum_server/templates/components/talent_card.html

@@ -1,6 +1,6 @@
 {% macro talent_card(svg, heading, description) %}
 
-<section class="flex border rounded bg-white m-4 p-3">
+<section class="flex border rounded bg-white m-4 p-3 max-w-[32rem]">
 	<aside class="flex justify-center items-center pr-3">
 	  <svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
@@ -10,7 +10,7 @@
 		<header>
 			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
 		</header>
-		<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
+		<p class="text-sm leading-5 text-slate-800 md:text-lg">{{description|safe}}</p>
 	</section>
 </section>
 

axum_server/templates/contact.html

@@ -1,19 +1,20 @@
 {% extends "base.html" %}
 {% block content %} 
 
-<h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold">
+<section id="contact-page">
+  <h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold lg:mx-auto max-w-read">
     Contact
   </h1>
 
   <ul class="mx-6">
     {% for link in links %}
-  <li class="my-6">
+    <li class="my-2 sm:my-4 lg:my-6 max-w-[32rem] mx-auto">
       <a
-      class="flex border-2 place-content-center items-center rounded-full border-blue-500 py-5 hover:bg-pink-200 transition-colors"
+        class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 sm:py-4 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 fill-blue-950 mx-2">
+        <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
           <use xlink:href="/svg/icons-sprite.svg#{{link.svg}}" />
         </svg>
         <span class="text-lg font-semibold">{{link.label}}</span>
@@ -21,5 +22,6 @@
     </li>
     {% endfor %}
   </ul>
+</section>
 
 {% endblock %}

axum_server/templates/index.html

@@ -7,23 +7,22 @@
 {% block content %}
 <section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
   <section id="about-me">
-    <header class="index-header hidden">
+    <!-- <header class="index-header hidden"> -->
-      <figure class="profile-pic">
+      <!-- <figure class="profile-pic"> -->
-        <picture>
+        <!-- <picture> -->
-          <img
+          <!-- <img -->
-            alt="Portrait"
+            <!-- alt="Portrait" -->
-            {# TODO generate `srcset` for optimal image #}
+            <!-- {# TODO Take a new photo #} -->
-            {# TODO Take a new photo #}
+            <!-- src="/images/profile-portugal-landscape.jpg" -->
-            src="/images/profile-portugal-landscape.jpg"
+          <!-- /> -->
-          />
+        <!-- </picture> -->
-        </picture>
+      <!-- </figure> -->
-      </figure>
 
-      <p class="motto">
+      <!-- <p class="motto"> -->
-        <cite>“Let your ambition carry you.”</cite>
+        <!-- <cite>“Let your ambition carry you.”</cite> -->
-        <span class="cite-owner">- La Flame</span>
+        <!-- <span class="cite-owner">- La Flame</span> -->
-      </p>
+      <!-- </p> -->
-    </header>
+    <!-- </header> -->
 
     <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
 
@@ -34,10 +33,10 @@
       <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
       . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
 
-    <section id="talent-cards">
+    <section id="talent-cards" class="flex flex-col items-center">
       {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
       {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
-      {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
+      {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"https://calendly.com/michalvankosk/30min\">Schedule a session with me</a> and elevate your projects together.") %}
     </section>
   </section>
 
@@ -52,23 +51,26 @@
         {% endfor %}
       </ul>
     </section>
-    <hr class="border-blue-950 m-5">
+    <hr class="border-slate-300 m-5">
 
     <ul class="mx-5">
      {% for post in featured_blog_posts %}
       <li>
         {% include "components/blog_post_preview.html" %}
-        <hr class="border-blue-950 my-5 md:my-8">
+        <hr class="border-slate-300 my-5 md:my-8">
       </li>
      {% endfor %}
     </ul>
+    <section class="text-center my-3 md:text-lg">
+     <a href="/blog">see all blog posts</a> 
+    </section>
   </section>
 
   <section id="socials">
     {% include "sections/social.html" %}
   </section>
 
-  <hr class="border-blue-950 m-5 lg:hidden">
+  <hr class="border-slate-300 m-5 lg:hidden">
 
   <section id="showcase" class="col-span-2">
     {% include "sections/showcase.html" %}

axum_server/templates/project_list.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block content %}
+
+<section id="project-list-container" class="max-w-maxindex mx-auto">
+  <section id="project-list">
+    {% if project_list.len() == 0 %}
+    <p class="no-posts">You've found void in the space.</p>
+    {% else %}
+    <h1 class="m-5 text-4xl text-blue-950 font-extrabold md:text-6xl">
+     Showcase
+    </h1>
+
+    <ul class="m-6 grid grid-flow-row gap-6 md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
+      {% for project in project_list %}
+      <li>
+        {% include "components/project_preview_card.html" %}
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </section> <!-- /#project-list -->
+ 
+</section> <!-- /#project-list-container -->
+{% endblock %}

axum_server/templates/sections/showcase.html

@@ -1,9 +1,13 @@
-<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
+<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl"><a href="/showcase" class="text-blue-950 no-underline">Showcase</a></h2>
 
-<ul class="mx-5 md:grid md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
+<ul class="mx-6 grid grid-flow-row gap-6 md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
  {% for project in featured_projects %}
-  <li class="my-2">
+  <li>
     {% include "components/project_preview_card.html" %}
   </li>
  {% endfor %}
 </ul>
+
+<section class="text-center my-3 md:text-lg">
+ <a href="/showcase">check out more projects</a> 
+</section>

axum_server/templates/sections/social.html

@@ -1,52 +1,14 @@
 <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
-{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
-<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
-<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
-<!-- <script type="text/javascript"> -->
-<!-- var options = { -->
-<!-- width: "100%", -->
-<!-- height: "100%", -->
-<!-- channel: "michalvankodev", -->
-<!-- parent: ["localhost"] -->
-<!-- }; -->
-<!-- var player = new Twitch.Player("twitch-player", options); -->
-<!-- player.setVolume(0.5); -->
-</script>
-{% call sc::social_card_end() %}
 
-{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
+<section class="grid grid-flow-row justify-center">
-<!-- STYLES needed to overwrite tiktok embed css -->
+{% call sc::social_card_start("twitch", "https://twitch.tv/michalvankodev", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/twitch_wo.png", "social-card-twitch") %}
-<!-- <blockquote -->
-<!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
-<!-- cite="https://www.tiktok.com/@michalvankodev" -->
-<!-- data-unique-id="michalvankodev" -->
-<!-- data-embed-from="embed_page" -->
-<!-- data-embed-type="creator" -->
-<!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
-<!-- > -->
-<!-- <section> -->
-<!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
-<!-- </section> -->
-<!-- </blockquote> -->
-<!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
-{% call sc::social_card_end() %}
 
-{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
+{% call sc::social_card_start("tiktok", "https://www.tiktok.com/@michalvankodev","Highlights can be found on <em>TikTok</em>", "images/social/tiktok_wo.png", "social-card-tiktok") %}
-<!-- TODO create our own youtube widget which will populate this window on build -->
-<!-- <iframe -->
-<!-- class="h-64 aspect-video" -->
-<!-- id="ytplayer" -->
-<!-- type="text/html" -->
-<!-- width="100%" -->
-<!-- height="100%" -->
-<!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
-<!-- frameborder="0" -->
-<!-- allowfullscreen -->
-<!-- ></iframe> -->
-{% call sc::social_card_end() %}
 
+{% call sc::social_card_start("youtube", "https://www.youtube.com/@michalvankodev", "Videos and vlogs posted on <em>YouTube</em>", "images/social/youtube_wo.png", "social-card-youtube") %}
 
-{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
+<div class="lg:hidden xl:block">
-<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
+{% call sc::social_card_start("instagram", "https://www.instagram.com/michalvankodev/", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png", "social-card-instagram") %}
-{% call sc::social_card_end() %}
+</div>
 
+</section>

axum_server/templates/site_footer.html

@@ -1,4 +1,5 @@
-<footer>
+<footer class="my-4">
+  <hr class="mb-4 border-slate-300 mx-5">
   <p
     class="text-center"
     xmlns:cc="http://creativecommons.org/ns#"
@@ -14,7 +15,7 @@
     <a
       rel="cc:attributionURL dct:creator"
       property="cc:attributionName"
-      href="https://michalvanko.dev/"
+      href="/contact"
       >Michal Vanko</a
     >
     is licensed under

axum_server/templates/site_header.html

@@ -3,7 +3,7 @@
     {% match header_props.back_link %}
     {% when Some with (link) %}
     <a
-    class="px-3 py-2 text-lg font-medium drop-shadow-md"
+      class="px-3 py-2 text-lg font-medium print:hidden"
       href="{{link.href}}"
     >
       {{link.label}}
@@ -16,5 +16,5 @@
         </a>
       </aside>
   </nav>
-<hr class="border-blue-950 mx-5">
+  <hr class="border-slate-300 mx-5">
 </header>

static/resources/config.yml

@@ -96,7 +96,7 @@ collections:
                   widget: boolean,
                   default: true,
                 }
-              - { label: Description, name: description, widget: markdown }
+              - { label: Description, name: body, widget: markdown }
               - {
                   label: Cover image,
                   name: cover_image,
@@ -141,7 +141,7 @@ collections:
           widget: boolean,
           default: true,
         }
-      - { label: Description, name: description, widget: markdown }
+      - { label: Description, name: body, widget: markdown }
       - {
           label: Link,
           name: link,