mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
157 lines
14 KiB
HTML
157 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>MILES WOLF ALLEN — INTRO</title>
|
|
<meta name="description" content="A retro 2000s animated intro for Miles Wolf Allen.">
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23040b28'/%3E%3Ctext x='50' y='68' fill='%23fff' text-anchor='middle' font-family='Arial Black' font-size='55'%3EM%3C/text%3E%3C/svg%3E">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800;900&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--void:#030518;--blue:#071c70;--electric:#2165ff;--cyan:#00eaff;--violet:#8d4dff;--pink:#ff37cf;--white:#f5f9ff;--silver:#b9cae8;
|
|
--display:'Orbitron',ui-sans-serif,sans-serif;--body:'Space Grotesk',ui-sans-serif,sans-serif;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;min-height:100%;overflow:hidden;background:var(--void)}
|
|
body{color:var(--white);font-family:var(--body);cursor:default}
|
|
button,a{font:inherit;color:inherit}
|
|
a{text-decoration:none}
|
|
|
|
/* deep blue video background */
|
|
.scene{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;background:
|
|
radial-gradient(ellipse at 50% 48%,rgba(26,62,185,.7) 0%,rgba(10,24,93,.55) 31%,transparent 66%),
|
|
radial-gradient(ellipse at 15% 100%,rgba(0,234,255,.18),transparent 42%),
|
|
radial-gradient(ellipse at 90% 10%,rgba(255,55,207,.18),transparent 38%),var(--void)}
|
|
.scene::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.4;background-image:linear-gradient(rgba(125,175,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(125,175,255,.13) 1px,transparent 1px);background-size:70px 70px;transform:perspective(450px) rotateX(62deg) scale(2.1) translateY(22%);transform-origin:center bottom;mask-image:linear-gradient(transparent 0%,#000 48%,#000 100%)}
|
|
.scene::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:20;background:radial-gradient(ellipse at center,transparent 36%,rgba(0,0,20,.63) 100%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,30,.08) 3px 5px)}
|
|
|
|
/* stars and light dust */
|
|
.stars{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(0,234,255,.8) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,55,207,.7) 0 1px,transparent 1.5px);background-size:137px 137px,211px 211px,283px 283px;background-position:12px 29px,81px 12px,31px 78px;animation:starDrift 22s linear infinite}
|
|
@keyframes starDrift{to{background-position:149px 166px,292px 223px,182px 229px}}
|
|
.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px var(--cyan);animation:twinkle var(--d,2s) ease-in-out infinite alternate;opacity:.7}
|
|
@keyframes twinkle{to{opacity:.12;transform:scale(.3)}}
|
|
|
|
/* moving colored ribbons */
|
|
.ribbons{position:absolute;inset:-15%;z-index:2;pointer-events:none;filter:drop-shadow(0 0 8px rgba(0,234,255,.3))}
|
|
.ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;transform-origin:center;}
|
|
.ribbon path{vector-effect:non-scaling-stroke}
|
|
.r-main{stroke:url(#chrome);stroke-width:24;opacity:.92;filter:url(#glow)}
|
|
.r-hot{stroke:url(#hot);stroke-width:5;opacity:.95;filter:url(#glow)}
|
|
.r-thin{stroke:rgba(137,222,255,.8);stroke-width:2;opacity:.8}
|
|
.ribbon.r1{animation:orbit1 15s ease-in-out infinite alternate}
|
|
.ribbon.r2{animation:orbit2 19s ease-in-out infinite alternate-reverse}
|
|
.ribbon.r3{animation:orbit3 13s ease-in-out infinite alternate}
|
|
.ribbon.r4{animation:orbit4 23s ease-in-out infinite alternate-reverse}
|
|
@keyframes orbit1{to{transform:rotate(7deg) scale(1.05) translate(2%,1%)}}
|
|
@keyframes orbit2{to{transform:rotate(-9deg) scale(1.08) translate(-2%,2%)}}
|
|
@keyframes orbit3{to{transform:rotate(5deg) scale(.94) translate(2%,-2%)}}
|
|
@keyframes orbit4{to{transform:rotate(-5deg) scale(1.1) translate(-1%,-1%)}}
|
|
|
|
/* chrome title plate */
|
|
.title-wrap{position:absolute;z-index:8;inset:0;display:grid;place-items:center;text-align:center;padding:10vh 5vw}
|
|
.title-stack{position:relative;transform:perspective(500px) rotateX(6deg) rotateZ(-1deg);animation:titleFloat 4s ease-in-out infinite}
|
|
@keyframes titleFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
|
|
.pre-title{font:600 clamp(11px,1.5vw,18px) var(--display);letter-spacing:.56em;margin-left:.56em;color:var(--cyan);text-shadow:0 0 15px var(--cyan),0 0 30px var(--electric);text-transform:uppercase;animation:blink 3s steps(1) infinite}
|
|
@keyframes blink{0%,92%,100%{opacity:1}94%{opacity:.25}96%{opacity:.8}}
|
|
.name{position:relative;margin:22px 0 8px;font:900 clamp(42px,9.7vw,150px)/.83 var(--display);letter-spacing:-.09em;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--white);filter:drop-shadow(7px 9px 0 rgba(0,0,0,.55));white-space:nowrap}
|
|
.name::before,.name::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
|
|
.name::before{color:transparent;-webkit-text-stroke:1px var(--cyan);transform:translate(-4px,3px);clip-path:polygon(0 13%,100% 13%,100% 27%,0 27%);opacity:.85}
|
|
.name::after{color:transparent;-webkit-text-stroke:1px var(--pink);transform:translate(5px,-2px);clip-path:polygon(0 67%,100% 67%,100% 82%,0 82%);opacity:.8}
|
|
.name .first{display:block;background:linear-gradient(#fff 15%,#bfe8ff 42%,#5072b7 50%,#fff 58%,#526a9b 87%,#eaf6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(4px 5px 0 #07133c)}
|
|
.name .last{display:block;color:var(--pink);-webkit-text-stroke:1px #fff;text-shadow:0 0 12px var(--pink),5px 5px 0 #4d1377,9px 9px 0 rgba(0,0,0,.45);letter-spacing:-.06em}
|
|
.subtitle{font:600 clamp(10px,1.2vw,15px) var(--display);letter-spacing:.22em;color:var(--silver);text-transform:uppercase;text-shadow:0 0 8px var(--electric)}
|
|
|
|
/* small chrome labels */
|
|
.corner{position:absolute;z-index:9;font:600 10px var(--display);letter-spacing:.16em;color:rgba(205,232,255,.75);text-transform:uppercase}
|
|
.corner::before{content:'';display:inline-block;width:24px;height:1px;vertical-align:middle;margin-right:9px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
|
|
.corner.tl{top:36px;left:42px}.corner.tr{top:36px;right:42px;text-align:right}.corner.tr::before{display:none}.corner.tr::after{content:'';display:inline-block;width:24px;height:1px;vertical-align:middle;margin-left:9px;background:var(--pink);box-shadow:0 0 8px var(--pink)}
|
|
.corner.bl{bottom:35px;left:42px}.corner.br{bottom:35px;right:42px;text-align:right}
|
|
.corner .bright{color:var(--pink)}
|
|
|
|
/* orbiting interface details */
|
|
.orbit-label{position:absolute;z-index:9;left:50%;top:50%;width:min(80vw,950px);height:min(80vw,950px);translate:-50% -50%;border:1px solid rgba(89,173,255,.2);border-radius:50%;pointer-events:none;animation:orbitSpin 30s linear infinite}
|
|
.orbit-label::before,.orbit-label::after{content:'MILES WOLF ALLEN';position:absolute;font:600 9px var(--display);letter-spacing:.26em;color:rgba(166,219,255,.55);white-space:nowrap}.orbit-label::before{top:-7px;left:18%;background:var(--void);padding:0 12px}.orbit-label::after{bottom:-7px;right:18%;background:var(--void);padding:0 12px;color:rgba(255,85,222,.65)}
|
|
@keyframes orbitSpin{to{rotate:360deg}}
|
|
.crosshair{position:absolute;z-index:7;left:50%;top:50%;width:32px;height:32px;translate:-50% -50%;opacity:.7}.crosshair::before,.crosshair::after{content:'';position:absolute;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.crosshair::before{left:15px;top:0;width:1px;height:32px}.crosshair::after{left:0;top:15px;width:32px;height:1px}
|
|
|
|
/* enter/replay controls */
|
|
.actions{position:absolute;z-index:10;bottom:clamp(82px,11vh,125px);left:50%;translate:-50% 0;display:flex;align-items:center;gap:14px;white-space:nowrap}.action{border:1px solid rgba(158,221,255,.7);background:rgba(3,10,46,.55);padding:12px 19px;color:var(--white);font:600 10px var(--display);letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 16px rgba(0,102,255,.25),0 0 12px rgba(0,134,255,.22);transition:all .25s;backdrop-filter:blur(5px)}.action:hover{background:var(--cyan);border-color:var(--cyan);color:#02051b;box-shadow:0 0 25px var(--cyan);transform:translateY(-3px)}.action.primary{background:linear-gradient(110deg,var(--pink),#9a32ff);border-color:var(--pink);box-shadow:0 0 20px rgba(255,55,207,.35),5px 5px 0 rgba(0,0,0,.35)}.action.primary:hover{background:var(--white);border-color:var(--white);box-shadow:0 0 25px var(--white),5px 5px 0 var(--pink)}
|
|
|
|
/* progress line */
|
|
.progress{position:absolute;z-index:11;bottom:25px;left:50%;translate:-50% 0;width:min(380px,52vw);height:2px;background:rgba(169,212,255,.25)}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 9px var(--cyan);animation:progress 4.4s linear forwards}.progress span{position:absolute;left:0;top:8px;font:400 8px var(--display);letter-spacing:.18em;color:rgba(187,220,255,.5)}.progress b{position:absolute;right:0;top:8px;font:400 8px var(--display);letter-spacing:.18em;color:rgba(255,123,229,.65)}
|
|
@keyframes progress{to{width:100%}}
|
|
|
|
/* intro entrance */
|
|
.scene.ready .ribbons{animation:none}.scene.ready .title-stack{animation:titleReveal 1.4s var(--ease) both}.scene.ready .name{animation:chromeFlash 1.7s .35s both}.scene.ready .actions{animation:actionsIn 1s 1.2s both}
|
|
@keyframes titleReveal{from{opacity:0;scale:.8;filter:blur(12px)}to{opacity:1;scale:1;filter:none}}
|
|
@keyframes chromeFlash{0%{filter:brightness(4) blur(5px);opacity:0}45%{filter:brightness(2.2) blur(0);opacity:1}100%{filter:brightness(1) drop-shadow(7px 9px 0 rgba(0,0,0,.55));opacity:1}}
|
|
@keyframes actionsIn{from{opacity:0;translate:-50% 20px}to{opacity:1;translate:-50% 0}}
|
|
|
|
@media(max-width:650px){
|
|
.corner{font-size:8px}.corner.tl{top:22px;left:18px}.corner.tr{top:22px;right:18px}.corner.bl{bottom:22px;left:18px}.corner.br{bottom:22px;right:18px}
|
|
.name{white-space:normal;letter-spacing:-.1em}.name .first,.name .last{display:block}.subtitle{letter-spacing:.1em}.orbit-label{width:125vw;height:125vw}.actions{bottom:76px;gap:8px}.action{padding:11px 12px;font-size:8px}.progress{bottom:23px;width:65vw}
|
|
.r-main{stroke-width:16}.browser{}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.progress i{width:100%}.title-stack{opacity:1!important}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="scene" id="scene">
|
|
<div class="stars" aria-hidden="true"></div>
|
|
<span class="spark" style="left:12%;top:23%;--d:1.7s"></span><span class="spark" style="left:83%;top:30%;--d:2.3s"></span><span class="spark" style="left:71%;top:75%;--d:1.4s"></span><span class="spark" style="left:25%;top:79%;--d:2.8s"></span><span class="spark" style="left:92%;top:62%;--d:1.9s"></span>
|
|
|
|
<div class="corner tl">MILES / INTRO <span class="bright">01</span></div>
|
|
<div class="corner tr">CREATIVE DEVELOPER</div>
|
|
<div class="corner bl">DISKETTE LABS / 2026</div>
|
|
<div class="corner br">PRESS ENTER <span class="bright">↗</span></div>
|
|
|
|
<div class="orbit-label" aria-hidden="true"></div><div class="crosshair" aria-hidden="true"></div>
|
|
|
|
<svg class="ribbons" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="chrome" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#173a9b"/><stop offset=".16" stop-color="#dff7ff"/><stop offset=".28" stop-color="#4d74d0"/><stop offset=".45" stop-color="#f8ffff"/><stop offset=".61" stop-color="#4566b3"/><stop offset=".8" stop-color="#c4eaff"/><stop offset="1" stop-color="#19398d"/></linearGradient>
|
|
<linearGradient id="hot" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#00eaff"/><stop offset=".48" stop-color="#fff"/><stop offset=".7" stop-color="#ff37cf"/><stop offset="1" stop-color="#8d4dff"/></linearGradient>
|
|
<filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
</defs>
|
|
<g class="ribbon r1"><path class="r-main" d="M-90 650 C90 120 280 60 410 315 S640 810 790 420 S1020 40 1320 235"/><path class="r-hot" d="M-90 650 C90 120 280 60 410 315 S640 810 790 420 S1020 40 1320 235"/><path class="r-thin" d="M-70 670 C110 140 295 75 425 330 S655 825 805 435 S1035 55 1335 250"/></g>
|
|
<g class="ribbon r2"><path class="r-main" d="M-120 210 C130 520 300 720 485 540 S680 70 890 245 S1090 720 1330 630"/><path class="r-hot" d="M-120 210 C130 520 300 720 485 540 S680 70 890 245 S1090 720 1330 630"/><path class="r-thin" d="M-120 190 C130 500 310 700 500 520 S695 50 905 225 S1110 700 1340 610"/></g>
|
|
<g class="ribbon r3"><path class="r-main" d="M70 930 C-20 670 130 460 330 510 S610 740 740 540 S920 130 1170 -30"/><path class="r-hot" d="M70 930 C-20 670 130 460 330 510 S610 740 740 540 S920 130 1170 -30"/></g>
|
|
<g class="ribbon r4"><path class="r-main" d="M-80 470 C170 240 295 245 430 440 S680 650 815 430 S1050 200 1300 420"/><path class="r-hot" d="M-80 470 C170 240 295 245 430 440 S680 650 815 430 S1050 200 1300 420"/></g>
|
|
</svg>
|
|
|
|
<div class="title-wrap">
|
|
<div class="title-stack">
|
|
<div class="pre-title">WELCOME TO THE WORLD OF</div>
|
|
<h1 class="name" data-text="MILES WOLF ALLEN"><span class="first">MILES WOLF</span><span class="last">ALLEN</span></h1>
|
|
<div class="subtitle">DEVELOPER · 3D ARTIST · BUILDER OF THINGS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions"><a class="action primary" href="../index.html">ENTER SITE ↗</a><button class="action" id="replay" type="button">REPLAY INTRO ↻</button></div>
|
|
<div class="progress"><i></i><span>LOADING PERSONALITY</span><b>100%</b></div>
|
|
</section>
|
|
<script>
|
|
(function(){
|
|
var scene=document.getElementById('scene');
|
|
var replay=document.getElementById('replay');
|
|
function restart(){
|
|
scene.classList.remove('ready');
|
|
var progress=document.querySelector('.progress i');
|
|
if(progress){progress.style.animation='none';void progress.offsetWidth;progress.style.animation='';}
|
|
void scene.offsetWidth;
|
|
scene.classList.add('ready');
|
|
}
|
|
setTimeout(function(){scene.classList.add('ready')},80);
|
|
if(replay)replay.addEventListener('click',restart);
|
|
document.addEventListener('keydown',function(event){
|
|
if(event.key==='Enter'){window.location.href='../index.html';}
|
|
if(event.key.toLowerCase()==='r')restart();
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|