From 46b813f6f7acd8b98e652c868e0cb06a53c9c64d Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Sat, 4 Apr 2026 22:03:11 +0200
Subject: [PATCH] Update README with VS Code user snippets.

---
 README.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/README.md b/README.md
index 0653b29..a5d8873 100644
--- a/README.md
+++ b/README.md
@@ -189,6 +189,38 @@ Inside `~/projecten/websites/portfolio/portfolio`:
 
 `docker container restart gitea`
 
+## VS Code User Snippets
+
+[VS Code user snippets](https://code.visualstudio.com/docs/editing/userdefinedsnippets)
+
+File > Preferences > Configure Snippets
+
+```JSON
+"Responsive figure block": {
+    "scope": "html, markdown",
+    "prefix": "fig",
+    "body": [
+      "<figure class=\"text-center\">",
+      "  <picture class=\"d-flex justify-content-center\">",
+      "    <source media=\"(max-width: 510px)\"",
+      "     srcset=\"${1:base}-w240.webp\" />",
+      "    <source media=\"(max-width: 850px)\"",
+      "     srcset=\"${1:base}-w480.webp\" />",
+      "    <img src=\"${1:base}-w800.webp\"",
+      "         alt=\"${2:caption}\"",
+      "         class=\"img-fluid\" />",
+      "  </picture>",
+      "  <figcaption class=\"figure-caption mt-2\">",
+      "    <a href=\"${1:base}-w800.webp\">",
+      "    ${2:caption}</a>",
+      "    </a>",
+      "  </figcaption>",
+      "</figure>"
+    ],
+    "description": "Insert responsive figure"
+  }
+```
+
 ## React
 
 Bootstrap: `npm install bootstrap`