Some lousy 'About' page Signed-off-by: Anirudh <icyph0x@pm.me>
Anirudh icyph0x@pm.me
Thu, 14 Mar 2019 11:33:08 +0530
3 files changed,
266 insertions(+),
3 deletions(-)
A
about/:w
@@ -0,0 +1,164 @@
+@font-face { + font-family: Inter; + src: url('fonts/Inter-Regular.woff2'); + font-size: 13px; +} + +html, +body { + font-family: Inter, sans-serif; + background: #021012; +} + +.container { + position: absolute; + overflow: hidden; + top: 0; + bottom: 0; + left: 0; + right: 0; + color: white; + + -webkit-animation: fadein 3s; + -moz-animation: fadein 3s; + -ms-animation: fadein 3s; + -o-animation: fadein 3s; + animation: fadein 3s; +} + +.container-text { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + color: white; + + -webkit-animation: fadein 3s; + -moz-animation: fadein 3s; + -ms-animation: fadein 3s; + -o-animation: fadein 3s; + animation: fadein 3s; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +.introduction { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; +} + +.content { + position: absolute; + font-size: 17px; + top: 40%; + left: 30%; + right: 30%; + width: 40%; + line-height: 170%; + transform: translateY(-50%); +} + +.logo { + width: 220px; +} + +.footer { + color: gray; + bottom: 20px; + position: absolute; + width: 100%; + text-align: center; + margin-bottom: 20px; +} + +.header { + color: cyan; + top: 20px; + position: absolute; + width: 100%; + text-align: left; + margin: 20px; +} + +a { + color: gray; + margin: 0; + transition: all 200ms; + text-decoration: none; +} + +a:hover { + color: #021012; + background: cyan; +} + +.left { + display: inline-block; + margin-bottom: 30px; + margin-left: 0; + margin-right: 30px; +} + +.right { + display: inline-block; +} + +.right a { + display: inline-block; + margin-right: 30px; +} + +.noselect{ + -webkit-touch-callout:none; + -webkit-user-select:none; + -khtml-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none +} + +@media only screen and (max-width: 40em) { + .left { + display: block; + margin-right: 0; + } + .right { + display: block; + } + .right a:last-child { + margin-right: 0; + } + .content { + left: 10%; + bottom: 0%; + font-size: 15px; + line-height: 130%; + width: 80%; + } + .content h1 { + font-size: 19px; + } + .content h2 { + font-size: 15px; + } + + .logo { + width: 180px; + } +}
A
about/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html> +<html lang=en> +<link rel="stylesheet" href="/static/style.css" type="text/css"> +<link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico"> +<meta content="linux, infosec, open source." name=description> +<meta name="viewport" content="initial-scale=1"> +<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> +<meta content="#021012" name="theme-color"> +<meta name="HandheldFriendly" content="true"> +<meta name="twitter:card" content="summary_large_image"> +<meta name="twitter:site" content="@icyphox"> +<meta name="twitter:title" content="Anirudh"> +<meta name="twitter:description" content="Memeing security since forever."> +<meta name="twitter:image" content="/static/icyphox.png"> +<meta property="og:title" content="Anirudh"> +<meta property="og:type" content="website"> +<meta property="og:description" content="Memeing security since forever."> +<meta property="og:url" content="https://icyphox.sh"> +<meta property="og:image" content="/static/icyphox.png"> +<html> + <title> + Anirudh + </title> +<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script> +<body class="noselect"> +<div class="container-text"> + <div class="header"> + <a href="/">icyphox.sh</a> + (<a href="https://github.com/icyphox/site">src</a>) + </div> + <div class="content"> + <div align="left"> + <h1>Hi, I’m Anirudh.</h1> + <p> I go by <a href="https://www.startpage.com/do/search?query=icyphox">icyphox</a> on the Internet. I’m doing my undergrad right now, majoring in CS. + My primary interest is computer security, and more specifically — <b>offensive security</b> and <b>digital forensics</b>. + I’m also a CTF player/security researcher at <a href=https://sector443.xyz>Sector443</a>, an infosec community at my University. + My <a href=https://medium.com/@icyphox>blog</a> has a few write-ups that you might want to check out. + </p> + <p> + In my free time (which I tend to have a lot of) I contribute to open-source projects like the <a href=https://nim-lang.org>Nim</a> programming language. + Take a look at my <a href=https://github.com/icyphox>GitHub</a> profile for more of my work. + </p> + <p> Want to <b> hire me? </b> I’m down for freelance security work. Here’s my <a href=https://x.icyphox.sh/resume.pdf>résumé</a>. + <p>My DMs on <a href=https://twitter.com/icyphox>Twitter</a> are open, so feel free to slide into them. + Don’t use Twitter? Shoot me an <a href=mailto:icyph0x@pm.me>email</a>. If it’s something secret, here’s my <a href=/static/gpg.txt>GPG</a> key. + </p> + </div> + </div> + + <div class="footer"> + <div class="left"> + © 2019 — <a href="mailto:icyph0x@pm.me">icyph0x@pm.me</a> + </div> + + <div class="right"> + <a href="https://github.com/icyphox" target="_blank">GitHub</a> + <a href="https://twitter.com/icyphox" target="_blank">Twitter</a> + <a href="https://x.icyphox.sh/resume.pdf" target="_blank">Résumé</a> + <a href="https://medium.com/@icyphox" target="_blank">Medium</a> + </div> + </div> +</body> +</html>
M
static/style.css
→
static/style.css
@@ -1,7 +1,7 @@
@font-face { font-family: Inter; src: url('fonts/Inter-Regular.woff2'); - font-size: 14px; + font-size: 13px; } html,@@ -13,6 +13,22 @@
.container { position: absolute; overflow: hidden; + top: 0; + bottom: 0; + left: 0; + right: 0; + color: white; + + -webkit-animation: fadein 3s; + -moz-animation: fadein 3s; + -ms-animation: fadein 3s; + -o-animation: fadein 3s; + animation: fadein 3s; +} + +.container-text { + position: absolute; + overflow: hidden; top: 0; bottom: 0; left: 0;@@ -48,6 +64,17 @@ transform: translateY(-50%);
width: 100%; } +.content { + position: absolute; + font-size: 17px; + top: 40%; + left: 30%; + right: 30%; + width: 40%; + line-height: 170%; + transform: translateY(-50%); +} + .logo { width: 220px; }@@ -119,9 +146,18 @@ .right a:last-child {
margin-right: 0; } .content { - left: 15%; - width: 70%; + left: 10%; + bottom: 0%; + font-size: 15px; + line-height: 130%; + width: 80%; } + .content h1 { + font-size: 19px; + } + .content h2 { + font-size: 15px; + } .logo { width: 180px;