From 3a4537209b74288b9def92844ac1144bda87ad9f Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Mon, 28 Sep 2026 14:18:20 +0200
Subject: [PATCH 1/4] content: rename site case to site-portfolio

---
 public/cases/ai-assistant-figma/index.html    |  4 +--
 public/cases/card-columns-obsidian/index.html |  4 +--
 .../index.html                                | 26 +++++++++----------
 public/en/cases/ai-assistant-figma/index.html |  4 +--
 .../en/cases/card-columns-obsidian/index.html |  4 +--
 .../index.html                                | 26 +++++++++----------
 public/en/index.html                          |  2 +-
 public/index.html                             |  2 +-
 public/sitemap.xml                            | 10 +++----
 ...-ai-ide.en.html => site-portfolio.en.html} |  2 +-
 ...e-with-ai-ide.html => site-portfolio.html} |  2 +-
 src/partials/mini-projects-related.en.html    |  4 +--
 src/partials/mini-projects-related.html       |  4 +--
 src/partials/mini-projects-section.en.html    |  2 +-
 src/partials/mini-projects-section.html       |  2 +-
 15 files changed, 49 insertions(+), 49 deletions(-)
 rename public/cases/{site-with-ai-ide => site-portfolio}/index.html (97%)
 rename public/en/cases/{site-with-ai-ide => site-portfolio}/index.html (97%)
 rename src/pages/cases/{site-with-ai-ide.en.html => site-portfolio.en.html} (98%)
 rename src/pages/cases/{site-with-ai-ide.html => site-portfolio.html} (98%)

diff --git a/public/cases/ai-assistant-figma/index.html b/public/cases/ai-assistant-figma/index.html
index 13db734..62bca28 100644
--- a/public/cases/ai-assistant-figma/index.html
+++ b/public/cases/ai-assistant-figma/index.html
@@ -609,10 +609,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="../site-with-ai-ide/"
+                href="../site-portfolio/"
                 aria-label="Этот сайт — открыть кейс"
               >
                 <div class="mp-card__body">
diff --git a/public/cases/card-columns-obsidian/index.html b/public/cases/card-columns-obsidian/index.html
index 324d8e7..ea56023 100644
--- a/public/cases/card-columns-obsidian/index.html
+++ b/public/cases/card-columns-obsidian/index.html
@@ -855,10 +855,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="../site-with-ai-ide/"
+                href="../site-portfolio/"
                 aria-label="Этот сайт — открыть кейс"
               >
                 <div class="mp-card__body">
diff --git a/public/cases/site-with-ai-ide/index.html b/public/cases/site-portfolio/index.html
similarity index 97%
rename from public/cases/site-with-ai-ide/index.html
rename to public/cases/site-portfolio/index.html
index 40c9b67..0cf7bb4 100644
--- a/public/cases/site-with-ai-ide/index.html
+++ b/public/cases/site-portfolio/index.html
@@ -99,10 +99,10 @@
     <link rel="modulepreload" href="/js/main.js" />
     <link rel="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
     <link rel="stylesheet" href="/css/main.css" />
-    <link rel="canonical" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
-    <link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
-    <link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
-    <link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
+    <link rel="canonical" href="https://mamadaevv.site/cases/site-portfolio/" />
+    <link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-portfolio/" />
+    <link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-portfolio/" />
+    <link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-portfolio/" />
     <meta name="author" content="Николай Мамадаев" />
     <meta name="robots" content="index, follow" />
     <meta name="theme-color" content="#0f1115" />
@@ -114,7 +114,7 @@
     <meta property="og:locale:alternate" content="en_US" />
     <meta property="og:title" content="Этот сайт — Разработка с AI IDE — кейс" />
     <meta property="og:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
-    <meta property="og:url" content="https://mamadaevv.site/cases/site-with-ai-ide/" />
+    <meta property="og:url" content="https://mamadaevv.site/cases/site-portfolio/" />
     <meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
@@ -167,8 +167,8 @@
     },
     {
       "@type": "CreativeWork",
-      "@id": "https://mamadaevv.site/cases/site-with-ai-ide/#page",
-      "url": "https://mamadaevv.site/cases/site-with-ai-ide/",
+      "@id": "https://mamadaevv.site/cases/site-portfolio/#page",
+      "url": "https://mamadaevv.site/cases/site-portfolio/",
       "name": "Этот сайт — Разработка с AI IDE — кейс",
       "description": "Кейс: Этот сайт — разработка с использованием AI IDE.",
       "isPartOf": {
@@ -181,12 +181,12 @@
       "creator": {
         "@id": "https://mamadaevv.site/#person"
       },
-      "datePublished": "2026-09-24",
+      "datePublished": "2026-09-28",
       "about": "UX/UI-дизайн и проектирование интерфейсов"
     },
     {
       "@type": "BreadcrumbList",
-      "@id": "https://mamadaevv.site/cases/site-with-ai-ide/#breadcrumbs",
+      "@id": "https://mamadaevv.site/cases/site-portfolio/#breadcrumbs",
       "itemListElement": [
         {
           "@type": "ListItem",
@@ -204,7 +204,7 @@
           "@type": "ListItem",
           "position": 3,
           "name": "Этот сайт — Разработка с AI IDE — кейс",
-          "item": "https://mamadaevv.site/cases/site-with-ai-ide/"
+          "item": "https://mamadaevv.site/cases/site-portfolio/"
         }
       ]
     }
@@ -289,7 +289,7 @@
       })();
     </script>
   </head>
-  <body data-current-case="site-with-ai-ide">
+  <body data-current-case="site-portfolio">
   <svg class="liquid-glass-defs" aria-hidden="true" width="0" height="0" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none">
   <filter id="liquid-glass-displacement" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
     <feImage href="../../assets/liquid-glass/displacement.png" xlink:href="../../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
@@ -463,10 +463,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="../site-with-ai-ide/"
+                href="../site-portfolio/"
                 aria-label="Этот сайт — открыть кейс"
               >
                 <div class="mp-card__body">
diff --git a/public/en/cases/ai-assistant-figma/index.html b/public/en/cases/ai-assistant-figma/index.html
index 68ff1aa..cc0eaaf 100644
--- a/public/en/cases/ai-assistant-figma/index.html
+++ b/public/en/cases/ai-assistant-figma/index.html
@@ -610,10 +610,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="../site-with-ai-ide/"
+                href="../site-portfolio/"
                 aria-label="This website — Open a Case"
               >
                 <div class="mp-card__body">
diff --git a/public/en/cases/card-columns-obsidian/index.html b/public/en/cases/card-columns-obsidian/index.html
index a7d099f..70790c3 100644
--- a/public/en/cases/card-columns-obsidian/index.html
+++ b/public/en/cases/card-columns-obsidian/index.html
@@ -859,10 +859,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="../site-with-ai-ide/"
+                href="../site-portfolio/"
                 aria-label="This website — Open a Case"
               >
                 <div class="mp-card__body">
diff --git a/public/en/cases/site-with-ai-ide/index.html b/public/en/cases/site-portfolio/index.html
similarity index 97%
rename from public/en/cases/site-with-ai-ide/index.html
rename to public/en/cases/site-portfolio/index.html
index 5643c74..f6d070e 100644
--- a/public/en/cases/site-with-ai-ide/index.html
+++ b/public/en/cases/site-portfolio/index.html
@@ -99,10 +99,10 @@
     <link rel="modulepreload" href="/js/main.js" />
     <link rel="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
     <link rel="stylesheet" href="/css/main.css" />
-    <link rel="canonical" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
-    <link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
-    <link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
-    <link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
+    <link rel="canonical" href="https://mamadaevv.site/en/cases/site-portfolio/" />
+    <link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-portfolio/" />
+    <link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-portfolio/" />
+    <link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-portfolio/" />
     <meta name="author" content="Nikolai Mamadaev" />
     <meta name="robots" content="index, follow" />
     <meta name="theme-color" content="#0f1115" />
@@ -114,7 +114,7 @@
     <meta property="og:locale:alternate" content="ru_RU" />
     <meta property="og:title" content="This Website — Developed with AI IDE — Case Study" />
     <meta property="og:description" content="Case Study: This website was developed using an AI IDE." />
-    <meta property="og:url" content="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
+    <meta property="og:url" content="https://mamadaevv.site/en/cases/site-portfolio/" />
     <meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
@@ -167,8 +167,8 @@
     },
     {
       "@type": "CreativeWork",
-      "@id": "https://mamadaevv.site/en/cases/site-with-ai-ide/#page",
-      "url": "https://mamadaevv.site/en/cases/site-with-ai-ide/",
+      "@id": "https://mamadaevv.site/en/cases/site-portfolio/#page",
+      "url": "https://mamadaevv.site/en/cases/site-portfolio/",
       "name": "This Website — Developed with AI IDE — Case Study",
       "description": "Case Study: This website was developed using an AI IDE.",
       "isPartOf": {
@@ -181,12 +181,12 @@
       "creator": {
         "@id": "https://mamadaevv.site/#person"
       },
-      "datePublished": "2026-09-24",
+      "datePublished": "2026-09-28",
       "about": "UX/UI design and interface design"
     },
     {
       "@type": "BreadcrumbList",
-      "@id": "https://mamadaevv.site/en/cases/site-with-ai-ide/#breadcrumbs",
+      "@id": "https://mamadaevv.site/en/cases/site-portfolio/#breadcrumbs",
       "itemListElement": [
         {
           "@type": "ListItem",
@@ -204,7 +204,7 @@
           "@type": "ListItem",
           "position": 3,
           "name": "This Website — Developed with AI IDE — Case Study",
-          "item": "https://mamadaevv.site/cases/site-with-ai-ide/"
+          "item": "https://mamadaevv.site/cases/site-portfolio/"
         }
       ]
     }
@@ -289,7 +289,7 @@
       })();
     </script>
   </head>
-  <body data-current-case="site-with-ai-ide">
+  <body data-current-case="site-portfolio">
   <svg class="liquid-glass-defs" aria-hidden="true" width="0" height="0" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none">
   <filter id="liquid-glass-displacement" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
     <feImage href="../../../assets/liquid-glass/displacement.png" xlink:href="../../../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
@@ -463,10 +463,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="../site-with-ai-ide/"
+                href="../site-portfolio/"
                 aria-label="This website — Open a Case"
               >
                 <div class="mp-card__body">
diff --git a/public/en/index.html b/public/en/index.html
index c548524..0a3a15e 100644
--- a/public/en/index.html
+++ b/public/en/index.html
@@ -864,7 +864,7 @@
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="cases/site-with-ai-ide/"
+                href="cases/site-portfolio/"
                 aria-label="This site — open case"
               >
                 <div class="mp-card__body">
diff --git a/public/index.html b/public/index.html
index df500af..fdbf2b1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -871,7 +871,7 @@
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="cases/site-with-ai-ide/"
+                href="cases/site-portfolio/"
                 aria-label="Этот сайт — открыть кейс"
               >
                 <div class="mp-card__body">
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 9412032..e8ff2d7 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -72,11 +72,11 @@
     <xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/orc-automation-panel/" />
   </url>
   <url>
-    <loc>https://mamadaevv.site/cases/site-with-ai-ide/</loc>
-    <lastmod>2026-09-24</lastmod>
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
-    <xhtml:link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
+    <loc>https://mamadaevv.site/cases/site-portfolio/</loc>
+    <lastmod>2026-09-28</lastmod>
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-portfolio/" />
+    <xhtml:link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-portfolio/" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-portfolio/" />
   </url>
   <url>
     <loc>https://mamadaevv.site/cases/task-distribution-concept/</loc>
diff --git a/src/pages/cases/site-with-ai-ide.en.html b/src/pages/cases/site-portfolio.en.html
similarity index 98%
rename from src/pages/cases/site-with-ai-ide.en.html
rename to src/pages/cases/site-portfolio.en.html
index 2bfa906..8496b98 100644
--- a/src/pages/cases/site-with-ai-ide.en.html
+++ b/src/pages/cases/site-portfolio.en.html
@@ -81,7 +81,7 @@
       })();
     </script>
   </head>
-  <body data-current-case="site-with-ai-ide">
+  <body data-current-case="site-portfolio">
     {{> header-case}}
 {{> fab-stack}}
 <main id="case-main" class="section section--tight">
diff --git a/src/pages/cases/site-with-ai-ide.html b/src/pages/cases/site-portfolio.html
similarity index 98%
rename from src/pages/cases/site-with-ai-ide.html
rename to src/pages/cases/site-portfolio.html
index a0202a3..70ffe7b 100644
--- a/src/pages/cases/site-with-ai-ide.html
+++ b/src/pages/cases/site-portfolio.html
@@ -81,7 +81,7 @@
       })();
     </script>
   </head>
-  <body data-current-case="site-with-ai-ide">
+  <body data-current-case="site-portfolio">
     {{> header-case}}
 {{> fab-stack}}
 <main id="case-main" class="section section--tight">
diff --git a/src/partials/mini-projects-related.en.html b/src/partials/mini-projects-related.en.html
index 7e59dd5..76189ba 100644
--- a/src/partials/mini-projects-related.en.html
+++ b/src/partials/mini-projects-related.en.html
@@ -32,10 +32,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="{{casesPrefix}}site-with-ai-ide/"
+                href="{{casesPrefix}}site-portfolio/"
                 aria-label="This website — Open a Case"
               >
                 <div class="mp-card__body">
diff --git a/src/partials/mini-projects-related.html b/src/partials/mini-projects-related.html
index 6e5307c..8aa781c 100644
--- a/src/partials/mini-projects-related.html
+++ b/src/partials/mini-projects-related.html
@@ -32,10 +32,10 @@
                 </div>
               </a>
             </li>
-            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
+            <li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="{{casesPrefix}}site-with-ai-ide/"
+                href="{{casesPrefix}}site-portfolio/"
                 aria-label="Этот сайт — открыть кейс"
               >
                 <div class="mp-card__body">
diff --git a/src/partials/mini-projects-section.en.html b/src/partials/mini-projects-section.en.html
index abcb42a..3389ccd 100644
--- a/src/partials/mini-projects-section.en.html
+++ b/src/partials/mini-projects-section.en.html
@@ -51,7 +51,7 @@
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="cases/site-with-ai-ide/"
+                href="cases/site-portfolio/"
                 aria-label="This site — open case"
               >
                 <div class="mp-card__body">
diff --git a/src/partials/mini-projects-section.html b/src/partials/mini-projects-section.html
index 8d33d01..918e145 100644
--- a/src/partials/mini-projects-section.html
+++ b/src/partials/mini-projects-section.html
@@ -51,7 +51,7 @@
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
                 class="mp-card mp-card--link mp-card--compact"
-                href="cases/site-with-ai-ide/"
+                href="cases/site-portfolio/"
                 aria-label="Этот сайт — открыть кейс"
               >
                 <div class="mp-card__body">

From a9957e739f1c6de6252af68811c4a38ee30c2ce6 Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Mon, 28 Sep 2026 15:07:12 +0200
Subject: [PATCH 2/4] content(site-portfolio): add current status

---
 public/cases/site-portfolio/index.html    | 2 +-
 public/en/cases/site-portfolio/index.html | 2 +-
 src/pages/cases/site-portfolio.en.html    | 2 +-
 src/pages/cases/site-portfolio.html       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/cases/site-portfolio/index.html b/public/cases/site-portfolio/index.html
index 0cf7bb4..0313274 100644
--- a/public/cases/site-portfolio/index.html
+++ b/public/cases/site-portfolio/index.html
@@ -424,7 +424,7 @@
 
         <h2 id="result">Результат</h2>
         <p class="section__prose">
-          <!-- Итоги -->
+          Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
         </p>
       </div>
     </main>
diff --git a/public/en/cases/site-portfolio/index.html b/public/en/cases/site-portfolio/index.html
index f6d070e..1574852 100644
--- a/public/en/cases/site-portfolio/index.html
+++ b/public/en/cases/site-portfolio/index.html
@@ -424,7 +424,7 @@
 
         <h2 id="result">Result</h2>
         <p class="section__prose">
-          <!-- Итоги -->
+          The site is fully functional. Next, I plan to work on its content and promotion.
         </p>
       </div>
     </main>
diff --git a/src/pages/cases/site-portfolio.en.html b/src/pages/cases/site-portfolio.en.html
index 8496b98..7447201 100644
--- a/src/pages/cases/site-portfolio.en.html
+++ b/src/pages/cases/site-portfolio.en.html
@@ -111,7 +111,7 @@
 
         <h2 id="result">Result</h2>
         <p class="section__prose">
-          <!-- Итоги -->
+          The site is fully functional. Next, I plan to work on its content and promotion.
         </p>
       </div>
     </main>
diff --git a/src/pages/cases/site-portfolio.html b/src/pages/cases/site-portfolio.html
index 70ffe7b..9608c9e 100644
--- a/src/pages/cases/site-portfolio.html
+++ b/src/pages/cases/site-portfolio.html
@@ -111,7 +111,7 @@
 
         <h2 id="result">Результат</h2>
         <p class="section__prose">
-          <!-- Итоги -->
+          Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
         </p>
       </div>
     </main>

From 02f05c05985833c07cb60ab15767c78e8d0a8f8d Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Mon, 28 Sep 2026 15:17:47 +0200
Subject: [PATCH 3/4] content(site-portfolio): draft personal LLM workflow case

---
 public/cases/site-portfolio/index.html    | 106 +++++++++++++++++-----
 public/en/cases/site-portfolio/index.html | 106 +++++++++++++++++-----
 src/pages/cases/site-portfolio.en.html    |  90 +++++++++++++++---
 src/pages/cases/site-portfolio.html       |  88 +++++++++++++++---
 4 files changed, 315 insertions(+), 75 deletions(-)

diff --git a/public/cases/site-portfolio/index.html b/public/cases/site-portfolio/index.html
index 0313274..9416e03 100644
--- a/public/cases/site-portfolio/index.html
+++ b/public/cases/site-portfolio/index.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta
       name="description"
-      content="Кейс: Этот сайт — разработка с использованием AI IDE."
+      content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent."
     />
-    <title>Этот сайт — Разработка с AI IDE — кейс</title>
+    <title>Как я создаю сайт-портфолио с LLM-агентами</title>
     <script>
       (function () {
         var FONT_CSS = {
@@ -112,20 +112,20 @@
     <meta property="og:site_name" content="Николай Мамадаев — продуктовый дизайнер" />
     <meta property="og:locale" content="ru_RU" />
     <meta property="og:locale:alternate" content="en_US" />
-    <meta property="og:title" content="Этот сайт — Разработка с AI IDE — кейс" />
-    <meta property="og:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
+    <meta property="og:title" content="Как я создаю сайт-портфолио с LLM-агентами" />
+    <meta property="og:description" content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent." />
     <meta property="og:url" content="https://mamadaevv.site/cases/site-portfolio/" />
     <meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="Этот сайт — Разработка с AI IDE — кейс" />
+    <meta property="og:image:alt" content="Как я создаю сайт-портфолио с LLM-агентами" />
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Этот сайт — Разработка с AI IDE — кейс" />
-    <meta name="twitter:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
+    <meta name="twitter:title" content="Как я создаю сайт-портфолио с LLM-агентами" />
+    <meta name="twitter:description" content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent." />
     <meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
-    <meta name="twitter:image:alt" content="Этот сайт — Разработка с AI IDE — кейс" />
+    <meta name="twitter:image:alt" content="Как я создаю сайт-портфолио с LLM-агентами" />
 
     <script type="application/ld+json">
       {
@@ -169,8 +169,8 @@
       "@type": "CreativeWork",
       "@id": "https://mamadaevv.site/cases/site-portfolio/#page",
       "url": "https://mamadaevv.site/cases/site-portfolio/",
-      "name": "Этот сайт — Разработка с AI IDE — кейс",
-      "description": "Кейс: Этот сайт — разработка с использованием AI IDE.",
+      "name": "Как я создаю сайт-портфолио с LLM-агентами",
+      "description": "Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent.",
       "isPartOf": {
         "@id": "https://mamadaevv.site/#website"
       },
@@ -203,7 +203,7 @@
         {
           "@type": "ListItem",
           "position": 3,
-          "name": "Этот сайт — Разработка с AI IDE — кейс",
+          "name": "Как я создаю сайт-портфолио с LLM-агентами",
           "item": "https://mamadaevv.site/cases/site-portfolio/"
         }
       ]
@@ -223,6 +223,28 @@
         max-width: 48rem;
         margin: 0 auto;
       }
+      .case-article .case-brief {
+        list-style: none;
+        margin: 1.5rem 0 0;
+        padding: 1rem 1.1rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 0.85rem 1.25rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+      }
+      .case-article .case-brief li {
+        margin: 0;
+      }
+      .case-article .case-brief span {
+        display: block;
+        margin-bottom: 0.2rem;
+        color: var(--text-muted);
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
       .case-article h2 {
         margin: 2rem 0 0.75rem;
         font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -399,32 +421,70 @@
 
 <main id="case-main" class="section section--tight">
       <div class="section__inner case-article">
-        <p class="hero__eyebrow">Разработка · AI IDE</p>
-        <h1 class="case-page__h1">Этот сайт</h1>
-        <p class="case-page__sub">Разработка сайта с использованием AI IDE</p>
+        <p class="hero__eyebrow">Личный опыт · LLM и веб-разработка</p>
+        <h1 class="case-page__h1">Как я создаю сайт-портфолио с LLM</h1>
+        <p class="case-page__sub">От ограничений конструкторов до работы с Cursor и Hermes Agent</p>
 
         <p class="section__prose">
-          <!-- Здесь будет введение -->
+          Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.
         </p>
 
-        <h2 id="context">Контекст</h2>
+        <ul class="case-brief">
+          <li><span>Формат</span>Личный проект</li>
+          <li><span>Моя роль</span>Задаю направление, структуру и принимаю результат</li>
+          <li><span>Инструменты</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
+          <li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
+        </ul>
+
+        <h2 id="context">Мне понадобился новый сайт</h2>
         <p class="section__prose">
-          <!-- Контекст проекта -->
+          Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
         </p>
 
-        <h2 id="task">Задача</h2>
+        <h2 id="task">Конструктор начал мешать</h2>
         <p class="section__prose">
-          <!-- Описание задачи -->
+          Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
+        </p>
+        <p class="section__prose">
+          Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
         </p>
 
-        <h2 id="solution">Решение</h2>
+        <h2 id="solution">Как складывался процесс</h2>
+        <h3>Сначала модель помогала писать код</h3>
         <p class="section__prose">
-          <!-- Что было сделано -->
+          Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
+        </p>
+        <p class="section__prose">
+          Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
         </p>
 
-        <h2 id="result">Результат</h2>
+        <h3>Макеты не были обязательным этапом</h3>
         <p class="section__prose">
-          Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
+          Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
+        </p>
+        <p class="section__prose">
+          В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
+        </p>
+
+        <h3>Компоненты помогали держать сайт цельным</h3>
+        <p class="section__prose">
+          Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
+        </p>
+        <p class="section__prose">
+          Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
+        </p>
+
+        <h2 id="agents">От помощника к агенту</h2>
+        <p class="section__prose">
+          Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
+        </p>
+        <p class="section__prose">
+          Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
+        </p>
+
+        <h2 id="result">Сайт работает</h2>
+        <p class="section__prose">
+          Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
         </p>
       </div>
     </main>
diff --git a/public/en/cases/site-portfolio/index.html b/public/en/cases/site-portfolio/index.html
index 1574852..55dded6 100644
--- a/public/en/cases/site-portfolio/index.html
+++ b/public/en/cases/site-portfolio/index.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta
       name="description"
-      content="Case Study: This website was developed using an AI IDE."
+      content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent."
     />
-    <title>This Website — Developed with AI IDE — Case Study</title>
+    <title>Building My Portfolio Website with LLM Agents</title>
     <script>
       (function () {
         var FONT_CSS = {
@@ -112,20 +112,20 @@
     <meta property="og:site_name" content="Nikolai Mamadaev — Product Designer" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:locale:alternate" content="ru_RU" />
-    <meta property="og:title" content="This Website — Developed with AI IDE — Case Study" />
-    <meta property="og:description" content="Case Study: This website was developed using an AI IDE." />
+    <meta property="og:title" content="Building My Portfolio Website with LLM Agents" />
+    <meta property="og:description" content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent." />
     <meta property="og:url" content="https://mamadaevv.site/en/cases/site-portfolio/" />
     <meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="This Website — Developed with AI IDE — Case Study" />
+    <meta property="og:image:alt" content="Building My Portfolio Website with LLM Agents" />
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="This Website — Developed with AI IDE — Case Study" />
-    <meta name="twitter:description" content="Case Study: This website was developed using an AI IDE." />
+    <meta name="twitter:title" content="Building My Portfolio Website with LLM Agents" />
+    <meta name="twitter:description" content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent." />
     <meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
-    <meta name="twitter:image:alt" content="This Website — Developed with AI IDE — Case Study" />
+    <meta name="twitter:image:alt" content="Building My Portfolio Website with LLM Agents" />
 
     <script type="application/ld+json">
       {
@@ -169,8 +169,8 @@
       "@type": "CreativeWork",
       "@id": "https://mamadaevv.site/en/cases/site-portfolio/#page",
       "url": "https://mamadaevv.site/en/cases/site-portfolio/",
-      "name": "This Website — Developed with AI IDE — Case Study",
-      "description": "Case Study: This website was developed using an AI IDE.",
+      "name": "Building My Portfolio Website with LLM Agents",
+      "description": "My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent.",
       "isPartOf": {
         "@id": "https://mamadaevv.site/#website"
       },
@@ -203,7 +203,7 @@
         {
           "@type": "ListItem",
           "position": 3,
-          "name": "This Website — Developed with AI IDE — Case Study",
+          "name": "Building My Portfolio Website with LLM Agents",
           "item": "https://mamadaevv.site/cases/site-portfolio/"
         }
       ]
@@ -223,6 +223,28 @@
         max-width: 48rem;
         margin: 0 auto;
       }
+      .case-article .case-brief {
+        list-style: none;
+        margin: 1.5rem 0 0;
+        padding: 1rem 1.1rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 0.85rem 1.25rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+      }
+      .case-article .case-brief li {
+        margin: 0;
+      }
+      .case-article .case-brief span {
+        display: block;
+        margin-bottom: 0.2rem;
+        color: var(--text-muted);
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
       .case-article h2 {
         margin: 2rem 0 0.75rem;
         font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -399,30 +421,68 @@
 
 <main id="case-main" class="section section--tight">
       <div class="section__inner case-article">
-        <p class="hero__eyebrow">Development · AI IDE</p>
-        <h1 class="case-page__h1">This website</h1>
-        <p class="case-page__sub">Website Development Using AI IDE</p>
+        <p class="hero__eyebrow">Personal experience · LLM and web development</p>
+        <h1 class="case-page__h1">Building My Portfolio Website with LLMs</h1>
+        <p class="case-page__sub">From no-code limitations to working with Cursor and Hermes Agent</p>
 
         <p class="section__prose">
-          <!-- Здесь будет введение -->
+          I needed an up-to-date website for my work and résumé. This case follows my experience working with LLMs on the site: how I explored different tools and changed my process.
         </p>
 
-        <h2 id="context">Context</h2>
+        <ul class="case-brief">
+          <li><span>Format</span>Personal project</li>
+          <li><span>My role</span>Set the direction and structure, review the result</li>
+          <li><span>Tools</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
+          <li><span>Status</span>Site works; content and promotion are next</li>
+        </ul>
+
+        <h2 id="context">Why I needed a new site</h2>
         <p class="section__prose">
-          <!-- Контекст проекта -->
+          I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
         </p>
 
-        <h2 id="task">Task</h2>
+        <h2 id="task">The builder got in the way</h2>
         <p class="section__prose">
-          <!-- Описание задачи -->
+          I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
         </p>
-
-        <h2 id="solution">Solution</h2>
         <p class="section__prose">
-          <!-- Что было сделано -->
+          I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
         </p>
 
-        <h2 id="result">Result</h2>
+        <h2 id="solution">How the process took shape</h2>
+        <h3>At first, the model helped me write code</h3>
+        <p class="section__prose">
+          When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
+        </p>
+        <p class="section__prose">
+          The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
+        </p>
+
+        <h3>Mockups were not a required step</h3>
+        <p class="section__prose">
+          I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
+        </p>
+        <p class="section__prose">
+          I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
+        </p>
+
+        <h3>Components kept the site consistent</h3>
+        <p class="section__prose">
+          I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
+        </p>
+        <p class="section__prose">
+          Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
+        </p>
+
+        <h2 id="agents">From code assistant to agent</h2>
+        <p class="section__prose">
+          A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
+        </p>
+        <p class="section__prose">
+          Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
+        </p>
+
+        <h2 id="result">The site is working</h2>
         <p class="section__prose">
           The site is fully functional. Next, I plan to work on its content and promotion.
         </p>
diff --git a/src/pages/cases/site-portfolio.en.html b/src/pages/cases/site-portfolio.en.html
index 7447201..2fbc537 100644
--- a/src/pages/cases/site-portfolio.en.html
+++ b/src/pages/cases/site-portfolio.en.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+<html lang="en" data-theme="dark" data-radius="medium" data-font="merriweather">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta
       name="description"
-      content="Case Study: This website was developed using an AI IDE."
+      content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent."
     />
-    <title>This Website — Developed with AI IDE — Case Study</title>
+    <title>Building My Portfolio Website with LLM Agents</title>
     {{> head-links}}
     {{> head-plyr}}
     <style>
@@ -15,6 +15,28 @@
         max-width: 48rem;
         margin: 0 auto;
       }
+      .case-article .case-brief {
+        list-style: none;
+        margin: 1.5rem 0 0;
+        padding: 1rem 1.1rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 0.85rem 1.25rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+      }
+      .case-article .case-brief li {
+        margin: 0;
+      }
+      .case-article .case-brief span {
+        display: block;
+        margin-bottom: 0.2rem;
+        color: var(--text-muted);
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
       .case-article h2 {
         margin: 2rem 0 0.75rem;
         font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -86,30 +108,68 @@
 {{> fab-stack}}
 <main id="case-main" class="section section--tight">
       <div class="section__inner case-article">
-        <p class="hero__eyebrow">Development · AI IDE</p>
-        <h1 class="case-page__h1">This website</h1>
-        <p class="case-page__sub">Website Development Using AI IDE</p>
+        <p class="hero__eyebrow">Personal experience · LLM and web development</p>
+        <h1 class="case-page__h1">Building My Portfolio Website with LLMs</h1>
+        <p class="case-page__sub">From no-code limitations to working with Cursor and Hermes Agent</p>
 
         <p class="section__prose">
-          <!-- Здесь будет введение -->
+          I needed an up-to-date website for my work and résumé. This case follows my experience working with LLMs on the site: how I explored different tools and changed my process.
         </p>
 
-        <h2 id="context">Context</h2>
+        <ul class="case-brief">
+          <li><span>Format</span>Personal project</li>
+          <li><span>My role</span>Set the direction and structure, review the result</li>
+          <li><span>Tools</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
+          <li><span>Status</span>Site works; content and promotion are next</li>
+        </ul>
+
+        <h2 id="context">Why I needed a new site</h2>
         <p class="section__prose">
-          <!-- Контекст проекта -->
+          I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
         </p>
 
-        <h2 id="task">Task</h2>
+        <h2 id="task">The builder got in the way</h2>
         <p class="section__prose">
-          <!-- Описание задачи -->
+          I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
         </p>
-
-        <h2 id="solution">Solution</h2>
         <p class="section__prose">
-          <!-- Что было сделано -->
+          I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
         </p>
 
-        <h2 id="result">Result</h2>
+        <h2 id="solution">How the process took shape</h2>
+        <h3>At first, the model helped me write code</h3>
+        <p class="section__prose">
+          When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
+        </p>
+        <p class="section__prose">
+          The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
+        </p>
+
+        <h3>Mockups were not a required step</h3>
+        <p class="section__prose">
+          I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
+        </p>
+        <p class="section__prose">
+          I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
+        </p>
+
+        <h3>Components kept the site consistent</h3>
+        <p class="section__prose">
+          I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
+        </p>
+        <p class="section__prose">
+          Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
+        </p>
+
+        <h2 id="agents">From code assistant to agent</h2>
+        <p class="section__prose">
+          A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
+        </p>
+        <p class="section__prose">
+          Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
+        </p>
+
+        <h2 id="result">The site is working</h2>
         <p class="section__prose">
           The site is fully functional. Next, I plan to work on its content and promotion.
         </p>
diff --git a/src/pages/cases/site-portfolio.html b/src/pages/cases/site-portfolio.html
index 9608c9e..a80de13 100644
--- a/src/pages/cases/site-portfolio.html
+++ b/src/pages/cases/site-portfolio.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta
       name="description"
-      content="Кейс: Этот сайт — разработка с использованием AI IDE."
+      content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent."
     />
-    <title>Этот сайт — Разработка с AI IDE — кейс</title>
+    <title>Как я создаю сайт-портфолио с LLM-агентами</title>
     {{> head-links}}
     {{> head-plyr}}
     <style>
@@ -15,6 +15,28 @@
         max-width: 48rem;
         margin: 0 auto;
       }
+      .case-article .case-brief {
+        list-style: none;
+        margin: 1.5rem 0 0;
+        padding: 1rem 1.1rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 0.85rem 1.25rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+      }
+      .case-article .case-brief li {
+        margin: 0;
+      }
+      .case-article .case-brief span {
+        display: block;
+        margin-bottom: 0.2rem;
+        color: var(--text-muted);
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
       .case-article h2 {
         margin: 2rem 0 0.75rem;
         font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -86,32 +108,70 @@
 {{> fab-stack}}
 <main id="case-main" class="section section--tight">
       <div class="section__inner case-article">
-        <p class="hero__eyebrow">Разработка · AI IDE</p>
-        <h1 class="case-page__h1">Этот сайт</h1>
-        <p class="case-page__sub">Разработка сайта с использованием AI IDE</p>
+        <p class="hero__eyebrow">Личный опыт · LLM и веб-разработка</p>
+        <h1 class="case-page__h1">Как я создаю сайт-портфолио с LLM</h1>
+        <p class="case-page__sub">От ограничений конструкторов до работы с Cursor и Hermes Agent</p>
 
         <p class="section__prose">
-          <!-- Здесь будет введение -->
+          Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.
         </p>
 
-        <h2 id="context">Контекст</h2>
+        <ul class="case-brief">
+          <li><span>Формат</span>Личный проект</li>
+          <li><span>Моя роль</span>Задаю направление, структуру и принимаю результат</li>
+          <li><span>Инструменты</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
+          <li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
+        </ul>
+
+        <h2 id="context">Мне понадобился новый сайт</h2>
         <p class="section__prose">
-          <!-- Контекст проекта -->
+          Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
         </p>
 
-        <h2 id="task">Задача</h2>
+        <h2 id="task">Конструктор начал мешать</h2>
         <p class="section__prose">
-          <!-- Описание задачи -->
+          Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
+        </p>
+        <p class="section__prose">
+          Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
         </p>
 
-        <h2 id="solution">Решение</h2>
+        <h2 id="solution">Как складывался процесс</h2>
+        <h3>Сначала модель помогала писать код</h3>
         <p class="section__prose">
-          <!-- Что было сделано -->
+          Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
+        </p>
+        <p class="section__prose">
+          Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
         </p>
 
-        <h2 id="result">Результат</h2>
+        <h3>Макеты не были обязательным этапом</h3>
         <p class="section__prose">
-          Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
+          Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
+        </p>
+        <p class="section__prose">
+          В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
+        </p>
+
+        <h3>Компоненты помогали держать сайт цельным</h3>
+        <p class="section__prose">
+          Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
+        </p>
+        <p class="section__prose">
+          Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
+        </p>
+
+        <h2 id="agents">От помощника к агенту</h2>
+        <p class="section__prose">
+          Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
+        </p>
+        <p class="section__prose">
+          Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
+        </p>
+
+        <h2 id="result">Сайт работает</h2>
+        <p class="section__prose">
+          Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
         </p>
       </div>
     </main>

From adf0f4b0524f07ded4ef2e11eb2f00964128b3ad Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Mon, 28 Sep 2026 15:25:47 +0200
Subject: [PATCH 4/4] content(site-portfolio): refine headings and callouts

---
 public/cases/site-portfolio/index.html    | 44 +++++++++++++++-----
 public/en/cases/site-portfolio/index.html | 50 ++++++++++++++++-------
 src/pages/cases/site-portfolio.en.html    | 50 ++++++++++++++++-------
 src/pages/cases/site-portfolio.html       | 44 +++++++++++++++-----
 4 files changed, 138 insertions(+), 50 deletions(-)

diff --git a/public/cases/site-portfolio/index.html b/public/cases/site-portfolio/index.html
index 9416e03..d9b89dc 100644
--- a/public/cases/site-portfolio/index.html
+++ b/public/cases/site-portfolio/index.html
@@ -436,21 +436,28 @@
           <li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
         </ul>
 
-        <h2 id="context">Мне понадобился новый сайт</h2>
+        <h2 id="context">Актуальный сайт-портфолио</h2>
         <p class="section__prose">
           Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
         </p>
 
-        <h2 id="task">Конструктор начал мешать</h2>
+        <h2 id="task">Пределы конструктора</h2>
         <p class="section__prose">
-          Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
+          Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Даже платные тарифы не позволяли быстро менять структуру и дизайн всего сайта.</p>
+          </div>
+        </aside>
+        <h3>Главная стала первым экспериментом</h3>
         <p class="section__prose">
           Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
         </p>
 
-        <h2 id="solution">Как складывался процесс</h2>
-        <h3>Сначала модель помогала писать код</h3>
+        <h2 id="solution">Рабочий процесс без готовых макетов</h2>
+        <h3>Структура от меня, код от модели</h3>
         <p class="section__prose">
           Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
         </p>
@@ -458,31 +465,46 @@
           Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
         </p>
 
-        <h3>Макеты не были обязательным этапом</h3>
+        <h3>Сразу проверял в браузере</h3>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>Макеты я не готовил. Идеи проверял на работающем сайте.</p>
+          </div>
+        </aside>
         <p class="section__prose">
-          Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
+          Я открывал сайт на ноутбуке, десктопе, планшете и телефоне, смотрел, как он ведёт себя, и решал, что доработать. В конструкторе тоже можно смотреть сайт на разных устройствах, но путь от идеи до правки занимал больше шагов.
         </p>
         <p class="section__prose">
           В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
         </p>
 
-        <h3>Компоненты помогали держать сайт цельным</h3>
+        <h3>Дизайн-система для всего сайта</h3>
         <p class="section__prose">
           Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
         </p>
+        <h3>Ветки Git для разных направлений</h3>
         <p class="section__prose">
           Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
         </p>
 
-        <h2 id="agents">От помощника к агенту</h2>
+        <h2 id="agents">Переход к агентной разработке</h2>
+        <h3>Cursor: от помощника к агенту</h3>
         <p class="section__prose">
-          Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
+          Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+          <div class="case-callout__content">
+            <p>Я стал меньше заниматься кодом и больше времени уделять творческим задачам. Моя роль стала ближе к арт-директору или лиду.</p>
+          </div>
+        </aside>
+        <h3>Hermes Agent: гибкость и стоимость</h3>
         <p class="section__prose">
           Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
         </p>
 
-        <h2 id="result">Сайт работает</h2>
+        <h2 id="result">Рабочая версия готова</h2>
         <p class="section__prose">
           Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
         </p>
diff --git a/public/en/cases/site-portfolio/index.html b/public/en/cases/site-portfolio/index.html
index 55dded6..cedac25 100644
--- a/public/en/cases/site-portfolio/index.html
+++ b/public/en/cases/site-portfolio/index.html
@@ -436,21 +436,28 @@
           <li><span>Status</span>Site works; content and promotion are next</li>
         </ul>
 
-        <h2 id="context">Why I needed a new site</h2>
+        <h2 id="context">A portfolio site I needed</h2>
         <p class="section__prose">
           I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
         </p>
 
-        <h2 id="task">The builder got in the way</h2>
+        <h2 id="task">Where the builder fell short</h2>
         <p class="section__prose">
-          I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
+          I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Even paid plans did not make site-wide structure and design changes quick.</p>
+          </div>
+        </aside>
+        <h3>The homepage became my first experiment</h3>
         <p class="section__prose">
           I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
         </p>
 
-        <h2 id="solution">How the process took shape</h2>
-        <h3>At first, the model helped me write code</h3>
+        <h2 id="solution">A workflow without finished mockups</h2>
+        <h3>I set the structure; the model wrote code</h3>
         <p class="section__prose">
           When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
         </p>
@@ -458,31 +465,46 @@
           The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
         </p>
 
-        <h3>Mockups were not a required step</h3>
+        <h3>I checked the site in the browser</h3>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>I skipped mockups and tested ideas on the working site.</p>
+          </div>
+        </aside>
         <p class="section__prose">
-          I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
+          I opened the site on a laptop, desktop, tablet, and phone, watched how it behaved, and decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
         </p>
         <p class="section__prose">
-          I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
+          In Figma and Lunacy, I prepared individual assets: screenshots of apps and websites for case studies, graphics, an avatar, and vector icons.
         </p>
 
-        <h3>Components kept the site consistent</h3>
+        <h3>A design system for the whole site</h3>
         <p class="section__prose">
           I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
         </p>
+        <h3>Git branches for trying different directions</h3>
         <p class="section__prose">
-          Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
+          Version control and Git branches let me test different directions for the site. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
         </p>
 
-        <h2 id="agents">From code assistant to agent</h2>
+        <h2 id="agents">Moving to agent-driven development</h2>
+        <h3>Cursor: from code assistant to agent</h3>
         <p class="section__prose">
-          A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
+          A few weeks after I started working on the site, Cursor added an agent window. I switched fully to the agent and did not return to the classic IDE workflow.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+          <div class="case-callout__content">
+            <p>I spent less time on code and more on creative work. My role became closer to art direction or project leadership.</p>
+          </div>
+        </aside>
+        <h3>Hermes Agent: flexibility and cost</h3>
         <p class="section__prose">
-          Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
+          Later, I began exploring Hermes Agent. It was more flexible to configure and let me connect any LLM provider. There was no subscription for the tool itself, which made development cheaper. When my Cursor quota ran out, I had to wait until the next month. That got in the way of work.
         </p>
 
-        <h2 id="result">The site is working</h2>
+        <h2 id="result">The working version is ready</h2>
         <p class="section__prose">
           The site is fully functional. Next, I plan to work on its content and promotion.
         </p>
diff --git a/src/pages/cases/site-portfolio.en.html b/src/pages/cases/site-portfolio.en.html
index 2fbc537..d488b9d 100644
--- a/src/pages/cases/site-portfolio.en.html
+++ b/src/pages/cases/site-portfolio.en.html
@@ -123,21 +123,28 @@
           <li><span>Status</span>Site works; content and promotion are next</li>
         </ul>
 
-        <h2 id="context">Why I needed a new site</h2>
+        <h2 id="context">A portfolio site I needed</h2>
         <p class="section__prose">
           I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
         </p>
 
-        <h2 id="task">The builder got in the way</h2>
+        <h2 id="task">Where the builder fell short</h2>
         <p class="section__prose">
-          I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
+          I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Even paid plans did not make site-wide structure and design changes quick.</p>
+          </div>
+        </aside>
+        <h3>The homepage became my first experiment</h3>
         <p class="section__prose">
           I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
         </p>
 
-        <h2 id="solution">How the process took shape</h2>
-        <h3>At first, the model helped me write code</h3>
+        <h2 id="solution">A workflow without finished mockups</h2>
+        <h3>I set the structure; the model wrote code</h3>
         <p class="section__prose">
           When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
         </p>
@@ -145,31 +152,46 @@
           The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
         </p>
 
-        <h3>Mockups were not a required step</h3>
+        <h3>I checked the site in the browser</h3>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>I skipped mockups and tested ideas on the working site.</p>
+          </div>
+        </aside>
         <p class="section__prose">
-          I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
+          I opened the site on a laptop, desktop, tablet, and phone, watched how it behaved, and decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
         </p>
         <p class="section__prose">
-          I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
+          In Figma and Lunacy, I prepared individual assets: screenshots of apps and websites for case studies, graphics, an avatar, and vector icons.
         </p>
 
-        <h3>Components kept the site consistent</h3>
+        <h3>A design system for the whole site</h3>
         <p class="section__prose">
           I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
         </p>
+        <h3>Git branches for trying different directions</h3>
         <p class="section__prose">
-          Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
+          Version control and Git branches let me test different directions for the site. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
         </p>
 
-        <h2 id="agents">From code assistant to agent</h2>
+        <h2 id="agents">Moving to agent-driven development</h2>
+        <h3>Cursor: from code assistant to agent</h3>
         <p class="section__prose">
-          A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
+          A few weeks after I started working on the site, Cursor added an agent window. I switched fully to the agent and did not return to the classic IDE workflow.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+          <div class="case-callout__content">
+            <p>I spent less time on code and more on creative work. My role became closer to art direction or project leadership.</p>
+          </div>
+        </aside>
+        <h3>Hermes Agent: flexibility and cost</h3>
         <p class="section__prose">
-          Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
+          Later, I began exploring Hermes Agent. It was more flexible to configure and let me connect any LLM provider. There was no subscription for the tool itself, which made development cheaper. When my Cursor quota ran out, I had to wait until the next month. That got in the way of work.
         </p>
 
-        <h2 id="result">The site is working</h2>
+        <h2 id="result">The working version is ready</h2>
         <p class="section__prose">
           The site is fully functional. Next, I plan to work on its content and promotion.
         </p>
diff --git a/src/pages/cases/site-portfolio.html b/src/pages/cases/site-portfolio.html
index a80de13..01007df 100644
--- a/src/pages/cases/site-portfolio.html
+++ b/src/pages/cases/site-portfolio.html
@@ -123,21 +123,28 @@
           <li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
         </ul>
 
-        <h2 id="context">Мне понадобился новый сайт</h2>
+        <h2 id="context">Актуальный сайт-портфолио</h2>
         <p class="section__prose">
           Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
         </p>
 
-        <h2 id="task">Конструктор начал мешать</h2>
+        <h2 id="task">Пределы конструктора</h2>
         <p class="section__prose">
-          Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
+          Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Даже платные тарифы не позволяли быстро менять структуру и дизайн всего сайта.</p>
+          </div>
+        </aside>
+        <h3>Главная стала первым экспериментом</h3>
         <p class="section__prose">
           Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
         </p>
 
-        <h2 id="solution">Как складывался процесс</h2>
-        <h3>Сначала модель помогала писать код</h3>
+        <h2 id="solution">Рабочий процесс без готовых макетов</h2>
+        <h3>Структура от меня, код от модели</h3>
         <p class="section__prose">
           Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
         </p>
@@ -145,31 +152,46 @@
           Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
         </p>
 
-        <h3>Макеты не были обязательным этапом</h3>
+        <h3>Сразу проверял в браузере</h3>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>Макеты я не готовил. Идеи проверял на работающем сайте.</p>
+          </div>
+        </aside>
         <p class="section__prose">
-          Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
+          Я открывал сайт на ноутбуке, десктопе, планшете и телефоне, смотрел, как он ведёт себя, и решал, что доработать. В конструкторе тоже можно смотреть сайт на разных устройствах, но путь от идеи до правки занимал больше шагов.
         </p>
         <p class="section__prose">
           В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
         </p>
 
-        <h3>Компоненты помогали держать сайт цельным</h3>
+        <h3>Дизайн-система для всего сайта</h3>
         <p class="section__prose">
           Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
         </p>
+        <h3>Ветки Git для разных направлений</h3>
         <p class="section__prose">
           Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
         </p>
 
-        <h2 id="agents">От помощника к агенту</h2>
+        <h2 id="agents">Переход к агентной разработке</h2>
+        <h3>Cursor: от помощника к агенту</h3>
         <p class="section__prose">
-          Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
+          Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.
         </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+          <div class="case-callout__content">
+            <p>Я стал меньше заниматься кодом и больше времени уделять творческим задачам. Моя роль стала ближе к арт-директору или лиду.</p>
+          </div>
+        </aside>
+        <h3>Hermes Agent: гибкость и стоимость</h3>
         <p class="section__prose">
           Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
         </p>
 
-        <h2 id="result">Сайт работает</h2>
+        <h2 id="result">Рабочая версия готова</h2>
         <p class="section__prose">
           Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
         </p>