mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
493 lines
27 KiB
HTML
493 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>miles wolf allen</title>
|
|
<meta name="description" content="miles wolf allen — Software engineer. Developer and 3D artist interested in coding, games, and web technology. Currently learning Rust.">
|
|
<meta name="author" content="Miles Wolf Allen">
|
|
<link rel="canonical" href="https://milesallen.site/share.html">
|
|
<meta property="og:type" content="profile">
|
|
<meta property="og:title" content="miles wolf allen">
|
|
<meta property="og:description" content="Software engineer. Developer and 3D artist interested in coding, games, and web technology. Currently learning Rust.">
|
|
<meta property="og:url" content="https://milesallen.site/share.html">
|
|
<meta property="og:image" content="https://avatars.githubusercontent.com/u/115095719?v=4">
|
|
<meta property="og:site_name" content="miles wolf allen">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="miles wolf allen">
|
|
<meta name="twitter:description" content="Software engineer. Developer and 3D artist interested in coding, games, and web technology.">
|
|
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/115095719?v=4">
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Miles Wolf Allen",
|
|
"url": "https://milesallen.site/",
|
|
"image": "https://avatars.githubusercontent.com/u/115095719?v=4",
|
|
"email": "mailto:[email protected]",
|
|
"telephone": "+1-763-312-1150",
|
|
"jobTitle": "Software Engineer",
|
|
"knowsAbout": ["Software Development", "Game Development", "Web Technology", "Rust"],
|
|
"sameAs": [
|
|
"https://bsky.app/profile/wolfreaper90.bsky.social",
|
|
"https://github.com/mileswolfallen2",
|
|
"https://open.spotify.com/user/31bodx3k4uok7wcmm64hovz57udu",
|
|
"https://www.youtube.com/channel/UCeUJbFoCDwUUg6uZi-G-zhQ"
|
|
]
|
|
}
|
|
</script>
|
|
<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&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.5;
|
|
display:flex;flex-direction:column;align-items:center;
|
|
min-height:100vh;padding:40px 20px 64px;
|
|
overflow-x:hidden;position:relative;
|
|
}
|
|
body::before{
|
|
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
|
|
}
|
|
#bgCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;}
|
|
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%);
|
|
}
|
|
a{color:inherit;text-decoration:none;}
|
|
|
|
.card{
|
|
width:100%;max-width:600px;
|
|
background:var(--card);
|
|
border:1px solid var(--border);
|
|
border-radius:16px;
|
|
overflow:hidden;
|
|
box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.08);
|
|
}
|
|
|
|
.banner{height:160px;overflow:hidden;background:#dbe1e8;}
|
|
.banner img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
|
|
|
|
.profile{padding:0 24px 24px;}
|
|
.avatar{
|
|
display:block;width:120px;height:120px;border-radius:50%;
|
|
border:4px solid var(--card);
|
|
background:#e5e9ee;
|
|
box-shadow:0 2px 10px rgba(16,24,40,.2);
|
|
object-fit:cover;margin-top:-56px;
|
|
}
|
|
.name{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-top:14px;line-height:1.2;}
|
|
.handle{font-size:14px;color:var(--muted);margin-top:3px;}
|
|
.meta{font-size:13px;color:var(--muted);margin-top:8px;}
|
|
.meta b{color:var(--text);font-weight:600;}
|
|
.bio{font-size:15px;margin-top:16px;}
|
|
.bio a{color:var(--accent);}
|
|
.bio a:hover{text-decoration:underline;}
|
|
|
|
.socials{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px;}
|
|
.soc{
|
|
display:flex;align-items:center;justify-content:center;
|
|
height:44px;border:1px solid var(--border);border-radius:12px;
|
|
color:var(--muted);transition:all .15s;
|
|
}
|
|
.soc svg{width:22px;height:22px;fill:currentColor;}
|
|
.soc:hover{color:var(--accent);border-color:var(--accent);background:#f6fafe;transform:translateY(-2px);}
|
|
|
|
.section{border-top:1px solid var(--border);padding:20px 24px;}
|
|
.sec-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
|
|
.sec-hint{font-size:14px;color:var(--muted);margin-bottom:14px;}
|
|
|
|
.row{
|
|
display:flex;align-items:center;gap:12px;
|
|
padding:13px 10px;border-radius:10px;
|
|
border-bottom:1px solid var(--border);
|
|
transition:background .15s;
|
|
}
|
|
.section .row:last-child{border-bottom:none;}
|
|
.row:hover{background:#f7f9fb;}
|
|
.row .ico{
|
|
width:36px;height:36px;border-radius:10px;flex-shrink:0;
|
|
background:#eef3f8;display:flex;align-items:center;justify-content:center;
|
|
}
|
|
.row .ico svg{width:19px;height:19px;fill:#4b5563;}
|
|
.row .r-body{flex:1;min-width:0;}
|
|
.row .r-title{font-size:14px;font-weight:600;}
|
|
.row .r-right{font-size:13px;color:var(--muted);flex-shrink:0;}
|
|
|
|
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
|
|
.cell{
|
|
border:1px solid var(--border);border-radius:12px;padding:16px;
|
|
transition:border-color .15s,background .15s;
|
|
}
|
|
.cell:hover{border-color:var(--accent);background:#f7fbfe;}
|
|
.cell .ck{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
|
|
.cell .cv{font-size:14px;font-weight:600;margin-top:6px;word-break:break-all;}
|
|
.cell a.cv{color:var(--accent);}
|
|
|
|
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
|
|
.btn{
|
|
font-family:inherit;font-size:13px;font-weight:700;
|
|
padding:8px 16px;border-radius:999px;cursor:pointer;
|
|
border:1px solid var(--border);background:var(--card);color:var(--text);
|
|
transition:background .15s,border-color .15s;
|
|
}
|
|
.btn:hover{background:#f4f6f9;}
|
|
.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff;}
|
|
.btn-solid:hover{background:#1a89d8;}
|
|
|
|
.no-grav{margin-top:26px;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;}
|
|
.sublink{margin-top:22px;text-align:center;}
|
|
.sublink a{display:inline-block;font-size:13px;font-weight:700;color:var(--accent);border:1px solid var(--border);background:var(--card);padding:9px 18px;border-radius:999px;transition:all .15s;}
|
|
.sublink a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,155,240,.15);}
|
|
|
|
@media(max-width:520px){
|
|
body{padding:0 0 40px;}
|
|
.banner{height:120px;}
|
|
.profile{padding:0 16px 20px;}
|
|
.section{padding:18px 16px;}
|
|
.avatar{width:92px;height:92px;margin-top:-44px;}
|
|
.socials{grid-template-columns:repeat(4,1fr);}
|
|
.contact-grid{grid-template-columns:1fr;}
|
|
}
|
|
|
|
/* ---- Load entrance (only active while .anim is applied) ---- */
|
|
.anim [data-anim]{opacity:0;}
|
|
.anim .avatar{will-change:transform,opacity;}
|
|
.anim .card{will-change:transform,opacity;}
|
|
.soc{transition:transform .18s ease,color .15s,border-color .15s,background .15s;}
|
|
.soc:hover{transform:translateY(-3px) scale(1.04);}
|
|
.btn-solid{transform-origin:center;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="bgCanvas" aria-hidden="true"></canvas>
|
|
|
|
<div class="card">
|
|
<div class="banner" data-anim="banner">
|
|
<img src="back.jpg" alt="" aria-hidden="true">
|
|
</div>
|
|
|
|
<div class="profile">
|
|
<img class="avatar" data-anim="avatar" src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="miles wolf allen" width="120" height="120">
|
|
<div class="name" data-anim="txt">miles wolf allen</div>
|
|
<div class="handle" data-anim="txt">@wolf_reaper90 · software engineer</div>
|
|
<div class="meta" data-anim="txt">he/him · <b>MN, USA</b> · <span id="tzWatch">local time --:--:--</span></div>
|
|
|
|
<p class="bio" data-anim="bio">Developer and 3D artist interested in coding, games, and web technology. Currently learning Rust. <a href="https://milesallen.site">↗ milesallen.site</a></p>
|
|
|
|
<div class="socials">
|
|
<a class="soc" data-anim="soc" href="https://bsky.app/profile/wolfreaper90.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky">
|
|
<svg viewBox="0 0 24 24"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg>
|
|
</a>
|
|
<a class="soc" data-anim="soc" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
|
</a>
|
|
<a class="soc" data-anim="soc" href="https://discord.com/users/1058108777112543402" target="_blank" rel="noopener" aria-label="Discord">
|
|
<svg viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>
|
|
</a>
|
|
<a class="soc" data-anim="soc" href="https://www.youtube.com/channel/UCeUJbFoCDwUUg6uZi-G-zhQ" target="_blank" rel="noopener" aria-label="YouTube">
|
|
<svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" data-anim="section">
|
|
<div class="sec-title">Profiles</div>
|
|
<a class="row" href="https://bsky.app/profile/wolfreaper90.bsky.social" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></span>
|
|
<span class="r-body"><span class="r-title">Bluesky</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://github.com/mileswolfallen2" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span>
|
|
<span class="r-body"><span class="r-title">GitHub</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://www.npmjs.com/~wolf_reaper91" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg></span>
|
|
<span class="r-body"><span class="r-title">npm</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://x.com/Mileswa1q2" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg></span>
|
|
<span class="r-body"><span class="r-title">X</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://www.threads.net/@mileswa1q2" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg></span>
|
|
<span class="r-body"><span class="r-title">Threads</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://open.spotify.com/user/31bodx3k4uok7wcmm64hovz57udu" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg></span>
|
|
<span class="r-body"><span class="r-title">Spotify</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://www.youtube.com/channel/UCeUJbFoCDwUUg6uZi-G-zhQ" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span>
|
|
<span class="r-body"><span class="r-title">YouTube</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
<a class="row" href="https://discord.com/users/1058108777112543402" target="_blank" rel="noopener">
|
|
<span class="ico"><svg viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg></span>
|
|
<span class="r-body"><span class="r-title">Discord</span></span>
|
|
<span class="r-right">↗</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="section" data-anim="section">
|
|
<div class="sec-title">Contact</div>
|
|
<div class="contact-grid">
|
|
<a class="cell" href="mailto:[email protected]">
|
|
<div class="ck">Email</div>
|
|
<div class="cv">[email protected]</div>
|
|
</a>
|
|
<a class="cell" href="tel:+17633121150">
|
|
<div class="ck">Phone</div>
|
|
<div class="cv">763-312-1150</div>
|
|
</a>
|
|
</div>
|
|
<div class="share-row">
|
|
<a class="btn" href="mailto:?subject=miles%20wolf%20allen&body=Check%20out%20miles%20wolf%20allen%3A%20https%3A%2F%2Fmilesallen.site%2Fshare.html">Share via email</a>
|
|
<button class="btn btn-solid" id="copyBtn" type="button">Copy link</button>
|
|
<button class="btn" id="vcBtn" type="button">Save contact</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sublink" data-anim="fade"><a href="top-shows.html">⬉ my top shows</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;
|
|
|
|
// aurora orbs with slow, fluid drift (composited soft light)
|
|
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';
|
|
|
|
// drifting particle specks
|
|
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();
|
|
})();
|
|
|
|
var copyBtn = document.getElementById('copyBtn');
|
|
if(copyBtn) copyBtn.addEventListener('click', function(){
|
|
copyText('https://milesallen.site/share.html', copyBtn, function(){ flash(copyBtn, 'Copied!'); });
|
|
});
|
|
|
|
var vcBtn = document.getElementById('vcBtn');
|
|
if(vcBtn) vcBtn.addEventListener('click', function(){
|
|
var vcard = [
|
|
'BEGIN:VCARD','VERSION:3.0','N:Allen;Miles Wolf;;;','FN:Miles Wolf Allen',
|
|
'ORG:Diskette Labs','TITLE:Software Engineer','TEL;TYPE=CELL:+1-763-312-1150',
|
|
'EMAIL;TYPE=INTERNET:[email protected]','URL:https://milesallen.site',
|
|
'END:VCARD'
|
|
].join('\r\n');
|
|
var blob = new Blob([vcard], { type: 'text/vcard' });
|
|
var a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = 'miles-wolf-allen.vcf';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
setTimeout(function(){ URL.revokeObjectURL(a.href); }, 400);
|
|
flash(vcBtn, 'Saved!');
|
|
});
|
|
|
|
function tzClock(){
|
|
var d = new Date(), tf;
|
|
try {
|
|
tf = new Intl.DateTimeFormat('en-US', { timeZone:'America/Chicago', hour:'2-digit', minute:'2-digit', hour12:true });
|
|
} catch(e){ return; }
|
|
var w = document.getElementById('tzWatch');
|
|
if(w) w.textContent = 'local time ' + tf.format(d);
|
|
}
|
|
tzClock();
|
|
setInterval(tzClock, 30000);
|
|
|
|
function copyText(txt, btn, done){
|
|
var ok = function(){ if(done) done(); };
|
|
var fail = function(){
|
|
var ta = document.createElement('textarea');
|
|
ta.value = txt; ta.style.position = 'fixed'; ta.style.opacity = '0';
|
|
document.body.appendChild(ta); ta.select();
|
|
try { document.execCommand('copy'); ok(); } catch(e){ if(done) done(); }
|
|
document.body.removeChild(ta);
|
|
};
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(txt).then(ok, fail);
|
|
} else { fail(); }
|
|
}
|
|
function flash(btn, txt){
|
|
var old = btn.textContent;
|
|
btn.textContent = txt; btn.disabled = true;
|
|
setTimeout(function(){ btn.textContent = old; btn.disabled = false; }, 1400);
|
|
}
|
|
|
|
// ---- 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; }
|
|
|
|
// gentle continuous pulse on the copy button via Animate.css
|
|
var copyBtn2 = document.getElementById('copyBtn');
|
|
if (copyBtn2) copyBtn2.classList.add('animate__animated','animate__pulse','animate__infinite','animate__slower');
|
|
|
|
var tl = anime.timeline({ complete: done });
|
|
|
|
tl
|
|
.add({
|
|
targets: '[data-anim="banner"]',
|
|
translateY:[-46,0], scaleY:[0,1], opacity:[0,1],
|
|
transformOrigin:'50% 0%',
|
|
duration:760, easing:'easeOutQuart'
|
|
})
|
|
.add({
|
|
targets: '[data-anim="avatar"]',
|
|
scale:[0.3,1.06,1], opacity:[0,1], rotate:[-12,3,0],
|
|
duration:850, easing:'easeOutElastic(1,0.6)',
|
|
offset:'-=520'
|
|
})
|
|
.add({
|
|
targets: '[data-anim="txt"]',
|
|
translateY:[28,0], opacity:[0,1],
|
|
duration:520, delay:anime.stagger(70), easing:'easeOutExpo'
|
|
}, '-=430')
|
|
.add({
|
|
targets: '[data-anim="bio"]',
|
|
translateY:[18,0], opacity:[0,1],
|
|
duration:470, easing:'easeOutExpo'
|
|
}, '-=340')
|
|
.add({
|
|
targets: '[data-anim="soc"]',
|
|
scale:[0.4,1.12,1], rotate:[-8,4,0], opacity:[0,1],
|
|
duration:520, delay:anime.stagger(55), easing:'easeOutElastic(1,0.7)'
|
|
}, '-=280')
|
|
.add({
|
|
targets: '[data-anim="section"]',
|
|
translateX:[64,0], opacity:[0,1],
|
|
duration:560, delay:anime.stagger(140), easing:'easeOutQuint'
|
|
}, '-=160')
|
|
.add({
|
|
targets: '[data-anim="fade"]',
|
|
opacity:[0,1], translateY:[10,0], duration:420, easing:'easeOutQuart'
|
|
}, '-=220');
|
|
})();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|