added github, resume, linkein links

JuanSierra99 · Dec 27, 2023 · 4e9d0cc · 4e9d0cc
1 parent 04718ab
commit 4e9d0cc
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 15 deletions.
diff --git a/Static/Fullstack-Resume.pdf b/Static/Fullstack-Resume.pdf
diff --git a/Static/file-solid.svg b/Static/file-solid.svg
diff --git a/Static/github.svg b/Static/github.svg
diff --git a/Static/linkedin.svg b/Static/linkedin.svg
diff --git a/dist/output.css b/dist/output.css
@@ -616,6 +616,14 @@ video {
   margin-top: auto;
 }
 
+.tw-mt-10 {
+  margin-top: 2.5rem;
+}
+
+.tw-mt-4 {
+  margin-top: 1rem;
+}
+
 .tw-block {
   display: block;
 }
@@ -637,6 +645,26 @@ video {
   height: 100%;
 }
 
+.tw-h-1 {
+  height: 0.25rem;
+}
+
+.tw-h-2 {
+  height: 0.5rem;
+}
+
+.tw-h-3 {
+  height: 0.75rem;
+}
+
+.tw-h-5 {
+  height: 1.25rem;
+}
+
+.tw-h-6 {
+  height: 1.5rem;
+}
+
 .tw-min-h-screen {
   min-height: 100vh;
 }
@@ -698,6 +726,10 @@ video {
   flex-direction: column;
 }
 
+.tw-justify-evenly {
+  justify-content: space-evenly;
+}
+
 .tw-space-y-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 1;
 }
@@ -753,9 +785,19 @@ video {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.tw-bg-red-300 {
+.tw-bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
+.tw-bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.tw-bg-red-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
 .tw-bg-opacity-70 {
@@ -775,6 +817,10 @@ video {
   padding-top: 1rem;
 }
 
+.tw-pt-10 {
+  padding-top: 2.5rem;
+}
+
 .tw-text-center {
   text-align: center;
 }
@@ -789,6 +835,11 @@ video {
   line-height: 1.5rem;
 }
 
+.tw-text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .tw-font-extrabold {
   font-weight: 800;
 }
@@ -885,6 +936,22 @@ video {
     height: 100%;
   }
 
+  .sm\:tw-h-5 {
+    height: 1.25rem;
+  }
+
+  .sm\:tw-h-6 {
+    height: 1.5rem;
+  }
+
+  .sm\:tw-h-7 {
+    height: 1.75rem;
+  }
+
+  .sm\:tw-h-8 {
+    height: 2rem;
+  }
+
   .sm\:tw-w-full {
     width: 100%;
   }

diff --git a/index.html b/index.html
@@ -44,11 +44,15 @@
       </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">
-
+    style="padding-top: 100px; background-color: black">
+    <div class="tw-flex  tw-justify-evenly">
+      <a href="https://www.linkedin.com/in/juan-sierra-971837120" class=""><img src="./Static/linkedin.svg" class="sm:tw-h-8"></a>
+      <a url="./Static/Fullstack-Resume.pdf" download="Juan-Sierra-Resume.pdf" class=""><img src="./Static/file-solid.svg" class="sm:tw-h-8"></a>
+      <a href="https://github.com/JuanSierra99" class=""><img src="./Static/github.svg" class="sm:tw-h-8"></a>
+    </div>
     <h4 id="scrollspyHeading1" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-4xl tw-underline tw-mt-2">
       Projects
     </h4>
@@ -68,8 +72,7 @@ <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"
+              <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;">
               <div class="progress-bar progress-bar-striped" style="width: 8%">
                 TS
@@ -92,7 +95,8 @@ <h5 class="card-title">Bucket Buddy</h5>
               <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
                 JavaScript
               </div>
-            </div> -->
+            </div>
+            </div>
           </div>
         </div>
         <div class="carousel-item">
@@ -104,8 +108,7 @@ <h5 class="card-title">Decibel Warrior</h5>
                 <p class="card-text">A super fun, loud, and enganging mobile game built for android and ios using React Native</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"
+              <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
@@ -128,7 +131,8 @@ <h5 class="card-title">Decibel Warrior</h5>
               <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
                 JavaScript
               </div>
-            </div> -->
+            </div>
+            </div>
           </div>
         </div>
         <div class="carousel-item">
@@ -139,9 +143,8 @@ <h5 class="card-title">Decibel Warrior</h5>
                 <h5 class="card-title">Film Website</h5>
                 <p class="card-text">Store all your film in a folder and view it on a webpage. Using machine learning for object detection, and ai image generation, you can give a prompt to change the detected objects.</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"
+              </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
@@ -164,7 +167,8 @@ <h5 class="card-title">Film Website</h5>
               <div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
                 JavaScript
               </div>
-            </div> -->
+            </div> 
+            </div>
           </div>
         </div>
       </div>