diff --git a/lefthook.toml b/lefthook.toml
index ea320bb..1b2cb70 100644
--- a/lefthook.toml
+++ b/lefthook.toml
@@ -9,6 +9,10 @@ run = "pnpm biome check --apply --no-errors-on-unmatched --files-ignore-unknown=
 # glob = "*.svelte"
 # run = "pnpm svelte-check -- {staged_files} && git update-index --again"
 
+# [pre-commit.commands.update-mdx]
+# glob = "*.mdx"
+# run = "pnpm scripts/update-mdx {staged_files} && git update-index --again"
+
 [pre-commit.commands.check-toml]
 glob = "*.toml"
 run = "pnpm taplo format {staged_files} && git update-index --again"
diff --git a/package.json b/package.json
index 9eaabcd..13a9cf0 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@vercel/analytics": "^1.3.1",
     "autoprefixer": "^10.4.19",
     "highlight.js": "^11.9.0",
     "postcss": "^8.4.38",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c2c459e..d2ff467 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@vercel/analytics':
+    specifier: ^1.3.1
+    version: 1.3.1(react@18.2.0)
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
@@ -904,6 +907,21 @@ packages:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: true
 
+  /@vercel/analytics@1.3.1(react@18.2.0):
+    resolution: {integrity: sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==}
+    peerDependencies:
+      next: '>= 13'
+      react: ^18 || ^19
+    peerDependenciesMeta:
+      next:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      server-only: 0.0.1
+    dev: false
+
   /JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -2405,6 +2423,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  /server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+    dev: false
+
   /set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
     dev: true
diff --git a/src/app.css b/src/app.css
index 8ba3f11..2e1f020 100644
--- a/src/app.css
+++ b/src/app.css
@@ -43,7 +43,7 @@ kbd {
     --a4-height: 297mm;
     --a4-aspect-ratio: calc(var(--a4-height) / var(--a4-width));
 
-    --page-min-height: calc(100dvh - var(--header-weight) - var(--footer-height));
+    --page-min-height: calc(100dvh - var(--header-height) - var(--footer-height));
 
     --primary-100: #e8e9e9;
     --primary-200: #cdcecf;
diff --git a/src/components/blog/blog-link.svelte b/src/components/blog/blog-link.svelte
new file mode 100644
index 0000000..57d6b32
--- /dev/null
+++ b/src/components/blog/blog-link.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+import { page } from '$app/stores'
+import { cn } from '$lib'
+import type { BlogPost } from '$lib/blog/post'
+
+type BlogLinkProps = {
+  article: BlogPost
+}
+
+let { article }: BlogLinkProps = $props()
+</script>
+
+<a
+  aria-current={$page.params.slug === article.slug ? "page" : undefined}
+  href="/blog/{article.slug}"
+  class={cn(
+    "flex justify-between hover:bg-primary-600 transition-colors duration-200 ease-in-out px-2",
+    "focus:bg-primary-500",
+    {
+      "bg-primary-700": $page.params.slug === article.slug,
+    },
+  )}
+>
+  <span>{article.metadata.title}</span>
+  <span class="text-primary-400">
+    {Intl.DateTimeFormat("en", {
+      year: "2-digit",
+      month: "short",
+      day: "numeric",
+    }).format(new Date(article.metadata.date))}
+  </span>
+</a>
diff --git a/src/components/blog/blog-modal.svelte b/src/components/blog/blog-modal.svelte
new file mode 100644
index 0000000..64cc629
--- /dev/null
+++ b/src/components/blog/blog-modal.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+import Button from '$components/ui/button.svelte'
+import Input from '$components/ui/input.svelte'
+import { cn } from '$lib'
+import BlogSection from './blog-section.svelte'
+
+type BlogModalProps = {
+  showModal: boolean
+  handleFilter: (value: string) => void
+  closeModal: () => void
+  search: string
+}
+
+let { showModal, handleFilter, closeModal, search }: BlogModalProps = $props()
+
+let value = $state(search)
+
+const handleClose = (event: MouseEvent | KeyboardEvent) => {
+  if (!showModal) return
+  if (event instanceof KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Escape') {
+      event.preventDefault()
+      closeModal()
+    }
+
+    return
+  }
+
+  event.preventDefault()
+  closeModal()
+}
+
+const handleSearch = (event: MouseEvent | KeyboardEvent) => {
+  if (!showModal) return
+  if (event instanceof KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      handleFilter(value)
+      closeModal()
+    }
+
+    return
+  }
+
+  handleFilter(value)
+  closeModal()
+}
+
+$effect(() => {
+  const handleKeyUp = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Escape':
+        handleClose(event)
+        break
+      case 'Enter':
+        handleSearch(event)
+        break
+    }
+  }
+
+  window.addEventListener('keyup', handleKeyUp)
+
+  return () => window.removeEventListener('keyup', handleKeyUp)
+})
+</script>
+
+<dialog open={showModal}>
+  <div
+    class={cn(
+      "fixed inset-0 bg-black bg-opacity-50 z-50 w-full h-full",
+      showModal ? "flex" : "hidden",
+    )}
+  ></div>
+  {#if showModal}
+    <div
+      class={cn(
+        "fixed inset-0 flex justify-center items-center z-50",
+        showModal ? "flex" : "hidden",
+      )}
+    >
+      <BlogSection class="text-primary-300 bg-primary-900 p-4 w-80" label="Search" id="search">
+        <Input
+          autofocus
+          showLabel={false}
+          label="search"
+          value={value}
+          oninput={(e) => e.target instanceof HTMLInputElement && (value = e.target.value)}
+          error={null}
+          placeholder={"Search for an article"}
+        />
+        <div class="flex gap-2">
+          <Button onkeypress={closeModal} onclick={closeModal} class="w-1/2 flex items-center justify-center bg-primary-900" type="button">
+            <span class="text-center text-sm">Close</span>
+            <kbd class="text-primary-300 font-thin text-xs">(Esc)</kbd>
+          </Button>
+          <Button onkeypress={handleSearch} onclick={handleSearch} class="w-1/2 flex items-center justify-center bg-primary-900" type="button">
+            <span class="text-center text-sm">Search</span>
+            <kbd class="text-primary-300 font-thin text-xs">(Enter)</kbd>
+          </Button>
+        </div></BlogSection
+      >
+    </div>
+  {/if}
+</dialog>
diff --git a/src/components/blog/blog-section.svelte b/src/components/blog/blog-section.svelte
new file mode 100644
index 0000000..0aacecc
--- /dev/null
+++ b/src/components/blog/blog-section.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+import { cn } from '$lib'
+import type { HTMLAttributes } from 'svelte/elements'
+
+type BlogSectionProps = HTMLAttributes<HTMLDivElement> & {
+  label: string
+  isAside?: boolean
+  id: string
+}
+
+const { label, isAside = false, id, ...props }: BlogSectionProps = $props()
+</script>
+
+{#if isAside}
+  <aside id={id} class={cn("blog-section", props.class)}>
+    <h2 class="blog-section__title">{label}</h2>
+    <div class="h-2"></div>
+    {@render props.children?.()}
+  </aside>
+{:else}
+  <section id={id} class={cn("blog-section", props.class)}>
+    <h2 class="blog-section__title">{label}</h2>
+    <div class="h-2"></div>
+    {@render props.children?.()}
+  </section>
+{/if}
+
+<style lang="postcss">
+  .blog-section {
+    @apply border border-primary-500 rounded-md relative;
+  }
+
+  .blog-section__title {
+    @apply text-sm font-sans bg-primary-900 inline-block -top-3 absolute left-2 px-2 font-bold;
+  }
+</style>
diff --git a/src/components/blog/index.ts b/src/components/blog/index.ts
new file mode 100644
index 0000000..b3b2c82
--- /dev/null
+++ b/src/components/blog/index.ts
@@ -0,0 +1,3 @@
+export { default as BlogLink } from './blog-link.svelte'
+export { default as BlogModal } from './blog-modal.svelte'
+export { default as BlogSection } from './blog-section.svelte'
diff --git a/src/components/resume/resume.svelte b/src/components/resume/resume.svelte
index 4474b8c..9ba9d61 100644
--- a/src/components/resume/resume.svelte
+++ b/src/components/resume/resume.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
 import GlobeIcon from '$icons/globe-icon.svelte'
+import PhoneIcon from '$icons/phone-icon.svelte'
 import SocialEmailIcon from '$icons/social-email-icon.svelte'
 import SocialGithubIcon from '$icons/social-github-icon.svelte'
 import SocialLinkedinIcon from '$icons/social-linkedin-icon.svelte'
@@ -23,11 +24,11 @@ export const resume = {
   name: 'Alessio Marchi',
   role: 'Senior Software Developer',
   about: [
-    "I'm a 26 years old Senior Software Developer based in Rome, Italy. I love Rust, Typescript, open-source community/projects and the tech community in general.",
-    'I love sharing knowledge, discuss and collaborate with people from all over the world, trying to improving myself day by day, learning new things and experimenting with new technologies.',
+    'I am a 26-year-old Senior Software Developer located in Rome, Italy, specializing in Rust, TypeScript, and contributing to open-source community projects. My passion extends to the broader tech community, where I actively engage.',
+    'I am dedicated to sharing knowledge, engaging in discussions, and collaborating globally. My commitment to personal growth drives me to continuously learn, experiment with new technologies, and refine my skills.',
   ],
   contacts: [
-    { name: 'email', value: 'mailto:about@alessiomarchi.dev', Icon: SocialEmailIcon },
+    { name: 'email', value: 'mailto:alessiomarchi.dev@gmail.com', Icon: SocialEmailIcon },
     { name: 'GitHub', value: 'https://github.com/kettei-sproutty', Icon: SocialGithubIcon },
     { name: 'Twitter', value: 'https://x.com/alessiom97', Icon: SocialXIcon },
     {
@@ -45,16 +46,17 @@ export const resume = {
       projects: [
         {
           description:
-            'Team of 3, build a Fullstack application for analyzing website a11y (WCAG 2.2) issues, and a stream-based AI chatbot for suggesting fixes.',
+            'Team of 3, developed a full-stack application for analyzing website accessibility (WCAG 2.2) issues and a stream-based AI chatbot for suggesting fixes.',
           stack: ['NextJS', 'Node (Hono)', 'MongoDB', 'IA', 'TailwindCSS', 'GitHub', 'Figma'],
         },
         {
           description:
-            'Team of 3, build a WYSIWYG editor, similar to Docs/Word, with pagination, normalization, and custom blocks.',
+            'Team of 3, built a WYSIWYG editor, similar to Docs/Word, featuring pagination, normalization, and custom blocks.',
           stack: [
             'React with Vite',
-            'SlateJS/PlateJS',
+            'SlateJS',
             'TailwindCSS',
+            'Jotai',
             'Turborepo',
             'Azure',
             'Figma',
@@ -62,8 +64,16 @@ export const resume = {
         },
         {
           description:
-            'Team of 2, build an interactive 2D application, using sprites and animations, and a Rust script that generates the sprites.',
-          stack: ['NextJS (SSG)', 'ThreeJS (R3F)', 'Rust', 'Framer Motion', 'Azure', 'Figma'],
+            'Team of 2,  built an interactive 2D application using sprites and animations, along with a Rust script that generates the sprites atlas.',
+          stack: [
+            'NextJS (SSG)',
+            'ThreeJS (R3F)',
+            'Valtio',
+            'Rust',
+            'Framer Motion',
+            'Azure',
+            'Figma',
+          ],
         },
       ],
     },
@@ -73,13 +83,13 @@ export const resume = {
       projects: [
         {
           description:
-            'Team of 6, build a graph-based web application, for handling connections between nodes rappresenting a power plant. After the delivery it was studied a refactor using react-flow instead of mxgraph.',
-          stack: ['React', 'mxGraph', 'SASS', 'Azure', 'Figma'],
+            'Team of 6, built a graph-based web application for handling connections between nodes in a power plant. After delivery, we studied a refactor using React Flow instead of mxGraph.',
+          stack: ['React', 'mxGraph', 'Redux', 'SASS', 'Azure', 'Figma'],
         },
         {
           description:
-            'Team of 8, progressive rewrite of a web application, from VanillaJS to Vue, with a new design and new features, handling the integration with payment services.',
-          stack: ['Vue', 'Nuxt', 'Adobe IO', 'Adobe AEM', 'Miro'],
+            'Team of 8, progressively rewrote a web application from VanillaJS to Vue, incorporating a new design and new features, and managing the integration with payment services.',
+          stack: ['Vue', 'Nuxt', 'Vuex', 'Adobe IO', 'Adobe AEM', 'Miro'],
         },
       ],
       period: '2021 - 2022',
@@ -91,7 +101,7 @@ export const resume = {
       projects: [
         {
           description:
-            'Team of 4, developed an application for reserving sport fields in Rome. The application was built using a microservices architecture, with a federated GraphQL gateway.',
+            'Team of 4, developed an application for reserving sports fields in Rome. The application was built using a microservices architecture with a federated GraphQL gateway.',
           stack: ['React', 'GraphQL (Apollo Server/Client)', 'Apollo Federation', 'MongoDB'],
         },
       ],
@@ -103,7 +113,7 @@ export const resume = {
       projects: [
         {
           description:
-            'Solo project, developed a portal for creating and managing insurance policies, where customers can track their policies and make payments.',
+            'Solo project, developed a portal for creating and managing insurance policies, enabling customers to track their policies and make payments.',
           stack: ['NextJS (SSR)', 'Hasura', 'PostgreSQL', 'GraphQL'],
         },
       ],
@@ -120,6 +130,7 @@ export const resume = {
       'Apollo GraphQL',
       'Tauri',
       'Leptos',
+      'Valtio/Jotai/Redux',
       'Axum/Rocket',
       'Redis',
       'SlateJS',
diff --git a/src/components/ui/button.svelte b/src/components/ui/button.svelte
new file mode 100644
index 0000000..512df41
--- /dev/null
+++ b/src/components/ui/button.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+import { cn } from '$lib'
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'
+
+type ButtonProps = Omit<HTMLButtonAttributes, 'type'> & {
+  hasIcon?: boolean
+  fullWidth?: boolean
+  type: Exclude<HTMLButtonAttributes['type'], undefined | null>
+}
+
+const { children, type, fullWidth = false, class: className, ...props }: ButtonProps = $props()
+</script>
+
+<button
+  type={type}
+  class={cn(
+    "border border-primary-700 bg-primary-700 transition-colors duration-200 ease-in-out text-primary-200 px-2 py-1 rounded-md flex items-center gap-2",
+    "hover:bg-primary-600 focus:bg-primary-700 focus:outline-none active:bg-primary-800 active:text-primary-100",
+    {
+      "flex gap-2 items-center": props.hasIcon,
+      "w-full flex items-center justify-center": fullWidth,
+    },
+    className,
+  )}
+  {...props}
+>
+  {@render children?.()}
+</button>
diff --git a/src/components/ui/input.svelte b/src/components/ui/input.svelte
index 0313b6c..ea7258a 100644
--- a/src/components/ui/input.svelte
+++ b/src/components/ui/input.svelte
@@ -5,14 +5,24 @@ import type { HTMLInputAttributes } from 'svelte/elements'
 type InputProps = HTMLInputAttributes & {
   label: string
   error: string | null
+  showLabel?: boolean
 }
 
-const { label, type, name, required = false, error = null, ...props }: InputProps = $props()
+const {
+  label,
+  type,
+  name,
+  required = false,
+  error = null,
+  showLabel = true,
+  ...props
+}: InputProps = $props()
 </script>
 
 <label class="flex flex-col gap-1">
-  <span class="text-primary-400 first-letter:uppercase">{label}</span>
+  <label for={name} class={cn("text-primary-400 first-letter:uppercase", { "sr-only": !showLabel })}>{label}</label>
   <input
+    id={name}
     type={type}
     name={name}
     class={cn("p-2 rounded-md bg-primary-800 text-primary-300 focus:outline-none focus:ring focus:ring-primary-400 border-red-power-600", props.class)}
diff --git a/src/contents/placeholder/blog.mdx b/src/contents/placeholder/blog.mdx
new file mode 100644
index 0000000..fefd00d
--- /dev/null
+++ b/src/contents/placeholder/blog.mdx
@@ -0,0 +1,10 @@
+---
+title: "Placeholder"
+description: "This is a placeholder post"
+slug: "placeholder"
+---
+
+<h1 class="text-primary-200 text-lg">This is a placeholder post</h1>
+
+<p class="text-primary-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
diff --git a/src/icons/index.ts b/src/icons/index.ts
new file mode 100644
index 0000000..9441ec3
--- /dev/null
+++ b/src/icons/index.ts
@@ -0,0 +1,10 @@
+export { default as DownloadIcon } from './download-icon.svelte'
+export { default as GlobeIcon } from './globe-icon.svelte'
+export { default as LeftIcon } from './left-icon.svelte'
+export { default as LogoIcon } from './logo-icon.svelte'
+export { default as PhoneIcon } from './phone-icon.svelte'
+export { default as ShareIcon } from './share-icon.svelte'
+export { default as SocialEmailIcon } from './social-email-icon.svelte'
+export { default as SocialGithubIcon } from './social-github-icon.svelte'
+export { default as SocialLinkedinIcon } from './social-linkedin-icon.svelte'
+export { default as SocialXIcon } from './social-x-icon.svelte'
diff --git a/src/icons/phone-icon.svelte b/src/icons/phone-icon.svelte
new file mode 100644
index 0000000..8eaa058
--- /dev/null
+++ b/src/icons/phone-icon.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+import { cn } from '$lib'
+import type { ClassValue } from 'clsx'
+
+type IconProps = {
+  className?: ClassValue
+}
+
+const { className = '' }: IconProps = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={cn("size-6", className)}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
+</svg>
diff --git a/src/icons/share-icon.svelte b/src/icons/share-icon.svelte
new file mode 100644
index 0000000..5fcbac0
--- /dev/null
+++ b/src/icons/share-icon.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+import { cn } from '$lib'
+import type { ClassValue } from 'clsx'
+
+const { className = '' as ClassValue } = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={cn("size-6", className)}>
+  <title>Share Icon</title>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
+</svg>
diff --git a/src/lib/blog/motions.ts b/src/lib/blog/motions.ts
new file mode 100644
index 0000000..f20def9
--- /dev/null
+++ b/src/lib/blog/motions.ts
@@ -0,0 +1,110 @@
+import type { BlogPost } from './post'
+
+export type MetadataKey = 'title' | 'description' | 'date' | 'slug'
+
+type ProcessMotionsOptions = {
+  key: string
+  articles: BlogPost[]
+  slug: string
+  multiplier: number | null
+}
+
+type NullValue = { kind: 'null' }
+type Multiplier = { kind: 'multiplier'; multiplier: number }
+type SelectedArticle = { kind: 'select'; selected: BlogPost; lastMotion: string; slug: string }
+type ShowModal = { kind: 'modal' }
+type PageUpDown = { kind: 'page'; direction: 'up' | 'down' }
+type RepeatMotion = { kind: 'repeat' }
+
+type ProcessMotionsReturnValue =
+  | NullValue
+  | Multiplier
+  | SelectedArticle
+  | ShowModal
+  | PageUpDown
+  | RepeatMotion
+
+export const processMotions = (options: ProcessMotionsOptions): ProcessMotionsReturnValue => {
+  const motions: { [key: string]: () => ProcessMotionsReturnValue } = {
+    k: () => prevArticle(),
+    j: () => nextArticle(),
+    K: () => pageDown(),
+    J: () => pageUp(),
+    x: () => repeatMotion(),
+    '\\': () => search(),
+  }
+
+  if (/^\d$/.test(options.key))
+    return { kind: 'multiplier', multiplier: Number.parseInt(options.key) }
+
+  const getIndex = (articles: BlogPost[], slug: string) =>
+    articles.findIndex((article) => article.slug === slug)
+
+  const prevArticle = (): ProcessMotionsReturnValue => {
+    const { articles, slug } = options
+    const currentIndex = getIndex(articles, slug)
+    const prevIndex = currentIndex - (options.multiplier || 1)
+    if (prevIndex < 0)
+      return {
+        kind: 'select' as const,
+        selected: articles[0],
+        lastMotion: 'j',
+        slug: articles[0].slug,
+      }
+    return {
+      kind: 'select' as const,
+      selected: articles[prevIndex],
+      lastMotion: `${options.multiplier || ''} ${options.key}`,
+      slug: articles[prevIndex].slug,
+    }
+  }
+
+  const nextArticle = () => {
+    const { articles, slug } = options
+    const currentIndex = getIndex(articles, slug)
+    if (currentIndex === -1)
+      return {
+        kind: 'select' as const,
+        selected: articles[0],
+        lastMotion: 'k',
+        slug: articles[0].slug,
+      }
+
+    const nextIndex = currentIndex + (options.multiplier || 1)
+    if (nextIndex >= articles.length) {
+      return {
+        kind: 'select' as const,
+        selected: articles[articles.length - 1],
+        lastMotion: 'k',
+        slug: articles[articles.length - 1].slug,
+      }
+    }
+
+    return {
+      kind: 'select' as const,
+      selected: articles[nextIndex],
+      lastMotion: `${options.multiplier || ''} ${options.key}`,
+      slug: articles[nextIndex].slug,
+    }
+  }
+
+  const pageUp = () => {
+    return { kind: 'page' as const, direction: 'up' as const }
+  }
+
+  const pageDown = () => {
+    return { kind: 'page' as const, direction: 'down' as const }
+  }
+
+  const repeatMotion = () => {
+    return { kind: 'repeat' as const }
+  }
+
+  const search = () => {
+    return { kind: 'modal' as const }
+  }
+
+  if (options.key in motions) return motions[options.key]()
+
+  return { kind: 'null' as const }
+}
diff --git a/src/lib/blog/post.ts b/src/lib/blog/post.ts
new file mode 100644
index 0000000..57ff919
--- /dev/null
+++ b/src/lib/blog/post.ts
@@ -0,0 +1,13 @@
+import type { MetadataKey } from './motions'
+
+export interface BlogPost {
+  content: string
+  metadata: Record<MetadataKey, string>
+  slug: string
+}
+
+export const filterPosts = (posts: BlogPost[], search: string) => {
+  return posts.filter((post) => {
+    return post.metadata.title.toLowerCase().includes(search.toLowerCase())
+  })
+}
diff --git a/src/lib/blog/server.ts b/src/lib/blog/server.ts
new file mode 100644
index 0000000..087929f
--- /dev/null
+++ b/src/lib/blog/server.ts
@@ -0,0 +1,40 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { compile } from 'mdsvex'
+import type { MetadataKey } from './motions'
+import type { BlogPost } from './post'
+
+export const getBlogPosts = async (): Promise<BlogPost[]> => {
+  const blogDirectory = path.resolve('src/contents')
+  const posts = await fs.promises.readdir(blogDirectory).catch(() => [])
+  if (!posts.length) return []
+
+  const postsList: BlogPost[] = []
+
+  for (const post of posts) {
+    const postPath = path.resolve(blogDirectory, post, 'blog.mdx')
+    const postContent = await fs.promises.readFile(postPath, 'utf-8')
+    const postCompiled = await compile(postContent)
+    if (!postCompiled) continue
+
+    if (!postCompiled.data) continue
+
+    const {
+      title = post.replaceAll(/-/gi, ' '),
+      description,
+      date = new Date().toISOString(),
+      slug = post,
+    } = postCompiled.data as Record<MetadataKey, string>
+    const content = postCompiled.code
+
+    postsList.push({
+      content,
+      metadata: { ...postCompiled.data, title, description, date, slug },
+      slug,
+    })
+  }
+
+  return postsList.sort(
+    (a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime(),
+  )
+}
diff --git a/src/lib/blog/shortcuts.ts b/src/lib/blog/shortcuts.ts
new file mode 100644
index 0000000..f4c0d4a
--- /dev/null
+++ b/src/lib/blog/shortcuts.ts
@@ -0,0 +1,9 @@
+export const shortcuts = [
+  { key: '0-9', description: 'multiplier' },
+  { key: 'j', description: 'list down' },
+  { key: 'k', description: 'list up' },
+  { key: 'J', description: 'page down' },
+  { key: 'K', description: 'page up' },
+  // { key: 'x', description: 'repeat last' },
+  { key: '\\', description: 'filter' },
+]
diff --git a/src/routes/(vimlike)/+layout.svelte b/src/routes/(vimlike)/+layout.svelte
index b563cc7..287a39e 100644
--- a/src/routes/(vimlike)/+layout.svelte
+++ b/src/routes/(vimlike)/+layout.svelte
@@ -21,8 +21,6 @@ $effect(() => {
       mode = Mode.NORMAL
     } else if (mode === Mode.NORMAL && e instanceof KeyboardEvent) {
       if (e.key === 'Backspace') {
-        history.back()
-        // Fallback if there is no history
         goto('/')
       }
     }
@@ -59,7 +57,7 @@ const { children } = $props()
   <footer class="print:hidden fixed bottom-0 w-full">
     <div class="bg-primary-700 p-2 text-white text-xs flex items-center justify-between gap-4 w-full px-4">
       <div class="flex items-center space-x-4 flex-grow">
-        <div class="font-mono uppercase px-2 text-primary-800 bg-primary-100 rounded-full font-mono w-16 text-center">
+        <div class="uppercase px-2 text-primary-800 bg-primary-100 rounded-full font-mono w-16 text-center">
           {mode}
         </div>
         <div class="flex items-center space-x-1">
diff --git a/src/routes/(vimlike)/about/+page.svelte b/src/routes/(vimlike)/about/+page.svelte
index c7db838..d5be99d 100644
--- a/src/routes/(vimlike)/about/+page.svelte
+++ b/src/routes/(vimlike)/about/+page.svelte
@@ -15,7 +15,7 @@ const handleDownload = () => {
 }
 </script>
 
-<main class="content h-page divide-x divide-primary-600 relative">
+<main class="content h-auto md:h-page divide-x divide-primary-600 relative">
   <section class="about-me p-4 text-primary-300 flex flex-col gap-2">
     <h1 class="text-4xl text-primary-100">
       Hi, I'm Alessio! <span aria-hidden="true" class="grayscale">👋</span>
@@ -74,7 +74,7 @@ const handleDownload = () => {
   </section>
   <section
     id="resume"
-    class="about-resume border-l border-l-primary-900 max-h-page lg:overflow-scroll overflow-auto"
+    class="about-resume border-l border-l-primary-900 lg:max-h-page max-h-max lg:overflow-scroll overflow-auto"
   >
     <Resume />
   </section>
diff --git a/src/routes/(vimlike)/blog/+error.svelte b/src/routes/(vimlike)/blog/+error.svelte
new file mode 100644
index 0000000..aaf6038
--- /dev/null
+++ b/src/routes/(vimlike)/blog/+error.svelte
@@ -0,0 +1,4 @@
+<main class="bg-primary-900 text-primary-300 flex flex-col items-center justify-center gap pb-2">
+  <h1 class="text-white text-lg">I don't think I wrote this article.</h1>
+  <p class="text-sm">Please, select an article from the left panel.</p>
+</main>
diff --git a/src/routes/(vimlike)/blog/+layout.server.ts b/src/routes/(vimlike)/blog/+layout.server.ts
new file mode 100644
index 0000000..cd829a2
--- /dev/null
+++ b/src/routes/(vimlike)/blog/+layout.server.ts
@@ -0,0 +1,9 @@
+import { getBlogPosts } from '$lib/blog/server'
+
+export const load = async () => {
+  const articles = await getBlogPosts()
+
+  return { articles }
+}
+
+export const prerender = true
diff --git a/src/routes/(vimlike)/blog/+layout.svelte b/src/routes/(vimlike)/blog/+layout.svelte
new file mode 100644
index 0000000..583ea7d
--- /dev/null
+++ b/src/routes/(vimlike)/blog/+layout.svelte
@@ -0,0 +1,188 @@
+<svelte:head>
+  <title>Blog | Alessio Marchi</title>
+  <meta name="description" content="Blog posts by Alessio Marchi" />
+  <meta name="robots" content="index, follow" />
+  <!-- TODO: Add RSS feed -->
+  <!-- <link rel="alternate" type="application/rss+xml" title="RSS Feed for Alessio Marchi's blog" href="https://alessiomarchi.com/feed.xml" /> -->
+</svelte:head>
+
+<script lang="ts">
+import { goto } from '$app/navigation'
+import { page } from '$app/stores'
+import { BlogLink, BlogModal, BlogSection } from '$components/blog'
+import Button from '$components/ui/button.svelte'
+import { ShareIcon, SocialLinkedinIcon, SocialXIcon } from '$icons/index'
+import { cn } from '$lib'
+import { processMotions } from '$lib/blog/motions'
+import { shortcuts } from '$lib/blog/shortcuts'
+import type { MouseEventHandler } from 'svelte/elements'
+
+let { data, children } = $props()
+
+let multiplier = $state<number | null>(null)
+let lastMotion = $state<string | null>(null)
+
+let search = $state('')
+let showModal = $state(false)
+
+let filteredArticles = $derived(
+  data.articles.filter((article) =>
+    article.metadata.title.toLowerCase().includes(search.toLowerCase()),
+  ),
+)
+
+$effect(() => {
+  if (filteredArticles.length === data.articles.length) return
+
+  if (filteredArticles.length === 0) {
+    goto('/blog')
+    return
+  }
+
+  if (
+    !$page.params.slug ||
+    filteredArticles.find((article) => article.slug === $page.params.slug) ||
+    filteredArticles.length === 1
+  )
+    goto(`/blog/${filteredArticles[0].slug}`)
+})
+
+const closeModal = () => {
+  showModal = false
+}
+
+const handleFilter = (value: string) => {
+  search = value
+}
+
+$effect(() => {
+  const changeMultiplier = (value: number) => {
+    multiplier = value
+    lastMotion = value.toString()
+  }
+
+  const selectArticle = (slug: string, event: KeyboardEvent) => {
+    event.preventDefault()
+    goto(`/blog/${slug}`)
+    lastMotion = `${multiplier || ''}${event.key}`
+    multiplier = null
+  }
+
+  const handleShowModal = (e: KeyboardEvent) => {
+    e.preventDefault()
+    showModal = true
+  }
+
+  const handleChangeMultiplier = (e: KeyboardEvent, multiplier: number) => {
+    e.preventDefault()
+    changeMultiplier(multiplier)
+  }
+
+  const handleScrollPage = (e: KeyboardEvent, motion: { direction: 'up' | 'down' }) => {
+    e.preventDefault()
+    const post = document.querySelector('#blog-post')
+    if (post) {
+      post.scrollBy({
+        top: (motion.direction === 'down' ? 100 : -100) * (multiplier || 1),
+        behavior: 'smooth',
+      })
+
+      lastMotion = `${multiplier || ''}${e.key}`
+    }
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    const motion = processMotions({
+      articles: data.articles,
+      slug: $page.params.slug,
+      key: event.key,
+      multiplier,
+    })
+
+    switch (motion.kind) {
+      case 'null':
+        lastMotion = null
+        break
+      case 'modal':
+        return handleShowModal(event)
+      case 'multiplier':
+        return handleChangeMultiplier(event, motion.multiplier)
+      case 'select':
+        return selectArticle(motion.slug, event)
+      case 'page':
+        handleScrollPage(event, motion)
+        break
+    }
+  }
+
+  window.addEventListener('keyup', handleKeyUp)
+
+  return () => window.removeEventListener('keyup', handleKeyUp)
+})
+
+const handleShare: MouseEventHandler<HTMLButtonElement> = (event) => {
+  event.preventDefault()
+  if ('navigator' in window) {
+    navigator.share({
+      title: 'Alessio Marchi',
+      text: 'Check out this blog post',
+      url: window.location.href,
+    })
+  }
+}
+</script>
+
+<div class="min-h-page h-page relative">
+  <main class="grid grid-cols-3 p-4 gap-4 max-h-[calc(100dvh - 8rem)] h-full md:grid-rows-12 grid-rows-none overflow-scroll">
+    <BlogSection id="articles" isAside class="md:col-span-1 col-span-3 row-span-11" label="Articles">
+      <ul class="list-none p-2 text-sm text-primary-200 flex flex-col gap md:max-h-auto max-h-36 overflow-scroll">
+        {#if filteredArticles.length === 0 && data.articles.length > 0}
+          <li class="w-full text-primary-400">No articles found, remove filters</li>
+        {/if}
+        {#each filteredArticles as article}
+          <li class="w-full">
+            <BlogLink article={article} />
+          </li>
+        {/each}
+      </ul>
+    </BlogSection>
+    <div class="md:col-span-2 col-span-3 row-span-11 grid md:grid-rows-10 grid-rows-none gap-3">
+      <BlogSection id="post" label="Post" class={cn(!!$page.params.slug ? "row-span-9" : "row-span-10")}>
+        <div id="blog-post" class="px-2 h-[98%] overscroll-none overflow-visible md:overflow-scroll">
+          {@render children?.()}
+        </div>
+      </BlogSection>
+      {#if $page.params.slug}
+      <BlogSection id="share" class="row-span-1 py-1.5 px-3" label="Share">
+        <div class="flex flex-row gap-4">
+          <Button type="button" hasIcon><SocialXIcon className="size-4" /><span>Twitter</span></Button>
+          <Button type="button" hasIcon><SocialLinkedinIcon className="size-4" /><span>LinkedIn</span></Button>
+          {#if typeof window !== 'undefined' && 'share' in navigator}
+            <Button onclick={handleShare} type="button" hasIcon><ShareIcon className="size-4" /><span>Share</span></Button>
+          {/if}
+        </div>
+      </BlogSection>
+      {/if}
+    </div>
+    <BlogSection id="shortcuts" label="Shortcuts" class="px-4 col-span-3 row-span-1 h-full md:block flex flex-col justify-center items-center">
+      <div class="flex justify-between items-center pt-1.5">
+        <div class="flex gap-2 divide-x divide-primary-500 items-center h-full">
+          {#each shortcuts as { key, description }}
+            <div class="flex flex-row gap-1 items-center text-sm first:pl-0 pl-2">
+              <kbd class="text-primary-200">{key}</kbd>
+              <span class="text-primary-400 text-sm pl-2">{description}</span>
+            </div>
+          {/each}
+        </div>
+        <div class="text-sm">
+          <span class="text-primary-400">Last Motion</span>
+          <span aria-live="polite" class="text-primary-300 min-w-4 inline-block">
+            {lastMotion}
+          </span>
+        </div>
+      </div>
+    </BlogSection>
+  </main>
+
+  <BlogModal {closeModal} {search} {handleFilter} {showModal} />
+</div>
diff --git a/src/routes/(vimlike)/blog/+page.svelte b/src/routes/(vimlike)/blog/+page.svelte
index c822e76..8c5465e 100644
--- a/src/routes/(vimlike)/blog/+page.svelte
+++ b/src/routes/(vimlike)/blog/+page.svelte
@@ -1,13 +1,3 @@
-<svelte:head>
-  <title>Blog | Alessio Marchi</title>
-</svelte:head>
-
-<script lang="ts">
-import { goto } from '$app/navigation'
-
-$effect(() => {
-  goto('/')
-})
-</script>
-
-
+<div aria-hidden="true">
+  <p class="text-primary-300 font-thin text-sm">Select an article from the list to read it here.</p>
+</div>
diff --git a/src/routes/(vimlike)/blog/[slug]/+page.server.ts b/src/routes/(vimlike)/blog/[slug]/+page.server.ts
new file mode 100644
index 0000000..6d89a85
--- /dev/null
+++ b/src/routes/(vimlike)/blog/[slug]/+page.server.ts
@@ -0,0 +1,13 @@
+import { getBlogPosts } from '$lib/blog/server'
+
+export const load = async (context) => {
+  const slug = context.params.slug
+  const articles = await getBlogPosts()
+  const article = articles.find((article) => article.metadata.slug === slug)
+
+  if (!article) throw 404
+
+  return { article }
+}
+
+export const prerender = true
diff --git a/src/routes/(vimlike)/blog/[slug]/+page.svelte b/src/routes/(vimlike)/blog/[slug]/+page.svelte
new file mode 100644
index 0000000..10a6129
--- /dev/null
+++ b/src/routes/(vimlike)/blog/[slug]/+page.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+let { data } = $props()
+</script>
+
+<svelte:head>
+  <title>{data.article.metadata.title} | Alessio Marchi</title>
+  <meta name="description" content={data.article.metadata.description} />
+  <meta name="robots" content="index, follow" />
+</svelte:head>
+
+<div class="text-xs">
+  {@html data.article.content}
+</div>
diff --git a/src/routes/(vimlike)/changelog/+page.svx b/src/routes/(vimlike)/changelog/+page.svx
index 65ad45d..64b0817 100644
--- a/src/routes/(vimlike)/changelog/+page.svx
+++ b/src/routes/(vimlike)/changelog/+page.svx
@@ -6,8 +6,8 @@
   let { data } = $props();
 </script>
 
-<main class="container mx-auto px-4 py-8">
-  <section id="changelog">
+<main class="px-4 py-8 max-h-page overflow-scroll overscroll-none h-full">
+  <section id="changelog" class="max-w-md mx-auto">
     {@html data.data.changelogs.code}
   </section>
 </main>
diff --git a/src/routes/(vimlike)/contacts/+page.svelte b/src/routes/(vimlike)/contacts/+page.svelte
index 180be3d..9514897 100644
--- a/src/routes/(vimlike)/contacts/+page.svelte
+++ b/src/routes/(vimlike)/contacts/+page.svelte
@@ -14,6 +14,7 @@ import Xicon from '$icons/social-x-icon.svelte'
 import type { ChangeEventHandler } from 'svelte/elements'
 import type { SubmitFunction } from './$types'
 
+import Button from '$components/ui/button.svelte'
 import Input from '$components/ui/input.svelte'
 import Textarea from '$components/ui/textarea.svelte'
 
@@ -70,9 +71,9 @@ const handleChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> =
     I'd love to hear from you. Whether you have a question, feedback, or just
     want to say hello, feel free to reach out.
   </p>
-  <div class="flex items-center justify-evenly w-full p-4 gap-2">
+  <div class="flex items-center justify-evenly w-full p-4 gap">
     {#each contacts as { name, url, Icon }}
-      <div class="flex flex-col items-center gap-1">
+      <div class="flex flex-col items-center">
         <a
           href={url}
           class="rounded-full bg-primary-700 text-primary-100 p-2 flex items-center justify-center hover:border-primary-200 border-transparent border"
@@ -96,12 +97,8 @@ const handleChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> =
     <Input oninput={handleChange} error={formState.issues["email"] || null} label="Email" type="email" name="email" required />
     <Input oninput={handleChange} error={formState.issues["subject"] || null} label="Subject" type="text" name="subject" required />
     <Textarea oninput={handleChange} error={formState.issues["message"] || null} label="Message" name="message" rows={3} required />
-    <button
-      type="submit"
-      disabled={isButtonDisabled}
-      class="bg-primary-700 hover:bg-primary-500 transition-colors duration-100 text-white px-4 py-2 mt-4 rounded"
-    >
+    <Button type="submit" disabled={isButtonDisabled} hasIcon={false} fullWidth class="text-center pt-2">
       Send
-    </button>
+    </Button>
   </form>
 </main>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..31f7052
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,4 @@
+import { dev } from '$app/environment'
+import { inject } from '@vercel/analytics'
+
+inject({ mode: dev ? 'development' : 'production' })
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2d75fa4..986237c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,9 +9,10 @@ import { goto } from '$app/navigation'
 const routes: Record<string, string> = {
   '1': 'about',
   '2': 'contacts',
+  '3': 'blog',
 }
 
-const comingSoonRoutes = ['projects', 'blog']
+const comingSoonRoutes = ['projects']
 
 $effect(() => {
   const handleKeydown = (e: KeyboardEvent) => {
diff --git a/src/store/blog.store.ts b/src/store/blog.store.ts
new file mode 100644
index 0000000..b2e932c
--- /dev/null
+++ b/src/store/blog.store.ts
@@ -0,0 +1,43 @@
+import type { BlogPost } from '$lib/blog/post'
+import { writable } from 'svelte/store'
+
+enum ActionKey {
+  UPPERCASE_K = 'UPPERCASE_K',
+  UPPERCASE_J = 'UPPERCASE_J',
+  LOWERCASE_K = 'LOWERCASE_K',
+  LOWERCASE_J = 'LOWERCASE_J',
+  BACKSLASH = 'BACKSLASH',
+}
+
+type LastMotionType = {
+  multiplier: number
+  key: ActionKey
+}
+
+type BlogStoreType = {
+  lastMotion: LastMotionType | null
+  multiplier: number | null
+  search: string
+  showModal: boolean
+  articles: BlogPost[]
+}
+
+const initialState: BlogStoreType = {
+  lastMotion: null,
+  multiplier: null,
+  search: '',
+  showModal: false,
+  articles: [],
+}
+
+export const createBlogStore = () => {
+  const { subscribe, update } = writable<BlogStoreType>(initialState)
+
+  const setMultipler = (multiplier: number) =>
+    update((state) => ({ ...state, multiplier: multiplier }))
+
+  return {
+    subscribe,
+    setMultipler,
+  }
+}