Skip to content

Commit

Permalink
Added menu nav buttons for easier navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lim-Jiaxian
Lim-Jiaxian committed Jan 10, 2024
1 parent 181bcf6 commit f1ec612
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 12 deletions.
69 changes: 57 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,24 @@ <h1>
- Jia Xian's PFD Blog -
</h1>
<p class="inset"></p>
<br>
<br>
<div class="blog-post" style="background-color:lightblue;">
<br><br>
<br><br>
<div id="Top_Nav" style="text-align: center;">
<a class="button-nav" href="#week_1">Week 1</a>
<a class="button-nav" href="#week_2">Week 2</a>
<a class="button-nav" href="#week_3">Week 3</a>
<a class="button-nav" href="#week_4">Week 4</a>
<a class="button-nav" href="#week_5">Week 5</a>
<a class="button-nav" href="#break_week">Break Week</a>
<a class="button-nav" href="#week_12">Week 12</a>
<a class="button-nav" href="#week_13">Week 13</a>
<a class="button-nav" href="#week_14">Week 14</a>
<a class="button-nav" href="#week_15">Week 15</a>
<a class="button-nav" href="#week_16">Week 16</a>
</div>
<br><br><br>
<br><br><br>
<div class="blog-post" id="week_1" style="background-color:lightblue;">
<h2>- Week 1 -</h2>
<p>
The first week of PFD lesson involves the objectives of undertaking real-life IT projects by making use of
Expand All @@ -29,13 +44,16 @@ <h2>- Week 1 -</h2>
SGTRACETOGETHER. As a
result, my team is looking forward to discuss with our lecturer to refine and solidify it.
</p>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightcoral;">
<div class="blog-post" id="week_2" style="background-color:lightcoral;">
<h2>- Week 2 -</h2>
<p>
After meeting with our lecturer, our team decided to discard our prior concept because it did not
Expand Down Expand Up @@ -112,13 +130,16 @@ <h2>- Week 2 -</h2>
</ul>
<br>
<img src="./img/IBM-EDT2.png" class="center"><br><br>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightgoldenrodyellow;">
<div class="blog-post" id="week_3" style="background-color:lightgoldenrodyellow;">
<h2>- Week 3 -</h2>
<img src="./img/Materials.jpg" class="center"><br>
<p>
Expand Down Expand Up @@ -152,13 +173,16 @@ <h2>- Week 3 -</h2>

<br><br><img src="./img/ESP32_Testing.gif" class="center"><br>
</p>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightgray;">
<div class="blog-post" id="week_4" style="background-color:lightgray;">
<h2>- Week 4 -</h2>
<p>
Moving onto week 4, although we were unable to obtain a GPS tracker, my team and I continued to work on
Expand Down Expand Up @@ -196,13 +220,16 @@ <h2>- Week 4 -</h2>
</p><br>
<p style="text-align: center;">- Map output from python script - </p>
<br><img src="./img/GPS_Map.png" class="center"><br><br>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightgreen;">
<div class="blog-post" id="week_5" style="background-color:lightgreen;">
<h2>- Week 5 (Hackathon) -</h2><br>
<!--<img src="" height="250" width="600" class="center">
<img src="" class="center">-->
Expand Down Expand Up @@ -264,13 +291,16 @@ <h2>- Week 5 (Hackathon) -</h2><br>
Firstly, the ESP32 NodeMCU with its built-in WiFi capabilities can effectively communicate with web servers and send data. In this scenario, the ESP32 will be used to collect the GPS coordinates, which will then be transmitted to a MySQL database via an HTTP POST request to the PHP Webpage. PHP, a scripting language, will handle the server-side processing of receiving the data from the ESP32, and storing it in the MySQL database. Next, a python script with multiple libraries such as matplotlib and cartopy will be used to plot out the entire route and pathway of the security guard to visualise for areas of improvements.
</p>
<br><br><br>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightpink;">
<div class="blog-post" id="break_week" style="background-color:lightpink;">
<h2>- Break weeks -</h2>
<p>
After the valuable experience and knowledge learnt about requiring the Raspberry Pi to provide date and time for the Neo M6 GPS Hat. I decided to try and fix the problems that was unresolved back in the hackathon week. <br><br>
Expand All @@ -286,13 +316,16 @@ <h2>- Break weeks -</h2>
<p>
Considering the potential inaccuracy of altitude readings, I intend to enhance the precision by incorporating a barometric pressure sensor for indoor altitude measurements.
</p>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightsalmon;">
<div class="blog-post" id="week_12" style="background-color:lightsalmon;">
<h2>- Week 12 -</h2>
<!--<img src="" height="250" width="600" class="center">
<img src="" class="center">-->
Expand Down Expand Up @@ -328,45 +361,57 @@ <h2>- Week 12 -</h2>
<p style="text-align: center;">- phpMyAdmin Mysql Database records - </p>
<br><img src="./img/PHP_MysqlDB.png" class="center">
<br><br>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightseagreen;">
<div class="blog-post" id="week_13" style="background-color:lightseagreen;">
<h2>- Week 13 -</h2>
<!--<img src="" height="250" width="600" class="center">
<img src="" class="center">-->
<p>
...
</p>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:lightskyblue;">
<div class="blog-post" id="week_14" style="background-color:lightskyblue;">
<h2>- Week 14 -</h2>
<!--<img src="" height="250" width="600" class="center">
<img src="" class="center">-->
<p>
...
</p>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>

<br>
<br>
<br>

<div class="blog-post" style="background-color:aquamarine;">
<div class="blog-post" id="week_15" style="background-color:aquamarine;">
<h2>- Week 15 -</h2>
<!--<img src="" height="250" width="600" class="center">
<img src="" class="center">-->
<p>
...
</p>
<br>
<a class="button-nav-back" href="#Top_Nav">Back to top</a>
<br><br>
</div>


Expand Down
94 changes: 94 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,100 @@ h2{
img{
border-radius: 5px;
}
.Top_Nav{
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10%;
height: 80px;
box-sizing: border-box;
position: sticky;
top: 0;
z-index: 1;
}
.button-nav {
align-items: center;
appearance: none;
background-color:white;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: black;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}
.button-nav:focus {
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
.button-nav:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
.button-nav:active {
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
.button-nav-back {
align-items: center;
appearance: none;
background-color:black;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color:white;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}
.button-nav-back:focus {
box-shadow: white 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
.button-nav-back:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
.button-nav-back:active {
box-shadow: white 0 3px 7px inset;
transform: translateY(2px);
}
@media only screen and (max-width: 900px) {
.blog-post{
width: 80%;
Expand Down

0 comments on commit f1ec612

Please sign in to comment.