From 01dfe8011ddf30dd37a27e60e01f37eb20091ebb Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 11 Dec 2025 19:59:17 +1000 Subject: [PATCH] main page working --- src/components/data.pug | 43 +++++ src/components/mixins.pug | 72 +++++++ src/pages/index.pug | 184 +++++------------- src/pages/index.styl | 0 src/styles/index.styl | 393 +++++++++++++++----------------------- src/styles/main.styl | 2 + 6 files changed, 317 insertions(+), 377 deletions(-) create mode 100644 src/components/mixins.pug delete mode 100644 src/pages/index.styl diff --git a/src/components/data.pug b/src/components/data.pug index 0d53338..c6d874d 100644 --- a/src/components/data.pug +++ b/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', diff --git a/src/components/mixins.pug b/src/components/mixins.pug new file mode 100644 index 0000000..0cf3622 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/src/pages/index.pug b/src/pages/index.pug index eae73c2..3d80280 100644 --- a/src/pages/index.pug +++ b/src/pages/index.pug @@ -1,140 +1,54 @@ +include ../components/mixins.pug + - - const menuItems = [ - { href: './index.html', title: 'Home', isActive: true }, - { href: './embeded_details.html', title: 'Embedded' }, - { href: './opencv_details.html', title: 'OpenCV' }, - { href: './photography_details.html', title: 'Photography' }, - { href: './table.html', title: 'Table' }, - { 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 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 sidebarBlocks = [ - { - title: '3D Printer', - 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', - 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' + 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" } - ]; -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 - //- Navigation - +nav-menu(menuItems) - - //- Image Gallery - +gallery(galleryImages) - - //- Main Content - .main - .main__content - each block, index in contentBlocks - +content-block(block, index) - - //- Sidebar - .main__sidebar - each card in sidebarBlocks - +sidebar-card(card) - - //- Footer - footer.footer - span.footer__text Kulesh A. - span.footer__text Б9123-09.03.04 + head + meta(charset="UTF-8") + title Portfolio + + body + +menuItem("Home") + + .hero-images + +gallery() + + main.main + .main__content + // Информационный блок A + 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) + + // Информационный блок B + 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 + + // Боковая панель + aside.sidebar + +cards() diff --git a/src/pages/index.styl b/src/pages/index.styl deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/index.styl b/src/styles/index.styl index 1a7767a..ebf5eff 100644 --- a/src/styles/index.styl +++ b/src/styles/index.styl @@ -1,259 +1,168 @@ -// Variables -$color-bg = #F0F8FF -$color-text = black -$color-primary = green -$color-border = silver -$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 +// БЭМ блок: Меню навигации +.menu + border-top double thick silver + border-bottom double thick silver + font-size 0 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) - grid-template-columns 1fr 1fr - grid-template-rows 1fr 1fr 1fr - justify-items center - - &__item - display inline-block - - &__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 + &__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 -// Gallery (БЭМ) -.gallery - 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 +// БЭМ блок: Hero изображения +.hero-images + display flex + flex-direction row + width 90% margin auto - &__image - width 100% - height auto - border $border-thin - - &:nth-child(odd) - margin-top $spacing-sm - - @media screen and (max-width: $breakpoint-mobile) - margin-top 0 + &__item + margin auto + width 100% + border thin solid black + + &:nth-child(2n+1) + margin-top 10px -// 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 - padding-right 0 - - &__sidebar - border-left $border-thin - margin $spacing-lg 0 0 $spacing-xl - padding-left $spacing-md + display grid + grid-template-columns 3fr 1fr + grid-template-rows 1fr - @media screen and (max-width: $breakpoint-mobile) - border-left none - margin $spacing-lg 0 0 0 - padding-left 0 + &__content + // Стили для основного контента -// 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) +// БЭМ блок: Информационный блок +.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 + &_selected + border-bottom double thick silver + border-left none + border-right none - &--layout-b - display grid - grid-template-columns 4fr 7fr 4fr - grid-template-rows 1fr - - @media screen and (max-width: $breakpoint-mobile) + .hero-images + display inline-flex + flex-direction column + width 100% + + &__item + width 100% + height 100% + + &:nth-child(2n+1) + margin-top 0px + + .main 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 + + .info-block + &__container + &_layout_a, &_layout_b + display flex + flex-direction column \ No newline at end of file diff --git a/src/styles/main.styl b/src/styles/main.styl index e69de29..b171e46 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -0,0 +1,2 @@ +// Импорт стилей для главной страницы +@import 'index.styl' \ No newline at end of file