showcase page

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

@@ -117,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/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/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 {
         /*
@@ -181,14 +183,24 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                     text.to_lowercase()
                         .replace(|c: char| !c.is_alphanumeric(), "-")
                 });
-                Event::Html(
+                debug!("heading_id: {}", heading_id.clone());
-                    formatdoc!(
+                match heading_ended {
-                        r##"id="{heading_id}">
+                    None => {
-                            {text}
+                        error!("Heading should have set state");
-                        "##
+                        panic!("Heading should have set state");
-                    )
+                    }
-                    .into(),
+                    Some(true) => Event::Html(text),
-                )
+                    Some(false) => {
+                        heading_ended = Some(true);
+                        Event::Html(
+                            formatdoc!(
+                                r##"id="{heading_id}">
+                            {text}"##
+                            )
+                            .into(),
+                        )
+                    }
+                }
             }
             _ => Event::Text(text),
         },
@@ -199,7 +211,9 @@ 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);
+            heading_ended = Some(false);
             Event::Html(format!("<{level} ").into())
         }
         Event::Start(_) => event,
@@ -210,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

@@ -150,7 +150,11 @@ strong {
 
   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 {
@@ -204,83 +208,83 @@ article a {
     box-shadow:
       0px 0px 0 rgba(0, 255, 255, 0),
       0px 0px 0 rgba(255, 0, 255, 0);
-    transform: translate(0, 0) skew(0deg, 0deg);
+    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) skew(-0.5deg, -0.5deg);
+    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) skew(0.5deg, 0.5deg);
+    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) scale(1.01);
+    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) skew(-0.5deg, -0.5deg);
+    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) scale(0.99);
+    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) skew(0.5deg, 0.5deg);
+    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) skew(-0.3deg, 0.3deg);
+    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) scale(1.02);
+    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) skew(0.5deg, -0.5deg);
+    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) scale(0.98);
+    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) skew(0deg, 0deg);
+    transform: translate(0, 0);
   }
 }

axum_server/styles/output.css

@@ -674,6 +674,10 @@ video {
   margin: 1.25rem;
 }
 
+.m-6 {
+  margin: 1.5rem;
+}
+
 .mx-0\.5 {
   margin-left: 0.125rem;
   margin-right: 0.125rem;
@@ -709,11 +713,26 @@ 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;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -726,6 +745,10 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-5 {
   margin-bottom: 1.25rem;
 }
@@ -826,10 +849,6 @@ video {
   max-width: 64rem;
 }
 
-.max-w-xl {
-  max-width: 36rem;
-}
-
 .flex-grow {
   flex-grow: 1;
 }
@@ -884,6 +903,10 @@ video {
   gap: 0.5rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -1703,8 +1726,11 @@ strong {
   }
   ul,
   ol {
-    padding-left: 1rem;
+    padding-left: 2.5rem;
-    padding-right: 1rem;
+  }
+  ul,
+  ol {
+    padding-right: 1.5rem;
   }
   ul,
   ol {
@@ -1725,6 +1751,12 @@ strong {
       line-height: 1.75rem;
     }
   }
+  @media (min-width: 1024px) {
+    ul,
+  ol {
+      padding-left: 3.5rem;
+    }
+  }
   @media (min-width: 1024px) {
     ul,
   ol {
@@ -1734,6 +1766,13 @@ strong {
       font-weight: 400;
     }
   }
+  ul,
+  ol {
+    & p {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+  }
   ul {
     list-style-type: disc;
   }
@@ -1801,84 +1840,84 @@ article a:visited {
     box-shadow:
       0px 0px 0 rgba(0, 255, 255, 0),
       0px 0px 0 rgba(255, 0, 255, 0);
-    transform: translate(0, 0) skew(0deg, 0deg);
+    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) skew(-0.5deg, -0.5deg);
+    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) skew(0.5deg, 0.5deg);
+    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) scale(1.01);
+    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) skew(-0.5deg, -0.5deg);
+    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) scale(0.99);
+    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) skew(0.5deg, 0.5deg);
+    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) skew(-0.3deg, 0.3deg);
+    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) scale(1.02);
+    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) skew(0.5deg, -0.5deg);
+    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) scale(0.98);
+    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) skew(0deg, 0deg);
+    transform: translate(0, 0);
   }
 }
 
@@ -1957,10 +1996,6 @@ article a:visited {
     margin-bottom: 2rem;
   }
 
-  .md\:grid {
-    display: grid;
-  }
-
   .md\:h-16 {
     height: 4rem;
   }

axum_server/templates/blog_post_list.html

@@ -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/project_preview_card.html

@@ -1,4 +1,4 @@
-<section class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
+<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,7 +11,7 @@
       {% 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"> -->

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 max-w-xl">
+<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}}" />

axum_server/templates/index.html

@@ -61,6 +61,9 @@
       </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">

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/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#"

axum_server/templates/site_header.html

@@ -1,20 +1,20 @@
 <header class="min-h-full bg-blue-50 mb-5">
-<nav class="flex">
+  <nav class="flex">
-  {% match header_props.back_link %}
+    {% match header_props.back_link %}
-  {% when Some with (link) %}
+    {% when Some with (link) %}
-  <a
+    <a
-    class="px-3 py-2 text-lg font-medium print:hidden"
+      class="px-3 py-2 text-lg font-medium print:hidden"
-    href="{{link.href}}"
+      href="{{link.href}}"
-  >
+    >
-    {{link.label}}
+      {{link.label}}
-  </a>
+    </a>
-  {% when None %}
+    {% when None %}
-  {% endmatch %}
+    {% endmatch %}
-    <aside class="flex logo-section flex-grow justify-end content-end">
+      <aside class="flex logo-section flex-grow justify-end content-end">
-      <a class="logo p-3 text-base" href="/">
+        <a class="logo p-3 text-base" href="/">
-        @michalvankodev
+          @michalvankodev
-      </a>
+        </a>
-    </aside>
+      </aside>
-</nav>
+  </nav>
-<hr class="border-slate-300 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,