added animation to description, meta tags, contact

index.html

@@ -4,7 +4,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://thatalex.dev/static/main.css">
+    <meta content="hi, i'm alex!" title="og:title">
+    <meta content="alex!" title="site_name">
+    <meta content="welcome to my website! here, you can contact me & find my github account!" title="og:description">
+    <meta content="https://thatalex.dev" title="og:url">
+    <link rel="stylesheet" href="static/main.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -14,8 +18,31 @@
 <body>
     <div id="container">
         <div id="textDiv"><p>hi, i'm <span id="name">alex</span>!</p></div><span id="box"></span>
-        <p style="display:block; margin:auto; float:left;">i work part-time at <span style="color:yellow">medal.tv</span> & do backend development in my offtime</p><br>
+        <div id="extraInfo">
-        <a style="display:block; margin:auto; float:left;" href="https://github.com/zevhr" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
+            <p style="display:block; margin:auto; float:left;">i work part-time at <span style="color:yellow">medal.tv</span> & do backend development in my offtime</p><br>
+            <a style="display:block; margin:auto; float:left;" href="https://github.com/zevhr" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
+            <a href="#" onclick="addClass()"><i class="fa fa-address-book-o" aria-hidden="true"></i></a>
+        </div>
+
+        <div id="contact">
+            <form method="post" action="https://api.thatalex.dev/v1/web/contact">
+                <p>contact me !</p>
+                <input type="text" name="name" id="name" placeholder="your name.."><br>
+                <input type="text" name="email" id="email" placeholder="your email.."><br>
+                <input type="text" name="subject" id="subject" placeholder="subject.."><br>
+                <input type="text" name="message" id="message" placeholder="your message..">
+                <button type="submit">submit</button>
+            </form>
+        </div>
     </div>
+
+    <script>
+        async function addClass() {
+            var element = document.getElementById("contact");
+            element.classList.add("contactFade");
+            document.querySelector(".contactFade").style.animationPlayState = "running";
+            document.querySelector(".contactFade").style.display = "block";
+        }
+    </script>
 </body>
 </html>

static/main.css

@@ -13,6 +13,17 @@ i {
     color:white;
 }
 
+input {
+    background-color:gray;
+    border-radius:15px;
+    color:rgb(226, 226, 226);
+}
+
+::placeholder {
+    color:white;
+    padding-left:5px;
+}
+
 #container {
     /* margin: 0 auto; */
     top:50%;
@@ -22,8 +33,7 @@ i {
 }
 
 #textDiv {
-    /* display:inline-block; */
+    display:inline-block;
-    float:left;
     animation: typingEffect 2s forwards;
     width:0%;
     border-width:1px;
@@ -46,6 +56,23 @@ i {
     transform: translate(-65%, 100%);
 }
 
+#extraInfo {
+    opacity:0;
+    overflow:hidden;
+    animation:fadeIn 1s forwards;
+    animation-delay:2s;
+}
+
+#contact {
+    display:none;
+}
+
+.contactFade {
+    display:block;
+    animation: fadeIn 1s forwards;
+    animation-play-state:paused;
+}
+
 @keyframes cursorBlink {
     0% {opacity:0%;}
     25% {opacity:50%;}
@@ -54,5 +81,10 @@ i {
 
 @keyframes typingEffect {
     from {width:0%;}
-    to {width:34%;}
+    to {width:22%;}
+}
+
+@keyframes fadeIn {
+    from {opacity:0;}
+    to {opacity:1;}
 }