mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
269 lines
18 KiB
HTML
269 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>About Me | Miles Wolf Allen</title>
|
|
<meta name="description" content="The person behind the code — family, faith, and the journey from hello world to building real projects.">
|
|
<link rel="canonical" href="https://milesallen.site/about-me.html">
|
|
<meta property="og:title" content="About Me | Miles Wolf Allen">
|
|
<meta property="og:description" content="The person behind the code — family, faith, and the journey from hello world to building real projects.">
|
|
<meta property="og:image" content="https://milesallen.site/og.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
|
|
<link rel="icon" type="image/svg+xml" href="favicon.png">
|
|
<link rel="stylesheet" href="projects/style.css">
|
|
<style>
|
|
.article-header{padding:100px 0 40px;}
|
|
.article-eyebrow{font-family:var(--font-pixel);font-size:10px;color:var(--tape);margin-bottom:12px;text-transform:uppercase;letter-spacing:.1em;}
|
|
.article-date{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:8px;}
|
|
.article-header h1{font-family:var(--font-pixel);font-size:clamp(24px,5vw,44px);line-height:1.2;margin-bottom:16px;transform:rotate(-1deg);transform-origin:left center;text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--tape);animation:glitch 5s ease-in-out infinite;}
|
|
@keyframes glitch{0%,90%,100%{text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--tape);}92%{text-shadow:3px 3px 0 var(--red),-2px -2px 0 var(--accent);transform:rotate(-1deg) translateX(2px);}94%{text-shadow:3px 3px 0 var(--accent),-2px -2px 0 var(--red);transform:rotate(-1deg) translateX(-2px);}}
|
|
.article-tagline{font-size:16px;color:var(--muted);max-width:600px;line-height:1.7;font-family:var(--font-mono);margin-bottom:24px;}
|
|
.article-tags{display:flex;gap:8px;flex-wrap:wrap;}
|
|
.article-tag{font-family:var(--font-pixel);font-size:8px;padding:6px 12px;background:var(--accent);color:#000;text-transform:uppercase;}
|
|
.article-body{max-width:720px;}
|
|
.article-body h2{font-family:var(--font-pixel);font-size:16px;color:var(--accent);margin:40px 0 16px;text-transform:uppercase;}
|
|
.article-body h3{font-family:var(--font-mono);font-weight:700;font-size:16px;margin:32px 0 12px;color:var(--text);}
|
|
.article-body p{font-size:14px;color:#ccc;line-height:1.9;font-family:var(--font-mono);margin-bottom:16px;}
|
|
.article-body code{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:2px 6px;font-size:12px;font-family:var(--font-mono);}
|
|
.article-body blockquote{border-left:3px solid var(--accent);padding:12px 20px;margin:24px 0;background:rgba(255,255,255,0.02);font-style:italic;color:var(--muted);font-family:var(--font-mono);font-size:13px;}
|
|
.article-body ul{margin:12px 0 16px 20px;font-family:var(--font-mono);font-size:13px;color:#ccc;line-height:1.8;}
|
|
.article-body ul li{margin-bottom:6px;}
|
|
.article-body ul li::marker{color:var(--accent);}
|
|
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:40px;text-decoration:none;transition:color .2s;}
|
|
.back-link:hover{color:var(--accent);}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cursor-dot" id="cursorDot"></div>
|
|
<div class="cursor-ring" id="cursorRing"></div>
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
|
|
<div class="shortcut-modal" id="shortcutModal">
|
|
<div class="shortcut-card">
|
|
<h3>Keyboard Shortcuts</h3>
|
|
<div class="shortcut-row"><span>Go Home</span><kbd>H</kbd></div>
|
|
<div class="shortcut-row"><span>Go to Blog</span><kbd>B</kbd></div>
|
|
<div class="shortcut-row"><span>Toggle theme</span><kbd>T</kbd></div>
|
|
<div class="shortcut-row"><span>Show shortcuts</span><kbd>?</kbd></div>
|
|
<div class="close-hint">Press Esc or ? to close</div>
|
|
</div>
|
|
</div>
|
|
<div class="flash" id="flash"></div>
|
|
<div class="toast-stack" id="toastStack"></div>
|
|
<nav class="mobile-nav">
|
|
<a href="index.html">Home</a>
|
|
<a href="projects/fedl.html">FEDL</a>
|
|
<a href="projects/omniemu.html">OmniEmu</a>
|
|
<a href="projects/command-move.html">CommandMove</a>
|
|
<a href="https://github.com/mileswolfallen2" target="_blank">GitHub</a>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<nav>
|
|
<a href="index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
|
|
<div class="nav-links">
|
|
<a href="index.html#about">About</a>
|
|
<a href="index.html#skills">Skills</a>
|
|
<a href="index.html#projects">Projects</a>
|
|
<a href="index.html#contact">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="article-header">
|
|
<div class="breadcrumb">
|
|
<a href="index.html">Home</a>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
|
<span>About Me</span>
|
|
</div>
|
|
<div class="article-eyebrow">// PLAYER BIO — EXTENDED</div>
|
|
<div class="article-date">2026</div>
|
|
<h1>About Me</h1>
|
|
<p class="article-tagline">The person behind the code. Family, faith, and how a kid who liked breaking things ended up building them instead.</p>
|
|
</section>
|
|
|
|
<section class="reveal">
|
|
<div class="article-body">
|
|
|
|
<h2>The Basics</h2>
|
|
<img src="photos/me.jpeg" alt="Miles" style="float:left;width:240px;height:240px;border:2px solid var(--accent);object-fit:cover;margin:0 24px 16px 0;shape-outside:circle(50%);clip-path:circle(50%);">
|
|
<p>I'm Miles Wolf Allen. I build things on the internet — tools, games, apps, websites. Some of them are useful. Some of them are just fun. Most of them started because I got annoyed at something and decided I could do it better.</p>
|
|
<p>I'm a Christian. Baptist. My faith is a big part of who I am and how I see the world. It shapes the way I build things — I care about doing good work, being honest, and building stuff that actually helps people instead of just looking cool.</p>
|
|
|
|
<div style="clear:both;"></div>
|
|
|
|
<h2>My Family</h2>
|
|
<img src="photos/mom:dad.jpeg" alt="Mom and Dad" style="float:right;width:240px;height:240px;border:2px solid var(--tape);object-fit:cover;margin:0 0 16px 24px;shape-outside:circle(50%);clip-path:circle(50%);">
|
|
<p>My dad is Mark Allen. He's the founding lead pastor of <strong>Pursuit Community Church</strong> in Mounds View, Minnesota. He planted the church in November 2018 after spending over 15 years in youth ministry. Pursuit is a Converge-affiliated church that launched with over 300 people and has been growing ever since. Dad is passionate about reaching people who are far from God and building a church where everyone is known and knows others.</p>
|
|
<p>When he's not preaching or meeting with people, you'll find him playing golf, softball, or vintage video games.</p>
|
|
<p>My mom is a loving mother and fun person. I have a sister named Macy. Macy is a big fan of Forest Frank — if you know, you know.</p>
|
|
|
|
<div style="clear:both;"></div>
|
|
|
|
<h2>Faith</h2>
|
|
<p>I'm Baptist. I grew up in church, and my relationship with God is something I take seriously. It's not just a Sunday thing — it's how I try to live every day. I believe in being generous, treating people with kindness, and using whatever gifts you've been given to make the world a little better than you found it.</p>
|
|
<p>For me, coding is a way to do that. Building tools that save people time, solving problems that frustrate people, creating things that bring people joy — that's ministry too, even if it doesn't look like it.</p>
|
|
|
|
<h2>Political Views</h2>
|
|
<p>My dad and I are both libertarian. We believe in personal freedom, limited government, and the idea that people should be left alone to live their lives as they see fit. We don't fit neatly into either political box, and honestly, we're fine with that.</p>
|
|
|
|
<h2>Pets</h2>
|
|
<img src="photos/dog.jpeg" alt="Meeko" style="float:right;width:240px;height:240px;border:2px solid var(--accent);object-fit:cover;margin:0 0 16px 24px;shape-outside:circle(50%);clip-path:circle(50%);">
|
|
<p>This is Meeko. He's a mutt and a rescue, and he's the best dog I could ask for. He was named after Meeko from <em>Pocahontas</em> — if you've seen the movie, you know he's a little rascal who's always getting into trouble. Our Meeko lives up to the name.</p>
|
|
<p>There's something about rescuing a dog that hits different. He needed a home, we had one, and now he's part of the family. He's proof that the best things in life aren't purebred or expensive — they just need someone to give them a chance.</p>
|
|
|
|
<div style="clear:both;"></div>
|
|
|
|
<h2>How I Got Into Coding</h2>
|
|
<p>It started with Scratch. You know, the block-based coding thing from MIT? I was making little games and animations, dragging colorful blocks around, and thinking I was a genius. I had no idea what I was actually learning — I just knew I loved making things move on a screen.</p>
|
|
<p>Then one day at school, I met a kid who was building websites. He showed me his stuff and I thought he was the coolest person alive. So I started following website tutorials on the side — basic HTML, then CSS, then a little JavaScript. Nothing serious, just learning by doing.</p>
|
|
<p>Eventually I took web design in school, and that's when things clicked. I went from copy-pasting code to actually understanding how it worked. From there I just kept going — Python, game dev, app building, and everything else.</p>
|
|
<p>My first real projects were rough. Like, really rough. But every project taught me something new. Every bug I fixed made me a little better. Every feature I shipped gave me confidence to build the next one.</p>
|
|
|
|
<h2>The Journey</h2>
|
|
<p>Looking back at my GitHub history is like looking at a time capsule. The early repos are simple — basic HTML pages, Python scripts, copy-pasted CSS. But they're proof that I showed up and tried.</p>
|
|
<p>Over time, the projects got bigger. I went from simple websites to full-stack apps. From basic scripts to emulator managers. From "hello world" to running a Geometry Dash demon list with 3,800+ verified runs. Each project pushed me into unfamiliar territory, and that's where the real learning happens.</p>
|
|
<p>The biggest shift was when I stopped just learning syntax and started solving real problems. The FEDL wasn't a homework assignment — it was something the community needed. OmniEmu wasn't a tutorial project — it was because I was tired of opening 15 different apps. CommandMove wasn't a coding exercise — it was because macOS was missing a basic feature.</p>
|
|
|
|
<h2>What I've Learned</h2>
|
|
<p>The biggest lesson? You don't have to know everything to build something. You just have to be willing to figure it out. Stack Overflow, documentation, trial and error, asking for help — that's how real development works. Nobody has it all memorized.</p>
|
|
<p>Another big one: ship it. Don't wait until it's perfect. Don't wait until you know every framework. Don't wait until you've read one more tutorial. Build the thing, put it out there, and iterate. A finished project that's 80% perfect teaches you more than a project that's stuck at 95% in your head.</p>
|
|
<p>And community matters. The FEDL taught me that. Building tools for other people — listening to what they need, fixing what's broken, making things better — that's what makes development rewarding. Code is just code. The people who use it are what matter.</p>
|
|
|
|
<h2>Where I'm Headed</h2>
|
|
<p>I'm still learning. Still building. Still figuring it out as I go. But that's the point, right? The journey doesn't end — it just changes shape.</p>
|
|
<p>I want to keep building things that matter. Tools that solve real problems. Projects that bring people together. Software that respects its users. And maybe, along the way, get a little better at what I do.</p>
|
|
|
|
<blockquote>The best developers aren't the ones who know the most. They're the ones who never stop being curious.</blockquote>
|
|
|
|
<a href="index.html#about" class="back-link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="15 18 9 12 15 6"/></svg>
|
|
Back to Portfolio
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
Built by Miles · 2026 · Powered by too much coffee and the Konami code
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
fetch('https://api.github.com/repos/mileswolfallen2/')
|
|
.then(r => r.json())
|
|
.then(d => {})
|
|
.catch(() => {});
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/[email protected]/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/[email protected]/ScrollTrigger.min.js"></script>
|
|
<script>
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
const heroTl = gsap.timeline({ defaults: { ease: 'power3.out' } });
|
|
heroTl
|
|
.from('.breadcrumb', { x: -30, opacity: 0, duration: 0.6 })
|
|
.from('.article-header h1', { y: 50, opacity: 0, duration: 0.8 }, '-=0.3')
|
|
.from('.article-tagline', { y: 30, opacity: 0, duration: 0.7 }, '-=0.4');
|
|
gsap.from('nav', { y: -20, opacity: 0, duration: 0.6, ease: 'power2.out' });
|
|
document.querySelectorAll('.article-body h2').forEach(title => {
|
|
gsap.from(title, { scrollTrigger: { trigger: title, start: 'top 85%' }, y: 30, opacity: 0, duration: 0.7, ease: 'power3.out' });
|
|
});
|
|
document.querySelectorAll('.article-body p, .article-body ul, .article-body blockquote').forEach(el => {
|
|
gsap.from(el, { scrollTrigger: { trigger: el, start: 'top 88%' }, y: 20, opacity: 0, duration: 0.6, ease: 'power3.out' });
|
|
});
|
|
gsap.from('footer', { scrollTrigger: { trigger: 'footer', start: 'top 95%' }, opacity: 0, duration: 0.8 });
|
|
window.addEventListener('load', () => ScrollTrigger.refresh());
|
|
</script>
|
|
<script>
|
|
var toastQueue=document.getElementById('toastStack');var shownToasts={};
|
|
function showToast(id,title,body,icon){
|
|
if(shownToasts[id])return;shownToasts[id]=true;
|
|
var t=document.createElement('div');t.className='toast';
|
|
t.innerHTML='<span class="icon">'+(icon||'!')+'</span><span><span class="title">'+title+'</span>'+body+'</span>';
|
|
toastQueue.appendChild(t);
|
|
gsap.to(t,{x:0,duration:.6,ease:'power3.out'});
|
|
setTimeout(function(){gsap.to(t,{x:'-150%',opacity:0,duration:.4,ease:'power2.in',onComplete:function(){t.remove();}});},3000);
|
|
}
|
|
(function(){
|
|
var seq=['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
|
|
var pos=0;
|
|
window.addEventListener('keydown',function(e){
|
|
var key=e.key.length===1?e.key.toLowerCase():e.key;
|
|
if(key===seq[pos]){pos++;if(pos===seq.length){pos=0;triggerKonami();}}
|
|
else{pos=(key===seq[0])?1:0;}
|
|
});
|
|
function triggerKonami(){
|
|
showToast('konami','SECRET FOUND','Konami Code Activated','*');
|
|
var flash=document.getElementById('flash');
|
|
gsap.fromTo(flash,{opacity:.5},{opacity:0,duration:.5});
|
|
gsap.to('body',{x:'random(-5,5)',y:'random(-5,5)',duration:.05,repeat:10,ease:'sine.inOut',onComplete:function(){gsap.set('body',{x:0,y:0});}});
|
|
document.body.style.cursor='auto';
|
|
var style=document.createElement('style');style.id='konami-cursor';
|
|
style.textContent='*{cursor:auto !important;}';
|
|
document.head.appendChild(style);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function(){
|
|
var dot=document.getElementById('cursorDot');
|
|
var ring=document.getElementById('cursorRing');
|
|
if(!dot||!ring)return;
|
|
var mx=0,my=0,rx=0,ry=0;
|
|
document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;dot.style.left=mx+'px';dot.style.top=my+'px';});
|
|
(function loop(){
|
|
rx+=(mx-rx)*0.15;ry+=(my-ry)*0.15;
|
|
ring.style.left=rx+'px';ring.style.top=ry+'px';
|
|
requestAnimationFrame(loop);
|
|
})();
|
|
document.querySelectorAll('a,button,.meta-chip,.tech-badge,.feature-card').forEach(function(el){
|
|
el.addEventListener('mouseenter',function(){dot.classList.add('hover');ring.classList.add('hover');});
|
|
el.addEventListener('mouseleave',function(){dot.classList.remove('hover');ring.classList.remove('hover');});
|
|
});
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function(){
|
|
var bar=document.getElementById('progressBar');
|
|
window.addEventListener('scroll',function(){
|
|
var pct=window.scrollY/(document.body.scrollHeight-window.innerHeight)*100;
|
|
bar.style.width=pct+'%';
|
|
},{passive:true});
|
|
})();
|
|
(function(){
|
|
var btn=document.getElementById('themeToggle');
|
|
var saved=localStorage.getItem('theme');
|
|
if(saved==='light')document.body.classList.add('light');
|
|
function updateIcon(){btn.textContent=document.body.classList.contains('light')?'\u263E':'\u2600';}
|
|
updateIcon();
|
|
btn.addEventListener('click',function(){
|
|
document.body.classList.toggle('light');
|
|
localStorage.setItem('theme',document.body.classList.contains('light')?'light':'dark');
|
|
updateIcon();
|
|
});
|
|
})();
|
|
(function(){
|
|
var modal=document.getElementById('shortcutModal');
|
|
function toggleModal(){modal.classList.toggle('open');}
|
|
window.addEventListener('keydown',function(e){
|
|
if(e.key==='?'){e.preventDefault();toggleModal();}
|
|
if(e.key==='Escape')modal.classList.remove('open');
|
|
if(e.key==='t'||e.key==='T'){
|
|
if(document.activeElement&&document.activeElement.tagName==='INPUT')return;
|
|
document.body.classList.toggle('light');
|
|
localStorage.setItem('theme',document.body.classList.contains('light')?'light':'dark');
|
|
var btn=document.getElementById('themeToggle');
|
|
btn.textContent=document.body.classList.contains('light')?'\u263E':'\u2600';
|
|
}
|
|
if(e.key==='h'||e.key==='H')window.location.href='index.html';
|
|
if(e.key==='b'||e.key==='B')window.location.href='index.html#blog';
|
|
});
|
|
modal.addEventListener('click',function(e){if(e.target===modal)modal.classList.remove('open');});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|