Responsive Design Skills Section

liamkaigates · Apr 3, 2024 · 59f7b3f · 59f7b3f
1 parent c098940
commit 59f7b3f
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -132,21 +132,21 @@ <h3>Learn about me</h3>
         </div>
     </section>
     <section class="skills-container" id="skills">
-        <h2>Technical Skills</h2>
+        <h1>Technical Skills</h1>
         <ul class="skills-list">
-            <li><i class="fa-brands fa-python fa-6x"></i><p>Python</p></li>
-            <li><i class="fa-brands fa-js fa-6x"></i><p>Javascript</p></li>
-            <li><i class="fa-brands fa-html5 fa-6x"></i><p>HTML</p></li>
-            <li><i class="fa-brands fa-css3-alt fa-6x"></i><p>CSS</p></li>
-            <li><i class="fa-brands fa-java fa-6x"></i><p>Java</p></li>
+            <li><i class="fa-brands fa-python"></i><p>Python</p></li>
+            <li><i class="fa-brands fa-js"></i><p>Javascript</p></li>
+            <li><i class="fa-brands fa-html5"></i><p>HTML</p></li>
+            <li><i class="fa-brands fa-css3-alt"></i><p>CSS</p></li>
+            <li><i class="fa-brands fa-java"></i><p>Java</p></li>
             <li><i class="devicon-cplusplus-plain"></i><p>C++</p></li>
             <li><i class="devicon-c-plain"></i><p>C</p></li>
             <li><i class="devicon-bash-plain"></i><p>Bash</p></li>
-            <li><i class="fa-brands fa-react fa-6x"></i><p>React</p></li>
-            <li><i class="fa-brands fa-node fa-6x"></i><p>Node.js</p></li>
-            <li><i class="fa-brands fa-git fa-6x"></i><p>Git</p></li>
-            <li><i class="fa-brands fa-github fa-6x"></i><p>Github</p></li>
-            <li><i class="fa-brands fa-linux fa-6x"></i><p>Linux</p></li>
+            <li><i class="fa-brands fa-react"></i><p>React</p></li>
+            <li><i class="fa-brands fa-node"></i><p>Node.js</p></li>
+            <li><i class="fa-brands fa-git"></i><p>Git</p></li>
+            <li><i class="fa-brands fa-github"></i><p>Github</p></li>
+            <li><i class="fa-brands fa-linux"></i><p>Linux</p></li>
             <li><i class="devicon-flask-plain"></i><p>Flask</p></li>
         </ul>
     </section>

diff --git a/styles/mediaqueries.css b/styles/mediaqueries.css
@@ -1,3 +1,9 @@
+@media only screen and (max-width: 1131px) {
+    .skills-list i {
+        font-size: 5rem;
+    }
+}
+
 @media only screen and (max-width: 964px) {
     .home-text p {
         font-size: 1rem;
@@ -55,6 +61,15 @@
     }
 }
 
+@media only screen and (max-width: 743px) {
+    .skills-container h1 {
+        font-size: 2.5rem;
+    }
+    .skills-list i {
+        font-size: 4rem;
+    }
+}
+
 @media only screen and (max-width: 608px) {
     .light-mode-button, .dark-mode-button {
         width: 1rem;
@@ -67,6 +82,13 @@
     .about-window i, .terminal-content p {
         font-size: 0.9rem;
     }
+    .skills-container h1 {
+        font-size: 2rem;
+        margin: 0.5rem auto;
+    }
+    .skills-list i {
+        font-size: 4rem;
+    }
 }
 
 @media only screen and (max-width: 549px) {
@@ -75,6 +97,15 @@
     }
 }
 
+@media only screen and (max-width: 459px) {
+    .skills-list i {
+        font-size: 3rem;
+    }
+    .skills-list p {
+        font-size: 0.75rem;
+    }
+}
+
 @media only screen and (max-width: 425px) {
     .mobile-nav-link-list {
         padding-left: 0.5rem;
@@ -92,6 +123,18 @@
         width: 0.75rem;
         height: 0.75rem;
     }
+    .skills-container h1 {
+        font-size: 1.8rem;
+    }
+}
+
+@media only screen and (max-width: 384px) {
+    .skills-list i {
+        font-size: 2.5rem;
+    }
+    .skills-list p {
+        font-size: 0.65rem;
+    }
 }
 
 @media only screen and (max-width: 333px) {

diff --git a/styles/style.css b/styles/style.css
@@ -299,16 +299,21 @@ header a:hover {
     justify-content: center;
     align-items: center;
     margin: 0 auto;
-    width: 80%;
+    padding: 2rem 0;
+    max-width: 80%;
     height: 100vh;
 }
 
+.skills-container h1 {
+    font-size: 3rem;
+}
+
 .skills-list {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
     align-items: center;
-    width: 90%;
+    width: 100%;
     padding: 0;
 }