diff --git a/src/content/blogpost/chaos-game/index.en.svx b/src/content/blogpost/chaos-game/index.en.svx
index fdd30572..82448e4f 100644
--- a/src/content/blogpost/chaos-game/index.en.svx
+++ b/src/content/blogpost/chaos-game/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+	"cover": {
+		alt: "The polyline within the triangle illustrating the basic chaos game rules.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+		width: 500
+	},
 	"dateCreated": "2022-09-10T01:34:00.000Z",
 	"dateUpdated": "2023-01-09T15:20:00.000Z",
 	"description": "Can be anything deterministic hidden behind the random?",
diff --git a/src/content/blogpost/chaos-game/index.ru.svx b/src/content/blogpost/chaos-game/index.ru.svx
index 70ba5f70..db94c231 100644
--- a/src/content/blogpost/chaos-game/index.ru.svx
+++ b/src/content/blogpost/chaos-game/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+	"cover": {
+		alt: "Ломаная внутри треугольника, отображающая базовые принципы Игры Хаоса",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+		width: 500
+	},
 	"dateCreated": "2022-09-10T01:34:00.000Z",
 	"dateUpdated": "2023-01-09T15:20:00.000Z",
 	"description": "Может ли что-то детерменистичное скрываться за случайностью?",
diff --git a/src/content/blogpost/crop-factor/index.ru.svx b/src/content/blogpost/crop-factor/index.ru.svx
index 2e098428..03d211da 100644
--- a/src/content/blogpost/crop-factor/index.ru.svx
+++ b/src/content/blogpost/crop-factor/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/crop-factor.png",
+	"cover": {
+		alt: "Фотоаппарат с изображением уменьшенного размера матрицы, иллюстрирующего идею кроп-фактора",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/crop-factor.png",
+		width: 500
+	},
 	"dateCreated": "2023-04-14T00:12:00.000Z",
 	"dateUpdated": "2023-04-16T01:41:00.000Z",
 	"description": "На что влияет размеры сенсора в фотографии и почему это так важно знать фотолюбителю.",
diff --git a/src/content/blogpost/css-only-masonry/index.en.svx b/src/content/blogpost/css-only-masonry/index.en.svx
index 744648d9..65e5b5ac 100644
--- a/src/content/blogpost/css-only-masonry/index.en.svx
+++ b/src/content/blogpost/css-only-masonry/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png",
+	"cover": {
+		alt: "Simple masonry layout illustration using rectangles of different sizes.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png",
+		width: 500
+	},
 	"dateCreated": "2022-05-11T15:30:00.000Z",
 	"dateUpdated": "2022-09-22T03:16:00.000Z",
 	"description": "Build Masonry-like layout image gallery component using the modern CSS.",
diff --git a/src/content/blogpost/css-only-masonry/index.ru.svx b/src/content/blogpost/css-only-masonry/index.ru.svx
index 16f9cfc9..678d85df 100644
--- a/src/content/blogpost/css-only-masonry/index.ru.svx
+++ b/src/content/blogpost/css-only-masonry/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png",
+	"cover": {
+		alt: "Минималистичное изображение раскладки Масонри посредством нескольких прямоугольных блоков различного размера.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png",
+		width: 500
+	},
 	"dateCreated": "2022-05-11T15:30:00.000Z",
 	"dateUpdated": "2022-09-22T03:16:00.000Z",
 	"description": "Реализуем компонент для галереи изображений в стиле раскладки Masonry, используя возможности CSS.",
diff --git a/src/content/blogpost/project-euler/problem-001/index.en.svx b/src/content/blogpost/project-euler/problem-001/index.en.svx
index f292597a..a7bc82ba 100644
--- a/src/content/blogpost/project-euler/problem-001/index.en.svx
+++ b/src/content/blogpost/project-euler/problem-001/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-1.png",
+	"cover": {
+		alt: "Set intersection illustration to describe the problem solution idea.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-1.png",
+		width: 500
+	},
 	"dateCreated": "2022-05-24T00:20:00.000Z",
 	"description": "Multiples of 3 or 5.",
 	"keywords": [
diff --git a/src/content/blogpost/project-euler/problem-001/index.ru.svx b/src/content/blogpost/project-euler/problem-001/index.ru.svx
index 4734a72b..61b23397 100644
--- a/src/content/blogpost/project-euler/problem-001/index.ru.svx
+++ b/src/content/blogpost/project-euler/problem-001/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-1.png",
+	"cover": {
+		alt: "Иллюстрация кругов Эйлера как отображение ключевой идеи к решению задачи.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-1.png",
+		width: 500
+	},
 	"dateCreated": "2021-06-10T00:00:00.000Z",
 	"dateUpdated": "2022-05-24T00:20:00.000Z",
 	"description": "Числа, кратные 3 или 5.",
diff --git a/src/content/blogpost/project-euler/problem-002/index.ru.svx b/src/content/blogpost/project-euler/problem-002/index.ru.svx
index 021ef732..2d86a8ff 100644
--- a/src/content/blogpost/project-euler/problem-002/index.ru.svx
+++ b/src/content/blogpost/project-euler/problem-002/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-2.png",
+	"cover": {
+		alt: "Перечисление чисел Фибоначчи, выделяя лишь чётные числа отдельным цветом.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-2.png",
+		width: 500
+	},
 	"dateCreated": "2021-06-11T00:00:00.000Z",
 	"dateUpdated": "2021-06-13T00:00:00.000Z",
 	"description": "Чётные числа Фибоначчи.",
diff --git a/src/content/blogpost/project-euler/problem-006/Index.en.svx b/src/content/blogpost/project-euler/problem-006/Index.en.svx
index 9ccef470..c85cc8de 100644
--- a/src/content/blogpost/project-euler/problem-006/Index.en.svx
+++ b/src/content/blogpost/project-euler/problem-006/Index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-6.png",
+	"cover": {
+		alt: "Иллюстрация условий задачи посредством простейших геометрических фигур.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-6.png",
+		width: 500
+	},
 	"dateCreated": "2022-10-03T00:31:00.000Z",
 	"dateUpdated": "2022-11-05T03:18:00.000Z",
 	"description": "Sum square difference.",
diff --git a/src/content/blogpost/project-euler/problem-006/index.ru.svx b/src/content/blogpost/project-euler/problem-006/index.ru.svx
index 7c413770..7ddb4098 100644
--- a/src/content/blogpost/project-euler/problem-006/index.ru.svx
+++ b/src/content/blogpost/project-euler/problem-006/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-6.png,
+	"cover": {
+		alt: "The problem description illustration using simple geometric shapes.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-6.png",
+		width: 500
+	},
 	"dateCreated": 2022-10-03T00:31:00.000Z,
 	"dateUpdated": 2022-11-05T03:19:00.000Z,
 	"description": "Разность квадратичных сумм.",
diff --git a/src/content/blogpost/quadtree/index.en.svx b/src/content/blogpost/quadtree/index.en.svx
index ba6a617d..3609e531 100644
--- a/src/content/blogpost/quadtree/index.en.svx
+++ b/src/content/blogpost/quadtree/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/quadtree.png",
+	"cover": {
+		alt: "Four-leaf clover as a visual illustration of a Quadtree data structure.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/quadtree.png",
+		width: 500
+	},
 	"dateCreated": "2023-02-17T01:30:00.000Z",
 	"description": "Let's learn about data structure used to index the flat space.",
 	"keywords": [
diff --git a/src/content/blogpost/quadtree/index.ru.svx b/src/content/blogpost/quadtree/index.ru.svx
index a318e21b..a8393810 100644
--- a/src/content/blogpost/quadtree/index.ru.svx
+++ b/src/content/blogpost/quadtree/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/quadtree.png",
+	"cover": {
+		alt: "Четырёхлистный клевер как иллюстрация идеи, заложенной в структуру данных Квадратичного дерева",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/quadtree.png",
+		width: 500
+	},
 	"dateCreated": "2023-02-01T15:53:00.000Z",
 	"dateUpdated": "2023-02-17T01:30:00.000Z",
 	"description": "Познакомимся со структурой данных, индексирующую данные на плоскости.",
diff --git a/src/content/blogpost/radix/index.en.svx b/src/content/blogpost/radix/index.en.svx
index b6712336..942066db 100644
--- a/src/content/blogpost/radix/index.en.svx
+++ b/src/content/blogpost/radix/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/radix.png",
+	"cover": {
+		alt: "Binary data illustration describing one of the most basic way to represent numbers.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/radix.png",
+		width: 500
+	},
 	"dateCreated": "2022-11-04T02:30:00.000Z",
 	"description": "The basics you need to know how we represent numbers.",
 	"keywords": [
diff --git a/src/content/blogpost/radix/index.ru.svx b/src/content/blogpost/radix/index.ru.svx
index 0d82fc7d..945dbf03 100644
--- a/src/content/blogpost/radix/index.ru.svx
+++ b/src/content/blogpost/radix/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/radix.png",
+	"cover": {
+		alt: "Изображение, содержание единицы и нули - как отображение одного из простейших способов обозначения чисел.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/radix.png",
+		width: 500
+	},
 	"dateCreated": "2022-11-04T18:20:00.000Z",
 	"description": "Самое важное , что нужно знать про запись чисел.",
 	"keywords": [
diff --git a/src/content/blogpost/where-do-aperture-numbers-come-from/index.en.svx b/src/content/blogpost/where-do-aperture-numbers-come-from/index.en.svx
index c0c916b6..236dbd27 100644
--- a/src/content/blogpost/where-do-aperture-numbers-come-from/index.en.svx
+++ b/src/content/blogpost/where-do-aperture-numbers-come-from/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/diaphragm.png",
+	"cover": {
+		alt: "The diaphragm mechanism illustration",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/diaphragm.png",
+		width: 500
+	},
 	"dateCreated": "2022-08-18T00:40:00.000Z",
 	"dateUpdated": "2022-09-13T20:34:00.000Z",
 	"description": "Let's find out, why aperture numbers are as they are and where do they come from and what is the point of this.",
diff --git a/src/content/blogpost/where-do-aperture-numbers-come-from/index.ru.svx b/src/content/blogpost/where-do-aperture-numbers-come-from/index.ru.svx
index 5e3764c5..e93b250c 100644
--- a/src/content/blogpost/where-do-aperture-numbers-come-from/index.ru.svx
+++ b/src/content/blogpost/where-do-aperture-numbers-come-from/index.ru.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/diaphragm.png",
+	"cover": {
+		alt: "Иллюстрация механизма диафрагмы",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/diaphragm.png",
+		width: 500
+	},
 	"dateCreated": "2022-08-16T14:41:00.000Z",
 	"dateUpdated": "2022-09-13T20:34:00.000Z",
 	"description": "Попробуем разобраться, почему диафрагменные числа такие какие они есть и каков в этом смысл.",
diff --git a/src/content/project/blossom/index.en.svx b/src/content/project/blossom/index.en.svx
index 4813d755..c218478e 100644
--- a/src/content/project/blossom/index.en.svx
+++ b/src/content/project/blossom/index.en.svx
@@ -1,18 +1,25 @@
 ---
 {
+	"cover": {
+		alt: "The Blossom project logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-blossom.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Blossom is a JS library tool for colour manipulations and transformations.",
 	"draft": true,
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "en",
 	"maintained": false,
 	"npm": "@ericrovell/blossom",
 	"repository": "EricRovell/blossom",
+	"slug": "/en/projects/blossom",
 	"title": "blossom",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library",
 	"website": "https://ericrovell.github.io/blossom-web"
 }
 ---
diff --git a/src/content/project/blossom/index.ru.svx b/src/content/project/blossom/index.ru.svx
index 763b919e..850eef80 100644
--- a/src/content/project/blossom/index.ru.svx
+++ b/src/content/project/blossom/index.ru.svx
@@ -1,18 +1,25 @@
 ---
 {
+	"cover": {
+		alt: "Логотип библиотеки Blossom",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-blossom.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Blossom - библиотека для конвертации цветов и манипуляций на ними, написанная на TypeScript.",
 	"draft": true,
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "ru",
 	"maintained": false,
 	"npm": "@ericrovell/blossom",
 	"repository": "EricRovell/blossom",
+	"slug": "/ru/projects/blossom",
 	"title": "blossom",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library",
 	"website": "https://ericrovell.github.io/blossom-web"
 }
 ---
diff --git a/src/content/project/illumination-schedule-spb/index.en.svx b/src/content/project/illumination-schedule-spb/index.en.svx
index fee5fccf..47840c32 100644
--- a/src/content/project/illumination-schedule-spb/index.en.svx
+++ b/src/content/project/illumination-schedule-spb/index.en.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Illumination Schedule SPb project logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-spb-light.png",
+		width: 500
+	},
 	"dateUpdated": "2023-05-07T02:14:00.000Z",
 	"description": "Provides the illumination schedule data for Saint-Petersburg, Russia.",
 	"featured": true,
-	"lang": "en",
-	"maintained": true,
-	"repository": "EricRovell/illumination-schedule-spb",
-	"title": "illumination-schedule-spb",
-	"techstack": [
+	"keywords": [
+		"web application",
 		"Svelte",
 		"TypeScript"
 	],
-	"type": "web-application",
+	"lang": "en",
+	"maintained": true,
+	"repository": "EricRovell/illumination-schedule-spb",
+	"slug": "/en/projects/illumination-schedule-spb",
+	"title": "Illumination Schedule SPb",
 	"website": "https://illumination-schedule-spb.vercel.app/"
 }
 ---
diff --git a/src/content/project/illumination-schedule-spb/index.ru.svx b/src/content/project/illumination-schedule-spb/index.ru.svx
index c36893b0..43a2f6f3 100644
--- a/src/content/project/illumination-schedule-spb/index.ru.svx
+++ b/src/content/project/illumination-schedule-spb/index.ru.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Логотип проекта Illumination Schedule SPb",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-spb-light.png",
+		width: 500
+	},
 	"dateUpdated": "2023-05-07T02:14:00.000Z",
 	"description": "Веб-приложение для отображения данных графика наружного освещения города Санкт-Петербурга.",
 	"featured": true,
-	"lang": "ru",
-	"maintained": true,
-	"repository": "EricRovell/illumination-schedule-spb",
-	"title": "illumination-schedule-spb",
-	"techstack": [
+	"keywords": [
+		"web application",
 		"Svelte",
 		"TypeScript"
 	],
-	"type": "web-application",
+	"lang": "ru",
+	"maintained": true,
+	"repository": "EricRovell/illumination-schedule-spb",
+	"slug": "/ru/projects/illumination-schedule-spb",
+	"title": "Illumination Schedule SPb",
 	"website": "https://illumination-schedule-spb.vercel.app/"
 }
 ---
diff --git a/src/content/project/project-euler/index.en.svx b/src/content/project/project-euler/index.en.svx
deleted file mode 100644
index a6b45180..00000000
--- a/src/content/project/project-euler/index.en.svx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-{
-	"dateUpdated": "2022-11-09T01:29:00.000Z",
-	"description": "Project Euler",
-	"draft": true,
-	"featured": false,
-	"lang": "en",
-	"maintained": true,
-	"repository": "EricRovell/project-euler-ts",
-	"title": "project-euler",
-	"techstack": [
-		"TypeScript"
-	]
-}
----
diff --git a/src/content/project/project-euler/index.ru.svx b/src/content/project/project-euler/index.ru.svx
deleted file mode 100644
index 39f2724d..00000000
--- a/src/content/project/project-euler/index.ru.svx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-{
-	"dateUpdated": "2022-11-09T01:29:00.000Z",
-	"description": "Проект Эйлера",
-	"draft": true,
-	"featured": false,
-	"lang": "ru",
-	"maintained": true,
-	"repository": "EricRovell/project-euler-ts",
-	"title": "project-euler",
-	"techstack": [
-		"TypeScript"
-	]
-}
----
diff --git a/src/content/project/radix/index.en.svx b/src/content/project/radix/index.en.svx
index 01521c6b..a08eec20 100644
--- a/src/content/project/radix/index.en.svx
+++ b/src/content/project/radix/index.en.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Radix library logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-radix.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Radix is a JS library for radix number transformations and manipulations.",
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "en",
 	"maintained": true,
 	"npm": "@ericrovell/radix",
 	"repository": "EricRovell/radix",
+	"slug": "/en/projects/radix",
 	"title": "radix",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library",
 	"website": "https://radix.vercel.app/"
 }
 ---
diff --git a/src/content/project/radix/index.ru.svx b/src/content/project/radix/index.ru.svx
index b713c285..d381ede5 100644
--- a/src/content/project/radix/index.ru.svx
+++ b/src/content/project/radix/index.ru.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Логотип библиотеки radix",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-radix.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Radix — библиотека для перевода чисел в различные системы счисленя, написанная на TypeScript.",
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "ru",
 	"maintained": true,
 	"npm": "@ericrovell/radix",
 	"repository": "EricRovell/radix",
+	"slug": "/ru/projects/radix",
 	"title": "radix",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library",
 	"website": "https://radix.vercel.app/"
 }
 ---
diff --git a/src/content/project/rational/index.en.svx b/src/content/project/rational/index.en.svx
index 1aceb5bf..3badd8c5 100644
--- a/src/content/project/rational/index.en.svx
+++ b/src/content/project/rational/index.en.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Rational library project logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-rational.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Rational is rational numbers library written in TypeScript",
 	"draft": true,
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "en",
 	"maintained": true,
 	"npm": "@ericrovell/rational",
 	"repository": "EricRovell/rational",
-	"title": "rational",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library"
+	"slug": "/en/projects/rational",
+	"title": "rational"
 }
 ---
diff --git a/src/content/project/rational/index.ru.svx b/src/content/project/rational/index.ru.svx
index fe313c5c..6a3bc862 100644
--- a/src/content/project/rational/index.ru.svx
+++ b/src/content/project/rational/index.ru.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Rational project logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-rational.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Rational - библиотека, добавляющая поддержку рациональных чисел в JavaScript.",
 	"draft": true,
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "ru",
 	"maintained": true,
 	"npm": "@ericrovell/rational",
 	"repository": "EricRovell/rational",
-	"title": "rational",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library"
+	"slug": "/ru/projects/rational",
+	"title": "rational"
 }
 ---
diff --git a/src/content/project/svelte-media-observer/index.en.svx b/src/content/project/svelte-media-observer/index.en.svx
index 523f39d7..c2740bb7 100644
--- a/src/content/project/svelte-media-observer/index.en.svx
+++ b/src/content/project/svelte-media-observer/index.en.svx
@@ -1,19 +1,26 @@
 ---
 {
+	"cover": {
+		alt: "Svelte Media Observer project logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-svelte-media-observer.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "SvelteJS media queries observer.",
 	"draft": true,
 	"featured": true,
+	"keywords": [
+		"library",
+		"Svelte",
+		"TypeScript"
+	],
 	"lang": "en",
 	"maintained": true,
 	"npm": "svelte-media-observer",
 	"repository": "EricRovell/svelte-media-observer",
-	"title": "svelte-media-observer",
-	"techstack": [
-		"Svelte",
-		"TypeScript"
-	],
-	"type": "library",
+	"slug": "/en/projects/svelte-media-observer",
+	"title": "Svelte Media Observer",
 	"website": "https://svelte.dev/repl/e9f6a16dfd9a4013b1a0a76347b206eb?version=3"
 }
 ---
diff --git a/src/content/project/svelte-media-observer/index.ru.svx b/src/content/project/svelte-media-observer/index.ru.svx
index 49a31c85..5eb1bcda 100644
--- a/src/content/project/svelte-media-observer/index.ru.svx
+++ b/src/content/project/svelte-media-observer/index.ru.svx
@@ -1,19 +1,26 @@
 ---
 {
+	"cover": {
+		alt: "Логотип проекта Svelte Media Observer",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-svelte-media-observer.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-09T01:29:00.000Z",
 	"description": "Наблюдатель медиа-выражений для SvelteJS",
 	"draft": true,
 	"featured": true,
+	"keywords": [
+		"library",
+		"Svelte",
+		"TypeScript"
+	],
 	"lang": "ru",
 	"maintained": true,
 	"npm": "svelte-media-observer",
-	"title": "svelte-media-observer",
 	"repository": "EricRovell/svelte-media-observer",
-	"techstack": [
-		"Svelte",
-		"TypeScript"
-	],
-	"type": "library",
+	"slug": "/ru/projects/svelte-media-observer",
+	"title": "Svelte Media Observer",
 	"website": "https://svelte.dev/repl/e9f6a16dfd9a4013b1a0a76347b206eb?version=3"
 }
 ---
diff --git a/src/content/project/vector/index.en.svx b/src/content/project/vector/index.en.svx
index 027723c6..18a9a1cc 100644
--- a/src/content/project/vector/index.en.svx
+++ b/src/content/project/vector/index.en.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Vector library project logo",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-vector.png",
+		width: 500
+	},
 	"dateUpdated": "2023-06-04T00:25:00.000Z",
 	"description": "Euclidian vector library written in TypeScript.",
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "en",
 	"maintained": true,
 	"npm": "@ericrovell/vector",
 	"repository": "EricRovell/vector",
-	"title": "vector",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library"
+	"slug": "/en/projects/vector",
+	"title": "vector"
 }
 ---
 
diff --git a/src/content/project/vector/index.ru.svx b/src/content/project/vector/index.ru.svx
index c0cb90f3..8ad69ef1 100644
--- a/src/content/project/vector/index.ru.svx
+++ b/src/content/project/vector/index.ru.svx
@@ -1,17 +1,24 @@
 ---
 {
+	"cover": {
+		alt: "Логотип библиотеки Vector",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/project-vector.png",
+		width: 500
+	},
 	"dateUpdated": "2023-06-04T00:25:00.000Z",
 	"description": "Библиотека для работы с евклидовыми векторами, написанная на TypeScript.",
 	"featured": true,
+	"keywords": [
+		"library",
+		"TypeScript"
+	],
 	"lang": "ru",
 	"maintained": true,
 	"npm": "@ericrovell/vector",
 	"repository": "EricRovell/vector",
-	"title": "vector",
-	"techstack": [
-		"TypeScript"
-	],
-	"type": "library"
+	"slug": "/ru/projects/vector",
+	"title": "vector"
 }
 ---
 
diff --git a/src/content/sketch/chaos-game/index.en.svx b/src/content/sketch/chaos-game/index.en.svx
index 1c18a57d..7eac1a43 100644
--- a/src/content/sketch/chaos-game/index.en.svx
+++ b/src/content/sketch/chaos-game/index.en.svx
@@ -1,6 +1,11 @@
 ---
 {
-	"cover": https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png,
+	"cover": {
+		alt: "The polyline within the triangle illustrating the basic chaos game rules.",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+		width: 500
+	},
 	"dateUpdated": "2023-01-05T20:12:00.000Z",
 	"description": "Vizualizing a fractals from simple rules and a randomness.",
 	"keywords": [
@@ -10,8 +15,8 @@
 		"generative art"
 	],
 	"lang": "en",
-	"title": "Chaos Game",
-	"url": "/en/sketch/chaos-game"
+	"slug": "/en/sketch/chaos-game",
+	"title": "Chaos Game"
 }
 ---
 
diff --git a/src/content/sketch/chaos-game/index.ru.svx b/src/content/sketch/chaos-game/index.ru.svx
index 825b657f..112041c7 100644
--- a/src/content/sketch/chaos-game/index.ru.svx
+++ b/src/content/sketch/chaos-game/index.ru.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "Ломаная внутри треугольника, отображающая базовые принципы Игры Хаоса",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+		width: 500
+	},
 	"dateUpdated": "2023-01-05T20:12:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
 	"description": "Выстраиваем фрактальные геометрические фигуры на основе простых правил и случайности.",
 	"keywords": [
 		"игра хаоса",
@@ -10,8 +15,8 @@
 		"генеративное искусство"
 	],
 	"lang": "ru",
-	"title": "Игра Хаоса",
-	"url": "/ru/sketch/chaos-game"
+	"slug": "/ru/sketch/chaos-game",
+	"title": "Игра Хаоса"
 }
 ---
 
diff --git a/src/content/sketch/digital-rain/index.en.svx b/src/content/sketch/digital-rain/index.en.svx
index ed962a2e..02e467db 100644
--- a/src/content/sketch/digital-rain/index.en.svx
+++ b/src/content/sketch/digital-rain/index.en.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "A lot of small rectangles falling from the top",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/digital-rain.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-19T00:09:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/digital-rain.png",
 	"description": "Matrix digital rain, Matrix code or sometimes green rain, is the computer code featured in the Matrix series.",
 	"keywords": [
 		"digital rain",
@@ -11,8 +16,8 @@
 		"generative art"
 	],
 	"lang": "en",
-	"title": "Digital Rain",
-	"url": "/en/sketch/digital-rain"
+	"slug": "/en/sketch/digital-rain",
+	"title": "Digital Rain"
 }
 ---
 
diff --git a/src/content/sketch/digital-rain/index.ru.svx b/src/content/sketch/digital-rain/index.ru.svx
index 61fc4430..5ffb8c01 100644
--- a/src/content/sketch/digital-rain/index.ru.svx
+++ b/src/content/sketch/digital-rain/index.ru.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "Множество зелёных квадратов, падающих сверху",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/digital-rain.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-19T00:09:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/digital-rain.png",
 	"description": "Виртуальный дождь, известный как Код Матрицы, можно часто встретить в серии вселенной Матрицы.",
 	"keywords": [
 		"виртуальный дождь",
@@ -11,8 +16,8 @@
 		"генеративное искусство"
 	],
 	"lang": "ru",
-	"title": "Виртуальный дождь",
-	"url": "/ru/sketch/digital-rain"
+	"slug": "/ru/sketch/digital-rain",
+	"title": "Виртуальный дождь"
 }
 ---
 
diff --git a/src/content/sketch/flocking/index.en.svx b/src/content/sketch/flocking/index.en.svx
index 29d1a915..77395424 100644
--- a/src/content/sketch/flocking/index.en.svx
+++ b/src/content/sketch/flocking/index.en.svx
@@ -1,8 +1,13 @@
 ---
 {
+	"cover": {
+		alt: "Boids illustrated as deformed triangles",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/flocking.png",
+		width: 500
+	},
 	"dateUpdated": "2022-12-04T15:18:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/flocking.png",
-	"description": Flocking simulation based on Craig Reynolds \"boids\" algorithm.",
+	"description": Flocking simulation based on Craig Reynolds 'boids' algorithm.",
 	"keywords": [
 		"boids",
 		"flocking",
@@ -10,8 +15,8 @@
 		"simulation"
 	],
 	"lang": "en",
-	"title": "Flocking",
-	"url": "/en/sketch/flocking"
+	"slug": "/en/sketch/flocking",
+	"title": "Flocking"
 }
 ---
 
diff --git a/src/content/sketch/flocking/index.ru.svx b/src/content/sketch/flocking/index.ru.svx
index 1573bb0f..54df6d78 100644
--- a/src/content/sketch/flocking/index.ru.svx
+++ b/src/content/sketch/flocking/index.ru.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "Автоматоны, изображённые в виде деформированных треугольников",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/flocking.png",
+		width: 500
+	},
 	"dateUpdated": "2022-12-04T15:18:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/flocking.png",
 	"description": "Моделирование поведения стаи на основе алгоритма Крейга Рейнольдса.",
 	"keywords": [
 		"стая",
@@ -9,8 +14,8 @@
 		"моделирование"
 	],
 	"lang": "ru",
-	"title": "Стая",
-	"url": "/ru/sketch/flocking"
+	"slug": "/ru/sketch/flocking",
+	"title": "Стая"
 }
 ---
 
diff --git a/src/content/sketch/geometric-hive/index.en.svx b/src/content/sketch/geometric-hive/index.en.svx
index 29c8ce37..5295d791 100644
--- a/src/content/sketch/geometric-hive/index.en.svx
+++ b/src/content/sketch/geometric-hive/index.en.svx
@@ -1,12 +1,17 @@
 ---
 {
+	"cover": {
+		alt: "The block transitioning to another place",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/geometric-hive.png",
+		width: 500
+	},
 	"dateUpdated": "2023-08-30T00:02:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/geometric-hive.png",
 	"description": "Particles randomly within the gaps",
 	"keywords": [ "canvas animation", "generative art", "geometry" ],
 	"lang": "en",
-	"title": "Geometric Hive",
-	"url": "/en/sketch/geometric-hive"
+	"slug": "/en/sketch/geometric-hive",
+	"title": "Geometric Hive"
 }
 ---
 
diff --git a/src/content/sketch/geometric-hive/index.ru.svx b/src/content/sketch/geometric-hive/index.ru.svx
index b37e0c1e..8f20c3af 100644
--- a/src/content/sketch/geometric-hive/index.ru.svx
+++ b/src/content/sketch/geometric-hive/index.ru.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "Блок, перемещающийся в другое место",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/geometric-hive.png",
+		width: 500
+	},
 	"dateUpdated": "2023-08-30T00:02:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/geometric-hive.png",
 	"description": "Геометрические фигуры, движующиеся сквозь пустоты.",
 	"keywords": [
 		"canvas",
@@ -9,8 +14,8 @@
 		"геометрия"
 	],
 	"lang": "ru",
-	"title": "Геометрический улей",
-	"url": "/ru/sketch/geometric-hive"
+	"slug": "/ru/sketch/geometric-hive",
+	"title": "Геометрический улей"
 }
 ---
 
diff --git a/src/content/sketch/the-attractor/index.en.svx b/src/content/sketch/the-attractor/index.en.svx
index 2e1ba9b0..eb203211 100644
--- a/src/content/sketch/the-attractor/index.en.svx
+++ b/src/content/sketch/the-attractor/index.en.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "Simplified attractor illustration",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/the-attractor.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-20T00:37:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/the-attractor.png",
 	"description": "The attractor field flow visualization.",
 	"keywords": [
 		"the attractor",
@@ -10,8 +15,8 @@
 		"generative art"
 	],
 	"lang": "en",
-	"title": "The Attractor",
-	"url": "/en/sketch/the-attractor"
+	"slug": "/en/sketch/the-attractor",
+	"title": "The Attractor"
 }
 ---
 
diff --git a/src/content/sketch/the-attractor/index.ru.svx b/src/content/sketch/the-attractor/index.ru.svx
index 7e0c67e3..2c8ced6d 100644
--- a/src/content/sketch/the-attractor/index.ru.svx
+++ b/src/content/sketch/the-attractor/index.ru.svx
@@ -1,7 +1,12 @@
 ---
 {
+	"cover": {
+		alt: "Упрощённая иллюстрация аттрактора как сущности",
+		height: 500,
+		src: "https://storage.yandexcloud.net/escapist-marginalia/covers/the-attractor.png",
+		width: 500
+	},
 	"dateUpdated": "2022-11-20T00:37:00.000Z",
-	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/the-attractor.png",
 	"description": "Визуализация течения частиц в поле аттрактора.",
 	"keywords": [
 		"аттрактор",
@@ -10,8 +15,8 @@
 		"генеративное искусство"
 	],
 	"lang": "ru",
-	"title": "Аттрактор",
-	"url": "/ru/sketch/the-attractor"
+	"slug": "/ru/sketch/the-attractor",
+	"title": "Аттрактор"
 }
 ---
 
diff --git a/src/core/paths.ts b/src/core/paths.ts
index e1f8bd0b..5a74854b 100644
--- a/src/core/paths.ts
+++ b/src/core/paths.ts
@@ -21,10 +21,11 @@ export const pathWriting = derived(root, $root => `${$root}/writing`);
 // page::item
 export const pathBlogpost = derived(pathWriting, $root => (slug: string) => `${$root}/${encodeURI(slug)}`);
 export const pathGalleryImage = derived(pathGallery, $root => (id: string) => `${$root}/${id}`);
-export const pathProject = derived(pathProjects, $root => (slug: string) => `${$root}/${encodeURI(slug)}`);
+//export const pathProject = derived(pathProjects, $root => (slug: string) => `${$root}/${encodeURI(slug)}`);
 
 // socials
 export const pathInstagram = "https://www.instagram.com/Eric_Rovell";
+export const pathLeetcode = "https://leetcode.com/Eric_Rovell/";
 export const pathRSS = derived(root, $root => `${$root}/rss.xml`);
 export const pathRSSMultilang = derived(webpage, $webpage => `${$webpage}/rss.xml`);
 export const pathTelegram = derived(locale, $locale => `https://t.me/escapist_marginalia${$locale === "ru" ? "_ru" : ""}`);
diff --git a/src/data/posts.ts b/src/data/posts.ts
index adbc7682..68424443 100644
--- a/src/data/posts.ts
+++ b/src/data/posts.ts
@@ -11,17 +11,13 @@ async function fetchBlogposts(): Promise<Blogpost[]> {
 	for await (const [ filename, module ] of Object.entries(modules)) {
 		const { metadata } = await module() as Page<BlogpostMetadata>;
 		const {
-			dateCreated,
-			dateUpdated,
 			draft = false,
 			title,
 			...rest
 		}: BlogpostMetadata = metadata;
 
 		posts.push({
-			dateCreated: new Date(dateCreated),
 			draft,
-			dateUpdated: new Date(dateUpdated),
 			title,
 			/**
 			 * All blogpost contents are located as:
diff --git a/src/data/sketch.ts b/src/data/sketch.ts
new file mode 100644
index 00000000..01d2979b
--- /dev/null
+++ b/src/data/sketch.ts
@@ -0,0 +1,58 @@
+import { find, type QueryItem } from "@utils/query";
+import type { Sketch, Page } from "../types";
+
+interface Options {
+	limit?: number;
+}
+
+/**
+ * Retrieves data stored in project pages.
+ */
+const getSketchPageData = async () => {
+	try {
+		const pages: Sketch[] = [];
+		const modules = import.meta.glob("/src/content/sketch/*/*.svx");
+
+		// the key is filename, we do not need it here
+		for await (const [ , module ] of Object.entries(modules)) {
+			const { metadata } = await module() as Page<Sketch>;
+			const { draft = false } = metadata;
+			pages.push({ ...metadata, draft });
+		}
+
+		return pages;
+
+	} catch (error) {
+		console.error(`Cannot retrieve data from pages: ${error.message}`);
+	}
+};
+
+export const getSketches = async ({ lang, title, draft }: Partial<Sketch> = {}, { limit }: Options = {}): Promise<Sketch[]> => {
+	const data = await getSketchPageData();
+
+	type Query<T> = {
+		"draft": QueryItem<boolean, T>;
+		"lang": QueryItem<string, T>;
+		"slug": QueryItem<string, T>;
+	};
+
+	const query: Query<Sketch> = {
+		draft: {
+			value: draft,
+			validator: draft => typeof draft === "boolean",
+			matcher: value => project => project.draft === value
+		},
+		lang: {
+			value: lang,
+			validator: lang => [ "en", "ru" ].includes(lang),
+			matcher: value => project => project.lang === value
+		},
+		slug: {
+			value: title,
+			validator: title => typeof title === "string",
+			matcher: title => project => project.title === title
+		}
+	};
+
+	return find(data, query, { limit });
+};
diff --git a/src/lib/components/card/card-blogpost.module.css b/src/lib/components/card/card-blogpost.module.css
deleted file mode 100644
index 8b8362b4..00000000
--- a/src/lib/components/card/card-blogpost.module.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.card {
-	display: grid;
-	grid-template-rows: repeat(3, min-content) 1fr;
-	height: 100%;
-	padding-block-end: var(--space-5);
-}
-
-.card > picture {
-	background-color: var(--surface-1);
-}
-
-.card img {
-	aspect-ratio: 2 / 1;
-	object-fit: contain;
-}
-
-.card > :not(picture) {
-	padding-inline: var(--space-3);
-}
-
-.card h3 {
-	font-size: var(--font-size-2);
-	color: var(--color-heading);
-}
-
-.card footer {
-	display: flex;
-	flex-flow: column;
-	justify-content: flex-end;
-	gap: var(--space-2-rel);
-}
-
-.card-article h3 {
-	font-size: var(--font-size-2);
-}
-
-.card time {
-	margin-block: var(--space-3) var(--space-1);
-	font-size: var(--font-size-0);
-}
-
-.keywords {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--space-2-rel);
-	color: var(--surface-2-text-less-contrast);
-	font-size: var(--font-size-0);
-	margin-block-start: var(--space-3-rel);
-}
diff --git a/src/lib/components/card/card-blogpost.svelte b/src/lib/components/card/card-blogpost.svelte
deleted file mode 100644
index 5e44ca9c..00000000
--- a/src/lib/components/card/card-blogpost.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts" context="module">
-	import type { Blogpost } from "@types";
-</script>
-
-<script lang="ts">
-	import { Datetime } from "../datetime";
-	import { Link } from "../link";
-	import { Image } from "../image";
-	import { pathBlogpost } from "@core/paths";
-	import stylesCard from "./card.module.css";
-	import styles from "./card-blogpost.module.css";
-
-	export let cover: Blogpost["cover"];
-	export let dateCreated: Blogpost["dateCreated"];
-	export let description: Blogpost["description"];
-	export let keywords: Blogpost["keywords"] = [];
-	export let title: Blogpost["title"];
-	export let slug: Blogpost["slug"];
-</script>
-
-<article class="surface-2 {stylesCard.card} {styles.card}">
-	<Image
-		alt="The article cover image"
-		height="{500}"
-		src="{cover}"
-		width="{500}"
-	/>
-	<Datetime
-		date={dateCreated}
-		options={{ month: "long", day: "numeric", year: "numeric" }}
-	/>
-	<h3>
-		<Link	href={$pathBlogpost(slug)}>
-			{title}
-		</Link>
-	</h3>
-	<p class="line-clamp" style="--line-count: 3">
-		{description}
-	</p>
-	<footer>
-		<ul class={styles.keywords}>
-			{#each keywords as keyword}
-				<li>
-					<span class={styles.keyword}>
-						{keyword}
-					</span>
-				</li>
-			{/each}
-		</ul>
-	</footer>
-</article>
diff --git a/src/lib/components/card/card-project.module.css b/src/lib/components/card/card-project.module.css
deleted file mode 100644
index 9edcd9e0..00000000
--- a/src/lib/components/card/card-project.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.card {
-	display: grid;
-	grid-template-rows: repeat(2, min-content) 1fr;
-	gap: var(--space-3-rel);
-	height: 100%;
-	padding: var(--space-3-rel);
-}
-
-.card h3 {
-	font-size: var(--font-size-2);
-	color: var(--color-heading);
-}
-
-.card footer {
-	display: flex;
-	flex-flow: column;
-	justify-content: flex-end;
-	gap: var(--space-2-rel);
-}
-
-.techstack {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-	gap: var(--space-2-rel);
-	color: var(--surface-2-text-less-contrast);
-	font-size: var(--font-size-0);
-}
diff --git a/src/lib/components/card/card-project.svelte b/src/lib/components/card/card-project.svelte
deleted file mode 100644
index e04f4153..00000000
--- a/src/lib/components/card/card-project.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts" context="module">
-	import type { Project } from "@types";
-</script>
-
-<script lang="ts">
-	import { pathProject } from "@core/paths";
-	import { Link } from "../link";
-	import stylesCard from "./card.module.css";
-	import styles from "./card-project.module.css";
-
-	export let description: Project["description"];
-	export let title: Project["title"];
-	export let techstack: Project["techstack"] = [];
-</script>
-
-<article class="surface-2 {stylesCard.card} {styles.card}">
-	<h3>
-		<Link href="{$pathProject(title)}">
-			{title}
-		</Link>
-	</h3>
-	<p class="line-clamp" style="--line-count: 3">
-		{description}
-	</p>
-	<footer>
-		<ul class={styles.techstack}>
-			{#each techstack as item}
-				<li>{item}</li>
-			{/each}
-		</ul>
-	</footer>
-</article>
diff --git a/src/lib/components/card/card-sketch.module.css b/src/lib/components/card/card-sketch.module.css
deleted file mode 100644
index ffcffedb..00000000
--- a/src/lib/components/card/card-sketch.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.card {
-	justify-self: center;
-	width: 100%;
-}
-
-.card h3 {
-	font-size: var(--font-size-1);
-	color: var(--color-heading);
-}
-
-.card a {
-	display: flex;
-}
-
-.card img {
-	aspect-ratio: 1 / 1;
-	width: 100%;
-	height: min-content;
-	background-color: var(--surface-1);
-}
-
-.card figcaption {
-	width: 100%;
-	padding: var(--space-2) var(--space-3);
-}
diff --git a/src/lib/components/card/card-sketch.svelte b/src/lib/components/card/card-sketch.svelte
deleted file mode 100644
index 84eb7d50..00000000
--- a/src/lib/components/card/card-sketch.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts" context="module">
-	import type { Sketch } from "@types";
-</script>
-
-<script lang="ts">
-	import { Link } from "../link";
-	import { Image } from "../image";
-	import stylesCard from "./card.module.css";
-	import styles from "./card-sketch.module.css";
-
-	export let cover: string;
-	export let description: Sketch["description"];
-	export let title: Sketch["title"];
-	export let url: Sketch["url"];
-</script>
-
-<article class="surface-2 {stylesCard.card} {styles.card}">
-	<Link href="{url}">
-		<figure>
-			<Image alt="{description}" src="{cover}" width="{500}" height="{500}" />
-			<figcaption>
-				<h3>{title}</h3>
-			</figcaption>
-		</figure>
-	</Link>
-</article>
diff --git a/src/lib/components/card/card.module.css b/src/lib/components/card/card.module.css
index 93ffb58c..c306d7f8 100644
--- a/src/lib/components/card/card.module.css
+++ b/src/lib/components/card/card.module.css
@@ -1,5 +1,9 @@
 .card {
 	position: relative;
+	display: grid;
+	grid-template-rows: repeat(3, min-content) 1fr;
+	height: 100%;
+	padding-block-end: var(--space-5);
 	border: 3px solid var(--color-border-50);
 	border-radius: var(--radius-m);
 	transition: outline-offset 0.25s ease-in-out;
@@ -28,10 +32,50 @@
 		}
 	}
 
-	& li {
-		border: 1px solid var(--color-border-50);
-		background-color: var(--surface-3);
-		padding: var(--space-1) var(--space-2);
-		border-radius: var(--radius-xs);
+	& > :not(picture) {
+		padding-inline: var(--space-3);
+	}
+
+	& picture {
+		background-color: var(--surface-1);
+	}
+
+	& img {
+		aspect-ratio: 2 / 1;
+		object-fit: contain;
+	}
+
+	& h3 {
+		font-size: var(--font-size-2);
+		color: var(--color-heading);
+		text-wrap: balance;
+	}
+
+	& time {
+		margin-block: var(--space-3) var(--space-1);
+		font-size: var(--font-size-0);
+	}
+
+	& footer {
+		display: flex;
+		flex-flow: column;
+		justify-content: flex-end;
+		gap: var(--space-2-rel);
+	}
+
+	& ul {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-2-rel);
+		color: var(--surface-2-text-less-contrast);
+		font-size: var(--font-size-0);
+		margin-block-start: var(--space-3-rel);
+
+		& li {
+			border: 1px solid var(--color-border-50);
+			background-color: var(--surface-3);
+			padding: var(--space-1) var(--space-2);
+			border-radius: var(--radius-xs);
+		}
 	}
 }
diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte
new file mode 100644
index 00000000..a1492fca
--- /dev/null
+++ b/src/lib/components/card/card.svelte
@@ -0,0 +1,57 @@
+<script context="module" lang="ts">
+	import type { CoverImage } from "@types";
+</script>
+
+<script lang="ts">
+	import { Datetime } from "../datetime";
+	import { Link } from "../link";
+	import { Image } from "../image";
+	import styles from "./card.module.css";
+
+	export let cover: CoverImage;
+	export let date: string;
+	export let description: string | undefined = undefined;
+	export let href: string;
+	export let keywords: string[] = [];
+	export let title: string;
+</script>
+
+<article class="surface-2 {styles.card}">
+	<Image
+		alt="{cover.alt}"
+		height="{cover.height}"
+		src="{cover.src}"
+		width="{cover.width}"
+	/>
+	<Datetime
+		date={date}
+		options={{
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		}}
+	/>
+	<h3>
+		<Link	{href}>
+			{title}
+		</Link>
+	</h3>
+	{#if description}
+		<p class="line-clamp" style="--line-count: 3">
+			{description}
+		</p>
+	{/if}
+	{#if keywords.length}
+		<footer>
+			<ul class={styles.keywords}>
+				{#each keywords as keyword}
+					<li>
+						<span class={styles.keyword}>
+							{keyword}
+						</span>
+					</li>
+				{/each}
+			</ul>
+		</footer>
+	{/if}
+</article>
diff --git a/src/lib/components/card/index.ts b/src/lib/components/card/index.ts
index f8d2a1bb..d9fd98d5 100644
--- a/src/lib/components/card/index.ts
+++ b/src/lib/components/card/index.ts
@@ -1,3 +1 @@
-export { default as CardBlogpost } from "./card-blogpost.svelte";
-export { default as CardProject } from "./card-project.svelte";
-export { default as CardSketch } from "./card-sketch.svelte";
+export { default as Card } from "./card.svelte";
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 2c460609..af49c46b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,6 +1,6 @@
 export { Button } from "./button";
 export { Canvas, CanvasLayer } from "./canvas";
-export { CardBlogpost, CardProject, CardSketch } from "./card";
+export { Card } from "./card";
 export { default as Code } from "./code/Code.svelte";
 export { Datetime } from "./datetime";
 export { Details } from "./details";
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index bf7058e7..d436bd08 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -7,6 +7,7 @@ export const iconFunction = "M52.53,9.69A9.19,9.19,0,0,0,37.9,16.46L37.07,29H51.
 export const iconGear = "m99.08,37.15c-.2-1.02-.84-1.9-1.74-2.41l-13.32-7.59-.05-15.01c0-1.05-.47-2.04-1.26-2.71-4.83-4.09-10.39-7.22-16.39-9.23-.96-.32-2-.23-2.88.26l-13.43,7.51L36.56.46c-.88-.49-1.93-.59-2.89-.27-6,2.02-11.55,5.17-16.37,9.26-.8.68-1.26,1.67-1.26,2.71l-.07,15.02-13.32,7.59c-.9.51-1.54,1.39-1.74,2.41-1.22,6.12-1.22,12.43,0,18.55.2,1.02.84,1.9,1.74,2.41l13.32,7.59.05,15.01c0,1.05.47,2.04,1.26,2.71,4.83,4.09,10.39,7.22,16.39,9.23.96.32,2,.23,2.88-.26l13.45-7.53,13.45,7.52c.53.3,1.13.45,1.74.45.39,0,.78-.06,1.15-.19,5.99-2.02,11.55-5.16,16.37-9.25.8-.68,1.26-1.67,1.26-2.71l.07-15.02,13.32-7.59c.9-.51,1.54-1.39,1.74-2.41,1.21-6.12,1.21-12.42-.01-18.53Zm-49.08,27.14c-9.86,0-17.86-7.99-17.86-17.86s7.99-17.86,17.86-17.86,17.86,7.99,17.86,17.86-7.99,17.86-17.86,17.86Z";
 export const iconGithub = "m91.62,22.73c2.17-7.01,1.32-14.62-2.37-20.97C88.62.67,87.46,0,86.2,0c-8.31-.02-16.14,3.9-21.11,10.56h-10.56C49.56,3.9,41.74-.02,33.43,0c-1.26,0-2.42.67-3.05,1.76-3.68,6.35-4.54,13.96-2.37,20.97-2.17,3.79-3.34,8.08-3.38,12.46v3.52c.02,12.31,9.11,22.72,21.3,24.4-2.41,3.08-3.71,6.88-3.71,10.79v3.52h-10.56c-5.83,0-10.56-4.73-10.56-10.56,0-9.72-7.88-17.59-17.59-17.59-1.94,0-3.52,1.58-3.52,3.52s1.58,3.52,3.52,3.52c5.83,0,10.56,4.73,10.56,10.56,0,9.72,7.88,17.59,17.59,17.59h10.56v7.04c0,1.94,1.58,3.52,3.52,3.52s3.52-1.58,3.52-3.52v-17.59c0-5.83,4.73-10.56,10.56-10.56s10.56,4.73,10.56,10.56v17.59c0,1.94,1.58,3.52,3.52,3.52s3.52-1.58,3.52-3.52v-17.59c0-3.91-1.3-7.71-3.71-10.79,12.2-1.67,21.29-12.09,21.3-24.4v-3.52c-.04-4.37-1.21-8.66-3.38-12.46Zm-3.65,15.97c0,9.72-7.88,17.59-17.59,17.59h-21.11c-9.72,0-17.59-7.88-17.59-17.59v-3.52c.04-3.52,1.1-6.95,3.03-9.89.73-.97.92-2.25.48-3.38-1.85-4.77-1.73-10.09.35-14.77,5.83.63,11.06,3.87,14.21,8.82.64,1.01,1.76,1.62,2.95,1.62h14.23c1.2,0,2.32-.61,2.96-1.62,3.15-4.95,8.38-8.2,14.21-8.82,2.07,4.68,2.19,10,.34,14.77-.43,1.12-.27,2.39.44,3.36,1.96,2.94,3.03,6.38,3.08,9.9v3.52Z";
 export const iconGlobe = "M50,0A50,50,0,1,1,0,50,50,50,0,0,1,50,0ZM64.69,72.5H35.31c3.26,12.06,8.92,20,14.69,20S61.43,84.56,64.69,72.5Zm-37.14,0H13.93a42.73,42.73,0,0,0,20.47,17,55.25,55.25,0,0,1-6.35-15.08Zm58.52,0H72.46a56.91,56.91,0,0,1-6.87,17A42.69,42.69,0,0,0,85.14,73.92ZM25.47,40H8.69l0,.08A42.83,42.83,0,0,0,10.22,65H26.08A101.81,101.81,0,0,1,25,50C25,46.58,25.16,43.24,25.47,40ZM67,40H33a94.8,94.8,0,0,0-.53,10,93.32,93.32,0,0,0,1.2,15H66.31a93.32,93.32,0,0,0,1.2-15A94.8,94.8,0,0,0,67,40Zm24.34,0H74.53c.31,3.24.47,6.58.47,10a101.81,101.81,0,0,1-1.08,15H89.78A42.38,42.38,0,0,0,92.5,50,42.86,42.86,0,0,0,91.32,40ZM34.41,10.45l-.12.05a42.62,42.62,0,0,0-23,22H26.5C28.06,23.74,30.8,16.11,34.41,10.45ZM50,7.5l-.58,0C43.1,8.1,37,18.11,34.15,32.5h31.7C63,18.15,56.94,8.16,50.63,7.53Zm15.6,2.95.53.87C69.48,16.88,72,24.18,73.51,32.5H88.74A42.62,42.62,0,0,0,67.05,11.06Z";
+export const iconLeetcode = "m49.66,97.5c-5.66,0-11.01-2.15-15.05-6.04l-17.82-17.47c-2.03-1.98-3.65-4.29-4.81-6.88-.56-1.23-1-2.53-1.32-3.84-.71-2.89-.79-5.96-.23-8.88.12-.64.28-1.29.47-1.92.87-2.92,2.43-5.64,4.52-7.86L53.68,3.65c.65-.7,1.56-1.12,2.51-1.15h0c1.01,0,1.89.35,2.56.97,1.47,1.36,1.55,3.67.18,5.13l-11.01,11.8,3.9.61c3.95.61,7.57,2.18,10.47,4.53l14.46,11.7c1.55,1.26,1.79,3.54.54,5.1-.69.85-1.71,1.34-2.81,1.34h0c-.83,0-1.61-.28-2.26-.8l-14.47-11.7c-2.56-2.07-6.02-3.22-9.74-3.22-4.48,0-8.74,1.71-11.41,4.56l-15.92,17.05c-1.51,1.62-2.57,3.61-3.07,5.77-.19.84-.3,1.71-.33,2.57-.12,3.97,1.54,7.95,4.54,10.9l17.78,17.43c2.72,2.59,6.29,4.02,10.04,4.02s7.49-1.49,10.24-4.2l9.91-9.89c.69-.68,1.59-1.06,2.55-1.06s1.87.38,2.56,1.06c1.4,1.42,1.4,3.72,0,5.13l-9.9,9.88c-4.08,4.07-9.53,6.32-15.35,6.32Zm-5.38-34.8c-2,0-3.62-1.63-3.62-3.62,0-2,1.62-3.63,3.62-3.63h42.04c2,0,3.62,1.63,3.61,3.62,0,2-1.62,3.63-3.61,3.63h-42.04Z";
 export const iconLogo = "M18.82,82h25V77.9H23V49.84H39.6V45.7H23V22.1H43.78V18h-25Zm64.22.1-14.26-32h.3A11.37,11.37,0,0,0,76.64,47a11.48,11.48,0,0,0,2.58-3.52,10.25,10.25,0,0,0,1-4.56V28.32a9.75,9.75,0,0,0-.9-4.32,11,11,0,0,0-2.46-3.28,10.82,10.82,0,0,0-3.36-2A10.18,10.18,0,0,0,69.72,18L61,18H55.22V82.14h4.14v-32h4.76l14,32ZM73.62,44.28a7.74,7.74,0,0,1-2.34,1.28A6.6,6.6,0,0,1,69,46H59.36V22.1H69.82a6.74,6.74,0,0,1,4.4,1.68,5.72,5.72,0,0,1,2,4.64V39.06a6.7,6.7,0,0,1-.72,3.14A7.05,7.05,0,0,1,73.62,44.28ZM70.58,0V3.92h25.5v25.5H100V0Zm25.5,96.08H70.58V100H100V70.58H96.08ZM3.92,70.58H0V100H29.42V96.08H3.92Zm0-66.66h25.5V0H0V29.42H3.92Z";
 export const iconImg = "M18.06,8.33a9.73,9.73,0,0,0-9.73,9.73v8.33a4.17,4.17,0,1,1-8.33,0V18.06A18.05,18.05,0,0,1,18.06,0h8.33a4.17,4.17,0,1,1,0,8.33Zm73.61,9.73a9.73,9.73,0,0,0-9.73-9.73H73.61a4.17,4.17,0,1,1,0-8.33h8.33A18.05,18.05,0,0,1,100,18.06v8.33a4.17,4.17,0,1,1-8.33,0Zm0,63.88a9.73,9.73,0,0,1-9.73,9.73H73.61a4.17,4.17,0,1,0,0,8.33h8.33A18.05,18.05,0,0,0,100,81.94V73.61a4.17,4.17,0,1,0-8.33,0Zm-83.34,0a9.73,9.73,0,0,0,9.73,9.73h8.33a4.17,4.17,0,1,1,0,8.33H18.06A18.05,18.05,0,0,1,0,81.94V73.61a4.17,4.17,0,1,1,8.33,0ZM29.17,16.67a12.49,12.49,0,0,0-12.5,12.5V70.83a12.49,12.49,0,0,0,12.5,12.5H70.83a12.49,12.49,0,0,0,12.5-12.5V29.17a12.49,12.49,0,0,0-12.5-12.5ZM25,29.17A4.17,4.17,0,0,1,29.17,25H70.83A4.17,4.17,0,0,1,75,29.17V70.83A4.17,4.17,0,0,1,70.83,75H29.17A4.17,4.17,0,0,1,25,70.83Z";
 export const iconInstagram = "m47.5,25.58c-12.11,0-21.92,9.82-21.92,21.92s9.82,21.92,21.92,21.92,21.92-9.82,21.92-21.92c-.01-12.1-9.82-21.91-21.92-21.92Zm0,36.54c-8.07,0-14.62-6.54-14.62-14.62s6.54-14.62,14.62-14.62,14.62,6.54,14.62,14.62-6.54,14.62-14.62,14.62ZM69.42,0H25.58C11.46.02.02,11.46,0,25.58v43.85c.02,14.12,11.46,25.56,25.58,25.58h43.85c14.12-.02,25.56-11.46,25.58-25.58V25.58c-.02-14.12-11.46-25.56-25.58-25.58Zm18.27,69.42c0,10.09-8.18,18.27-18.27,18.27H25.58c-10.09,0-18.27-8.18-18.27-18.27V25.58C7.31,15.49,15.49,7.31,25.58,7.31h43.85c10.09,0,18.27,8.18,18.27,18.27v43.85Zm-10.96-45.67c0,3.03-2.45,5.48-5.48,5.48s-5.48-2.45-5.48-5.48,2.45-5.48,5.48-5.48,5.48,2.45,5.48,5.48Z";
diff --git a/src/lib/layout/blogpost/blogpost.layout.module.css b/src/lib/layout/blogpost/blogpost.layout.module.css
index 713e510b..8a6269f4 100644
--- a/src/lib/layout/blogpost/blogpost.layout.module.css
+++ b/src/lib/layout/blogpost/blogpost.layout.module.css
@@ -191,15 +191,10 @@
 	grid-template-columns: 1fr min(100% - var(--space-4), var(--interactive-inline-size, 80ch)) 1fr;
 	justify-items: center;
 	row-gap: var(--space-3-rel);
-	background-color: var(--surface-2);
+	background: var(--background-stripes);
 	color: var(--surface-2-text);
 	padding-block: var(--space-8);
 	margin-block: var(--space-7) var(--space-8);
-
-	/* background-size: 1.25em 1.25em;
-	background-image:
-		linear-gradient(var(--paper-grid-color) 1px, transparent 0),
-		linear-gradient(90deg, var(--paper-grid-color) 1px, transparent 0); */
 }
 
 .article :global(.wide) {
diff --git a/src/lib/layout/blogpost/blogpost.layout.svelte b/src/lib/layout/blogpost/blogpost.layout.svelte
index 7824a356..53e7067d 100644
--- a/src/lib/layout/blogpost/blogpost.layout.svelte
+++ b/src/lib/layout/blogpost/blogpost.layout.svelte
@@ -39,7 +39,7 @@
 		url: $webpage,
 		"article:published_time": dateCreated,
 		"article:modified_time": dateUpdated,
-		image: `${$webpageRoot}${cover}`
+		image: `${$webpageRoot}${cover.src}`
 	}}
 	twitter={{
 		card: "summary",
diff --git a/src/lib/layout/sketch/sketch.layout.svelte b/src/lib/layout/sketch/sketch.layout.svelte
index 35a3f783..119d282f 100644
--- a/src/lib/layout/sketch/sketch.layout.svelte
+++ b/src/lib/layout/sketch/sketch.layout.svelte
@@ -36,14 +36,14 @@
 		author: "Eric Rovell",
 		url: $webpage,
 		"article:modified_time": dateUpdated,
-		image: `${$webpageRoot}${cover}`
+		image: `${$webpageRoot}${cover.src}`
 	}}
 	twitter={{
 		card: "summary",
 		title,
 		description,
 		url: $webpage,
-		image: `${$webpageRoot}${cover}`
+		image: `${$webpageRoot}${cover.src}`
 	}}
 />
 
diff --git a/src/lib/styles/tokens.css b/src/lib/styles/tokens.css
index f43c9dd9..31e09115 100644
--- a/src/lib/styles/tokens.css
+++ b/src/lib/styles/tokens.css
@@ -121,6 +121,15 @@
 	--space-9-rel: calc(4 * var(--space-unit-rel));
 	--space-10-rel: calc(5 * var(--space-unit-rel));
 
+	--background-stripes:
+		repeating-linear-gradient(
+			45deg,
+			var(--surface-2),
+			var(--surface-2) 10px,
+			var(--surface-1) 10px,
+			var(--surface-1) 20px
+		);
+
 	--max-width: 1440px;
 
 	--bottom-menu-height: 40px;
diff --git a/src/lib/views/footer/footer.module.css b/src/lib/views/footer/footer.module.css
index 0647ca55..c71cd7ba 100644
--- a/src/lib/views/footer/footer.module.css
+++ b/src/lib/views/footer/footer.module.css
@@ -34,11 +34,20 @@
 		justify-content: center;
 		align-items: flex-end;
 		text-transform: capitalize;
-		gap: var(--space-3-rel);
+		gap: var(--space-2);
 	}
 
 	.socials {
 		--icon-size: 1.5em;
+
+		margin-bottom: var(--space-2);
+
+		& a {
+			display: flex;
+			justify-content: center;
+			align-content: center;
+			padding: var(--space-1);
+		}
 	}
 
 	& p {
diff --git a/src/lib/views/footer/footer.svelte b/src/lib/views/footer/footer.svelte
index 1319c395..5c9bb08a 100644
--- a/src/lib/views/footer/footer.svelte
+++ b/src/lib/views/footer/footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Datetime, Link, Icon } from "@components";
 	import NavLocale from "./footer.locale.svelte";
-	import { iconGithub, iconInstagram, iconRSS, iconTelegram } from "@icons";
+	import { iconGithub, iconLeetcode, iconInstagram, iconRSS, iconTelegram } from "@icons";
 	import { t } from "@core/i18n";
 	import styles from "./footer.module.css";
 
@@ -10,6 +10,7 @@
 		pathBookmarks,
 		pathGallery,
 		pathInstagram,
+		pathLeetcode,
 		pathLicense,
 		pathPrivacy,
 		pathRSS,
@@ -33,7 +34,8 @@
 		{ label: "source", href: pathSource, icon: iconGithub },
 		{ label: "rss", href: $pathRSS, icon: iconRSS },
 		{ label: "telegram", href: $pathTelegram, icon: iconTelegram },
-		{ label: "instagram", href: pathInstagram, icon: iconInstagram }
+		{ label: "instagram", href: pathInstagram, icon: iconInstagram },
+		{ label: "leetcode", href: pathLeetcode, icon: iconLeetcode }
 	];
 </script>
 
diff --git a/src/lib/views/masthead/Masthead.svelte b/src/lib/views/masthead/Masthead.svelte
index aedb7b38..b4aafe3e 100644
--- a/src/lib/views/masthead/Masthead.svelte
+++ b/src/lib/views/masthead/Masthead.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { t } from "@core/i18n";
 	import {
 		pathHome,
 		pathWriting,
@@ -8,7 +9,6 @@
 		pathSketch,
 		pathAbout
 	} from "@paths";
-	import { t } from "@core/i18n";
 
 	import { Button, Menu as Navigation, Icon, Link } from "@components";
 	import { iconGear, iconLogo } from "@icons";
@@ -72,7 +72,11 @@
 		</Navigation.Container>
 	</section>
 	<section data-label="controls">
-		<Button on:click={() => showModal = !showModal} icon>
+		<Button
+			on:click={() => showModal = !showModal}
+			aria-label="{$t("dict.settings")}"
+			icon
+		>
 			<Icon path="{iconGear}" />
 		</Button>
 	</section>
diff --git a/src/locales/en.json b/src/locales/en.json
index 33382be2..bf406d13 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -12,7 +12,8 @@
 		"privacy": "privacy",
 		"rss": "RSS Feed",
 		"telegram": "Telegram Channel",
-		"instagram": "Instagram"
+		"instagram": "Instagram",
+		"leetcode": "Leetcode"
 	},
 	"dict": {
 		"language": "language",
@@ -26,19 +27,19 @@
 		"math": "math",
 		"photo": "photography",
 		"web": "web",
-		"recent-posts": "Recent Posts",
 		"all-posts": "All posts",
+		"recent-posts": "Recent Posts",
 		"recent-photos": "Recent Photos",
-		"entire-gallery": "Entire gallery",
+		"recent-sketches": "Recent Sketches",
 		"featured-projects": "Featured Projects",
-		"all-projects": "All projects",
 		"menu": "Menu",
 		"blogpost-filters": "Blogpost filters",
 		"settings": "Settings",
 		"reset": "Reset",
 		"restart": "Restart",
 		"fullscreen": "Fullscreen",
-		"animation": "Animation"
+		"animation": "Animation",
+		"back-to-top": "Back to top"
 	},
 	"tooltip": {
 		"change-theme": "Change theme",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 8c0b01e0..d45a7644 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -12,7 +12,8 @@
 		"privacy": "Приватность",
 		"rss": "Лента RSS",
 		"telegram": "Канал Telegram",
-		"instagram": "Instagram"
+		"instagram": "Instagram",
+		"leetcode": "Leetcode"
 	},
 	"dict": {
 		"language": "язык",
@@ -27,18 +28,17 @@
 		"photo": "фотография",
 		"web": "веб",
 		"recent-posts": "Последние публикации",
-		"all-posts": "Все публикации",
 		"recent-photos": "Последние фотографии",
-		"entire-gallery": "Вся галерея",
+		"recent-sketches": "Последние визуализации",
 		"featured-projects": "Закреплённые проекты",
-		"all-projects": "Все проекты",
 		"menu": "Меню",
 		"blogpost-filters": "Фильтры публикаций",
 		"settings": "Настройки",
 		"reset": "Сбросить",
 		"restart": "Перезапустить",
 		"fullscreen": "Полноэкранный просмотр",
-		"animation": "Анимация"
+		"animation": "Анимация",
+		"back-to-top": "Вернуться вверх"
 	},
 	"tooltip": {
 		"change-theme": "Сменить тему оформления",
diff --git a/src/routes/[locale]/home/+page.svelte b/src/routes/[locale]/home/+page.svelte
index bf17397f..2eeb1c53 100644
--- a/src/routes/[locale]/home/+page.svelte
+++ b/src/routes/[locale]/home/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { pathWriting, pathGallery, pathProjects } from "@paths";
-	import { PageMeta, Link, CardBlogpost, CardProject, Gallery } from "@components";
+	import { pathWriting, pathGallery, pathProjects, pathBlogpost, pathSketch } from "@paths";
+	import { PageMeta, Link, Card, Gallery, Icon } from "@components";
+	import { iconArrowTop } from "$lib/icons";
 	import { LayoutPage } from "@layout";
 	import { t } from "@core/i18n";
 	import type { PageData } from "./$types";
@@ -21,61 +22,98 @@
 		</p>
 	</svelte:fragment>
 	<div class={styles.layout}>
-		<section label="recent-posts">
-			<div>
+		<div class="{styles.wrapper}">
+			<section aria-label="recent-posts">
 				<header>
-					<h2 class="heading">{$t("dict.recent-posts")}</h2>
 					<Link href={$pathWriting}>
-						&#x2192; {$t("dict.all-posts")}
+						<h2 class="heading">{$t("dict.recent-posts")}</h2>
 					</Link>
 				</header>
-				<ul class="grid-flexible" style="--item-size: 24ch">
-					{#each data.blogposts as { cover, dateCreated, description, keywords, title, slug }}
-						<li>
-							<CardBlogpost
-								{cover}
-								{dateCreated}
-								{description}
-								{keywords}
-								{title}
-								{slug}
-							/>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		</section>
-		<section class="surface-2" label="recent-photos">
-			<div>
+				<div class="{styles["content-wrapper"]}">
+					<ul class="grid-flexible" style="--item-size: 24ch">
+						{#each data.blogposts as { cover, dateCreated, description, keywords, title, slug }}
+							<li>
+								<Card
+									{cover}
+									date="{dateCreated}"
+									{description}
+									href={$pathBlogpost(slug)}
+									{keywords}
+									{title}
+								/>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</section>
+		</div>
+		<div class="{styles.wrapper}">
+			<section aria-label="featured-projects">
 				<header>
-					<h2 class="heading">{$t("dict.recent-photos")}</h2>
-					<Link href={$pathGallery}>
-						&#x2192; {$t("dict.entire-gallery")}
+					<Link href={$pathProjects}>
+						<h2 class="heading">{$t("dict.featured-projects")}</h2>
 					</Link>
 				</header>
-				<Gallery items={data.gallery} />
-			</div>
-		</section>
-		<section label="featured-projects">
-			<div>
+				<div class="{styles["content-wrapper"]}">
+					<ul class="grid-flexible" style="--item-size: 25ch">
+						{#each data.projects as { cover, dateUpdated, description, keywords, title, slug }}
+							<li>
+								<Card
+									{cover}
+									date="{dateUpdated}"
+									{description}
+									href={slug}
+									{title}
+									{keywords}
+								/>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</section>
+		</div>
+		<div class="{styles.wrapper}">
+			<section aria-label="featured-sketches">
 				<header>
-					<h2 class="heading">{$t("dict.featured-projects")}</h2>
-					<Link href={$pathProjects}>
-						&#x2192; {$t("dict.all-projects")}
+					<Link href={$pathSketch}>
+						<h2 class="heading">{$t("dict.recent-sketches")}</h2>
 					</Link>
 				</header>
-				<ul class="grid-flexible" style="--item-size: 25ch">
-					{#each data.projects as { description, title, techstack }}
-						<li>
-							<CardProject
-								{description}
-								{title}
-								{techstack}
-							/>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		</section>
+				<div class="{styles["content-wrapper"]}">
+					<ul class="grid-flexible" style="--item-size: 25ch">
+						{#each data.sketches as { cover, dateUpdated, description, keywords, title, slug }}
+							<li>
+								<Card
+									{cover}
+									date="{dateUpdated}"
+									{description}
+									href={slug}
+									{title}
+									{keywords}
+								/>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</section>
+		</div>
+		<div class="{styles.wrapper}">
+			<section aria-label="recent-photos">
+				<div>
+					<header>
+						<Link href={$pathGallery}>
+							<h2 class="heading">{$t("dict.recent-photos")}</h2>
+						</Link>
+					</header>
+					<Gallery items={data.gallery} />
+				</div>
+			</section>
+		</div>
+		<aside class="{styles.aside}">
+			<Link href="#app">
+				<Icon path="{iconArrowTop}" />
+				{$t("dict.back-to-top")}
+			</Link>
+		</aside>
 	</div>
 </LayoutPage>
diff --git a/src/routes/[locale]/home/home.module.css b/src/routes/[locale]/home/home.module.css
index 87a91ec0..20032e6b 100644
--- a/src/routes/[locale]/home/home.module.css
+++ b/src/routes/[locale]/home/home.module.css
@@ -7,40 +7,86 @@
 	display: grid;
 	gap: var(--space-7);
 	width: 100%;
-}
 
-.layout h2 {
-	font-size: var(--font-size-5);
-}
+	& h2 {
+		font-size: var(--font-size-5);
+		margin-bottom: var(--space-3);
+	}
 
-.layout section > div > header {
-	margin-bottom: var(--space-7);
+	& section {
+		display: flex;
+		flex-direction: column;
+		justify-self: center;
+		padding-block: var(--space-7) var(--space-8);
+		width: min(100% - var(--space-5), var(--max-width));
+	}
 }
 
-.layout > section {
-	display: flex;
-	justify-content: center;
-	padding-block: var(--space-9);
+.wrapper {
+	display: grid;
+
+	&:nth-of-type(2n) {
+		background: var(--background-stripes);
+	}
 }
 
-.layout > section div {
+.aside {
 	display: flex;
-	flex-direction: column;
-	width: min(100% - var(--space-5), var(--max-width));
-}
+	justify-content: center;
+	align-items: center;
+	margin-top: var(--space-9);
+	font-size: var(--font-size-2);
 
-.layout > section[label="recent-photos"] img {
-	object-fit: cover;
-	border-radius: var(--radius-l);
+	& a {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: var(--space-2);
+		padding: var(--space-1);
+	}
 }
 
-@media screen and (width <= 640px) {
+@media screen and (width <= 560px) {
 	.layout {
-		grid-template: min-content auto / 1fr;
+		/* TODO: remove magic number bottom menu offset, 95% is like 95wv */
+		--edge-offset: 2.5vw;
+
+		gap: 0;
+
+		& section {
+			width: 100%;
+		}
+
+		& header {
+			padding-inline-start: var(--edge-offset);
+		}
+
+		& section[aria-label="recent-photos"] ul {
+			padding-inline: var(--edge-offset);
+		}
 	}
 
-	.layout > main {
-		grid-row: 2;
-		grid-column: 1;
+	.content-wrapper {
+		display: grid;
+		width: 100%;
+
+		& > ul {
+			display: flex;
+			flex-wrap: nowrap;
+			gap: var(--space-2);
+			overflow-x: auto;
+			width: 100%;
+			padding: var(--space-2) var(--edge-offset);
+			scroll-snap-type: x mandatory;
+
+			& > li {
+				scroll-snap-align: center;
+			}
+
+			& li > article {
+				width: 75vw;
+			}
+		}
 	}
 }
diff --git a/src/routes/[locale]/projects/+page.svelte b/src/routes/[locale]/projects/+page.svelte
index 85d4ced4..e05d171f 100644
--- a/src/routes/[locale]/projects/+page.svelte
+++ b/src/routes/[locale]/projects/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { t, locale } from "@core/i18n";
-	import { PageMeta, CardProject } from "@components";
+	import { PageMeta, Card } from "@components";
 	import { LayoutPage } from "@layout";
 	import type { Project } from "@types";
 	import type { PageLoad } from "./$types";
@@ -25,12 +25,15 @@
 	</svelte:fragment>
 	<article class={styles.layout}>
 		<ul class={styles.projects}>
-			{#each projects as { description, title, techstack }}
+			{#each projects as { cover, dateUpdated, description, keywords, title, slug }}
 				<li class={styles.project}>
-					<CardProject
+					<Card
+						{cover}
+						date="{dateUpdated}"
 						{description}
+						href="{slug}"
 						{title}
-						{techstack}
+						{keywords}
 					/>
 				</li>
 			{/each}
diff --git a/src/routes/[locale]/projects/[slug]/+page.ts b/src/routes/[locale]/projects/[slug]/+page.ts
index c8826b74..2530d2ea 100644
--- a/src/routes/[locale]/projects/[slug]/+page.ts
+++ b/src/routes/[locale]/projects/[slug]/+page.ts
@@ -1,25 +1,13 @@
 import { error } from "@sveltejs/kit";
-import { getProjects } from "@data/projects";
 import type { PageLoad } from "./$types";
-import type { Locale, Page } from "@types";
+import type { Page, Project } from "@types";
 
 export const load: PageLoad = async ({ params }) => {
 	try {
 		const { locale = "en", slug } = params;
-
-		const project = await getProjects({
-			lang: locale as Locale,
-			title: slug
-		}, { limit: 1 });
-
-		if (!project.length) {
-			throw error(404, "There is no such a project.");
-		}
-
-		const filepathName = `${project[0].title}/index.${locale}`;
-
-		let page: Page<typeof project[number]>;
+		const filepathName = `/${slug}/index.${locale}`;
 		const modules = import.meta.glob("/src/content/project/**/*.svx");
+		let page: Page<Project>;
 
 		for (const [ filepath, module ] of Object.entries(modules)) {
 			if (filepath.includes(filepathName)) {
@@ -28,6 +16,10 @@ export const load: PageLoad = async ({ params }) => {
 			}
 		}
 
+		if (!page) {
+			throw error(404, "There is no such a project.");
+		}
+
 		return {
 			page: page.default,
 			metadata: page.metadata
diff --git a/src/routes/[locale]/sketch/+page.svelte b/src/routes/[locale]/sketch/+page.svelte
index 82e1b91f..4c7fd596 100644
--- a/src/routes/[locale]/sketch/+page.svelte
+++ b/src/routes/[locale]/sketch/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { t } from "@core/i18n";
-	import { CardSketch, PageMeta } from "@components";
+	import { Card, PageMeta } from "@components";
 	import { LayoutPage } from "@layout";
 	import type { PageLoad } from "./$types";
 	import styles from "./sketch.module.css";
@@ -21,12 +21,13 @@
 	</svelte:fragment>
 		<div class="{styles.layout}">
 			<main class="grid-flexible" style="--item-size: 15rem">
-				{#each data.items as { title, url, cover, description }}
-					<CardSketch
+				{#each data.items as { cover, dateUpdated, title, description, slug }}
+					<Card
 						{cover}
+						date="{dateUpdated}"
 						{description}
+						href="{slug}"
 						{title}
-						{url}
 					/>
 				{/each}
 			</main>
diff --git a/src/routes/[locale]/writing/+page.svelte b/src/routes/[locale]/writing/+page.svelte
index c4500ea3..f11fa554 100644
--- a/src/routes/[locale]/writing/+page.svelte
+++ b/src/routes/[locale]/writing/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Button, Drawer, PageMeta, CardBlogpost } from "@components";
+	import { Button, Drawer, PageMeta, Card } from "@components";
 	import { LayoutPage } from "@layout";
 	import { t, locale, i18nTemplate } from "@core/i18n";
+	import { pathBlogpost } from "@paths";
 	import { FilterWriting } from "@views";
 	import { find } from "@utils/query";
 	import styles from "./writing.module.css";
@@ -56,13 +57,13 @@
 				{i18nTemplate($t("message.blogpost-counter"), [ content.length, data.items.length ])}:
 			</aside>
 			{#each content as { cover, dateCreated, description, keywords, title, slug }}
-				<CardBlogpost
+				<Card
 					{cover}
-					{dateCreated}
+					date="{dateCreated}"
 					{description}
+					href="{$pathBlogpost(slug)}"
 					{keywords}
 					{title}
-					{slug}
 				/>
 			{/each}
 		</main>
diff --git a/src/routes/api/recents/[locale]/+server.ts b/src/routes/api/recents/[locale]/+server.ts
index b53fab6d..a818091a 100644
--- a/src/routes/api/recents/[locale]/+server.ts
+++ b/src/routes/api/recents/[locale]/+server.ts
@@ -1,6 +1,7 @@
 import { getProjects } from "@data/projects";
 import { getBlogposts } from "@data/posts";
 import { getGalleryItems } from "@data/gallery";
+import { getSketches } from "@data/sketch";
 import type { Locale } from "@types";
 import type { RequestHandler } from "./$types";
 
@@ -8,12 +9,12 @@ export const GET: RequestHandler = async ({ params }) => {
 	const { locale = "en" } = params as { locale: Locale };
 
 	try {
-		const [ blogposts, gallery, projects ] = await Promise.all([
+		const [ blogposts, gallery, projects, sketches ] = await Promise.all([
 			getBlogposts({
 				lang: locale,
 				draft: false
 			}, {
-				limit: 4
+				limit: 5
 			}),
 			getGalleryItems({
 				lang: locale,
@@ -25,7 +26,12 @@ export const GET: RequestHandler = async ({ params }) => {
 				featured: true,
 				lang: locale
 			}, {
-				limit: 4
+				limit: 5
+			}),
+			getSketches({
+				lang: locale
+			}, {
+				limit: 5
 			})
 		]);
 
@@ -33,7 +39,8 @@ export const GET: RequestHandler = async ({ params }) => {
 			JSON.stringify({
 				blogposts,
 				gallery,
-				projects
+				projects,
+				sketches
 			})
 		);
 	} catch (error) {
diff --git a/src/types/index.ts b/src/types/index.ts
index d6f2174b..58b4d1fa 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -11,11 +11,21 @@ export interface Page<T> {
 	default: SvelteComponent;
 }
 
+export interface GalleryImage {
+	height: number;
+	src: string;
+	width: number;
+}
+
+export interface CoverImage extends GalleryImage {
+	alt: string;
+}
+
 /**
  * Describes the metadata object from the blogpost's frontmatter.
  */
 export interface BlogpostMetadata {
-	cover: string;
+	cover: CoverImage;
 	dateCreated: string;
 	dateUpdated: string;
 	description: string;
@@ -43,8 +53,8 @@ export interface BlogpostMetadata {
  * Describes the blogpost's metadata.
  */
 export interface Blogpost extends Omit<BlogpostMetadata, "dateCreated" | "dateUpdated" | "keywords"> {
-	dateCreated: Date;
-	dateUpdated: Date;
+	dateCreated: string;
+	dateUpdated: string;
 	keywords: string[];
 	slug: string;
 }
@@ -53,27 +63,29 @@ export interface Blogpost extends Omit<BlogpostMetadata, "dateCreated" | "dateUp
  * Project Page Frontmatter data interface.
  */
 export interface Project {
+	cover: CoverImage;
 	dateUpdated: string;
 	description: string;
 	draft?: boolean;
 	featured?: boolean;
+	keywords: string[];
 	lang: Locale;
 	layout: string | false;
 	maintained: boolean;
 	npm?: string;
 	repository: string;
+	slug: string;
 	title: string;
-	techstack: string[];
-	type: "string";
 	website?: string;
 }
 
 export type { GalleryItem } from "@components";
 
 export interface Sketch {
-	cover: string;
+	cover: CoverImage;
 	dateUpdated: string;
 	description: string;
+	draft?: boolean;
 	keywords: string[];
 	lang: string;
 	title: string;
@@ -96,12 +108,6 @@ export type Validator<T> = (value: T) => ({
 	message: string
 });
 
-interface GalleryImage {
-	height: number;
-	src: string;
-	width: number;
-}
-
 export interface GalleryItemPage {
 	camera: string;
 	dateCreated: string;