diff options
Diffstat (limited to 'enter.html')
| -rwxr-xr-x | enter.html | 227 |
1 files changed, 188 insertions, 39 deletions
@@ -1,42 +1,191 @@ <!DOCTYPE html> -<html lang='en'> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>welcome — tyler.xyz</title> +<link rel="stylesheet" href="aero.css" /> +<style> + body { + background: + url("img/wallpaper.png") center / cover no-repeat, + linear-gradient(180deg, oklch(78% 0.10 215) 0%, oklch(88% 0.14 145) 100%); + background-attachment: fixed; + height: 100vh; overflow: hidden; + } - <head> - <title>Welcome!</title> - <link rel='stylesheet' type='text/css' href='css/bootstrap.css'> - <meta charset='utf-8'/> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - </head> + .stage { + position: fixed; inset: 0; + display: flex; flex-direction: column; align-items: center; justify-content: center; + text-align: center; padding: 20px; + } - <body><a name="top"></a> - <center> - <div class="container"> - <div class="center"> - <img src="/img/static/gate.gif"> - <h1>WELCOME!</h1> - <h2>CLICK "ENTER" TO ENTER MY WEBSITE!</h2><br> - <h3><a class="btn btn-primary btn-large" href=./index.html>ENTER</a></h3><br> - <table cellpadding="2" cellspacing="2"> - <tr> - <td> - <img src="/img/static/gpl3.gif"> - </td> - <td> - <img src="/img/static/netscape.gif"> - </td> - <td> - <img src="/img/static/noframes.gif"> - </td> - <td> - <img src="/img/static/siliconvalley.gif"> - </td> - <td> - <img src="/img/static/madevim.gif"> - </td> - </tr> - </table> - </div> - </div> - </center> - </body> -<html lang="en"> + /* main glass plate */ + .gate { + position: relative; + padding: 56px 72px 48px; + border-radius: 28px; + min-width: 480px; + background: + linear-gradient(to bottom, rgba(255,255,255,0.62), rgba(220,240,250,0.42)); + backdrop-filter: blur(22px) saturate(170%); + -webkit-backdrop-filter: blur(22px) saturate(170%); + border: 1px solid rgba(255,255,255,0.85); + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.95), + inset 0 -1px 0 rgba(120,160,200,0.25), + 0 20px 60px rgba(40,90,140,0.28); + animation: float 6s ease-in-out infinite; + } + .gate::before { + content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 45%; + border-radius: 28px; + background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0)); + pointer-events: none; + } + @keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } + } + + .mark { + width: 64px; height: 64px; margin: 0 auto 18px; + border-radius: 50%; + background: + radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0%, rgba(180,240,200,0.4) 30%, rgba(140,210,180,0.2) 60%), + linear-gradient(135deg, oklch(88% 0.14 145), oklch(60% 0.16 150)); + border: 1.5px solid rgba(255,255,255,0.85); + box-shadow: + inset -6px -8px 18px rgba(40,110,80,0.35), + inset 4px 6px 12px rgba(255,255,255,0.65), + 0 6px 20px rgba(60,140,100,0.35); + display: flex; align-items: center; justify-content: center; + color: white; font-size: 30px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); + position: relative; + } + + .title { + margin: 0; font-size: 64px; font-weight: 200; letter-spacing: -2px; + line-height: 1; color: oklch(28% 0.08 230); + text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 2px 14px rgba(255,255,255,0.5); + } + .title em { + font-style: italic; font-weight: 300; + color: oklch(45% 0.15 150); + } + .sub { + margin: 14px 0 32px; font-size: 14px; color: oklch(35% 0.06 230); + opacity: 0.85; line-height: 1.55; max-width: 380px; margin-left: auto; margin-right: auto; + text-shadow: 0 1px 0 rgba(255,255,255,0.5); + } + .sub strong { font-weight: 600; color: oklch(28% 0.10 230); } + + /* ENTER button — chunky bubble */ + .enter { + display: inline-flex; align-items: center; gap: 12px; + padding: 18px 40px 18px 34px; + font-family: "Segoe UI", Tahoma, sans-serif; + font-size: 22px; font-weight: 700; letter-spacing: 1px; + text-transform: lowercase; + color: white; text-shadow: 0 1px 2px rgba(30,80,40,0.5); + text-decoration: none; + border: 1.5px solid oklch(40% 0.14 150); + border-radius: 999px; + background: + linear-gradient(to bottom, + oklch(95% 0.10 145) 0%, + oklch(78% 0.18 145) 48%, + oklch(52% 0.16 150) 52%, + oklch(70% 0.18 145) 100%); + box-shadow: + inset 0 2px 0 rgba(255,255,255,0.85), + inset 0 -3px 6px oklch(35% 0.13 150), + 0 6px 22px rgba(60,140,100,0.4); + cursor: pointer; position: relative; + transition: transform 200ms; + } + .enter::before { + content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 44%; + border-radius: 999px; + background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.05)); + pointer-events: none; + } + .enter:hover { transform: translateY(-2px) scale(1.03); } + .enter:active { transform: translateY(0) scale(0.99); } + .enter > span { position: relative; } + .enter .arrow { + position: relative; display: inline-block; + transition: transform 200ms; + } + .enter:hover .arrow { transform: translateX(3px); } + + /* meta strip */ + .meta { + margin-top: 22px; display: flex; gap: 18px; justify-content: center; + font-size: 11px; color: oklch(35% 0.06 230); + text-shadow: 0 1px 0 rgba(255,255,255,0.5); + opacity: 0.75; letter-spacing: 1.5px; text-transform: uppercase; + } + .meta span::before { content: "♦ "; opacity: 0.5; } + .meta span:first-child::before { content: ""; } + + /* tagline at bottom */ + .footer-note { + position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; + font-size: 11px; color: oklch(30% 0.05 230); opacity: 0.7; + text-shadow: 0 1px 0 rgba(255,255,255,0.55); + font-family: "Courier New", monospace; letter-spacing: 1px; + } + .footer-note a { color: inherit; } + + /* tiny corner badges, like classic webrings */ + .badges { + position: fixed; right: 24px; bottom: 24px; + display: flex; gap: 8px; + } + .badge { + height: 24px; padding: 0 10px; + display: inline-flex; align-items: center; + font: 700 9px "Courier New", monospace; letter-spacing: 1.5px; text-transform: uppercase; + color: white; text-shadow: 0 1px 1px rgba(0,0,0,0.4); + border-radius: 4px; + background: linear-gradient(to bottom, oklch(70% 0.13 220), oklch(45% 0.13 230)); + border: 1px solid oklch(35% 0.12 235); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(40,80,140,0.3); + cursor: pointer; + } + .badge.green { background: linear-gradient(to bottom, oklch(75% 0.16 145), oklch(48% 0.14 150)); border-color: oklch(38% 0.13 150); } + .badge.silver { background: linear-gradient(to bottom, oklch(88% 0.02 230), oklch(60% 0.04 235)); border-color: oklch(45% 0.05 240); color: oklch(20% 0.04 240); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } +</style> +</head> +<body> + <div id="bub-stage" style="position:fixed;inset:0;pointer-events:none;z-index:0"></div> + + <div class="stage"> + <div class="gate"> + <div class="mark">❀</div> + <h1 class="title">tyler<em>.xyz</em></h1> + <p class="sub">a quiet little corner of the web — <strong>banker</strong> by day, <strong>jazz pianist</strong> by night, <strong>linux sysadmin</strong> in the in-between. come on in.</p> + <a class="enter" href="index.html"><span>enter</span><span class="arrow">→</span></a> + <div class="meta"> + <span>est. 2019</span> + <span>made with ♥ & vim</span> + <span>no cookies</span> + </div> + </div> + </div> + + <div class="footer-note">tyler hoang © 2026 · hosted on vultr · <a class="aero-link" style="color:inherit;" href="mailto:tyler@tylerhoang.xyz">tyler@tylerhoang.xyz</a></div> + + <div class="badges"> + <div class="badge">best viewed on a real computer</div> + <div class="badge green">javascript on</div> + <div class="badge silver">vim ❤</div> + </div> + +<script src="aero.js"></script> +<script> + Aero.spawnBubbles(document.getElementById('bub-stage'), 26); + Aero.sparkleCursor(); +</script> +</body> +</html> |