main page working

src/components/data.pug

@@ -1,4 +1,47 @@
 -
+  
+  // Данные для меню навигации
+  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',

src/components/mixins.pug

@@ -0,0 +1,72 @@
+include data.pug
+-
+  // Данные для меню навигации
+  const menuItems = {
+    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 menuItem(selectedItem)
+    nav.menu
+        each menuUrl,menuName in menuItems
+            if menuName == selectedItem
+                a.menu__link(href=menuUrl)
+                    .menu__item.menu__item_selected #{menuName}
+            else
+                a.menu__link(href=menuUrl)
+                    .menu__item #{menuName}
+
+mixin cards()
+  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 gallery()
+  each img in galleryImages
+     img.hero-images__item(src=img.src alt=img.alt)

src/pages/index.pug

@@ -1,140 +1,54 @@
+include ../components/mixins.pug
+
 -
-  const menuItems = [
+    const infoBlockA = {
-    { href: './index.html', title: 'Home', isActive: true },
+        header: "Embedded Systems",
-    { href: './embeded_details.html', title: 'Embedded' },
+        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",
-    { href: './opencv_details.html', title: 'OpenCV' },
+        description: "I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on any other hardware and can work autunomously",
-    { href: './photography_details.html', title: 'Photography' },
+        img: require('../images/AQ_monitor.png'),
-    { href: './table.html', title: 'Table' },
+        imgAlt: "ESP32"
-    { href: './images/institute.png', title: 'Institute' }
-  ];
-  
-  const galleryImages = [
-    { src: './images/sqarucos.png', alt: 'Arduino' },
-    { src: './images/sqstm32.png', alt: 'STM32' },
-    { src: './images/sqesp32.png', alt: 'ESP32' }
-  ];
-  
-  const contentBlocks = [
-    {
-      title: 'Embedded Systems',
-      image: './images/AQ_monitor.png',
-      imageAlt: 'ESP32',
-      columns: [
-        { text: 'Had several projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32' },
-        { text: 'I love embedded development because of autonomy of produced devices, the devices are not dependent on any other hardware and can work autonomously', hasLink: true }
-      ]
-    },
-    {
-      title: 'Embedded Systems',
-      image: './images/remote.jpeg',
-      imageAlt: 'Remote',
-      imageCenter: true,
-      columns: [
-        { text: 'Had several projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32' },
-        { text: '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', hasLink: true }
-      ]
     }
-  ];
+    const infoBlockB = {
-  
+        header: "Embedded Systems",
-  const sidebarBlocks = [
+        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",
-      title: '3D Printer',
+        img: require('../images/remote.jpeg'),
-      text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.',
+        imgAlt: "ESP32"
-      image: 'images/16x10/3d-printer.jpeg',
-      alt: '3D Printer'
-    },
-    {
-      title: 'BLHeli ESCs',
-      text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.',
-      image: 'images/16x10/blheli-esc.jpeg',
-      alt: 'BLHeli ESC'
-    },
-    {
-      title: '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',
-      alt: 'Raspberry Pi Nano'
-    },
-    {
-      title: 'Smart Thermostats',
-      text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.',
-      image: 'images/16x10/thermostat.jpeg',
-      alt: 'Smart Thermostat'
     }
-  ];
 
-mixin nav-menu(items)
-  nav.nav
-    ul.nav__list
-      each item in items
-        li.nav__item
-          a.nav__link(href=item.href class=item.isActive ? 'nav__link--active' : '')= item.title
-
-mixin gallery(images)
-  .gallery
-    each img in images
-      .gallery__item
-        img.gallery__image(src=img.src alt=img.alt)
-
-mixin content-block(block, index)
-  .content-block
-    .content-block__header
-      h5.content-block__title= block.title
-    .content-block__body(class=`content-block__body--layout-${index % 2 === 0 ? 'a' : 'b'}`)
-      if index % 2 === 0
-        each col in block.columns
-          .content-block__column
-            p.content-block__text= col.text
-            if col.hasLink
-              a.content-block__link(href="#") More info»
-        .content-block__column.content-block__column--image
-          img.content-block__image(src=block.image alt=block.imageAlt)
-      else
-        .content-block__column
-          p.content-block__text= block.columns[0].text
-        .content-block__column.content-block__column--image-center
-          img.content-block__image(src=block.image alt=block.imageAlt)
-        .content-block__column
-          p.content-block__text= block.columns[1].text
-          if block.columns[1].hasLink
-            a.content-block__link(href="#") More info»
-
-mixin sidebar-card(card)
-  .sidebar-card
-    .sidebar-card__content
-      h6.sidebar-card__title= card.title
-      p.sidebar-card__text= card.text
-      a.sidebar-card__link(href="#") More Info»
-    .sidebar-card__image-wrapper
-      img.sidebar-card__image(src=card.image alt=card.alt)
-
-doctype html
 html(lang="en")
     head
         meta(charset="UTF-8")
-    meta(name="viewport" content="width=device-width, initial-scale=1")
-    link(rel="stylesheet" href="styles/index.css")
         title Portfolio
         
-  body.page
+    body
-    //- Navigation
+        +menuItem("Home")
-    +nav-menu(menuItems)
 
-    //- Image Gallery
+        .hero-images
-    +gallery(galleryImages)
+            +gallery()
          
-    //- Main Content
+        main.main
-    .main
             .main__content
-        each block, index in contentBlocks
+                // Информационный блок A
-          +content-block(block, index)
+                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)
 
-      //- Sidebar
+                // Информационный блок B
-      .main__sidebar
+                article.info-block
-        each card in sidebarBlocks
+                    h2.info-block__header #{infoBlockB.header}
-          +sidebar-card(card)
+                    .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
 
-    //- Footer
+            // Боковая панель
-    footer.footer
+            aside.sidebar
-      span.footer__text Kulesh A.
+                +cards()
-      span.footer__text Б9123-09.03.04

src/styles/index.styl

@@ -1,259 +1,168 @@
-// Variables
+// БЭМ блок: Меню навигации
-$color-bg = #F0F8FF
+.menu
-$color-text = black
+    border-top double thick silver
-$color-primary = green
+    border-bottom double thick silver
-$color-border = silver
+    font-size 0
-$color-footer-bg = #f8f9fa
-
-$border-thin = 1px solid black
-$border-double = double 4px silver
-$border-double-thick = double thick silver
-
-$spacing-sm = 10px
-$spacing-md = 20px
-$spacing-lg = 30px
-$spacing-xl = 50px
-
-$breakpoint-mobile = 800px
-$breakpoint-tablet = 1000px
-
-// Mixins
-flex-center()
-  display flex
-  align-items center
-  justify-content center
-
-text-justify()
-  text-align justify
-
-border-block()
-  border $border-thin
-  padding 2vw
-  margin 1vw 0
-
-// Base
-*
-  box-sizing border-box
-  margin 0
-  padding 0
-
-.page
-  font-family Arial, sans-serif
-  background-color $color-bg
-  color $color-text
-
-// Navigation (БЭМ)
-.nav
-  border-top $border-double-thick
-  border-bottom $border-double-thick
-  
-  &__list
     display grid
     grid-template-columns repeat(7, min-content)
     grid-template-rows 1fr
     justify-items start
-    list-style none
-    font-size 0
     
-    @media screen and (max-width: $breakpoint-mobile)
+    &__link
+        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
+
+// БЭМ блок: Hero изображения
+.hero-images
+    display flex
+    flex-direction row
+    width 90%
+    margin auto
+    
+    &__item
+        margin auto
+        width 100%
+        border thin solid black
+        
+        &:nth-child(2n+1)
+            margin-top 10px
+
+// БЭМ блок: Основной контейнер
+.main
+    display grid
+    grid-template-columns 3fr 1fr
+    grid-template-rows 1fr
+    
+    &__content
+        // Стили для основного контента
+
+// БЭМ блок: Информационный блок
+.info-block
+    border solid thin black
+    padding 2vw
+    margin 1vw 0
+    
+    &__header
+        display block
+        font-weight bold
+        text-align center
+        
+    &__container
+        &_layout_a
+            display grid
+            grid-template-columns 3fr 3fr 2fr
+            grid-template-rows 1fr
+            
+        &_layout_b
+            display grid
+            grid-template-columns 4fr 7fr 4fr
+            grid-template-rows 1fr
+            
+        & > *
+            margin 2vw
+            
+    &__text, &__description
+        text-align justify
+        
+    &__image
+        margin auto
+        width 100%
+        
+    &__link
+        // Стили для ссылок
+        color inherit
+        
+    &__details
+        // Стили для деталей
+
+// БЭМ блок: Боковая панель
+.sidebar
+    border-left thin solid black
+    margin 30px 0 0 50px
+
+// БЭМ блок: Маленькая карточка
+.small-card
+    margin 20px 10px 0
+    display grid
+    grid-template-columns 1fr 1fr
+    grid-template-rows auto
+    
+    &__content
+        text-align justify
+        
+    &__header
+        display block
+        font-weight bold
+        text-align right
+        
+    &__text
+        // Базовые стили для текста
+        
+    &__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
+
+@media screen and (max-width: 800px)
+    .menu
         grid-template-columns 1fr 1fr
         grid-template-rows 1fr 1fr 1fr
         justify-items center
         
         &__item
-    display inline-block
+            &_selected
-  
+                border-bottom double thick silver
-  &__link
-    display block
-    width max-content
-    height 3em
-    line-height 3em
-    text-align center
-    padding 0 $spacing-sm
-    margin 0 $spacing-sm
-    color $color-text
-    text-decoration none
-    font-size medium
-    overflow hidden
-    text-overflow ellipsis
-    
-    &--active
-      color $color-primary
-      font-weight bold
-      border-left $border-double
-      border-right $border-double
-      
-      @media screen and (max-width: $breakpoint-mobile)
                 border-left none
                 border-right none
-        border-bottom $border-double-thick
     
-// Gallery (БЭМ)
+    .hero-images
-.gallery
+        display inline-flex
-  display flex
-  flex-direction row
-  width 90%
-  margin auto
-  gap 0
-  
-  @media screen and (max-width: $breakpoint-mobile)
         flex-direction column
         width 100%
         
         &__item
-    flex 1
-    margin auto
-    
-  &__image
             width 100%
-    height auto
+            height 100%
-    border $border-thin
             
-    &:nth-child(odd)
+            &:nth-child(2n+1)
-      margin-top $spacing-sm
+                margin-top 0px
     
-      @media screen and (max-width: $breakpoint-mobile)
+    .main
-        margin-top 0
-
-// Main Layout (БЭМ)
-.main
-  display grid
-  grid-template-columns 3fr 1fr
-  grid-template-rows 1fr
-  gap 0
-  
-  @media screen and (max-width: $breakpoint-mobile)
         display flex
         flex-direction column
         
-  &__content
+    .info-block
-    padding-right 0
+        &__container
-  
+            &_layout_a, &_layout_b
-  &__sidebar
-    border-left $border-thin
-    margin $spacing-lg 0 0 $spacing-xl
-    padding-left $spacing-md
-    
-    @media screen and (max-width: $breakpoint-mobile)
-      border-left none
-      margin $spacing-lg 0 0 0
-      padding-left 0
-
-// Content Block (БЭМ)
-.content-block
-  border-block()
-  
-  &__header
-    text-align center
-    margin-bottom 1vw
-  
-  &__title
-    font-weight bold
-    font-size 1.2em
-  
-  &__body
-    &--layout-a
-      display grid
-      grid-template-columns 3fr 3fr 2fr
-      grid-template-rows 1fr
-      
-      @media screen and (max-width: $breakpoint-mobile)
                 display flex
                 flex-direction column
-    
-    &--layout-b
-      display grid
-      grid-template-columns 4fr 7fr 4fr
-      grid-template-rows 1fr
-      
-      @media screen and (max-width: $breakpoint-mobile)
-        display flex
-        flex-direction column
-  
-  &__column
-    margin 2vw
-    
-    &--image
-      flex-center()
-    
-    &--image-center
-      flex-center()
-      grid-column 2
-  
-  &__text
-    text-justify()
-  
-  &__image
-    width 100%
-    height auto
-  
-  &__link
-    display block
-    text-align right
-    margin-top $spacing-sm
-    color $color-text
-    text-decoration none
-    font-size 0.9em
-    
-    &:hover
-      text-decoration underline
-
-// Sidebar Card (БЭМ)
-.sidebar-card
-  display grid
-  grid-template-columns 1fr 1fr
-  grid-template-rows auto
-  margin $spacing-md $spacing-sm 0
-  gap $spacing-sm
-  
-  @media screen and (max-width: $breakpoint-tablet)
-    display flex
-    flex-direction column
-  
-  &__content
-    display flex
-    flex-direction column
-    justify-content space-between
-  
-  &__title
-    font-weight bold
-    text-align right
-    margin-bottom $spacing-sm
-  
-  &__text
-    text-justify()
-    font-size 0.9em
-    margin-bottom $spacing-sm
-  
-  &__link
-    display block
-    text-align right
-    color $color-text
-    text-decoration none
-    font-size 0.85em
-    
-    &:hover
-      text-decoration underline
-  
-  &__image-wrapper
-    overflow hidden
-  
-  &__image
-    width 100%
-    height auto
-    display block
-    transition transform 0.3s ease
-    
-    &:hover
-      transform scale(1.05)
-
-// Footer (БЭМ)
-.footer
-  background-color $color-footer-bg
-  padding 1em 2em
-  margin-top $spacing-lg
-  display flex
-  gap 2em
-  
-  &__text
-    font-size 1.1em

src/styles/main.styl

@@ -0,0 +1,2 @@
+// Импорт стилей для главной страницы
+@import 'index.styl'