<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>haque.wtf</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=Space+Mono&display=swap" rel="stylesheet">
<style>
body{
margin:0;
background:#0d0d0d;
color:white;
font-family:Inter, sans-serif;
overflow-x:hidden;
}
/* messy floating words */
.float{
position:fixed;
font-family:"Space Mono";
opacity:.08;
font-size:40px;
animation:drift linear infinite;
}
@keyframes drift{
from{transform:translateY(100vh) rotate(0deg)}
to{transform:translateY(-120vh) rotate(360deg)}
}
.container{
max-width:900px;
margin:auto;
padding:80px 20px;
}
h1{
font-size:70px;
letter-spacing:6px;
}
.tagline{
font-size:22px;
opacity:.7;
margin-top:10px;
}
.big{
margin-top:40px;
font-size:26px;
line-height:1.5;
}
.jobs{
margin-top:40px;
columns:2;
font-family:"Space Mono";
}
.jobs div{
margin:6px 0;
opacity:.85;
}
.footer{
margin-top:80px;
opacity:.5;
font-size:14px;
}
/* floating random words */
.w1{left:5%; animation-duration:25s}
.w2{left:30%; animation-duration:18s}
.w3{left:70%; animation-duration:30s}
.w4{left:85%; animation-duration:22s}
</style>
</head>
<body>
<div class="float w1">ideas</div>
<div class="float w2">projects</div>
<div class="float w3">curiosity</div>
<div class="float w4">experiments</div>
<div class="container">
<h1>haque.wtf</h1>
<div class="tagline">a website is coming (until my mood changes)</div>
<div class="big">
Hello internet. My name is <b>Abdul Haque</b>.<br><br>
I have a mild condition called <i>terminal curiosity</i>.<br>
Side effects include starting too many things and enjoying all of them.
</div>
<div class="big">
Currently I am a:
</div>
<div class="jobs">
<div>Architect</div>
<div>Psychologist</div>
<div>Data Scientist</div>
<div>Anthropologist</div>
<div>Civil Engineer</div>
<div>Accountant</div>
<div>Journalist</div>
<div>Biologist</div>
<div>Philosopher</div>
<div>UX Designer</div>
<div>Sociologist</div>
<div>Financial Analyst</div>
<div>Lawyer</div>
<div>Curator</div>
<div>Astronomer</div>
<div>Copywriter</div>
<div>Urban Planner</div>
<div>Linguist</div>
<div>Actuary</div>
</div>
<div class="big">
This portfolio will exist soon.<br>
Or disappear suddenly.<br>
Depends on the next interesting thing I find.
</div>
<div class="footer">
© haque.wtf • website under construction
</div>
</div>
</body>
</html>