mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
841 lines
30 KiB
HTML
841 lines
30 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 | Developer & 3D Artist</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #0a0a0f;
|
|
--surface: #12121a;
|
|
--surface-hover: #1a1a25;
|
|
--border: #1e1e2e;
|
|
--text: #e4e4e7;
|
|
--text-dim: #71717a;
|
|
--accent: #6366f1;
|
|
--accent-glow: rgba(99, 102, 241, 0.15);
|
|
--green: #22c55e;
|
|
--purple: #a855f7;
|
|
--cyan: #06b6d4;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.bg-grid {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-glow {
|
|
position: fixed;
|
|
width: 600px;
|
|
height: 600px;
|
|
border-radius: 50%;
|
|
filter: blur(120px);
|
|
opacity: 0.07;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-glow-1 { background: var(--accent); top: -200px; left: 10%; }
|
|
.bg-glow-2 { background: var(--purple); bottom: -200px; right: 10%; }
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
nav {
|
|
padding: 32px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.nav-links { display: flex; gap: 28px; }
|
|
|
|
.nav-links a {
|
|
color: var(--text-dim);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover { color: var(--text); }
|
|
|
|
.hero {
|
|
padding: 80px 0 60px;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.hero-badge .dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1.1;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero h1 .gradient {
|
|
background: linear-gradient(135deg, var(--accent), var(--purple), var(--cyan));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.15rem;
|
|
color: var(--text-dim);
|
|
max-width: 560px;
|
|
line-height: 1.7;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.hero-links { display: flex; gap: 12px; flex-wrap: wrap; }
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 22px;
|
|
border-radius: 10px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #4f46e5;
|
|
box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--surface-hover);
|
|
border-color: #333;
|
|
}
|
|
|
|
section { padding: 40px 0; }
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.profile-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
display: flex;
|
|
gap: 28px;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 50%;
|
|
border: 3px solid var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.profile-info h2 {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.profile-info .username {
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.profile-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.stat {
|
|
font-size: 0.85rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.stat strong {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.skills-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.skill-tag {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
padding: 12px 16px;
|
|
border-radius: 10px;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.skill-tag:hover {
|
|
border-color: var(--accent);
|
|
background: var(--accent-glow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.skill-tag svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.skills-section { margin-bottom: 16px; }
|
|
|
|
.skills-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.projects-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.project-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 24px;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
transition: all 0.25s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.project-card .project-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.project-card .project-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
background: var(--accent-glow);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.project-card .project-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.project-card .project-lang {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-dim);
|
|
background: var(--bg);
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.project-card h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.project-card p {
|
|
font-size: 0.82rem;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
|
|
.project-card .project-meta {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.75rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.project-card .project-meta span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.project-card .project-meta svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.achievements-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.achievement {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.achievement svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.contact-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 18px 20px;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.contact-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.contact-card .c-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
background: var(--accent-glow);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.contact-card .c-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.contact-card .c-label {
|
|
font-size: 0.7rem;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.contact-card .c-value {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 48px 0;
|
|
color: var(--text-dim);
|
|
font-size: 0.8rem;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 40px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero h1 { font-size: 2.2rem; }
|
|
.profile-card { flex-direction: column; text-align: center; }
|
|
.profile-stats { justify-content: center; }
|
|
.hero-links { justify-content: center; }
|
|
.nav-links { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg-grid"></div>
|
|
<div class="bg-glow bg-glow-1"></div>
|
|
<div class="bg-glow bg-glow-2"></div>
|
|
|
|
<div class="container">
|
|
<nav>
|
|
<a href="#" class="nav-logo">miles.dev</a>
|
|
<div class="nav-links">
|
|
<a href="#about">About</a>
|
|
<a href="#skills">Skills</a>
|
|
<a href="#projects">Projects</a>
|
|
<a href="#contact">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="hero-badge">
|
|
<span class="dot"></span>
|
|
Available to collaborate
|
|
</div>
|
|
<h1>Hi, I'm <span class="gradient">Miles</span></h1>
|
|
<p>Developer and 3D artist interested in coding, games, and websites. Currently learning backend development with JavaScript.</p>
|
|
<div class="hero-links">
|
|
<a href="https://github.com/mileswolfallen2" class="btn btn-primary" target="_blank">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
GitHub
|
|
</a>
|
|
<a href="https://replit.com/@MilesAllen1" class="btn btn-secondary" target="_blank">Replit</a>
|
|
<a href="https://codepen.io/mileswolfallen2-the-typescripter" class="btn btn-secondary" target="_blank">CodePen</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about">
|
|
<div class="profile-card">
|
|
<img src="https://avatars.githubusercontent.com/u/115095719?v=4" alt="Miles" class="profile-avatar">
|
|
<div class="profile-info">
|
|
<h2>Miles Wolf Allen</h2>
|
|
<div class="username">@mileswolfallen2</div>
|
|
<p style="color: var(--text-dim); font-size: 0.85rem;">Working on stuff. Looking to collaborate on games or websites.</p>
|
|
<div class="profile-stats">
|
|
<div class="stat"><strong>142</strong> repos</div>
|
|
<div class="stat"><strong>91</strong> stars</div>
|
|
<div class="stat"><strong>12</strong> followers</div>
|
|
<div class="stat"><strong>36</strong> following</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="achievements-row">
|
|
<div class="achievement">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
|
Pull Shark x2
|
|
</div>
|
|
<div class="achievement">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
|
YOLO
|
|
</div>
|
|
<div class="achievement">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
|
Quickdraw
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="skills">
|
|
<h2 class="section-title">Skills & Tech</h2>
|
|
<p class="section-subtitle">Technologies I work with and tools I know</p>
|
|
|
|
<div class="skills-section">
|
|
<div class="skills-label">Proficient In</div>
|
|
<div class="skills-grid">
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
JavaScript
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
|
|
HTML
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>
|
|
CSS
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
|
Python
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94"/></svg>
|
|
Git
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
|
|
Blender
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
Unity
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
|
|
Unreal
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
|
|
Cloudflare
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
Linux
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
Netlify
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
|
|
Replit
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
VS Code
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
|
Bash
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M9 9h6v6H9z"/></svg>
|
|
npm
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
|
|
GitHub
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skills-section">
|
|
<div class="skills-label">Currently Learning</div>
|
|
<div class="skills-grid">
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
|
|
PHP
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
|
|
.NET
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
|
Nix
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
|
|
Yarn
|
|
</div>
|
|
<div class="skill-tag">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
|
|
Backend JS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects">
|
|
<h2 class="section-title">Projects</h2>
|
|
<p class="section-subtitle">Things I've built</p>
|
|
|
|
<div class="projects-grid">
|
|
<a href="projects/omniemu.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="8" cy="12" r="2"/><circle cx="16" cy="12" r="2"/><line x1="12" y1="10" x2="12" y2="14"/></svg>
|
|
</div>
|
|
<span class="project-lang" style="border: 1px solid var(--green); color: var(--green); background: transparent;">Active Development</span>
|
|
</div>
|
|
<h3>OmniEmu 2.0</h3>
|
|
<p>Cross-platform emulator manager and game launcher. Install 20+ emulators, scan ROMs, and launch games from a unified library.</p>
|
|
<div class="project-meta">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
1
|
|
</span>
|
|
<span>MIT License</span>
|
|
<span>v0.3.2</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/fedl.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
</div>
|
|
<span class="project-lang">HTML</span>
|
|
</div>
|
|
<h3>FEDL</h3>
|
|
<p>Geometry Dash demon list site with ranked levels, run submissions, admin moderation, and community features.</p>
|
|
<div class="project-meta">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
2
|
|
</span>
|
|
<span>196 commits</span>
|
|
<span>Live</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/nova.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1.27c.34-.6.99-1 1.73-1a2 2 0 110 4c-.74 0-1.39-.4-1.73-1H20a7 7 0 01-7 7v1.27c.6.34 1 .99 1 1.73a2 2 0 11-4 0c0-.74.4-1.39 1-1.73V20a7 7 0 01-7-7H2.73c-.34.6-.99 1-1.73 1a2 2 0 110-4c.74 0 1.39.4 1.73 1H4a7 7 0 017-7V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/></svg>
|
|
</div>
|
|
<span class="project-lang">Python</span>
|
|
</div>
|
|
<h3>Nova AI</h3>
|
|
<p>Voice/text AI assistant with desktop GUI, web interface, and CLI. Runs locally on Ollama with multiple model support.</p>
|
|
<div class="project-meta">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
1
|
|
</span>
|
|
<span>MIT License</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/music-app.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
|
</div>
|
|
<span class="project-lang">JavaScript</span>
|
|
</div>
|
|
<h3>Music App</h3>
|
|
<p>Ad-free music player web app inspired by YouTube Music. Stream music without interruptions.</p>
|
|
<div class="project-meta">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
1
|
|
</span>
|
|
<span>Apache-2.0</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/rhythm-game.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
|
|
</div>
|
|
<span class="project-lang">HTML</span>
|
|
</div>
|
|
<h3>Rhythm Game</h3>
|
|
<p>Rhythm-based game with song selection, real-time note rendering, and keyboard controls. Includes a level editor.</p>
|
|
<div class="project-meta">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
1
|
|
</span>
|
|
<span>MPL-2.0</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/geode-mod.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
|
|
</div>
|
|
<span class="project-lang" style="border: 1px solid #f59e0b; color: #f59e0b; background: transparent;">WIP</span>
|
|
</div>
|
|
<h3>FEDL Geode Mod</h3>
|
|
<p>Geometry Dash mod for viewing the ranked demon list, playing roulette, and checking for banned mods in-game.</p>
|
|
<div class="project-meta">
|
|
<span>MIT License</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/decompilations.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
|
|
</div>
|
|
<span class="project-lang">HTML</span>
|
|
</div>
|
|
<h3>Decompilations</h3>
|
|
<p>Showcase of native PC ports, decompilations, and recompilations with animated section switching and progress tracking.</p>
|
|
<div class="project-meta">
|
|
<span>MIT License</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="projects/issue-tracker.html" class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg>
|
|
</div>
|
|
<span class="project-lang">HTML</span>
|
|
</div>
|
|
<h3>Issue Tracker</h3>
|
|
<p>Custom issue tracker built from scratch with a Node.js backend and clean HTML/CSS frontend.</p>
|
|
<div class="project-meta">
|
|
<span>MIT License</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<h2 class="section-title">Get In Touch</h2>
|
|
<p class="section-subtitle">Let's build something together</p>
|
|
|
|
<div class="contact-grid">
|
|
<a href="mailto:[email protected]" class="contact-card">
|
|
<div class="c-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="c-label">Email</div>
|
|
<div class="c-value">[email protected]</div>
|
|
</div>
|
|
</a>
|
|
<a href="https://github.com/mileswolfallen2" class="contact-card" target="_blank">
|
|
<div class="c-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="c-label">GitHub</div>
|
|
<div class="c-value">mileswolfallen2</div>
|
|
</div>
|
|
</a>
|
|
<a href="https://replit.com/@MilesAllen1" class="contact-card" target="_blank">
|
|
<div class="c-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="c-label">Replit</div>
|
|
<div class="c-value">@MilesAllen1</div>
|
|
</div>
|
|
</a>
|
|
<a href="https://codepen.io/mileswolfallen2-the-typescripter" class="contact-card" target="_blank">
|
|
<div class="c-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="8.5"/><polyline points="22 8.5 12 2 2 8.5"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="c-label">CodePen</div>
|
|
<div class="c-value">mileswolfallen2</div>
|
|
</div>
|
|
</a>
|
|
<a href="https://fedl.site" class="contact-card" target="_blank">
|
|
<div class="c-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="c-label">Website</div>
|
|
<div class="c-value">fedl.site</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
Built by Miles · 2026
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|