mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>top shows · miles wolf allen</title>
|
||
<meta name="description" content="Miles Wolf Allen's top shows: Jujutsu Kaisen, Dr. Stone, and Invincible — ranked with details.">
|
||
<meta name="author" content="Miles Wolf Allen">
|
||
<link rel="canonical" href="https://milesallen.site/top-shows.html">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="top shows · miles wolf allen">
|
||
<meta property="og:description" content="My top 3 shows, ranked: their stats, what they're about, and why they made the list.">
|
||
<meta property="og:url" content="https://milesallen.site/top-shows.html">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="top shows · miles wolf allen">
|
||
<meta name="twitter:description" content="My top 3 shows, ranked: their stats, what they're about, and why they made the list.">
|
||
<link rel="icon" type="image/png" href="favicon.png">
|
||
<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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||
|
||
<style>
|
||
:root{
|
||
--page:#eef1f5;
|
||
--card:#ffffff;
|
||
--border:#e3e8ee;
|
||
--text:#14161a;
|
||
--muted:#647182;
|
||
--accent:#1d9bf0;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box;}
|
||
html{scroll-behavior:smooth;}
|
||
body{
|
||
background:var(--page);color:var(--text);
|
||
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
|
||
-webkit-font-smoothing:antialiased;
|
||
line-height:1.6;
|
||
display:flex;flex-direction:column;align-items:center;
|
||
min-height:100vh;padding:40px 20px 64px;
|
||
overflow-x:hidden;position:relative;
|
||
}
|
||
body::after{
|
||
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||
background-image:
|
||
linear-gradient(rgba(20,22,26,.045) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(20,22,26,.045) 1px, transparent 1px);
|
||
background-size:44px 44px;
|
||
-webkit-mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
|
||
mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
|
||
}
|
||
#bgCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;}
|
||
a{color:inherit;text-decoration:none;}
|
||
|
||
.page-head{width:100%;max-width:680px;text-align:center;margin-bottom:26px;}
|
||
.crumbs{font-size:12px;color:var(--muted);}
|
||
.crumbs a{color:var(--accent);font-weight:600;}
|
||
.crumbs a:hover{text-decoration:underline;}
|
||
.page-title{font-size:30px;font-weight:900;letter-spacing:-.02em;margin-top:8px;}
|
||
.page-sub{font-size:14px;color:var(--muted);margin-top:6px;}
|
||
|
||
.card{
|
||
width:100%;max-width:680px;display:flex;flex-direction:column;gap:18px;
|
||
}
|
||
|
||
.show{
|
||
background:var(--card);border:1px solid var(--border);border-radius:18px;
|
||
overflow:hidden;display:flex;gap:20px;padding:22px;
|
||
box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.10);
|
||
}
|
||
.poster{position:relative;flex-shrink:0;width:130px;align-self:flex-start;}
|
||
.poster img{width:130px;height:auto;border-radius:12px;display:block;border:1px solid var(--border);
|
||
box-shadow:0 6px 18px rgba(16,24,40,.18);}
|
||
.score{
|
||
position:absolute;right:-14px;bottom:-12px;width:56px;height:56px;border-radius:50%;
|
||
display:flex;align-items:center;justify-content:center;flex-direction:column;
|
||
color:#fff;font-weight:900;font-size:17px;line-height:1;
|
||
border:3px solid var(--card);
|
||
}
|
||
.score .of{font-size:9px;font-weight:700;letter-spacing:.04em;margin-top:2px;opacity:.95;}
|
||
.score.s1{background:linear-gradient(135deg,#f6c343,#e8930a);box-shadow:0 4px 14px rgba(232,147,10,.5);}
|
||
.score.s2{background:linear-gradient(135deg,#cfd6df,#8b96a5);box-shadow:0 4px 14px rgba(139,150,165,.45);}
|
||
.score.s3{background:linear-gradient(135deg,#e2a06e,#b06a3c);box-shadow:0 4px 14px rgba(176,106,60,.45);}
|
||
.rank{
|
||
width:56px;height:56px;border-radius:50%;flex-shrink:0;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-weight:900;font-size:24px;color:#fff;
|
||
margin-top:4px;
|
||
}
|
||
.rank.r1{background:linear-gradient(135deg,#f6c343,#e8930a);box-shadow:0 4px 14px rgba(232,147,10,.4);}
|
||
.rank.r2{background:linear-gradient(135deg,#cfd6df,#949fad);box-shadow:0 4px 14px rgba(148,159,173,.35);}
|
||
.rank.r3{background:linear-gradient(135deg,#e2a06e,#b06a3c);box-shadow:0 4px 14px rgba(176,106,60,.35);}
|
||
.show-body{flex:1;min-width:0;}
|
||
.show-title{font-size:21px;font-weight:800;letter-spacing:-.01em;}
|
||
.show-type{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
|
||
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
|
||
.chip{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:#f7f9fb;}
|
||
.synopsis{font-size:14px;color:#2a2f37;margin-top:13px;}
|
||
.why{margin-top:13px;font-size:13.5px;background:#f4f8fc;border-left:3px solid var(--accent);border-radius:8px;padding:11px 14px;}
|
||
.why b{color:var(--text);}
|
||
|
||
.back{width:100%;max-width:680px;text-align:center;margin-top:30px;}
|
||
.back a{display:inline-block;font-size:14px;font-weight:700;color:var(--accent);border:1px solid var(--border);background:var(--card);padding:10px 20px;border-radius:999px;transition:all .15s;}
|
||
.back a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,155,240,.15);}
|
||
|
||
.no-grav{margin-top:34px;font-size:13px;color:var(--muted);text-align:center;}
|
||
.no-grav a{color:var(--accent);font-weight:600;}
|
||
.no-grav a:hover{text-decoration:underline;}
|
||
|
||
/* ---- Load entrance (only active while .anim is applied) ---- */
|
||
.anim [data-anim]{opacity:0;}
|
||
.anim .rank{will-change:transform,opacity;}
|
||
.anim .show{will-change:transform,opacity;}
|
||
|
||
@media(max-width:560px){
|
||
body{padding:32px 16px 48px;}
|
||
.page-title{font-size:24px;}
|
||
.show{padding:18px;gap:16px;flex-direction:row;align-items:flex-start;}
|
||
.poster{width:96px;}
|
||
.poster img{width:96px;}
|
||
.score{right:-10px;bottom:-10px;width:48px;height:48px;font-size:14px;}
|
||
.show-title{font-size:18px;}
|
||
.rank{width:40px;height:40px;font-size:17px;}
|
||
}
|
||
@media(max-width:420px){
|
||
.show{flex-direction:column;align-items:flex-start;}
|
||
.poster{width:120px;}
|
||
.poster img{width:120px;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<canvas id="bgCanvas" aria-hidden="true"></canvas>
|
||
|
||
<div class="page-head">
|
||
<div class="crumbs"><a href="share.html">↩ miles wolf allen</a></div>
|
||
<div class="page-title" data-anim="txt">top shows</div>
|
||
<div class="page-sub" data-anim="txt">my current top 3 shows, ranked & scored</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
|
||
<div class="show" data-anim="show">
|
||
<div class="poster" data-anim="poster">
|
||
<img src="https://image.tmdb.org/t/p/w400/fHpKWq9ayzSk8nSwqRuaAUemRKh.jpg" alt="Jujutsu Kaisen poster" loading="lazy">
|
||
<span class="score s1"><span>10</span><span class="of">/10</span></span>
|
||
</div>
|
||
<div class="rank r1" data-anim="rank">1</div>
|
||
<div class="show-body">
|
||
<div class="show-title">Jujutsu Kaisen</div>
|
||
<div class="show-type">anime · action · dark fantasy</div>
|
||
<div class="chips">
|
||
<span class="chip">Studio MAPPA</span>
|
||
<span class="chip">2020–present</span>
|
||
<span class="chip">action</span>
|
||
<span class="chip">supernatural</span>
|
||
</div>
|
||
<p class="synopsis">After swallowing the rotting finger of the ancient curse Sukuna, ordinary high schooler Yuji Itadori becomes the vessel for one of the most dangerous spirits in existence. Thrown into the hidden world of jujutsu sorcerers, he joins Tokyo Jujutsu High to exorcise curses — and train until he can destroy Sukuna from within.</p>
|
||
<p class="why"><b>Why it's #1:</b> unmatched fight choreography, gorgeous animation, a genuinely intense atmosphere.do i need to say more?</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="show" data-anim="show">
|
||
<div class="poster" data-anim="poster">
|
||
<img src="https://image.tmdb.org/t/p/w400/xbZQ3fDl0y5mt0ARwfeyrgQ4JTw.jpg" alt="Dr. Stone poster" loading="lazy">
|
||
<span class="score s2"><span>8.5</span><span class="of">/10</span></span>
|
||
</div>
|
||
<div class="rank r2" data-anim="rank">2</div>
|
||
<div class="show-body">
|
||
<div class="show-title">Dr. Stone</div>
|
||
<div class="show-type">anime · adventure · sci-fi</div>
|
||
<div class="chips">
|
||
<span class="chip">Studio TMS / 8-PAN</span>
|
||
<span class="chip">2019–present</span>
|
||
<span class="chip">science</span>
|
||
<span class="chip">comedy</span>
|
||
</div>
|
||
<p class="synopsis">In the blink of an eye, all of humanity is turned to stone — and stays that way for 3,700 years. When genius high schooler Senku Ishigami finally awakens, he finds civilization in ruins and sets out to rebuild it from scratch, one scientific breakthrough at a time: stone tools, gunpowder, electricity, and beyond.</p>
|
||
<p class="why"><b>Why it's #2:</b> it makes real science feel like a superpower, with clever problem-solving and a fun cast that keeps the "step by step" progression endlessly satisfying. but if you do not like science, it might not be as engaging and boring to watch.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="show" data-anim="show">
|
||
<div class="poster" data-anim="poster">
|
||
<img src="https://image.tmdb.org/t/p/w400/4tblBrslcKSifMVZ3TmtT2ukMor.jpg" alt="Invincible poster" loading="lazy">
|
||
<span class="score s3"><span>7.5</span><span class="of">/10</span></span>
|
||
</div>
|
||
<div class="rank r3" data-anim="rank">3</div>
|
||
<div class="show-body">
|
||
<div class="show-title">Invincible</div>
|
||
<div class="show-type">animated series · superhero · drama</div>
|
||
<div class="chips">
|
||
<span class="chip">Amazon Prime Video</span>
|
||
<span class="chip">2021–present</span>
|
||
<span class="chip">superhero</span>
|
||
<span class="chip">action-drama</span>
|
||
</div>
|
||
<p class="synopsis">Mark Grayson is just a regular teenager — until he inherits superpowers from his father, Omni-Man, Earth's greatest hero. As the rookie hero Invincible, he learns that being the son of a legend is nowhere near as simple as it looks when a dark family secret threatens everything he thought he knew.</p>
|
||
<p class="why"><b>Why it's #3:</b> it's number three because of the way it toys around with superhero ideas in flipping them around, truly having complex characters that can actually change, it does the cliché of the evil superhero very well and really shows itself off even on the first episode alone.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="back" data-anim="fade">
|
||
<a href="share.html">← back to my profile</a>
|
||
</div>
|
||
|
||
<div class="no-grav" data-anim="fade">made by <a href="index.html">miles</a>. not ai</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
|
||
<script>
|
||
(function(){
|
||
|
||
// ---- Ambient aurora + particle background ----
|
||
(function bg(){
|
||
var canvas = document.getElementById('bgCanvas');
|
||
if(!canvas) return;
|
||
var ctx = canvas.getContext('2d');
|
||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
var orbs = [];
|
||
var parts = [];
|
||
var COLORS = [
|
||
[29,155,240], // blue
|
||
[255,61,154], // pink
|
||
[34,211,153], // mint
|
||
[168,85,247] // purple
|
||
];
|
||
function resize(){
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
seed();
|
||
}
|
||
function seed(){
|
||
orbs = []; parts = [];
|
||
var w = canvas.width, h = canvas.height;
|
||
var oCount = Math.min(7, Math.round(w / 200) + 3);
|
||
for(var i=0;i<oCount;i++){
|
||
orbs.push({
|
||
x: Math.random()*w, y: Math.random()*h,
|
||
r: 110 + Math.random()*220,
|
||
c: COLORS[i % COLORS.length],
|
||
sp: 0.10 + Math.random()*0.22,
|
||
a: 0.14 + Math.random()*0.12,
|
||
ox: Math.random()*1000, oy: Math.random()*1000
|
||
});
|
||
}
|
||
var pCount = Math.min(80, Math.round(w*h/18000));
|
||
for(var j=0;j<pCount;j++){
|
||
parts.push({
|
||
x: Math.random()*w, y: Math.random()*h,
|
||
r: 0.6 + Math.random()*1.6,
|
||
sp: 0.05 + Math.random()*0.25,
|
||
ph: Math.random()*Math.PI*2, oy: Math.random()*100
|
||
});
|
||
}
|
||
}
|
||
var t = 0;
|
||
function frame(){
|
||
requestAnimationFrame(frame);
|
||
if(reduced) return;
|
||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||
t += 0.008;
|
||
ctx.globalCompositeOperation = 'screen';
|
||
for(var i=0;i<orbs.length;i++){
|
||
var o = orbs[i];
|
||
var nx = o.x + Math.sin(t*o.sp + o.ox) * (o.r*0.9);
|
||
var ny = o.y + Math.cos(t*o.sp*0.8 + o.oy) * (o.r*0.7) * 0.8;
|
||
var g = ctx.createRadialGradient(nx,ny,0,nx,ny,o.r);
|
||
g.addColorStop(0, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+','+o.a+')');
|
||
g.addColorStop(1, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+',0)');
|
||
ctx.fillStyle = g;
|
||
ctx.beginPath(); ctx.arc(nx,ny,o.r,0,Math.PI*2); ctx.fill();
|
||
}
|
||
ctx.globalCompositeOperation = 'source-over';
|
||
ctx.fillStyle = 'rgba(40,50,70,0.35)';
|
||
for(var p=0;p<parts.length;p++){
|
||
var pt = parts[p];
|
||
var px = pt.x + Math.sin(t*pt.sp + pt.ph) * 40;
|
||
var py = pt.y + Math.cos(t*pt.sp*0.7 + pt.ph*1.7 + pt.oy) * 26;
|
||
var tw = 0.4 + 0.6*Math.abs(Math.sin(t*0.6 + pt.ph));
|
||
ctx.globalAlpha = tw*0.6;
|
||
ctx.beginPath(); ctx.arc(px%canvas.width, py%canvas.height, pt.r, 0, Math.PI*2); ctx.fill();
|
||
}
|
||
ctx.globalAlpha = 1;
|
||
}
|
||
window.addEventListener('resize', resize);
|
||
resize(); frame();
|
||
})();
|
||
|
||
// ---- Choreographed load entrance (Anime.js) ----
|
||
(function load(){
|
||
var body = document.body;
|
||
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
body.classList.add('anim');
|
||
var done = function(){ body.classList.remove('anim'); };
|
||
if (!window.anime || reduced) { done(); return; }
|
||
var tl = anime.timeline({ complete: done });
|
||
tl
|
||
.add({ targets:'[data-anim="txt"]', translateY:[26,0], opacity:[0,1],
|
||
duration:560, delay:anime.stagger(90), easing:'easeOutExpo' })
|
||
.add({ targets:'[data-anim="rank"]', scale:[0.3,1.08,1], rotate:[-12,3,0], opacity:[0,1],
|
||
duration:780, delay:anime.stagger(70), easing:'easeOutElastic(1,0.65)', offset:'-=260' })
|
||
.add({ targets:'[data-anim="show"]', translateY:[40,0], opacity:[0,1],
|
||
duration:600, delay:anime.stagger(120), easing:'easeOutQuint', offset:0 })
|
||
.add({ targets:'[data-anim="poster"]', scale:[0.7,1], rotate:[-3,0], opacity:[0,1],
|
||
duration:520, delay:anime.stagger(120), easing:'easeOutBack(1.6)', offset:'-=500' })
|
||
.add({ targets:'[data-anim="fade"]', translateY:[10,0], opacity:[0,1],
|
||
duration:420, easing:'easeOutQuart', offset:'-=120' });
|
||
})();
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|