From 5d986ea79d0c484ba4383f5e24fffb52c3805119 Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Thu, 28 Mar 2024 22:25:55 +0000
Subject: [PATCH] styling for expertise section complete for now

---
 src/styles/technologies.css | 284 ++++++++++++++++++++++++++++++------
 1 file changed, 238 insertions(+), 46 deletions(-)

diff --git a/src/styles/technologies.css b/src/styles/technologies.css
index 54b0650..3d4db64 100644
--- a/src/styles/technologies.css
+++ b/src/styles/technologies.css
@@ -4,6 +4,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  width: 100%;
   min-height: 100vh;
   height: 100%;
   gap: 3rem;
@@ -17,13 +18,15 @@
 .experienceContainer {
   display: flex;
   flex-direction: row;
+  gap: 2rem;
   flex-wrap: wrap;
-  justify-content: center;
+  width: 80%;
+  margin: auto;
+  height: 100%;
 }
 
 .experienceInnerContainer {
-  margin: 1.5rem;
-  flex: 0 1 27%;
+  height: 20rem;
 }
 
 .experienceItemContainer {
@@ -31,7 +34,9 @@
   padding: 1rem 2rem;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 2rem;
+  width: 100%;
   height: 100%
 }
 
@@ -42,52 +47,16 @@
 }
 
 .experienceList {
-    padding-inline-start: 2em;
+  padding-inline-start: 2em;
 }
 
 .experienceListItem {
   font-size: 1.5rem;
+  width: 25rem;
 }
 
 
-@media screen and (max-width: 1000px) {
-  .experienceInnerContainer {
-    flex: 0 1 37%;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  .experienceInnerContainer {
-    flex: 0 1 43%;
-  }
-}
-
-@media screen and (max-width: 675px) {
-  .technologiesContainer {
-    gap: 1rem;
-  }
-  .experienceTitle {
-    font-size: 2.5rem;
-    padding-top: 2rem;
-  }
-  .experienceContainer { 
-    overflow-y: scroll;
-  }
-  .experienceInnerContainer {
-    justify-content: center;
-    flex: 0 1 65%;
-  }
-  .experienceItemTitle {
-    text-align: center; 
-    white-space: nowrap;
-    font-size: 1.7rem;
-  }  
-  .experienceListItem {
-    font-size: 1.2rem;
-  }
-}
-
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 520px) and (orientation: portrait) {
   .technologiesContainer {
     gap: 1rem;
   }
@@ -97,21 +66,244 @@
   }
   .experienceContainer { 
     overflow-y: scroll;
+    justify-content: center;
+    width: 100%;
   }
   .experienceInnerContainer {
-    justify-content: center;
-    flex: 1
+    height: 12rem;
+  }
+  .experienceItemContainer { 
+    padding: 1rem;
+    gap: 1rem;  
+  }
+  .experienceItemTitle {
+    text-align: center; 
+    white-space: nowrap;
+    font-size: 1.5rem;
+  }
+  .experienceList {
+    padding-inline-start: 2em;
+  }
+  .experienceListItem {
+    font-size: 1.2rem;
+    width: 12rem;
+  }
+}
+
+@media screen and (min-width: 521px) and (max-width: 705px) and (orientation: portrait) {
+  .technologiesContainer {
+    gap: 0.1rem;
+  }
+  .experienceTitle {
+    font-size: 2rem;
+    padding-top: 1.5rem;
+  }
+  .experienceContainer { 
+    column-gap: 1rem;
+    row-gap: 0;
+    justify-content: space-around;
+    height: 80%;
+    width: 90%;
+  }
+  .experienceInnerContainer {
+    height: 12rem;
+  }
+  .experienceItemContainer { 
+    padding: 1rem;
+    gap: 1rem;  
+  }
+  .experienceItemTitle {
+    text-align: center; 
+    white-space: nowrap;
+    font-size: 1.5rem;
+  }
+  .experienceList {
+    padding-inline-start: 2em;
+  }
+  .experienceListItem {
+    font-size: 1.2rem;
+    width: 10rem;
+  }
+}
+
+@media screen and (min-width: 706px) and (max-width: 860px) and (orientation: portrait) {
+  .technologiesContainer {
+    gap: 1rem;
+  }
+  .experienceTitle {
+    font-size: 3rem;
+    padding-top: 2rem;
+  }
+  .experienceContainer { 
+    justify-content: space-evenly;
+    height: 80%;
+    width: 100%;
+  }
+  .experienceInnerContainer {
+    height: 15rem;
+  }
+  .experienceItemContainer { 
+    padding: 1rem;
+    gap: 1rem;  
+  }
+  .experienceItemTitle {
+    text-align: center; 
+    white-space: nowrap;
+    font-size: 2.2rem;
+  }
+  .experienceList {
+    padding-inline-start: 2em;
+  }
+  .experienceListItem {
+    font-size: 1.5rem;
+    width: 19rem;
+  }
+}
+
+@media screen and (min-width: 861px) and (max-width: 1048px) and (orientation: portrait) {
+  .technologiesContainer {
+    gap: 1rem;
+  }
+  .experienceTitle {
+    font-size: 4rem;
+    padding-top: 2.5rem;
+  }
+  .experienceContainer { 
+    overflow-y: scroll;
+    justify-content: space-around;
+    height: 80%;
+    width: 100%;
+  }
+  .experienceInnerContainer {
+    height: 23rem;
+  }
+  .experienceItemContainer { 
+    padding: 1rem;
+    gap: 1rem;  
+  }
+  .experienceItemTitle {
+    text-align: center; 
+    white-space: nowrap;
+    font-size: 3rem;
+  }
+  .experienceList {
+    padding-inline-start: 2em;
+  }
+  .experienceListItem {
+    font-size: 2rem;
+    width: 22rem;
   }
 }
 
 @media only screen 
-  and (max-width: 1024px) 
+  and (max-width: 800px) 
   and (orientation: landscape) {
     .technologiesContainer {
       gap: 1rem;
     }
+    .experienceTitle {
+      font-size: 2rem;
+      padding-top: 1rem;
+    }
     .experienceContainer { 
       overflow-y: scroll;
+      justify-content: space-evenly;
+      height: 80%;
+      width: 90%;
+    }
+    .experienceInnerContainer {
+      height: 12rem;
+    }
+    .experienceItemContainer { 
+      padding: 1rem;
+      gap: 1rem;  
+    }
+    .experienceItemTitle {
+      text-align: center; 
+      white-space: nowrap;
+      font-size: 1.5rem;
+    }
+    .experienceList {
+      padding-inline-start: 2em;
+    }
+    .experienceListItem {
+      font-size: 1.2rem;
+      width: 10rem;
     }
   }
 
+  @media only screen 
+  and (min-width: 801px)
+  and (max-width: 1000px) 
+  and (orientation: landscape) {
+    .technologiesContainer {
+      gap: 1rem;
+    }
+    .experienceTitle {
+      font-size: 2rem;
+      padding-top: 1rem;
+    }
+    .experienceContainer { 
+      overflow-y: scroll;
+      justify-content: space-around;
+      height: 80%;
+      width: 90%;
+    }
+    .experienceInnerContainer {
+      height: 12rem;
+    }
+    .experienceItemContainer { 
+      padding: 1rem;
+      gap: 1rem;  
+    }
+    .experienceItemTitle {
+      text-align: center; 
+      white-space: nowrap;
+      font-size: 1.5rem;
+    }
+    .experienceList {
+      padding-inline-start: 2em;
+    }
+    .experienceListItem {
+      font-size: 1.2rem;
+      width: 10rem;
+    }
+  }
+
+  @media only screen 
+  and (min-width: 1001px)
+  and (max-width: 1400px) 
+  and (orientation: landscape) {
+    .technologiesContainer {
+      gap: 2rem;
+    }
+    .experienceTitle {
+      font-size: 3rem;
+      padding-top: 2rem;
+    }
+    .experienceContainer { 
+      overflow-y: scroll;
+      justify-content: space-around;
+      height: 80%;
+      width: 90%;
+    }
+    .experienceInnerContainer {
+      height: 18rem;
+    }
+    .experienceItemContainer { 
+      padding: 1rem;
+      gap: 1rem;  
+    }
+    .experienceItemTitle {
+      text-align: center; 
+      white-space: nowrap;
+      font-size: 2rem;
+    }
+    .experienceList {
+      padding-inline-start: 2em;
+    }
+    .experienceListItem {
+      font-size: 1.5rem;
+      width: 18rem;
+    }
+  }