added lecture 3

2025-12-10 10:21:18 +10:00
64 changed files with 2852 additions and 14275 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +0,0 @@
-node_modules
-to_reform
--- a/embeded_details.html
+++ b/embeded_details.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>
+       Embedded Details
+    </title>
+</head>
+
+<body bgcolor="#F0F8FF">
+    <details>
+        <summary>Menu</summary>
+        <ul>
+            <li><a href="./index.html">Home</a></li>
+            <li><a href="./embeded_details.html"><h4>Embeded Details</h4></a></li>
+            <li><a href="./opencv_details.html">OpenCV Details</a></li>
+            <li><a href="./photography_details.html">Photography Details</a></li>
+            <li><a href="./table.html">Table with filters (not working yet)</a></li>
+            <li><a href="./images/institute.png">Institute</a></li>
+        </ul>
+    </details>
+    <h2 align="center">Embedded Details</h2>
+    <hr width="800" align="center">
+    <p align="center">
+        <img src="./images/esp32.png" alt="ESP32" height="150">
+        <img src="./images/arduino.png" alt="Arduino" height="150">
+        <img src="./images/stm32.png" alt="STM32" height="150">
+    </p>
+    <p align="justify">My programming path started with embeded systems,
+        i love all the low level things that Mcu could do with just a little bit of code,
+        sometimes build or flashing progress could take some time to get a hand of , but after that everething usualy
+        goes smooth</p>
+
+    <p align="justify">The first MCU i tried was a ATmega328P,
+        after some time i was surprised with the debug capabilities on the Stm32
+        and now i'm working with esp32-s3 , that's a good chip, has internal JTAG and all the shiny wireless interfaces
+        but feels faulty
+        for some reason <i> regular segfaults with CDC</i></p>
+
+
+    <h3 align="center">Microcontroller Comparison Table</h3>
+    <table border="1" align="center" cellpadding="6" cellspacing="0">
+        <tr>
+            <th>Board/MCU</th>
+            <th>UART Count</th>
+            <th>Dynamic UART Assignment</th>
+            <th>ADC Channels</th>
+            <th>Debug Support</th>
+            <th>Flash Size</th>
+            <th>Wireless Connectivity</th>
+        </tr>
+        <tr>
+            <td>ESP32</td>
+            <td>3</td>
+            <td>Yes (via IO MUX)</td>
+            <td>18</td>
+            <td>JTAG, Serial</td>
+            <td>4MB (typical)</td>
+            <td>Wi-Fi, Bluetooth</td>
+        </tr>
+        <tr>
+            <td>ESP32-S3</td>
+            <td>3</td>
+            <td>Yes (via IO MUX)</td>
+            <td>20</td>
+            <td>JTAG, Serial</td>
+            <td>8MB (typical)</td>
+            <td>Wi-Fi, Bluetooth LE</td>
+        </tr>
+        <tr>
+            <td>ESP-01</td>
+            <td>1</td>
+            <td>No</td>
+            <td>1</td>
+            <td>Serial only</td>
+            <td>512KB/1MB</td>
+            <td>Wi-Fi</td>
+        </tr>
+        <tr>
+            <td>Arduino Uno (ATmega328P)</td>
+            <td>1</td>
+            <td>No</td>
+            <td>6</td>
+            <td>Serial, DebugWire</td>
+            <td>32KB</td>
+            <td>None</td>
+        </tr>
+        <tr>
+            <td>Blue Pill (STM32F103C8T6)</td>
+            <td>3</td>
+            <td>Yes (remappable)</td>
+            <td>10</td>
+            <td>SWD, Serial</td>
+            <td>64KB/128KB</td>
+            <td>None</td>
+        </tr>
+    </table>
+
+    <p align="right"> no rpi pico here , the build system has won over my temper</p>
+
+</body>
+
+</html>
--- a/src/images/16x10/3d-printer.jpeg
+++ b/src/images/16x10/3d-printer.jpeg
--- a/src/images/16x10/blheli-esc.jpeg
+++ b/src/images/16x10/blheli-esc.jpeg
--- a/src/images/16x10/rpi-nano.jpeg
+++ b/src/images/16x10/rpi-nano.jpeg
--- a/src/images/16x10/thermostat.jpeg
+++ b/src/images/16x10/thermostat.jpeg
--- a/src/images/16x9/AQ_monitor.png
+++ b/src/images/16x9/AQ_monitor.png
--- a/src/images/16x9/esp32.png
+++ b/src/images/16x9/esp32.png
--- a/src/images/16x9/image0.png
+++ b/src/images/16x9/image0.png
--- a/src/images/16x9/opencv.png
+++ b/src/images/16x9/opencv.png
--- a/src/images/AQ_monitor.png
+++ b/src/images/AQ_monitor.png
--- a/src/images/arduino.png
+++ b/src/images/arduino.png
--- a/src/images/arucos.png
+++ b/src/images/arucos.png
--- a/src/images/esp32.png
+++ b/src/images/esp32.png
--- a/src/images/institute.png
+++ b/src/images/institute.png
--- a/src/images/opencv.png
+++ b/src/images/opencv.png
--- a/src/images/photos/image0.png
+++ b/src/images/photos/image0.png
--- a/src/images/photos/image1.png
+++ b/src/images/photos/image1.png
--- a/src/images/photos/image2.png
+++ b/src/images/photos/image2.png
--- a/src/images/photos/image3.png
+++ b/src/images/photos/image3.png
--- a/src/images/photos/image4.png
+++ b/src/images/photos/image4.png
--- a/src/images/photos/image5.png
+++ b/src/images/photos/image5.png
--- a/src/images/remote.jpeg
+++ b/src/images/remote.jpeg
--- a/src/images/sqarucos.png
+++ b/src/images/sqarucos.png
--- a/src/images/sqesp32.png
+++ b/src/images/sqesp32.png
--- a/src/images/sqstm32.png
+++ b/src/images/sqstm32.png
--- a/src/images/stm32.png
+++ b/src/images/stm32.png
--- a/index.css
+++ b/index.css
--- a/index.html
+++ b/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.js"></script>
+    <link href="labs/lab4/css/bootstrap.min.css" rel="stylesheet">
+    <script src="labs/lab4/js/bootstrap.bundle.min.js"></script>
+
+    <title>Portfolio</title>
+</head>
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-md bg-light navbar-light">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link selected-menu px-3" href="./index.html">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./embeded_details.html">Embedded</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./opencv_details.html">OpenCV</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./photography_details.html">Photography</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./table.html">Table</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./images/institute.png">Institute</a>
+                    </li>
+                </ul>
+            </div>
+    </nav>
+
+    <!-- Image Gallery -->
+    <div class="container-fluid my-4 text-center">
+        <div class="row g-2">
+            <div class="col-lg-4 col-md-12">
+                <div class="hover-overlay">
+                <img src="./images/sqarucos.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="Arduino">
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-12">
+                <div class="hover-overlay">
+                    <img src="./images/sqstm32.png" class="img-fluid border border-dark hover-shadow w-100" alt="STM32">
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-12">
+                <div class="hover-overlay">
+                    <img src="./images/sqesp32.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="ESP32">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="container-fluid">
+        <div class="row">
+            <!-- Main Content Area -->
+            <div class="col-lg-9 col-md-12">
+                <!-- First Block -->
+                <div class="card mb-4">
+                    <div class="card-header text-center">
+                        <h5 class="fw-bold mb-0">Embedded Systems</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row align-items-center">
+                            <div class="col-lg-4 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    Had several projects with different MCUs and wrote firmware for them.
+                                    My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
+                                </p>
+                            </div>
+                            <div class="col-lg-4 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    I love embedded development because of autonomy of produced devices, the devices are
+                                    not
+                                    dependent on any other hardware and can work autonomously
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More info»</a>
+                            </div>
+                            <div class="col-lg-4 col-md-12 mb-3">
+                                <img src="./images/AQ_monitor.png" class="img-fluid" alt="ESP32">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Second Block -->
+                <div class="card mb-4">
+                    <div class="card-header text-center">
+                        <h5 class="fw-bold mb-0">Embedded Systems</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row align-items-center">
+                            <div class="col-lg-3 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    Had several projects with different MCUs and wrote firmware for them.
+                                    My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
+                                </p>
+                            </div>
+                            <div class="col-lg-6 col-md-12 mb-3 text-center">
+                                <img src="./images/remote.jpeg" class="img-fluid" alt="Remote">
+                            </div>
+                            <div class="col-lg-3 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    I love embedded development because of autonomy of produced devices, the devices
+                                    are not dependent on any other hardware and can work autonomously or off the grid
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More info»</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sidebar -->
+            <div class="col-lg-3 col-md-12 border-start">
+                <!-- Small Info Block 1 -->
+                <div class="card mb-3 mt-lg-0 mt-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">3D Printer</h6>
+                                <p class="card-text small text-justify">
+                                    3D printers are versatile tools used for creating prototypes,
+                                    custom parts, and artistic designs. They work by layering materials.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/3d-printer.jpeg" class="img-fluid hover-zoom" alt="3D Printer">
+                                <div class="mask" style="background-color: rgba(63, 107, 69, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Small Info Block 2 -->
+                <div class="card mb-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">BLHeli ESCs</h6>
+                                <p class="card-text small text-justify">
+                                    BLHeli ESCs are electronic speed controllers designed
+                                    for drones, offering smooth and precise motor control.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/blheli-esc.jpeg" class="img-fluid hover-zoom" alt="BLHeli ESC">
+                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Small Info Block 3 -->
+                <div class="card mb-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">Raspberry Pi Nano</h6>
+                                <p class="card-text small text-justify">
+                                    Raspberry Pi Nano is a compact computer ideal for learning,
+                                    prototyping, and IoT projects. It is highly energy-efficient.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/rpi-nano.jpeg" class="img-fluid hover-zoom"
+                                    alt="Raspberry Pi Nano">
+                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Small Info Block 4 -->
+                <div class="card mb-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">Smart Thermostats</h6>
+                                <p class="card-text small text-justify">
+                                    Smart thermostats help regulate home temperatures efficiently,
+                                    saving energy and enhancing comfort with automation.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/thermostat.jpeg" class="img-fluid hover-zoom"
+                                    alt="Smart Thermostat">
+                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="container-fluid bg-light">
+        <span class="lead p-4 ">Kulesh A.</span>
+        <span class="lead p-4 "> Б9123-09.03.04</span>
+    </div>
+</body>
+
+</html>
--- a/labs/lab5/.gitignore
+++ b/labs/lab5/.gitignore
@@ -1 +0,0 @@
-node_modules
--- a/labs/lab5/package-lock.json
+++ b/labs/lab5/package-lock.json
--- a/labs/lab5/package.json
+++ b/labs/lab5/package.json
@@ -1,30 +0,0 @@
-{
-  "name": "template_pug",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production",
-    "serve": "webpack serve --open --mode development",
-    "dev": "webpack --mode development",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "chokidar": "^4.0.3",
-    "css-loader": "^6.8.1",
-    "filemanager-webpack-plugin": "^8.0.0",
-    "glob": "^11.0.3",
-    "html-webpack-plugin": "^5.5.3",
-    "pug": "^2.0.4",
-    "pug-loader": "^2.4.0",
-    "style-loader": "^3.3.3",
-    "stylus": "^0.61.0",
-    "stylus-loader": "^7.1.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
-  }
-}
--- a/labs/lab5/src/components/data.pug
+++ b/labs/lab5/src/components/data.pug
@@ -1,36 +0,0 @@
-block variables
- var title = 'Самые высокие здания и сооружения'
-	-
-		var dictMenu = {'Главная': 'index.html', 
-				'Небоскребы' : "#",  
-				'Башни': "#", 
-				'Список': "#"
-		}
-		
-	- var listImages = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']
-
-	- 
-		var listSections = [
-			{'header' : 'Бурдж-Халифа в Дубае, ОАЭ',
-			'image' : 'image7.jpg', 
-			'text' : 'Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.'
-			},
-			{'header' : 'Токийское небесное дерево, Япония',
-			'image' : 'image6.jpg', 
-			'text' : 'Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.'
-			},
-			{'header' : 'CN Tower, Канада',
-			'image' : 'image8.jpg', 
-			'text' : 'Си-Эн Тауэр  — самое высокое свободно стоящее сооружение в мире с 1976 по 2007 год. Его высота составляет 553,33 метра.'
-			}
-		]
-	-
-		var structures = [
-		{
-			menuItem: "Ворота Запада, США",
-			pict: "image1_big.jpg",
-			firstP: `Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
-			secondP: `Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра. 
-			Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
-		}
-		]
--- a/labs/lab5/src/components/header.pug
+++ b/labs/lab5/src/components/header.pug
@@ -1,2 +0,0 @@
-h2= 'Hello World!'
-img(src= require("../images/img1.jpg"))
--- a/labs/lab5/src/components/mixin.pug
+++ b/labs/lab5/src/components/mixin.pug
@@ -1,20 +0,0 @@
-include ../components/data.pug
-
-mixin createMenu(menu, active)
-    each value, key in menu
-        if active == key
-            a.active(href= value)= key
-        else
-            a(href= value)= key
-
-mixin createMenuBuild(menu, active)
-    each value, key in menu
-            a(href= value)= key
-    a.active(href= "")= active
-mixin createSection()
-    each item in listSections
-        section
-            h3= item.header
-            img(src= require("../images/" + item.image))
-            p= item.text
-                a(href="#") &hellip;
--- a/labs/lab5/src/images/image1.jpg
+++ b/labs/lab5/src/images/image1.jpg
--- a/labs/lab5/src/images/image1_big.jpg
+++ b/labs/lab5/src/images/image1_big.jpg
--- a/labs/lab5/src/images/image2.jpg
+++ b/labs/lab5/src/images/image2.jpg
--- a/labs/lab5/src/images/image3.jpg
+++ b/labs/lab5/src/images/image3.jpg
--- a/labs/lab5/src/images/image4.jpg
+++ b/labs/lab5/src/images/image4.jpg
--- a/labs/lab5/src/images/image5.jpg
+++ b/labs/lab5/src/images/image5.jpg
--- a/labs/lab5/src/images/image6.jpg
+++ b/labs/lab5/src/images/image6.jpg
--- a/labs/lab5/src/images/image7.jpg
+++ b/labs/lab5/src/images/image7.jpg
--- a/labs/lab5/src/images/image8.jpg
+++ b/labs/lab5/src/images/image8.jpg
--- a/labs/lab5/src/index.js
+++ b/labs/lab5/src/index.js
@@ -1 +0,0 @@
-import './styles/main.styl'
--- a/labs/lab5/src/pages/building.pug
+++ b/labs/lab5/src/pages/building.pug
@@ -1,19 +0,0 @@
-extends template
-
-block nav
-    title #{structures[0].menuItem}
-    nav
-        +createMenuBuild(dictMenu, structures[0].menuItem)
-
-block header 
-    h2= structures[0].menuItem
-
-block content
-
-    img.big(src= require("../images/" + structures[0].pict))
-
-    section
-        p= structures[0].firstP
-        p= structures[0].secondP
-
-    
--- a/labs/lab5/src/pages/index.pug
+++ b/labs/lab5/src/pages/index.pug
@@ -1,19 +0,0 @@
-extends template
-
-block nav
-    nav
-        +createMenu(dictMenu, 'Главная')
-        
-block content
-    div.images
-        each pict in listImages
-            a(href= "building.html")
-                img(src= require("../images/" + pict))
-
-    article
-        each item in listSections
-            section
-                h3= item.header
-                img(src= require("../images/"  + item.image))
-                p= item.text
-                    a(href="#") &hellip;
--- a/labs/lab5/src/pages/template.pug
+++ b/labs/lab5/src/pages/template.pug
@@ -1,18 +0,0 @@
-include ../components/mixin.pug
-include ../components/data.pug
-
-doctype html
-html(lang="ru")
-    head
-        title #{title} 
-    body
-        block header
-            h2= title
-
-        block nav
-
-        block content
-            
-        block footer
-            footer
-                h4 &copy; Пример html-страницы 
--- a/labs/lab5/src/styles/main.styl
+++ b/labs/lab5/src/styles/main.styl
@@ -1,84 +0,0 @@
-colorText = #6f6d6d
-
-back(size)
-	background-color #f1f1f1
-	box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
-	padding: size + "%"
-	margin 0 0 1% 0
-
-html
-	color colorText
-
-nav
-	back(0)
-	text-align right
-
-	& a
-		display inline-block
-		padding 1%
-		color colorText
-		text-decoration: none
-				
-		&:hover
-		&.active
-			background-color #f87777
-			color #f8f8f8     
-
-div.images
-	display grid
-	grid-template-columns repeat(5, 1fr)
-	grid-gap 0.5%
-	back(1)
-	 
-	& img
-		width: 100%
-	@media (max-width: 600px)
-		grid-template-rows repeat(5, 1fr)
-		grid-template-columns 1fr
-		& img
-			width  80%
-			margin auto
-article
-	width 80%
-	margin auto
-	display grid
-	grid-template-columns repeat(3, 1fr)
-	grid-gap 4%
-	@media (max-width: 600px)
-		grid-template-rows repeat(3, 1fr)
-		grid-template-columns 1fr
-	& section
-		display grid
-		grid-template-columns 1fr 2fr
-		grid-gap 2%
-		align-items center
-		back(2)
-		
-		& h3
-			grid-column 1/3
-			margin 0
-			text-align center
-
-		& img
-			width: 100%
-
-
-footer
-	background-color colorText
-	color white
-	@media (max-width: 600px)
-		margin 3vh 0
-	& h4 
-			padding:10px
-
-.big
-	width 50vw
-	@media (max-width: 600px)
-		width 100vw
-
-section
-	display grid
-	grid-template-columns 1fr 1fr 
-
-	@media (max-width: 600px)
-		grid-template-columns 1fr
--- a/labs/lab5/webpack.config.js
+++ b/labs/lab5/webpack.config.js
@@ -1,69 +0,0 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const FileManagerPlugin = require("filemanager-webpack-plugin");
-const path = require("path");
-const fs = require("fs");
-
-const pagesDir = path.join(__dirname, "src", "pages");
-const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
-
-module.exports = {
-  output: {
-    path: path.join(__dirname, "dist"),
-    filename: "index.[contenthash].js",
-    assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
-  },
-  entry: path.join(__dirname, "src", "index.js"),
-  module: {
-    rules: [
-      {
-        test: /\.pug$/,
-        loader: "pug-loader",
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif)$/i,
-        type: "asset/resource",
-      },
-      {
-        test: /\.svg$/,
-        type: "asset/resource",
-        generator: {
-          filename: path.join("icons", "[name].[contenthash][ext]"),
-        },
-      },
-      {
-        test: /\.styl$/,
-        use: [
-          {
-            loader: "style-loader",
-          },
-          {
-            loader: "css-loader",
-          },
-          {
-            loader: "stylus-loader",
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    ...pages.map(
-      (page) =>
-        new HtmlWebpackPlugin({
-          template: path.join(pagesDir, page),
-          filename: page.replace(".pug", ".html"),
-        })
-    ),
-    new FileManagerPlugin({
-      events: {
-        onStart: {
-          delete: ["dist"],
-        },
-      },
-    }),
-  ],
-  devServer: {
-    watchFiles: path.join(__dirname, "src"),
-    port: 9000,
-  },
-};
--- a/lec-tasks/lecture3.txt
+++ b/lec-tasks/lecture3.txt
@@ -0,0 +1,69 @@
+ol#list(type="I")
+  li Препроцессоры HTML
+    ul(type="disc")
+      li.first
+        a(href="#") Haml
+      li Pug
+  li Препроцессоры CSS
+    ul(type="circle")
+      li.first SAAS
+      li Stylus
+
+
+
+
+
+
+- var tag = 'h'
+- var i = 1
+
+#{tag+i} Уровень #{i}
+- i++
+#{tag+i} Уровень #{i}
+- i++
+#{tag+i} Уровень #{i}
+- i++
+#{tag+i} Уровень #{i}
+
+ 
+
+
+- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2}
+table
+    each name,price in products
+        tr
+            td #{name}
+            td #{price}
+
+
+
+table
+    - for(var i=0;i<10;i++)
+        tr
+            - for(var j=0;j<10;j++)
+                - if((i + j) % 2 == 0)
+                    td.white 
+                - else 
+                    td.black
+
+
+
+mixin createList(listType, items, tag)
+  - var dispListType = "ul"
+  - if (listType == "ol")
+    - dispListType = "ol"
+
+  #{dispListType}.list
+    each item in items
+      li
+        #{tag} #{item}
+
+// Вызов миксина
+createList('ul', ['Python', 'JavaScript', 'Java'], 'strong')
+
+
+size=1%
+section
+    box-shadow: size size (2*size)  rgba(0,0,0,0.5)
+    padding:size*2
+    margin:size*4
--- a/opencv_details.html
+++ b/opencv_details.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>
+        OpenCV Details
+    </title>
+</head>
+
+<body bgcolor="#F0F8FF">
+    <details>
+        <summary>Menu</summary>
+        <ul>
+            <li><a href="./index.html">Home</a></li>
+            <li><a href="./embeded_details.html"><h4>Embeded Details</h4></a></li>
+            <li><a href="./opencv_details.html">OpenCV Details</a></li>
+            <li><a href="./photography_details.html">Photography Details</a></li>
+            <li><a href="./table.html">Table with filters (not working yet)</a></li>
+            <li><a href="./images/institute.png">Institute</a></li>
+        </ul>
+    </details>
+    <h2 align="center">OpenCV Details</h2>
+    <hr width="800" align="center">
+    <p align="center">
+        <img src="./images/opencv.png" alt="OpenCV" height="150" align="top">
+        as mentioned before i love when programs are able to <i>see</i> things <br>
+        my experience with opencv started with simple hight level functions like detectCircle or findContours and
+        etc...<br>
+        Right now i'm crawling deeper into the library , and the idea of standartisation of parameters between different
+        cameras is appealig to me <br>
+        so i'm trying to understand how all that works from the math side<br>
+        Additionally, I'm exploring Re-Identification (ReId) techniques,
+        they are used for recognizing and tracking objects across different camera views or consecutive frames.
+    </p>
+    <hr width="500" align="center">
+    <p>
+        One of many projects I've worked on is <a href="https://github.com/OkunElya/ArucoNGP-MapCreator"
+            target="_blank">ArucoNGP-MapCreator</a>.<br>
+        The idea was to create a relative map of Aruco markers just from photos of pairs (or more) of them.<br>
+        It can also estimate the camera's position in the world relative to a specific marker, using only images
+        containing any marker.<br>
+        It was also my first deep dive into linear algebra.<br>
+    </p>
+
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,30 +0,0 @@
-{
-  "name": "template_pug",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production",
-    "serve": "webpack serve --open --mode development",
-    "dev": "webpack --mode development",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "chokidar": "^4.0.3",
-    "css-loader": "^6.8.1",
-    "filemanager-webpack-plugin": "^8.0.0",
-    "glob": "^11.0.3",
-    "html-webpack-plugin": "^5.5.3",
-    "pug": "^2.0.4",
-    "pug-loader": "^2.4.0",
-    "style-loader": "^3.3.3",
-    "stylus": "^0.61.0",
-    "stylus-loader": "^7.1.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
-  }
-}
--- a/photography_details.html
+++ b/photography_details.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>
+        Photography Details
+    </title>
+</head>
+
+<body bgcolor="#F0F8FF">
+    <details>
+        <summary>Menu</summary>
+        <ul>
+            <li><a href="./index.html">Home</a></li>
+            <li><a href="./embeded_details.html">Embeded Details</a></li>
+            <li><a href="./opencv_details.html">OpenCV Details</a></li>
+            <li><a href="./photography_details.html"><h4>Photography Details</h4></a></li>
+            <li><a href="./table.html">Table with filters (not working yet)</a></li>
+            <li><a href="./images/institute.png">Institute))</a></li>
+        </ul>
+    </details>
+    <h2 align="center">Photography Details</h2>
+    <hr width="800" align="center">
+
+    <p align="center">
+        Usually i capture landcape scenes  with SLR camera, the main workhorse is Nikon D3100 with kit and 70-210mm 
+    </p>
+    <p align="center">
+        <img src="images/photos/image0.png" alt="Photo 0" width="200">
+        <img src="images/photos/image1.png" alt="Photo 1" width="200">
+        <img src="images/photos/image2.png" alt="Photo 2" width="200">
+    </p>
+    <p  align="center">
+        <img src="images/photos/image3.png" alt="Photo 3" width="200">
+        <img src="images/photos/image4.png" alt="Photo 4" width="200">
+        <img src="images/photos/image5.png" alt="Photo 5" width="200">
+    </p>
+
+</body>
+
+</html>
--- a/src/components/data.pug
+++ b/src/components/data.pug
@@ -1,124 +0,0 @@
-
-  
-  // Данные для меню навигации
-  var menuItems = {
-    Home: './index.html',
-    Embedded: './embeded_details.html',
-    OpenCV: './opencv_details.html',
-    Photography: './photography_details.html',
-    Table: './table.html',
-    Institute: './images/institute.png'
-  };
-
-  // Данные для боковых карточек
-  var smallCards = [
-    {
-      header: 'Заголовок',
-      text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.',
-      image: '../images/16x10/3d-printer.jpeg',
-      imageAlt: '3D Printer',
-      link: '#',
-    },
-    {
-      header: 'BLHeli ESCs',
-      text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.',
-      image: '../images/16x10/blheli-esc.jpeg',
-      imageAlt: 'BLHeli ESC',
-      link: '#',
-    },
-    {
-      header: 'Raspberry Pi Nano',
-      text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.',
-      image: '../images/16x10/rpi-nano.jpeg',
-      imageAlt: 'Raspberry Pi Nano',
-      link: '#',
-    },
-    {
-      header: 'Smart Thermostats',
-      text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.',
-      image: '../images/16x10/thermostat.jpeg',
-      imageAlt: 'Smart Thermostat',
-      link: '#',
-    }
-  ];
-
-  const pages = {
-    embedded: {
-      title: 'Embedded Details',
-      slug: 'embedded',
-      menuTitle: 'Embeded Details',
-      images: [
-        { src: './images/esp32.png', alt: 'ESP32', height: 150 },
-        { src: './images/arduino.png', alt: 'Arduino', height: 150 },
-        { src: './images/stm32.png', alt: 'STM32', height: 150 }
-      ],
-      paragraphs: [
-        "My programming path started with embeded systems, i love all the low level things that Mcu could do with just a little bit of code, sometimes build or flashing progress could take some time to get a hand of , but after that everething usualy goes smooth",
-        "The first MCU i tried was a ATmega328P, after some time i was surprised with the debug capabilities on the Stm32 and now i'm working with esp32-s3 , that's a good chip, has internal JTAG and all the shiny wireless interfaces but feels faulty for some reason <i>regular segfaults with CDC</i>"
-      ],
-      table: {
-        title: 'Microcontroller Comparison Table',
-        headers: ['Board/MCU', 'UART Count', 'Dynamic UART Assignment', 'ADC Channels', 'Debug Support', 'Flash Size', 'Wireless Connectivity'],
-        rows: [
-          ['ESP32', '3', 'Yes (via IO MUX)', '18', 'JTAG, Serial', '4MB (typical)', 'Wi-Fi, Bluetooth'],
-          ['ESP32-S3', '3', 'Yes (via IO MUX)', '20', 'JTAG, Serial', '8MB (typical)', 'Wi-Fi, Bluetooth LE'],
-          ['ESP-01', '1', 'No', '1', 'Serial only', '512KB/1MB', 'Wi-Fi'],
-          ['Arduino Uno (ATmega328P)', '1', 'No', '6', 'Serial, DebugWire', '32KB', 'None'],
-          ['Blue Pill (STM32F103C8T6)', '3', 'Yes (remappable)', '10', 'SWD, Serial', '64KB/128KB', 'None']
-        ]
-      },
-      footer: "no rpi pico here , the build system has won over my temper"
-    },
-
-    opencv: {
-      title: 'OpenCV Details',
-      slug: 'opencv',
-      menuTitle: 'OpenCV Details',
-      images: [
-        { src: './images/opencv.png', alt: 'OpenCV', height: 150 }
-      ],
-      paragraphs: [
-        "as mentioned before i love when programs are able to <i>see</i> things",
-        "my experience with opencv started with simple hight level functions like detectCircle or findContours and etc...",
-        "Right now i'm crawling deeper into the library , and the idea of standartisation of parameters between different cameras is appealig to me",
-        "so i'm trying to understand how all that works from the math side",
-        "Additionally, I'm exploring Re-Identification (ReId) techniques, they are used for recognizing and tracking objects across different camera views or consecutive frames."
-      ],
-      content: {
-        type: 'text',
-        text: "One of many projects I've worked on is <a href=\"https://github.com/OkunElya/ArucoNGP-MapCreator\" target=\"_blank\">ArucoNGP-MapCreator</a>.<br>The idea was to create a relative map of Aruco markers just from photos of pairs (or more) of them.<br>It can also estimate the camera's position in the world relative to a specific marker, using only images containing any marker.<br>It was also my first deep dive into linear algebra."
-      }
-    },
-
-    photography: {
-      title: 'Photography Details',
-      slug: 'photography',
-      menuTitle: 'Photography Details',
-      images: [],
-      paragraphs: [
-        "Usually i capture landcape scenes with SLR camera, the main workhorse is Nikon D3100 with kit and 70-210mm"
-      ],
-      gallery: [
-        [
-          { src: 'images/photos/image0.png', alt: 'Photo 0', width: 200 },
-          { src: 'images/photos/image1.png', alt: 'Photo 1', width: 200 },
-          { src: 'images/photos/image2.png', alt: 'Photo 2', width: 200 }
-        ],
-        [
-          { src: 'images/photos/image3.png', alt: 'Photo 3', width: 200 },
-          { src: 'images/photos/image4.png', alt: 'Photo 4', width: 200 },
-          { src: 'images/photos/image5.png', alt: 'Photo 5', width: 200 }
-        ]
-      ]
-    }
-  };
-
-
-  const menu = [
-    { href: './index.html', title: 'Home' },
-    { href: './embeded_details.html', title: 'Embeded Details' },
-    { href: './opencv_details.html', title: 'OpenCV Details' },
-    { href: './photography_details.html', title: 'Photography Details' },
-    { href: './table.html', title: 'Table with filters (not working yet)' },
-    { href: './images/institute.png', title: 'Institute' }
-  ];
--- a/src/components/mixins.pug
+++ b/src/components/mixins.pug
@@ -1,72 +0,0 @@
-include data.pug
-
-  // Данные для меню навигации
-  const navbarItems = {
-    Home: './index.html',
-    Embedded: './embeded_details.html',
-    OpenCV: './opencv_details.html',
-    Photography: './photography_details.html',
-    Table: './table.html',
-    Institute: './images/institute.png'
-  };
-
-  const smallCards = [
-  {
-      header: 'Заголовок',
-      text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.',
-      image: require('../images/16x10/3d-printer.jpeg'),
-      imageAlt: '3D Printer',
-      link: '#',
-  },
-  {
-      header: 'BLHeli ESCs',
-      text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.',
-      image: require('../images/16x10/blheli-esc.jpeg'),
-      imageAlt: 'BLHeli ESC',
-      link: '#',
-  },
-  {
-      header: 'Raspberry Pi Nano',
-      text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.',
-      image: require('../images/16x10/rpi-nano.jpeg'),
-      imageAlt: 'Raspberry Pi Nano',
-      link: '#',
-  },
-  {
-      header: 'Smart Thermostats',
-      text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.',
-      image: require('../images/16x10/thermostat.jpeg'),
-      imageAlt: 'Smart Thermostat',
-      link: '#',
-  }
-  ];
-
-  const galleryImages= [
-        { src: require('../images/sqarucos.png'), alt: 'ESP32'},
-        { src: require('../images/sqstm32.png'), alt: 'Arduino'},
-        { src: require('../images/sqesp32.png'), alt: 'STM32'}
-      ]
-
-mixin navbarMixin(selectedItem)
-    .navbar
-        each navbarUrl,navbarName in navbarItems
-            if navbarName == selectedItem
-                a.navbar__link__wrapper(href=navbarUrl)
-                    .navbar__item.navbar__item_selected #{navbarName}
-            else
-                a.navbar__link__wrapper(href=navbarUrl)
-                    .navbar__item #{navbarName}
-
-mixin infoCardsMinxin()
-  each cardData in  smallCards 
-    .small-card
-        .small-card__content 
-          h3.small-card__header #{cardData.header}
-          p.small-card__text #{cardData.text}
-          a.small-card__link(href=cardData.link) Подробнее»
-        .small-card__image
-          img(src=cardData.image alt=cardData.imageAlt)
-
-mixin galleryMixin()
-  each img in galleryImages
-     img.gallery__image(src=img.src alt=img.alt)
--- a/src/components/template.pug
+++ b/src/components/template.pug
@@ -1,69 +0,0 @@
-include data.pug
-
-mixin detailsPage(pageData)
-  doctype html
-  html(lang="en")
-    head
-      meta(charset="UTF-8")
-      title= pageData.title
-    
-    body(bgcolor="#F0F8FF")
-      //- Menu
-      details
-        summary Menu
-        ul
-          each item in menu
-            li
-              if item.title === pageData.menuTitle
-                a(href=item.href)
-                  h4= item.title
-              else
-                a(href=item.href)= item.title
-      
-      //- Page Title
-      h2(align="center")= pageData.title
-      hr(width="800" align="center")
-      
-      //- Header Images
-      if pageData.images && pageData.images.length > 0
-        p(align="center")
-          each img in pageData.images
-            if img.height
-              img(src=img.src alt=img.alt height=img.height)
-            else if img.width
-              img(src=img.src alt=img.alt width=img.width)
-            else
-              img(src=img.src alt=img.alt)
-      
-      //- Paragraphs
-      if pageData.paragraphs
-        each para in pageData.paragraphs
-          p(align="justify")!= para
-      
-      //- Table (for embedded page)
-      if pageData.table
-        h3(align="center")= pageData.table.title
-        table(border="1" align="center" cellpadding="6" cellspacing="0")
-          tr
-            each header in pageData.table.headers
-              th= header
-          each row in pageData.table.rows
-            tr
-              each cell in row
-                td= cell
-      
-      //- Content (for opencv page)
-      if pageData.content
-        hr(width="500" align="center")
-        p!= pageData.content.text
-      
-      //- Gallery (for photography page)
-      if pageData.gallery
-        each row in pageData.gallery
-          p(align="center")
-            each img in row
-              img(src=img.src alt=img.alt width=img.width)
-      
-      //- Footer
-      if pageData.footer
-        p(align="right")= pageData.footer
--- a/src/index.js
+++ b/src/index.js
@@ -1 +0,0 @@
-import './styles/main.styl'
--- a/src/pages/index.pug
+++ b/src/pages/index.pug
@@ -1,51 +0,0 @@
-include ../components/mixins.pug
-
-
-    const infoBlockA = {
-        header: "Embedded Systems",
-        text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32 asdadas",
-        description: "I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on any other hardware and can work autunomously",
-        img: require('../images/AQ_monitor.png'),
-        imgAlt: "ESP32"
-    }
-    const infoBlockB = {
-        header: "Embedded Systems",
-        text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32",
-        description: "I love embeded development device because of autonomity of produced devices, the devices are not dependant on any other hardware and can work autunomously or off the grid",
-        img: require('../images/remote.jpeg'),
-        imgAlt: "ESP32"
-    }
-
-html(lang="en")
-    head
-        meta(charset="UTF-8")
-        title Portfolio
-        
-    body
-        +navbarMixin("Home")
-
-        .gallery
-            +galleryMixin()
-         
-        .main-container
-            .main-container__content
-                article.info-block
-                    h2.info-block__header #{infoBlockA.header}
-                    .info-block__container.info-block__container_layout-a
-                        p.info-block__text #{infoBlockA.text}
-                        .info-block__details
-                            p.info-block__description #{infoBlockA.description}
-                            a.info-block__link(href="#") More info
-                        img.info-block__image(src=infoBlockA.img alt=infoBlockA.imgAlt)
-
-                article.info-block
-                    h2.info-block__header #{infoBlockB.header}
-                    .info-block__container.info-block__container_layout-b
-                        p.info-block__text #{infoBlockB.text}
-                        img.info-block__image(src=infoBlockB.img alt=infoBlockB.imgAlt)
-                        .info-block__details
-                            p.info-block__description #{infoBlockB.description}
-                            a.info-block__link(href="#") More info
-
-            .sidebar
-                +infoCardsMinxin()
--- a/src/styles/index.styl
+++ b/src/styles/index.styl
@@ -1,166 +0,0 @@
-// Миксины для переиспользования
-double-border()
-    border-top double thick silver
-    border-bottom double thick silver
-
-flex-center()
-    display flex
-    align-items center
-    justify-content center
-
-text-center-bold()
-    text-align center
-    font-weight bold
-    display block
-
-grid-responsive(columns)
-    display grid
-    grid-template-columns columns
-    grid-template-rows 1fr
-
-// Основные стили
-.navbar
-    double-border()
-    font-size 0
-    grid-responsive(repeat(7, min-content))
-    justify-items start
-    
-    &__link__wrapper
-        color black
-        text-decoration none
-        
-    &__item
-        display inline-block
-        width max-content
-        height 3em
-        line-height 3em
-        text-align center
-        vertical-align middle
-        padding 0 10px
-        margin 0 10px
-        overflow hidden
-        text-overflow ellipsis
-        font-size medium
-        
-        &_selected
-            color green
-            font-weight bold
-            border-left double thin silver
-            border-right double thin silver
-
-.gallery
-    display flex
-    flex-direction row
-    width 90%
-    margin auto
-    
-    &__image
-        margin auto
-        width 100%
-        border thin solid black
-        
-        &:nth-child(2n+1)
-            margin-top 10px
-
-.main-container
-    grid-responsive(3fr 1fr)
-    
-
-.info-block
-    border solid thin black
-    padding 2vw
-    margin 1vw 0
-    
-    &__header
-        text-center-bold()
-        
-    &__container
-        &_layout-a
-            grid-responsive(3fr 3fr 2fr)
-            
-        &_layout-b
-            grid-responsive(4fr 7fr 4fr)
-            
-        & > *
-            margin 2vw
-            
-    &__text, &__description
-        text-align justify
-        
-    &__image
-        margin auto
-        width 100%
-        
-    &__link
-        color inherit
-        
-
-
-
-.sidebar
-    border-left thin solid black
-    margin 30px 0 0 50px
-
-.small-card
-    margin 20px 10px 0
-    grid-responsive(1fr 1fr)
-    
-    &__content
-        text-align justify
-        
-    &__header
-        text-center-bold()
-        text-align right
-        
-    &__link
-        display block
-        text-align right
-        color inherit
-        
-    &__image
-        & img
-            width 100%
-        margin-left:10px
-
-@media screen and (max-width: 1000px)
-    .small-card
-        display flex
-        flex-direction column
-    .sidebar
-        margin 0
-        width:100%
-
-
-@media screen and (max-width: 800px)
-    .navbar
-        grid-responsive(1fr 1fr)
-        grid-template-rows 1fr 1fr 1fr
-        justify-items center
-        
-        &__item
-            &_selected
-                border-bottom double thick silver
-                border-left none
-                border-right none
-    
-    .gallery
-        display inline-flex
-        flex-direction column
-        width 100%
-        
-        &__image
-            width 100%
-            height 100%
-            
-            &:nth-child(2n+1)
-                margin-top 0px
-    
-    .main-container
-        display flex
-        flex-direction column
-        
-    .info-block
-        &__container
-            &_layout-a, &_layout-b
-                display flex
-                flex-direction column
--- a/src/styles/main.styl
+++ b/src/styles/main.styl
@@ -1,2 +0,0 @@
-// Импорт стилей для главной страницы
-@import 'index.styl'
--- a/table.html
+++ b/table.html
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,69 +0,0 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const FileManagerPlugin = require("filemanager-webpack-plugin");
-const path = require("path");
-const fs = require("fs");
-
-const pagesDir = path.join(__dirname, "src", "pages");
-const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
-
-module.exports = {
-  output: {
-    path: path.join(__dirname, "dist"),
-    filename: "index.[contenthash].js",
-    assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
-  },
-  entry: path.join(__dirname, "src", "index.js"),
-  module: {
-    rules: [
-      {
-        test: /\.pug$/,
-        loader: "pug-loader",
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif)$/i,
-        type: "asset/resource",
-      },
-      {
-        test: /\.svg$/,
-        type: "asset/resource",
-        generator: {
-          filename: path.join("icons", "[name].[contenthash][ext]"),
-        },
-      },
-      {
-        test: /\.styl$/,
-        use: [
-          {
-            loader: "style-loader",
-          },
-          {
-            loader: "css-loader",
-          },
-          {
-            loader: "stylus-loader",
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    ...pages.map(
-      (page) =>
-        new HtmlWebpackPlugin({
-          template: path.join(pagesDir, page),
-          filename: page.replace(".pug", ".html"),
-        })
-    ),
-    new FileManagerPlugin({
-      events: {
-        onStart: {
-          delete: ["dist"],
-        },
-      },
-    }),
-  ],
-  devServer: {
-    watchFiles: path.join(__dirname, "src"),
-    port: 9000,
-  },
-};