From fa28948d693c3d241f020f26cdfe1ea80d3fe4a9 Mon Sep 17 00:00:00 2001
From: Juan Sierra <sierra.juan99@gmail.com>
Date: Mon, 25 Dec 2023 17:13:02 -0800
Subject: [PATCH] reorganized page structure

---
 dist/output.css |  68 +++----------------
 index.html      | 174 +++++++++++++++++++++++++++++++++---------------
 2 files changed, 130 insertions(+), 112 deletions(-)

diff --git a/dist/output.css b/dist/output.css
index c01f924..add96b6 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -584,8 +584,8 @@ video {
   z-index: 10;
 }
 
-.tw-m-5 {
-  margin: 1.25rem;
+.tw-mb-5 {
+  margin-bottom: 1.25rem;
 }
 
 .tw-mb-auto {
@@ -608,6 +608,10 @@ video {
   margin-top: 0.5rem;
 }
 
+.tw-mt-5 {
+  margin-top: 1.25rem;
+}
+
 .tw-mt-auto {
   margin-top: auto;
 }
@@ -624,19 +628,15 @@ video {
   height: 25%;
 }
 
-.tw-h-full {
-  height: 100%;
-}
-
-.tw-h-screen {
-  height: 100vh;
-}
-
 .tw-h-fit {
   height: -moz-fit-content;
   height: fit-content;
 }
 
+.tw-h-full {
+  height: 100%;
+}
+
 .tw-min-h-screen {
   min-height: 100vh;
 }
@@ -694,14 +694,6 @@ video {
   flex-direction: column;
 }
 
-.tw-items-center {
-  align-items: center;
-}
-
-.tw-justify-center {
-  justify-content: center;
-}
-
 .tw-space-y-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 1;
 }
@@ -738,10 +730,6 @@ video {
   overflow-y: hidden;
 }
 
-.tw-border-t-8 {
-  border-top-width: 8px;
-}
-
 .tw-border-dashed {
   border-style: dashed;
 }
@@ -756,26 +744,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.tw-bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.tw-bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
 .tw-bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.tw-bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
 .tw-bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -797,14 +770,6 @@ video {
   text-align: center;
 }
 
-.tw-align-middle {
-  vertical-align: middle;
-}
-
-.tw-align-bottom {
-  vertical-align: bottom;
-}
-
 .tw-text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -815,10 +780,6 @@ video {
   line-height: 1.5rem;
 }
 
-.tw-font-bold {
-  font-weight: 700;
-}
-
 .tw-font-extrabold {
   font-weight: 800;
 }
@@ -915,10 +876,6 @@ video {
     height: 100%;
   }
 
-  .sm\:tw-w-2\/3 {
-    width: 66.666667%;
-  }
-
   .sm\:tw-w-full {
     width: 100%;
   }
@@ -948,11 +905,6 @@ video {
     line-height: 1.25rem;
   }
 
-  .sm\:tw-text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
   .sm\:tw-text-xs {
     font-size: 0.75rem;
     line-height: 1rem;
diff --git a/index.html b/index.html
index 8d3004e..89b5d5c 100644
--- a/index.html
+++ b/index.html
@@ -36,32 +36,144 @@
           role="button" aria-expanded="false">Projects</a>
         <ul class="dropdown-menu">
           <li>
-            <a class="dropdown-item" href="#scrollspyHeading3">Bucket Buddy</a>
+            <a class="dropdown-item" href="#scrollspyHeading1">Bucket Buddy</a>
           </li>
           <li>
-            <a class="dropdown-item" href="#scrollspyHeading4">Fourth</a>
+            <a class="dropdown-item" href="#scrollspyHeading2">Decibel Warrior</a>
           </li>
           <li>
             <hr class="dropdown-divider" />
           </li>
           <li>
-            <a class="dropdown-item" href="#scrollspyHeading5">Fifth</a>
+            <a class="dropdown-item" href="#scrollspyHeading3">Film Website</a>
           </li>
         </ul>
       </li>
       <li class="nav-item">
-        <a class="nav-link tw-text-blue-300 tw-font-extrabold" href="#scrollspyHeading1">Education</a>
+        <a class="nav-link tw-text-blue-300 tw-font-extrabold" href="#scrollspyHeading4">Education</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link tw-text-purple-400 tw-font-extrabold" href="#scrollspyHeading2">Me !</a>
+        <a class="nav-link tw-text-purple-400 tw-font-extrabold" href="#scrollspyHeading5">Me !</a>
       </li>
     </ul>
   </nav>
+  
   <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%"
     data-bs-smooth-scroll="true" class="scrollspy-example rounded-2" tabindex="0"
     style="padding-top: 60px; background-color: black">
+
+    <h4 id="scrollspyHeading1" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-4xl tw-underline tw-mt-2">
+      Projects
+    </h4>
+    <div id="BucketBuddy">
+      <div class="card tw-block tw-ml-auto tw-mr-auto tw-mt-5 tw-mb-5" style="width: 18rem;">
+        <img src="/Static/bucket-buddy-login.jpeg" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Bucket Buddy</h5>
+          <p class="card-text">Create and manage your bucket list on this easy to use website</p>
+          <a href="https://github.com/JuanSierra99/BucketBuddy" class="btn btn-primary">Github Repository</a>
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped" style="width: 8%">
+          TS
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto " role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
+          CSS
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
+          React
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
+          JavaScript
+        </div>
+      </div>
+    </div>
+    
+    <h4 id="scrollspyHeading2"></h4>
+    <div id="decibel-warrior">
+      <div class="card tw-block tw-ml-auto tw-mr-auto tw-mt-5 tw-mb-5" style="width: 18rem;">
+        <img src="" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Decibel Warrior</h5>
+          <p class="card-text">lipsum...</p>
+          <a href="https://github.com/JuanSierra99/decibel_warrior" class="btn btn-primary">Github Repository</a>
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped" style="width: 8%">
+          TS
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto " role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
+          CSS
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
+          React
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
+          JavaScript
+        </div>
+      </div>
+    </div>
+
+    <h4 id="scrollspyHeading3"></h4>
+    <div id="film-website">
+      <div class="card tw-block tw-ml-auto tw-mr-auto tw-mt-5 tw-mb-5" style="width: 18rem;">
+        <img src="" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Film Website</h5>
+          <p class="card-text">lipsum...Dipsum</p>
+          <a href="https://github.com/JuanSierra99/Film-Site" class="btn btn-primary">Github Repository</a>
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped" style="width: 8%">
+          TS
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto " role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
+          CSS
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
+          React
+        </div>
+      </div>
+      <div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
+        aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
+        <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
+          JavaScript
+        </div>
+      </div>
+    </div>
+
     <div id="education-container" class="tw-pt-4 tw-relative tw-min-h-screen tw-flex tw-flex-col">
-      <h4 id="scrollspyHeading1" class="sm:tw-text-4xl tw-text-center tw-text-blue-300 tw-font-extrabold tw-underline">
+      <h4 id="scrollspyHeading4" class="sm:tw-text-4xl tw-text-center tw-text-blue-300 tw-font-extrabold tw-underline">
         Education
       </h4>
       <h id="im-a-titan" class="tw-text-white sm:tw-text-3xl tw-font-extrabold tw-text-center tw-block tw-pt-3">A PROUD
@@ -81,7 +193,7 @@ <h4 id="scrollspyHeading1" class="sm:tw-text-4xl tw-text-center tw-text-blue-300
     </div>
 
     <div class="tw-w-full tw-min-h-screen" id="about-me-section">
-      <h4 id="scrollspyHeading2"
+      <h4 id="scrollspyHeading5"
         class="sm:tw-text-4xl tw-text-purple-400 tw-text-center tw-font-extrabold tw-underline">
         About Me
       </h4>
@@ -129,7 +241,7 @@ <h1 class="tw-text-inherit">Other Hobbies</h1>
         </ul>
       </div>
       <div class="tw-relative tw-overflow-scroll tw-overflow-y-hidden tw-flex">
-        <h4 id="scrollspyHeading2" class="tw-text-orange-600 tw-text-2xl tw-mt-auto tw-mb-auto tw-font-extrabold">
+        <h4 class="tw-text-orange-600 tw-text-2xl tw-mt-auto tw-mb-auto tw-font-extrabold">
           This is Bubba. The BIGGEST part of me.
         </h4>
         <img src="https://github.com/JuanSierra99/juansierra99.github.io/raw/main/Static/looking-at-angels Large.jpeg"
@@ -146,52 +258,6 @@ <h4 id="scrollspyHeading2" class="tw-text-orange-600 tw-text-2xl tw-mt-auto tw-m
           alt="Image" /> -->
       </div>
     </div>
-
-    <h4 id="scrollspyHeading3" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-4xl tw-underline tw-mt-2">
-      Projects
-    </h4>
-    <!-- Bucket Buddy Starts Here -->
-    <div id="BucketBuddy">
-      <h4 id="scrollspyHeading3" class="tw-text-white tw-text-center tw-font-extrabold sm: tw-text-2xl">
-        Now, Let me introduce you to...
-      </h4>
-      <h4 id="scrollspyHeading3" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-2xl">
-        BUCKET BUDDY
-      </h4>
-      <img src="/Static/bucket-buddy-login.jpeg" class="tw-mr-auto tw-ml-auto tw-block sm:tw-w-2/3" />
-      <p class="tw-text-white tw-m-5 tw-font-bold sm:tw-text-xl tw-text-center">
-        A Bucket List Website
-      </p>
-      <div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
-        aria-valuemax="100" style="margin-bottom: 10px">
-        <div class="progress-bar progress-bar-striped" style="width: 8%">
-          TS
-        </div>
-      </div>
-      <div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
-        aria-valuemax="100" style="margin-bottom: 10px">
-        <div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
-          18.3% CSS
-        </div>
-      </div>
-      <div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
-        aria-valuemax="100" style="margin-bottom: 10px">
-        <div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
-          React
-        </div>
-      </div>
-      <div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
-        aria-valuemax="100" style="margin-bottom: 10px">
-        <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
-          72% JavaScript
-        </div>
-      </div>
-    </div>
-    <!-- Bucket Buddy Ends Here -->
-    <h4 id="scrollspyHeading4">Fourth heading</h4>
-    <p>...</p>
-    <h4 id="scrollspyHeading5">Fifth heading</h4>
-    <p>...</p>
     <script src="./script.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>