project page for mobile and tablet complete

src/styles/App.css

@@ -8,12 +8,19 @@ html {
   scroll-behavior: smooth;
 }
 
-body {
+html, body {
   width: 100%;
   height: 100vh;
+  padding: 0;
   max-width: 100vw;
   font-family: monospace;
-  overflow-y: hidden;
+  overflow: hidden;
+}
+
+@media screen and (orientation: portrait) {
+  html, body {
+    height: 100%;
+  }
 }
 
 a {

src/styles/projects.css

@@ -160,3 +160,71 @@
   background: white;
   color: black;
 }
+
+@media screen and (max-width: 520px) and (orientation: portrait) {
+  .projectTypeSelectionContainer {
+    gap: 1rem;
+  }
+  .projectTypeSelection {
+    color: white;
+    padding: 1rem 0.75rem;
+    font-weight: bolder;
+    min-width: 8rem;
+  }
+  .projectTypeSelected::before {
+    border-left: 0;
+    right: calc(8rem - 3px);
+  }
+  
+  .projectTypeSelected::after {
+    border-right: 0;
+    left: calc(8rem - 3px);
+  }
+  .projectIndividualItemContainer {
+    max-width: calc(100% - 1rem);
+  }
+}
+
+@media screen and (min-width: 521px) and (max-width: 705px) and (orientation: portrait) {
+  .projectIndividualItemContainer {
+    max-width: calc(100% - 1rem);
+  }
+}
+
+@media screen and (min-width: 706px) and (max-width: 860px) and (orientation: portrait) {
+  .projectIndividualItemContainer {
+    max-width: calc(100% - 1rem);
+  }
+}
+
+@media screen and (min-width: 861px) and (max-width: 1048px) and (orientation: portrait) {
+  .projectIndividualItemContainer {
+    max-width: calc(100% - 1rem);
+  }
+}
+
+@media only screen 
+  and (max-width: 800px) 
+  and (orientation: landscape) {
+    .projectIndividualItemContainer {
+      max-width: calc(50% - 1rem);
+    }
+  }
+
+  @media only screen 
+  and (min-width: 801px)
+  and (max-width: 1000px) 
+  and (orientation: landscape) {
+    .projectIndividualItemContainer {
+      max-width: calc(50% - 1rem);
+    }
+  }
+
+  @media only screen 
+  and (min-width: 1001px)
+  and (max-width: 1400px) 
+  and (orientation: landscape) {
+    .projectIndividualItemContainer {
+      max-width: calc(50% - 1rem);
+    }
+  }

src/styles/technologies.css

@@ -12,13 +12,15 @@
 }
 
 .experienceTitle {
-  font-size: 3rem;
+  font-size: 4rem;
+  padding-top: 1rem;
 }
 
 .experienceContainer {
   display: flex;
   flex-direction: row;
   gap: 2rem;
+  justify-content: center;
   flex-wrap: wrap;
   width: 80%;
   margin: auto;
@@ -43,7 +45,7 @@
 .experienceItemTitle {
   text-align: left; 
   white-space: nowrap;
-  font-size: 2rem;
+  font-size: 2.5rem;
 }
 
 .experienceList {
@@ -51,8 +53,8 @@
 }
 
 .experienceListItem {
-  font-size: 1.5rem;
+  font-size: 2rem;
-  width: 25rem;
+  width: 22rem;
 }
 
 
@@ -72,6 +74,9 @@
   .experienceInnerContainer {
     height: 12rem;
   }
+  .experienceInnerContainer:last-child {
+    margin-bottom: 5rem;
+  }
   .experienceItemContainer { 
     padding: 1rem;
     gap: 1rem;  
@@ -142,6 +147,7 @@
   .experienceInnerContainer {
     height: 15rem;
   }
+
   .experienceItemContainer { 
     padding: 1rem;
     gap: 1rem;