From 3982a97dceb24b45f6495caeb5130cd9687d892e Mon Sep 17 00:00:00 2001 From: OkunElya Date: Fri, 28 Nov 2025 10:15:15 +1000 Subject: [PATCH] updating styles --- src/pages/index.pug | 140 +++++++++++++++++++++++ src/styles/index.styl | 259 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 399 insertions(+) create mode 100644 src/pages/index.pug create mode 100644 src/styles/index.styl diff --git a/src/pages/index.pug b/src/pages/index.pug new file mode 100644 index 0000000..eae73c2 --- /dev/null +++ b/src/pages/index.pug @@ -0,0 +1,140 @@ +- + 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 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' + } + ]; + +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 diff --git a/src/styles/index.styl b/src/styles/index.styl new file mode 100644 index 0000000..1a7767a --- /dev/null +++ b/src/styles/index.styl @@ -0,0 +1,259 @@ +// 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 + 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 + +// 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 + 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 + +// 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 + + @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