[ADD] orientation tracking project

docs/index.md

@@ -11,8 +11,8 @@ hide:
 # __About Me__ 😎
 !!! quote ""
  </br>
- __I am an Electrical Engineering student at the [University of California San Diego](https://ucsd.edu/) 🔱.__ 
- __My passion is the field of EECS, particularly the intersection of Machine Learning 🧠, Autonomous Vehicle 🚗, & Robotics 🤖.__ 
+ __I am an Electrical Engineering student at the [University of California San Diego](https://ucsd.edu/) 🔱.__
+ __My passion is the field of EECS, particularly the intersection of Machine Learning 🧠, Autonomous Vehicle 🚗, & Robotics 🤖.__
 
  [Linked:fontawesome-brands-linkedin:](https://www.linkedin.com/in/mfarsani/){ .md-button .md-button--primary } [GitHub :fontawesome-brands-github:](https://github.com/fadli0029){ .md-button .md-button--primary } [Resume](RESUME_V25.pdf){ .md-button .md-button--primary }
 </center>
@@ -87,11 +87,13 @@ hide:
  <td>
  <center>
  <h1>Robust Orientation Tracking for Panoramic Stitching: Projected Gradient Descent vs. Extended Kalman Filters</h1>
- <img src="images/pgd_dataset3.gif" width="300" height"100">
- <img src="images/ekf4_dataset3.gif" width="300" height"100">
- <img src="images/ekf7_dataset3.gif" width="300" height"100">
- <img src="images/vicon_dataset3.gif" width="300" height"100">
  </center>
+ <div class="image-row">
+  <img src="images/pgd_dataset3.gif" class="responsive-image">
+  <img src="images/ekf4_dataset3.gif" class="responsive-image">
+  <img src="images/ekf7_dataset3.gif" class="responsive-image">
+  <img src="images/vicon_dataset3.gif" class="responsive-image">
+ </div>
  <br/>
  <b>Abstract</b><br/>
  The quest for precise 3D orientation tracking of
@@ -128,29 +130,29 @@ to optimize PGD for real-time applications.
 </table>
 <table>
  <tr>
- <td> <img src="Projects/AutonomousRCCar/images/corneringros.gif" width="400" height"400"> 
- <b><center><a href="Projects/AutonomousRCCar/">SELF-DRIVING RC CAR 🚗</a></center></b> 
- <center>An RC Car, powered by Jetson Nano and a custom ROS package, capable of driving autnomously, keeping itself on track and change lanes when needed.</center> 
+ <td> <img src="Projects/AutonomousRCCar/images/corneringros.gif" width="400" height"400">
+ <b><center><a href="Projects/AutonomousRCCar/">SELF-DRIVING RC CAR 🚗</a></center></b>
+ <center>An RC Car, powered by Jetson Nano and a custom ROS package, capable of driving autnomously, keeping itself on track and change lanes when needed.</center>
  </br>
- <b><center><a href="Projects/AutonomousRCCar/">👉 Read More</a></center></b> 
+ <b><center><a href="Projects/AutonomousRCCar/">👉 Read More</a></center></b>
  </td>
- <td> <img src="Projects/GameController/images/spaceinvader.gif" width="400" height"400"> 
- <b><center><a href="Projects/GameController/">GAME CONTROLLER 🎮</a></center></b> 
+ <td> <img src="Projects/GameController/images/spaceinvader.gif" width="400" height"400">
+ <b><center><a href="Projects/GameController/">GAME CONTROLLER 🎮</a></center></b>
  <center>A game controller made with ESP32, accelerometer, OLED display, and more. It's capable of playing both Space Invader and Mine Sweeper game. </center>
  </br>
- <b><center><a href="Projects/GameController/">👉 Read More</a></center></b> 
+ <b><center><a href="Projects/GameController/">👉 Read More</a></center></b>
  </td>
- <td> <img src="Projects/SmartWearable/images/wearableNOML.gif" width="400" height"400"> 
- <b><center><a href="Projects/SmartWearable/">SMART WEARABLE ⌚</a></center></b> 
+ <td> <img src="Projects/SmartWearable/images/wearableNOML.gif" width="400" height"400">
+ <b><center><a href="Projects/SmartWearable/">SMART WEARABLE ⌚</a></center></b>
  <center>This wearable has multiple features, such as measuring heart rate and steps count, retrieving real-time weather forecast, and showing time & date. </center>
  </br>
- <b><center><a href="Projects/SmartWearable/">👉 Read More</a></center></b> 
+ <b><center><a href="Projects/SmartWearable/">👉 Read More</a></center></b>
  </td>
- </tr> 
+ </tr>
 </table>
 </center>
 
-</br> 
+</br>
 
 ---
 

docs/stylesheets/extra.css

@@ -4,4 +4,28 @@
  --md-primary-fg-color--dark: #FDA65D;
 }
 
+@media (max-width: 768px) {
+ .image-row {
+ flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
+ }
+ .responsive-image {
+ flex: 0 0 50%; /* Makes each image take up 50% of the container's width */
+ max-width: 50%; /* Ensures the image does not exceed 50% of the container's width */
+ }
+}
+
+.responsive-image {
+ flex: 1; /* Allows the image to grow and shrink as needed */
+ width: 0; /* Prevents overflow of the container */
+ height: auto; /* Maintains aspect ratio */
+ max-width: 100%; /* Ensures the image is not bigger than its natural size */
+ margin: 5px;
+}
+
+.image-row {
+ display: flex;
+ justify-content: center; /* Center the images horizontally */
+ align-items: center; /* Align the images vertically */
+ flex-wrap: nowrap; /* Prevents wrapping of items */
+}
 

mkdocs.yml

@@ -8,9 +8,9 @@ nav:
  - 'Game Controller 🎮': 'Projects/GameController/index.md'
  - 'Smart Wearable ⌚': 'Projects/SmartWearable/index.md'
  #- Miscellaneous: 'Miscellaneous/index.md'
- #- Notes: 
+ #- Notes:
  #- Home: 'Notes/index.md'
- #- 'CS70: Discrete Math & Probability Theory | UC Berkeley': 
+ #- 'CS70: Discrete Math & Probability Theory | UC Berkeley':
  #- 'So..What is this?': 'Notes/CS70/index.md'
  #- 'Note 1: Propositional Logic': 'Notes/CS70/n1.md'
  #- 'ECE45: Circuis & Sytstems | UCSD': 'Notes/ECE45/index.md'
@@ -45,14 +45,14 @@ theme:
  example: fontawesome/solid/flask
  quote: fontawesome/solid/quote-left
  palette:
- - media: "(prefers-color-scheme: light)" 
+ - media: "(prefers-color-scheme: light)"
  scheme: default
  primary: deep orange
  accent: red
  #toggle:
  #icon: material/weather-night
  #name: Switch to dark mode
- #- media: "(prefers-color-scheme: dark)" 
+ #- media: "(prefers-color-scheme: dark)"
  #scheme: slate
  #primary: black
  #accent: deep orange
@@ -105,5 +105,5 @@ extra_javascript:
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
 
-extra:
- disqus: fadestash
+# extra:
+#  disqus: fadestash