fixed bug regarding skill cards having only a vertical alignment like it's only a mobile view.

src/App.jsx

@@ -31,7 +31,6 @@ export default function App() {
         "SHA-256 hashing",
         "file uploads in Base64",
         "dynamic LLM routing",
-        "user configuration",
       ],
       image: "/images/one-ai-cropped.png",
       imageGallery: null,

src/Contact.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 /**
  * TODO: Add email validation function.
@@ -29,6 +30,7 @@ export default function Contact() {
       <form onSubmit={handleSubmit}>
         <div className="row">
           <input
+            className="shadow"
             placeholder="Name"
             type="text"
             id="name"
@@ -37,6 +39,7 @@ export default function Contact() {
             onChange={handleChange}
           />
           <input
+            className="shadow"
             placeholder="example@email.com"
             type="email"
             id="email"
@@ -47,6 +50,7 @@ export default function Contact() {
         </div>
         <div className="row">
           <textarea
+            className="shadow"
             placeholder="Message"
             id="message"
             name="message"
@@ -54,9 +58,12 @@ export default function Contact() {
             onChange={handleChange}
           />
         </div>
-        <button type="submit" className="row">
-          Submit
-        </button>
+
+        <div className="row">
+          <button type="submit" className="button shadow">
+            Submit
+          </button>
+        </div>
       </form>
     </div>
   );

src/Primary.jsx

@@ -19,27 +19,29 @@ export default function Primary({ primaryText, secondaryText, image, skills }) {
           </div>
         </div>
         <div id="skill-cards">
-          <SkillCard
-            header="Languages"
-            symbol="code"
-            list={skills.languages}
-            isActive={activeCardIndex === 0}
-            onToggle={() => setActiveCardIndex(0)}
-          />
-          <SkillCard
-            header="Tools"
-            symbol="terminal"
-            list={skills.tools}
-            isActive={activeCardIndex === 1}
-            onToggle={() => setActiveCardIndex(1)}
-          />
-          <SkillCard
-            header="Other"
-            symbol="hub"
-            list={skills.other}
-            isActive={activeCardIndex === 2}
-            onToggle={() => setActiveCardIndex(2)}
-          />
+          <div id="card-grid">
+            <SkillCard
+              header="Languages"
+              symbol="code"
+              list={skills.languages}
+              isActive={activeCardIndex === 0}
+              onToggle={() => setActiveCardIndex(0)}
+            />
+            <SkillCard
+              header="Tools"
+              symbol="terminal"
+              list={skills.tools}
+              isActive={activeCardIndex === 1}
+              onToggle={() => setActiveCardIndex(1)}
+            />
+            <SkillCard
+              header="Other"
+              symbol="hub"
+              list={skills.other}
+              isActive={activeCardIndex === 2}
+              onToggle={() => setActiveCardIndex(2)}
+            />
+          </div>
         </div>
         <span className="material-icons down-indicator">
           keyboard_double_arrow_down

src/main.css

@@ -109,13 +109,15 @@ h4 {
 #header,
 #skill-cards,
 #project-section,
-#project-cards-section {
+#project-cards-section,
+#contact-section {
   opacity: 0;
 }
 .swiper-slide-active #header,
 .swiper-slide-active #skill-cards,
 .swiper-slide-active #project-section,
-.swiper-slide-active #project-cards-section {
+.swiper-slide-active #project-cards-section,
+.swiper-slide-active #contact-section {
   opacity: 0;
 }
 
@@ -123,6 +125,7 @@ h4 {
 .swiper-slide-active #skill-cards,
 .swiper-slide-active #project-section,
 .swiper-slide-active #project-cards-section,
+.swiper-slide-active #contact-section,
 .down-indicator {
   animation: moveDown 0.8s ease-in forwards;
 }
@@ -170,7 +173,6 @@ h4 {
   display: grid;
   grid-template-columns: 55% 45%;
   grid-template-rows: 100%;
-  column-gap: 2vw;
 }
 
 #header-text {
@@ -209,9 +211,15 @@ h4 {
 }
 
 #skill-cards {
+  border: 1px solid white;
   width: 100%;
-  display: grid;
-  place-items: center;
+}
+
+#card-grid {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 /**SKILL CARDS**/
@@ -220,6 +228,8 @@ h4 {
   background-color: #ebd2ff;
   border-radius: 20px;
   min-width: 20vw;
+  max-width: 40vw;
+  margin: 1vw;
 }
 
 .skill-card-header {
@@ -293,6 +303,7 @@ h4 {
   overflow: hidden;
   height: 90%;
   width: 100%;
+  transition-duration: 1s;
 }
 
 .project-card .img-container {
@@ -364,6 +375,8 @@ h4 {
   width: 80%;
   color: #4a245e;
   background-color: #ebd2ff;
+  border: 3px solid #ebd2ff;
+  outline: none;
   border-radius: 18px;
   font-size: clamp(1rem, 1.5vw, 2rem);
 
@@ -373,22 +386,65 @@ h4 {
   align-items: center;
   justify-content: center;
   padding: 1vw;
+
+  transition-duration: 0.5s;
+}
+
+.button:hover {
+  background-color: #4a245e;
+  color: #ebd2ff;
 }
 
 /**Contact Section**/
 #contact-section {
   height: 90vh;
   width: 100%;
-  margin: 5vw;
-}
+  margin: 0 5vw 5vw 5vw;
 
-#contact-section h1 {
-  margin-left: 5vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 #contact-section form {
-  border: 1px solid white;
-  height: 70vh;
+  width: 80vw;
+  height: 80%;
+}
+
+#contact-section input,
+#contact-section textarea {
+  width: 100%;
+  padding: 2vw;
+  margin: 2vw;
+  border-radius: 18px;
+  background-color: #ebd2ff;
+  color: #4a245e;
+  outline: none;
+  border: none;
+  font-size: clamp(0.75rem, 1.1rem, 2rem);
+}
+
+#contact-section textarea {
+  min-height: 30vh;
+}
+
+#contact-section input:valid,
+#contact-section textarea:valid {
+  background-color: #ebd2ff;
+}
+
+#contact-section input:focus,
+#contact-section textarea:focus {
+  outline: none;
+  border: none;
+}
+
+#contact-section .button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 /**PDF Viewer**/
@@ -516,13 +572,8 @@ h4 {
     border-radius: 18px 18px 18px 18px;
   }
 
-  .cards {
-    grid-template-columns: 100%;
-    grid-template-rows: 30% 30% 30%;
-  }
-
   .card {
-    min-width: 50vw;
+    min-width: 40vw;
     margin: 1vw;
   }
 
@@ -571,6 +622,13 @@ h4 {
   .pdf-page {
     width: 100%;
   }
+
+  #card-grid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 @media (max-width: 485px) {