Skip to content

Commit

Permalink
fix mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@PeterQuinn396
PeterQuinn396 committed Sep 3, 2023
1 parent f3fd9b0 commit 19b7a5e
Showing 1 changed file with 26 additions and 23 deletions.
49 changes: 26 additions & 23 deletions pages/projects/personal/led_dress/led_dress.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,18 +178,21 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
<p style="text-align:center">First time turning on the lights</p>

<div class="row" style="display: flex; justify-content: center; padding-bottom: 15px;">
<div style="width: 40%">
<div style="width: 40%; display: flex; justify-content: center;">
<img src="images/board1.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="width: 400px; height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style=" height: 100%; width: 90%; max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
</div>
<div style="width: 40%">
<div style="width: 40%; display: flex; justify-content: center;">
<img src="images/board2.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="width: 400px; height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style="height: 100%; width: 90%; max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
</div>
</div>
<p style="text-align:center">Fully soldered protoboard. The ESP32 board controls 6 H-bridges (red parts)
with PWM signals to drive current bi-directionally through
the LED strips either white or colored</p>
<div style="display: flex; justify-content: center;">
<p style="text-align:center; width: 75%;">Fully soldered protoboard. The ESP32 board controls 6
H-bridges (red parts) with PWM signals to drive current bi-directionally through
the LED strips either white or colored</p>
</div>


<div style="display: flex; justify-content: center; padding-bottom: 15px;">
<div class="embed-responsive embed-responsive-16by9" style="max-width: 800px;">
Expand All @@ -199,9 +202,11 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
<p style="text-align:center">Controlling 6 LED strips in a rotating wave pattern</p>


<div class="row">
<img src="images/enclosure.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:100%; width: 600px; padding-top: 25px; padding-bottom: 15px">
<div class="row" style="display: flex; justify-content: center">
<div style="width: 60%; display: flex; justify-content: center;">
<img src="images/enclosure.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:100%; width: 100%; padding-top: 25px; padding-bottom: 15px">
</div>
</div>
<p style="text-align:center">Board placed into its 3D printed enclosure</p>

Expand All @@ -219,37 +224,37 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
</div>
</div>
<div style="display: flex; justify-content: center;">
<p style="text-align:center; width: 60%;">3D Models of top and bottom pieces of enclosure. The top
<p style="text-align:center; width: 75%;">3D Models of top and bottom pieces of enclosure. The top
slides
along built in rails on the bottom and friction fits snugly into place (like a TV remote battery
cover)
</p>
</div>

<div class="row" style="display: flex; justify-content: center; padding-bottom: 15px;">
<div style="width: 30%;">
<div style="width: 30%; display: flex; justify-content: center;">
<img src="images/model.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:100%; width: 300px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style="max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: contain;">
</div>
<div style="width: 30%;">
<div style="width: 30%; display: flex; justify-content: center;">
<img src="images/dress1.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:100%; width: 300px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style="max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: contain;">
</div>
<div style="width: 30%;">
<div style="width: 30%; display: flex; justify-content: center;">
<img src="images/dress2.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:100%; width: 300px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style="max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: contain;">
</div>
</div>
<p style="text-align:center">Figuring out how to fit 30m of LEDs in a skirt</p>

<div class="row" style="display: flex; justify-content: center; padding-bottom: 15px;">
<div style="width: 40%">
<div style="width: 40%; display: flex; justify-content: center;">
<img src="images/final_dress.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:600px; width: 400px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style="max-height:600px; height: 100%; width: 75%; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
</div>
<div style="width: 40%">
<div style="width: 40%; display: flex; justify-content: center;">
<img src="images/party_mode.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
style="height:600px; width: 400px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
style="max-height:600px; height: 100%; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
</div>
</div>
<p style="text-align:center">Final tests and big day</p>
Expand All @@ -260,8 +265,6 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
</div>
</div>



</div>
</div>

Expand Down

0 comments on commit 19b7a5e

Please sign in to comment.