hw3 done
This commit is contained in:
BIN
images/16x10/3d-printer.jpeg
Normal file
BIN
images/16x10/3d-printer.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
images/16x10/blheli-esc.jpeg
Normal file
BIN
images/16x10/blheli-esc.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
images/16x10/rpi-nano.jpeg
Normal file
BIN
images/16x10/rpi-nano.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
images/16x10/thermostat.jpeg
Normal file
BIN
images/16x10/thermostat.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
images/remote.jpeg
Normal file
BIN
images/remote.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
images/sqesp32.png
Normal file
BIN
images/sqesp32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
149
index.css
149
index.css
@@ -1,34 +1,26 @@
|
||||
/* menu part */
|
||||
.menu {
|
||||
border-top: double 4px silver;
|
||||
border-bottom: double 4px silver;
|
||||
border-top: double thick silver;
|
||||
border-bottom: double thick silver;
|
||||
font-size: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(7, min-content);
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.menu {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.menu .selected {
|
||||
border-bottom: double 4px silver;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
/* to align to center */
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin: 0 1%;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: medium;
|
||||
@@ -45,7 +37,6 @@
|
||||
.menu .menu-header {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
@@ -53,78 +44,154 @@
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.menu {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.menu .selected {
|
||||
border-bottom: double thick silver;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 images part */
|
||||
.images-container {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.images-container > img {
|
||||
.images-container>img {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 30vw;
|
||||
width:100%;
|
||||
border: thin solid black;
|
||||
}
|
||||
|
||||
.images-container>img:nth-child(2n+1) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.images-container {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.images-container>img {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
/* object-fit: fill; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.images-container>img:nth-child(2n+1) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* text block part */
|
||||
.info-block-header{
|
||||
.info-block-header {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.block-border{
|
||||
border: solid black 2px;
|
||||
padding:2vw;
|
||||
.block-border {
|
||||
border: solid thin black;
|
||||
padding: 2vw;
|
||||
margin: 1vw 0;
|
||||
}
|
||||
.block-a-container{
|
||||
|
||||
.block-a-container {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 3fr 2fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.block-a-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.block-a-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.block-b-container{
|
||||
.block-b-container {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 7fr 4fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.block-b-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.block-b-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.h-block *{
|
||||
.h-block>* {
|
||||
margin: 2vw;
|
||||
}
|
||||
.h-block >span{
|
||||
|
||||
.h-block>span,
|
||||
.h-block>div {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.h-block >img{
|
||||
.h-block>img {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
/* height: 30vw; */
|
||||
}
|
||||
/*small articles part*/
|
||||
.main-right{
|
||||
border-left: thin solid black;
|
||||
margin: 30px 0 0 50px;
|
||||
|
||||
}
|
||||
.small-info-block{
|
||||
margin: 20px 10px 0 ;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.small-info-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.small-info-block-header{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.small-info-block-image >img{
|
||||
width: 100%;
|
||||
}
|
||||
.small-info-block-text {
|
||||
text-align: justify;
|
||||
}
|
||||
.small-info-block-text >a{
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
/*main part*/
|
||||
.main{
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
218
index.html
218
index.html
@@ -11,7 +11,6 @@
|
||||
|
||||
<body>
|
||||
<div class="menu">
|
||||
<div class="menu-item menu-header">Portfolio Site </div>
|
||||
<a href="./index.html">
|
||||
<div class="menu-item selected">Home</div>
|
||||
</a>
|
||||
@@ -34,150 +33,115 @@
|
||||
|
||||
|
||||
<div class="images-container">
|
||||
<img src="./images/arduino.png" alt="Arduino">
|
||||
<img src="./images/esp32.png" alt="ESP32">
|
||||
<img src="./images/institute.png" alt="Institute">
|
||||
<img src="./images/sqarucos.png" alt="Arduino">
|
||||
<img src="./images/sqstm32.png" alt="Institute">
|
||||
<img src="./images/sqesp32.png" alt="ESP32">
|
||||
</div>
|
||||
|
||||
<div class="block-border">
|
||||
<span class="info-block-header">Embedded Systems</span>
|
||||
<div class="block-a-container h-block">
|
||||
<span>Had a serval projects with different MCUs and wrote firmware for them.
|
||||
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
|
||||
</span>
|
||||
<span>I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on
|
||||
any other hardware and can work autunomously
|
||||
</span>
|
||||
<img src="./images/AQ_monitor.png" alt="ESP32">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-border">
|
||||
<span class="info-block-header">Embedded Systems</span>
|
||||
<div class="block-b-container h-block">
|
||||
<span>Had a serval projects with different MCUs and wrote firmware for them.
|
||||
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
|
||||
</span>
|
||||
<img src="./images/AQ_monitor.png" alt="ESP32">
|
||||
<span>I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on
|
||||
any other hardware and can work autunomously
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-block">
|
||||
<div class="main-column">
|
||||
<div class="info-block rounded bg-aqua">
|
||||
|
||||
<span class="info-block-text">THad a serval projects with different MCUs and wrote firmware for them.
|
||||
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
|
||||
</span>
|
||||
<div class="info-block-image rounded">
|
||||
</div>
|
||||
<button type="button" class="info-block-button">More info»</button>
|
||||
</div>
|
||||
|
||||
<div class="info-block rounded bg-grey pad-down">
|
||||
<span class="info-block-header">OpenCV</span>
|
||||
<span class="info-block-text">I love when programs are able to see things or recognise them
|
||||
so i had serval projects involding image processing
|
||||
Sadly i'm used to opencv binding in python and not C++ , but that is solvable)
|
||||
</span>
|
||||
<div class="info-block-image rounded">
|
||||
<img src="./images/16x9/opencv.png" alt="ESP32">
|
||||
</div>
|
||||
<button type="button" class="info-block-button">More info»</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="main-center">
|
||||
<div class="center-upper">
|
||||
<div class="info-block-image-small">
|
||||
<img src="./images/sqstm32.png" alt="stm32">
|
||||
</div>
|
||||
<div class="inline info-block-wide-text-container">
|
||||
<span class="info-block-header align-left">STM 32</span>
|
||||
<span class="info-block-text ">Chinese STM32 microcontrollers are affordable and compatible with
|
||||
STM32 tools but may face flashing issues due to bootloader differences. Proper connections and
|
||||
reliable tools can help resolve these.</span>
|
||||
<div class="block-border">
|
||||
<span class="info-block-header">Embedded Systems</span>
|
||||
<div class="block-a-container h-block">
|
||||
<span>Had a serval projects with different MCUs and wrote firmware for them.
|
||||
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
|
||||
</span>
|
||||
<a class="link align-left" href="./index.html">More info»</a>
|
||||
<div>
|
||||
<div>I love embeded development beceuse of autonomity of produced devices, the redices are not
|
||||
dependant on
|
||||
any other hardware and can work autunomously
|
||||
</div>
|
||||
<a href="#"> More info</a>
|
||||
</div>
|
||||
<img src="./images/AQ_monitor.png" alt="ESP32">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-center">
|
||||
<span class="info-block-header">Stephen King's books</span>
|
||||
<span class="info-block-text inline small-w">Stephen King's books are a fascinating blend of horror,
|
||||
suspense, and deep
|
||||
character development. His storytelling captivates readers and keeps them on the edge of their
|
||||
seats.</span>
|
||||
|
||||
<div class="info-block-image-center">
|
||||
<img src="./images/institute.png" alt="ESP32">
|
||||
</div>
|
||||
|
||||
<span class="info-block-text inline small-w">
|
||||
Especially I love the institute, its architecture, and the vibrant community it fosters. The
|
||||
institute has been a source of inspiration and growth for me, providing countless opportunities to
|
||||
learn and collaborate.
|
||||
<a class="link small-w" href="./index.html">More info»</a>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="center-lower">
|
||||
|
||||
<div class="inline info-block-wide-text-container">
|
||||
<span class="info-block-header align-right">Arucos</span>
|
||||
<span class="info-block-text ">ArUco markers are widely used in computer vision for camera
|
||||
calibration, pose estimation, and augmented reality applications. They are square fiducial
|
||||
markers with a unique binary pattern that can be easily detected and identified in
|
||||
images.</span>
|
||||
<div class="block-border">
|
||||
<span class="info-block-header">Embedded Systems</span>
|
||||
<div class="block-b-container h-block">
|
||||
<span>Had a serval projects with different MCUs and wrote firmware for them.
|
||||
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
|
||||
</span>
|
||||
<a class="link align-right" href="./index.html">More info»</a>
|
||||
</div>
|
||||
<div class="info-block-image-small">
|
||||
<img src="./images/sqarucos.png" alt="ESP32">
|
||||
<img src="./images/remote.jpeg" alt="ESP32">
|
||||
<div>
|
||||
<div>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</div>
|
||||
<a href="#"> More info</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="main-right">
|
||||
<div class="small-info-block">
|
||||
<div class="small-info-block-text">
|
||||
<div class="small-info-block-header">Заголовок</div>
|
||||
<span>
|
||||
3D printers are versatile tools
|
||||
used for creating prototypes,
|
||||
custom parts, and artistic designs.
|
||||
They work by layering materials.
|
||||
</span>
|
||||
<a href="#">Подробнее»</a>
|
||||
|
||||
|
||||
<div class="main-column">
|
||||
<div class="info-block rounded bg-blue">
|
||||
<div class="info-block-image rounded">
|
||||
<img src="./images/16x9/image0.png" alt="Photography">
|
||||
</div>
|
||||
<span class="info-block-header">Photography</span>
|
||||
<span class="info-block-text">Capturing moments through the lens is a passion of mine. I enjoy exploring
|
||||
different perspectives and techniques to create different visuals.</span>
|
||||
|
||||
<button type="button" class="info-block-button button-left">More info»</button>
|
||||
<div class="small-info-block-image">
|
||||
<img src="images/16x10/3d-printer.jpeg" alt="3D Printer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-block rounded bg-yellow pad-down">
|
||||
|
||||
<div class="info-block-image rounded">
|
||||
<img src="./images/16x9/AQ_monitor.png" alt="Air Quality Monitor">
|
||||
<div class="small-info-block">
|
||||
<div class="small-info-block-text">
|
||||
<div class="small-info-block-header">BLHeli ESCs</div>
|
||||
<span>
|
||||
BLHeli ESCs are electronic
|
||||
speed controllers designed
|
||||
for drones, offering smooth
|
||||
and precise motor control.
|
||||
</span>
|
||||
<a href="#">Подробнее»</a>
|
||||
</div>
|
||||
<div class="small-info-block-image">
|
||||
<img src="images/16x10/blheli-esc.jpeg" alt="BLHeli ESC">
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-info-block">
|
||||
<div class="small-info-block-text">
|
||||
<div class="small-info-block-header">Raspberry Pi Nano</div>
|
||||
<span>
|
||||
Raspberry Pi Nano is a compact
|
||||
computer ideal for learning,
|
||||
prototyping, and IoT projects.
|
||||
It is highly energy-efficient.
|
||||
</span>
|
||||
<a href="#">Подробнее»</a>
|
||||
</div>
|
||||
<div class="small-info-block-image">
|
||||
<img src="images/16x10/rpi-nano.jpeg" alt="Raspberry Pi Nano">
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-info-block">
|
||||
<div class="small-info-block-text">
|
||||
<div class="small-info-block-header">Smart Thermostats</div>
|
||||
<span>
|
||||
Smart thermostats help regulate
|
||||
home temperatures efficiently,
|
||||
saving energy and enhancing
|
||||
comfort with automation.
|
||||
</span>
|
||||
<a href="#">Подробнее»</a>
|
||||
</div>
|
||||
<div class="small-info-block-image">
|
||||
<img src="images/16x10/thermostat.jpeg" alt="Smart Thermostat">
|
||||
</div>
|
||||
<span class="info-block-header">IoT and Air Quality Monitoring</span>
|
||||
<span class="info-block-text">The Internet of Things (IoT) enables devices to communicate and share data
|
||||
seamlessly. One of the applications is air quality monitoring, where sensors collect data on
|
||||
pollutants and environmental conditions, providing real-time insights to improve health and
|
||||
safety.</span>
|
||||
|
||||
<button type="button" class="info-block-button button-left">More info»</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p>Author: Kulesh <br>
|
||||
Group: Б9123-09.03.04</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user