add some responsive shit

html/index.html

@@ -10,8 +10,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="./styles/style.css">
-    <link rel="stylesheet" href="./styles/mobile.css">
     <link rel="stylesheet" href="./styles/introduction.css">
+    <link rel="stylesheet" href="./styles/mobile.css">
 
     <title>Naaturel</title>
 
@@ -56,10 +56,23 @@
                         <section>
                         <h3><span class="accentuated">Connect</span> with me</h3>
                         <p>
-                            <a href="mailto:yourname@example.com">Email</a> •
+                            <a href="https://github.com/yourusername" target="_blank">
-                            <a href="https://github.com/yourusername" target="_blank">GitHub</a> •
+                                <img src="./assets/marks/github-mark.svg" alt="github logo" class="logo">
-                            <a href="https://linkedin.com/in/yourprofile" target="_blank">LinkedIn</a>
+
+                            </a> •
+                            <a href="https://linkedin.com/in/yourprofile" target="_blank">
+                                <img src="./assets/marks/linkedin-mark.svg" alt="linkedin logo" class="logo">
+                            </a> •
+
+                            <a href="https://twitter.com/naaturel_" target="_blank">
+                                <img src="./assets/marks/twitter-mark.png" alt="twitter logo" class="logo">
+                            </a> •
+
+                            <a href="https://instagram.com/naaturel_" target="_blank">
+                                <img src="./assets/marks/instagram-mark.svg" alt="instagram logo" class="logo">
+                            </a>
                         </p>
+
                         </section>
 
                     </div>
@@ -80,7 +93,7 @@
                         <div class="card-details">
                             <h3>Unluckiest</h3>
                             <p class="notice">
-                                Art & design by <a href="https://linktr.ee/yanderechan133">@YandereDraws</a>
+                                Art & design by <a href="https://linktr.ee/yanderechan133">@ArwenDraws</a>
                             </p>
                         </div>
                     </div>
@@ -96,6 +109,7 @@
                     </div>
 
                 </div>
+            </div>
 
 
                 <!--<div class="card-list">
@@ -171,7 +185,7 @@
 
     const cards =  document.querySelectorAll('.introduction-box');
 
-    cards.forEach(card => { new CardTilter({card : card, tilt : 5, perspective : 950}) })
+    cards.forEach(card => { new CardTilter({card : card, tilt : 3, perspective : 1000}) })
 
 </script>
 

html/styles/introduction.css

@@ -3,7 +3,7 @@
     align-items: center;
     justify-content: center;
 
-    width: 40%;
+    width: 45%;
     height: 100%;
 }
 
@@ -26,8 +26,6 @@
     margin-top: 10px;
 }
 
-
-
 .introduction-header
 {
     display: flex;
@@ -57,15 +55,12 @@
 .introduction-text {
     font-size: 1.1rem;
     line-height: 1.25rem;
-
 }
 
-.greetings
+.introduction-text > section {
-{
+    margin-top: 2rem;
-    font-size: 3.5rem;
 }
 
-
 .typer::after {
     content: '|';
     animation: blink 800ms infinite;
@@ -77,7 +72,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 60%;
+    width: 55%;
+    padding: 25px;
 }
 
 .punched-card
@@ -98,11 +94,15 @@
 {
     display: flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: center;
-    gap: 15px;
+
+    width: 100%;
     min-width: 375px;
-    overflow: scroll;
     padding: 20px;
+    gap: 15px;
+
+    overflow: scroll;
+
 }
 
 .card {

html/styles/mobile.css

@@ -1,8 +1,11 @@
-@media (max-width: 801px) {
+@media (max-width: 860px) {
     .container {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        height: auto;
+        width: 100%;
+        gap: 20px;
     }
 
     .introduction
@@ -15,4 +18,14 @@
         height: 100%;
     }
 
+    .projects
+    {
+        width: 100%;
+        height: 100%;
+    }
+
+    .card-list
+    {
+        justify-content: space-evenly;
+    }
 }

html/styles/style.css

@@ -8,7 +8,6 @@
 
 * {
     font-family: 'Roboto', 'PT sans', sans-serif;
-
     box-sizing: border-box;
     color: #333;
 }
@@ -62,6 +61,12 @@ a {
     text-decoration: none;
 }
 
+.logo
+{
+    width: 25px;
+    height: 25px;
+}
+
 .accentuated {
     color: var(--primary-color);
 }