Bubba photos resized. smaller file size.

The file sizes are now smaller. This should help it load up faster, especially with slower connections. In addition, they do not take as much space on the web page. All image are now squares measuring at 750 x 750 pixels.
JuanSierra99 · Jan 4, 2024 · d467749 · d467749
1 parent 4a9260a
commit d467749
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 164 deletions.
diff --git a/Static/fav-bubba-photo-square.jpeg b/Static/fav-bubba-photo-square.jpeg
diff --git a/Static/favbubbaphoto Large.jpeg b/Static/favbubbaphoto Large.jpeg
diff --git a/Static/firebubba Large.jpeg b/Static/firebubba Large.jpeg
diff --git a/Static/firebubba-square.jpeg b/Static/firebubba-square.jpeg
diff --git a/Static/looking-at-angels Large.jpeg b/Static/looking-at-angels Large.jpeg
diff --git a/Static/looking-at-angels-square.jpeg b/Static/looking-at-angels-square.jpeg
diff --git a/dist/output.css b/dist/output.css
@@ -544,10 +544,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.tw-fixed {
-  position: fixed;
-}
-
 .tw-absolute {
   position: absolute;
 }
@@ -580,10 +576,6 @@ video {
   top: 50%;
 }
 
-.tw-right-0 {
-  right: 0px;
-}
-
 .tw-z-0 {
   z-index: 0;
 }
@@ -628,10 +620,6 @@ video {
   margin-top: auto;
 }
 
-.tw-mr-0 {
-  margin-right: 0px;
-}
-
 .tw-block {
   display: block;
 }
@@ -640,10 +628,6 @@ video {
   display: flex;
 }
 
-.tw-hidden {
-  display: none;
-}
-
 .tw-h-1\/4 {
   height: 25%;
 }
@@ -657,10 +641,6 @@ video {
   height: 100%;
 }
 
-.tw-h-screen {
-  height: 100vh;
-}
-
 .tw-h-auto {
   height: auto;
 }
@@ -685,11 +665,6 @@ video {
   width: 100vw;
 }
 
-.tw-w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .tw-flex-1 {
   flex: 1 1 0%;
 }
@@ -771,10 +746,6 @@ video {
   border-radius: 1rem;
 }
 
-.tw-rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .tw-border-4 {
   border-width: 4px;
 }
@@ -808,26 +779,6 @@ video {
   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-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.tw-bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
-.tw-bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
 .tw-bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -857,10 +808,6 @@ video {
   padding-top: 1rem;
 }
 
-.tw-pt-2 {
-  padding-top: 0.5rem;
-}
-
 .tw-text-center {
   text-align: center;
 }
@@ -893,11 +840,6 @@ video {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
-.tw-text-blue-300 {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
 .tw-text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -913,49 +855,19 @@ video {
   color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 
-.tw-text-purple-400 {
+.tw-text-red-400 {
   --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
 .tw-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.tw-text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.tw-text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
-
-.tw-text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-
-.tw-text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
-.tw-text-purple-300 {
+.tw-text-yellow-400 {
   --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity));
-}
-
-.tw-text-purple-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 232 255 / var(--tw-text-opacity));
-}
-
-.tw-text-purple-800 {
-  --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
+  color: rgb(250 204 21 / var(--tw-text-opacity));
 }
 
 .tw-ring-inset {
@@ -1002,36 +914,7 @@ video {
   vite: html;
 }
 
-.hover\:tw-bg-white:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.hover\:tw-bg-black:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
-.hover\:tw-text-green-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-text-opacity));
-}
-
-.hover\:tw-text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.hover\:tw-text-black:hover {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
-  .sm\:tw-hidden {
-    display: none;
-  }
-
   .sm\:tw-h-8 {
     height: 2rem;
   }
@@ -1068,49 +951,10 @@ video {
     line-height: 1;
   }
 
-  .sm\:tw-text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .sm\:tw-text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
   .sm\:tw-text-base {
     font-size: 1rem;
     line-height: 1.5rem;
   }
-
-  .sm\:tw-text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:tw-visible {
-    visibility: visible;
-  }
-
-  .md\:tw-block {
-    display: block;
-  }
-
-  .md\:tw-hidden {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .lg\:tw-block {
-    display: block;
-  }
-
-  .lg\:tw-hidden {
-    display: none;
-  }
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/index.html b/index.html
@@ -47,7 +47,7 @@
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
        ">
-    <p class="tw-text-purple-400 tw-font-extrabold" href="#">Juan Sierra</p>
+    <p class="tw-text-yellow-400 tw-font-extrabold" href="#">Juan Sierra</p>
     <ul class="nav nav-pills">
       <li class="nav-item">
         <a class="nav-link tw-text-white tw-font-extrabold " href="#scrollspyHeading1">Projects</a>
@@ -216,13 +216,13 @@ <h5 class="card-title tw-font-bold">Film Website</h5>
         <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"
+        <img src="/Static/looking-at-angels-square.jpeg"
           class="tw-w-auto tw-h-1/4 tw-transition-all tw-duration-1000 tw-ease-out tw-translate-y-1/2 hidden clip-circle"
           alt="Image" />
-        <img src="https://github.com/JuanSierra99/juansierra99.github.io/raw/main/Static/firebubba Large.jpeg"
+          <img src="Static/fav-bubba-photo-square.jpeg"
           class="tw-w-auto tw-h-1/4 tw-transition-all tw-duration-1000 tw-ease-out tw-translate-y-1/2 hidden clip-circle"
           alt="Image" />
-        <img src="https://github.com/JuanSierra99/juansierra99.github.io/raw/main/Static/favbubbaphoto Large.jpeg"
+          <img src="/Static/firebubba-square.jpeg"
           class="tw-w-auto tw-h-1/4 tw-transition-all tw-duration-1000 tw-ease-out tw-translate-y-1/2 hidden clip-circle"
           alt="Image" />
         <!-- <img src="https://github.com/JuanSierra99/juansierra99.github.io/raw/main/Static/poker-face Large.jpeg"