added technical details

README.md

@@ -15,9 +15,6 @@
 - Акуратність у коді, вміння підтримувати єдиний стиль.
 - Досвід роботи з Git.
 
-## Технічні деталі
-- 
-
 ## Буде плюсом
 - Володіння на базовому рівні фреймворком Vue3, або розуміння як пишуться Vue3 компоненти.   
 - Розуміння принципів UI/UX.
@@ -29,5 +26,42 @@
 - Оплата погодинна або за компонент.
 - Використовуйте AI-інструменти, якщо це прискорює результат.
 
+## Технічні деталі
+
+Ми верстаємо всі сторінки або необхідні нам елементи через компоненти. Верстка компонентів передбачає створення окремої папки та двох файлів: [component-name].html і [component-name].css у ній.  Для сторінок діє те саме правило, але папка сторінки повинна містити файл із такою ж назвою. Приклад - сторінка у цьому репозиторії ```example.html``` 
+
+Ви можете клонувати цей репозиторій і переглянути приклад технічної реалізації.
+
+#### Швидкий старт
+Якщо у вас встановлена Node.js не нижче 20-ї версії, у папці проекту виконайте наступні команди:
+```bash
+npm install
+npm run dev
+```
+#### Як це працює
+
+1. Збірка: Скрипт проходить по сторінках у папці ```src/pages```, знаходить директиви ```@@include``` і рекурсивно замінює їх на відповідні HTML-компоненти.
+
+2. Стилі: Усі CSS-файли автоматично збираються (бандляться) в один спільний файл.
+
+3. Hot Reload: Скрипт стежить за змінами - після редагування будь-якого файлу сторінка автоматично перезбирається.
+    
+Ця техніка дозволяє розбивати складні елементи на простіші та створювати необхідну композицію.
+
+Отже, запущена команда сформує сторінку example.html і розмістить її в папці ```dst```. Перегляньте її або запустіть Live Server. Ви можете додати до компонента ```listbox``` кнопку за допомогою директиви ```@@include('../button/button.html')``` і переглянути результат:
+```HTML
+<div class="listbox">
+    <ul class="list-container">
+        <li class="list-option">New York</li>
+        <li class="list-option">Rome</li>
+        <li class="list-option list-option-selected">London</li>
+        <li class="list-option">Istanbul</li>
+        <li class="list-option">Paris</li>
+    </ul>
+    @@include('../button/button.html')
+</div>
+```
+Якщо такий підхід зрозумілий і вам цікаво - відгукуйтесь, з радістю поспілкуємось!
+
 ## Як відгукнутись
 Коротко опишіть свій досвід або надайте кілька прикладів верстки / GitHub / портфоліо і надішліть на e-mail vacancy@atmt.me

package.json

@@ -16,6 +16,6 @@
     "postcss-sort-media-queries": "^5.2.0"
   },
   "scripts": {
-    "dev": "yarn gulp"
+    "dev": "gulp"
   }
 }

src/components/form/listbox/listbox.html

@@ -6,4 +6,5 @@
         <li class="list-option">Istanbul</li>
         <li class="list-option">Paris</li>
     </ul>
+    @@include('../button/button.html')
 </div>