alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added animation to description, meta tags, contact

Browse Source
This commit is contained in:
zeph
2022-06-23 13:24:35 -04:00
parent f3943205f3
commit 3ea755276f
2 changed files with 65 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+30 -3
View File
@@ -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>
<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>
<div id="extraInfo">
<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
+35 -3
View File
@@ -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; */
float:left;
display:inline-block;
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;}
}