Update some style

html/index.html

@@ -30,7 +30,6 @@
                     </div>
                     <hr/>
                     <div class="introduction-text">
-                        <h2>Hello there!</h2>
                         <section>
                             <h3><span class="accentuated">About</span> me</h3>
                             <p>
@@ -136,7 +135,7 @@
 
     const cards =  document.querySelectorAll('.introduction-box');
 
-    cards.forEach(card => { new CardTilter({card : card, tilt : 3, perspective : 1000}) })
+    //cards.forEach(card => { new CardTilter({card : card, tilt : 3, perspective : 1000}) })
 
 </script>
 

html/styles/introduction.css

@@ -4,19 +4,24 @@
     justify-content: center;
 
     width: 45%;
-    height: 100%;
+    height: 95%;
+    max-height: 95%;
 }
 
 .introduction-box {
+    height: 100%;
+
     min-width: 350px;
     min-height: 350px;
     padding: 25px 35px 35px 35px;
 
+    border: 1px solid var(--background-color);
+
     background: white;
     border-radius: 16px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 
-    overflow: scroll;
+    overflow: scroll
 }
 
 .introduction-box hr {
@@ -46,14 +51,14 @@
 
 .profile-picture
 {
-    width: 100px;
+    width: 85px;
     aspect-ratio: 1/1;
     border: solid 1px rgba(0, 0, 0, 0.3);
     border-radius: 50%;
 }
 
 .introduction-text {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     line-height: 1.25rem;
 }
 
@@ -62,7 +67,6 @@
 }
 
 .introduction-text > section {
-    margin-top: 2rem;
 }
 
 .typer::after {

html/styles/mobile.css

@@ -1,4 +1,5 @@
 @media (max-width: 860px) {
+
     .container {
         flex-direction: column;
         justify-content: center;
@@ -18,6 +19,11 @@
         height: 100%;
     }
 
+    .profile-picture
+    {
+        width: 85px;
+    }
+
     .projects
     {
         width: 100%;

html/styles/style.css

@@ -1,5 +1,7 @@
 :root {
-    --primary-color: #5f9a13;
+    --background-color : #1E331A;
+    --accent-color: #5f9a13;
+    --action-color : #e01a4f;
 }
 
 ::-webkit-scrollbar {
@@ -47,6 +49,8 @@ main {
 .container {
     display: flex;
     flex-direction: row;
+    justify-content: center;
+    align-items: center;
 
     height: 100%;
     width: 100%;
@@ -61,6 +65,11 @@ a {
     text-decoration: none;
 }
 
+a:hover
+{
+    color: var(--action-color);
+}
+
 .logo
 {
     width: 25px;
@@ -68,5 +77,5 @@ a {
 }
 
 .accentuated {
-    color: var(--primary-color);
+    color: var(--accent-color);
 }