mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
Add project pages for Nova AI, OmniEmu 2.0, and Rhythm Game; create style.css for consistent styling
This commit is contained in:
+840
@@ -0,0 +1,840 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Decompilations | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>Decompilations</span>
|
||||
</div>
|
||||
|
||||
<h1>Decompilations</h1>
|
||||
<p class="tagline">An animated showcase of native PC ports, decompilations, and recompilations. Tracks projects that are in active development, complete, or just starting.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/Decompilations-web" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://comp.fedl.site/" class="meta-chip" target="_blank">
|
||||
<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>
|
||||
Live Site
|
||||
</a>
|
||||
<span class="meta-chip">HTML</span>
|
||||
<span class="meta-chip">MIT License</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">What It Includes</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||||
Animated Sections
|
||||
</h3>
|
||||
<p>A polished single-page interface with animated section switching using Anime.js.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Project Categories
|
||||
</h3>
|
||||
<p>Dedicated views for fully released projects, active development work, and complete decompilations.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
Progress Tracking
|
||||
</h3>
|
||||
<p>Detail cards with progress indicators showing how far along each decompilation project is.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
Source Links
|
||||
</h3>
|
||||
<p>Sources section with official repositories and legal reminder text about ROM ownership.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">How to Help</h2>
|
||||
<div class="desc-text">
|
||||
<p>Share projects with others, help with development or bug fixes, keep information up to date, and contribute additional project details.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">HTML (100%)</span>
|
||||
<span class="tech-badge">Anime.js</span>
|
||||
<span class="tech-badge">CSS Animations</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FEDL | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>FEDL</span>
|
||||
</div>
|
||||
|
||||
<h1>FEDL</h1>
|
||||
<p class="tagline">A Geometry Dash demon list site with ranked levels, run submissions, admin moderation, accounts, and community features.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/fedl" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://fedl.site" class="meta-chip" target="_blank">
|
||||
<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>
|
||||
Live Site
|
||||
</a>
|
||||
<span class="meta-chip">HTML / JS / CSS</span>
|
||||
<span class="meta-chip">196 commits</span>
|
||||
<span class="meta-chip">2 stars</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">What It Includes</h2>
|
||||
<p class="section-subtitle">Full-featured list site with frontend and backend</p>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Ranked List Browser
|
||||
</h3>
|
||||
<p>Browse the ranked demon list with search, filters, and video playback for each level.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
||||
Run Submissions
|
||||
</h3>
|
||||
<p>Submit runs for review. Admins can approve, reject, or bulk-approve submissions.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
||||
Accounts & Auth
|
||||
</h3>
|
||||
<p>Signup, login, and synced user state. Bearer token authentication with session management.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||||
Community
|
||||
</h3>
|
||||
<p>Community posts, bug reports, and private direct messages between users.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
Rank Guesser
|
||||
</h3>
|
||||
<p>A guessing game where you try to identify the rank of demon levels on the list.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
||||
Demon Roulette
|
||||
</h3>
|
||||
<p>Randomly pick a demon level to play. Uses level ID lookup for fast selection.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
|
||||
Admin Panel
|
||||
</h3>
|
||||
<p>Admin moderation page for list editing, run management, and AREDL/Pointercrate imports.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Live Updates
|
||||
</h3>
|
||||
<p>Server-Sent Events for real-time list data updates across connected clients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">HTML (49.8%)</span>
|
||||
<span class="tech-badge">JavaScript (29.8%)</span>
|
||||
<span class="tech-badge">CSS (20.4%)</span>
|
||||
<span class="tech-badge">Node.js</span>
|
||||
<span class="tech-badge">Server-Sent Events</span>
|
||||
<span class="tech-badge">localStorage</span>
|
||||
<span class="tech-badge">JSON</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Local Setup</h2>
|
||||
<div class="code-block">
|
||||
<span class="comment"># Make sure Node.js is installed, then:</span><br>
|
||||
<span class="cmd">node server/server.js</span><br><br>
|
||||
<span class="comment"># Open the site at:</span><br>
|
||||
http://127.0.0.1:8090/fedl/<br><br>
|
||||
<span class="comment"># Expose on local network:</span><br>
|
||||
HOST=0.0.0.0 PORT=8090 <span class="cmd">node server/server.js</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FEDL Geode Mod | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>FEDL Geode Mod</span>
|
||||
</div>
|
||||
|
||||
<h1>FEDL Geode Mod</h1>
|
||||
<p class="tagline">Official FEDL mod for Geometry Dash using the Geode modding framework. View the ranked demon list, play roulette, and detect banned mods in-game.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/FEDL-Geode-mod" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<span class="meta-chip" style="border-color: #f59e0b; color: #f59e0b;">WIP</span>
|
||||
<span class="meta-chip">C++</span>
|
||||
<span class="meta-chip">MIT License</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Features</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
|
||||
Integrated Login
|
||||
</h3>
|
||||
<p>Login and signup with your FEDL account directly inside Geometry Dash.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Demon List
|
||||
</h3>
|
||||
<p>View the complete ranked demon list with filtering, right inside the game.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
||||
Roulette
|
||||
</h3>
|
||||
<p>Play demon roulette to randomly select a level from the list to attempt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
Mod Ban Detection
|
||||
</h3>
|
||||
<p>Configurable list of banned mods that logs warnings when they are detected running.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Settings</h2>
|
||||
<div class="desc-text">
|
||||
<p>Configure the mod in Geode mod settings:</p>
|
||||
</div>
|
||||
<div class="feature-grid" style="margin-top: 16px;">
|
||||
<div class="feature-card">
|
||||
<h3>FEDL API URL</h3>
|
||||
<p>Base URL for FEDL API (default: <code>https://fedl.site</code>)</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Mod Ban List</h3>
|
||||
<p>Comma-separated list of mod names to detect and warn about.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Auto Login</h3>
|
||||
<p>Automatically log in using saved credentials on game launch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">API Integration</h2>
|
||||
<div class="desc-text">
|
||||
<p>Connects to the FEDL server API at <code>fedl.site</code> with endpoints for login, signup, user state, and the demon list.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">C++ (98.2%)</span>
|
||||
<span class="tech-badge">CMake (1.2%)</span>
|
||||
<span class="tech-badge">Geode SDK</span>
|
||||
<span class="tech-badge">Geometry Dash</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Build</h2>
|
||||
<div class="code-block">
|
||||
<span class="comment"># Install Geode CLI if you haven't already</span><br>
|
||||
<span class="cmd">geode install</span><br><br>
|
||||
<span class="comment"># Build the mod</span><br>
|
||||
<span class="cmd">geode build</span><br><br>
|
||||
<span class="comment"># Output: bin/fedl.geode</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Issue Tracker | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>Issue Tracker</span>
|
||||
</div>
|
||||
|
||||
<h1>Issue Tracker</h1>
|
||||
<p class="tagline">A custom issue tracker built from scratch with a Node.js backend and clean HTML/CSS frontend. Made for fun.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/Issue-tracker" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<span class="meta-chip">HTML / JavaScript</span>
|
||||
<span class="meta-chip">MIT License</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">About</h2>
|
||||
<div class="desc-text">
|
||||
<p>A custom issue tracker built as a learning project. Features a Node.js server backend with a clean HTML/CSS/JavaScript frontend for creating, viewing, and managing issues.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Features</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
||||
Create Issues
|
||||
</h3>
|
||||
<p>Create new issues with titles, descriptions, and status tracking.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Track Progress
|
||||
</h3>
|
||||
<p>View and manage issue status with a clean, intuitive interface.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
Node.js Backend
|
||||
</h3>
|
||||
<p>Server-side logic with RESTful API endpoints for CRUD operations.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
Clean Design
|
||||
</h3>
|
||||
<p>Minimal, well-structured HTML and CSS with no frameworks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">HTML (91.1%)</span>
|
||||
<span class="tech-badge">JavaScript (8.9%)</span>
|
||||
<span class="tech-badge">Node.js</span>
|
||||
<span class="tech-badge">Express</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Music App | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>Music App</span>
|
||||
</div>
|
||||
|
||||
<h1>Music App</h1>
|
||||
<p class="tagline">A sleek, lightweight, and ad-free music player web app inspired by YouTube Music. Built for speed, simplicity, and control.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/music-app" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://mileswolfallen2.github.io/music-app/" class="meta-chip" target="_blank">
|
||||
<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>
|
||||
Live Demo
|
||||
</a>
|
||||
<span class="meta-chip">JavaScript</span>
|
||||
<span class="meta-chip">Apache-2.0</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Features</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
|
||||
Ad-Free Playback
|
||||
</h3>
|
||||
<p>Enjoy music from YouTube with little to no interruptions. Focused on uninterrupted listening.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Web-First
|
||||
</h3>
|
||||
<p>100% web-based. No downloads, no installs. Fast loading with minimal dependencies.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Developer-Friendly
|
||||
</h3>
|
||||
<p>Clean, modular code. No frameworks -- just plain HTML, CSS, and JavaScript.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Playlist Tools
|
||||
</h3>
|
||||
<p>Includes tools to convert YouTube playlists to static HTML and generate JavaScript playlist files.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Project Files</h2>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>File</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>index.html</code></td><td>Main music app interface</td></tr>
|
||||
<tr><td><code>script.js</code></td><td>Main app logic -- playback and UI behavior</td></tr>
|
||||
<tr><td><code>songs.js</code></td><td>Song data and playlist definitions</td></tr>
|
||||
<tr><td><code>style.css</code></td><td>Core styling for all pages</td></tr>
|
||||
<tr><td><code>playlist2static.html</code></td><td>Tool to convert YouTube playlists to static HTML</td></tr>
|
||||
<tr><td><code>playlist2static.js</code></td><td>JavaScript logic behind playlist conversion</td></tr>
|
||||
<tr><td><code>static-list-generator.html</code></td><td>GUI for creating static playlist files</td></tr>
|
||||
<tr><td><code>static-to-js.html</code></td><td>Converts HTML playlist elements into JavaScript format</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">JavaScript (89.7%)</span>
|
||||
<span class="tech-badge">CSS (5.7%)</span>
|
||||
<span class="tech-badge">HTML (4.6%)</span>
|
||||
<span class="tech-badge">YouTube API</span>
|
||||
<span class="tech-badge">GitHub Pages</span>
|
||||
<span class="tech-badge">Cloudflare Pages</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nova AI | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>Nova AI</span>
|
||||
</div>
|
||||
|
||||
<h1>Nova AI</h1>
|
||||
<p class="tagline">Multi-modal AI assistant with desktop GUI, web interface, and CLI. Runs locally on Ollama with support for small and large language models.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/nova" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://ai.fedl.site" class="meta-chip" target="_blank">
|
||||
<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>
|
||||
Live Demo
|
||||
</a>
|
||||
<span class="meta-chip">Python</span>
|
||||
<span class="meta-chip">MIT License</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Entry Points</h2>
|
||||
<p class="section-subtitle">Multiple interfaces for different use cases</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Command</th><th>Version</th><th>Mode</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>python ui2.py</code></td><td>V2</td><td>Desktop GUI (Tkinter, animated HUD)</td></tr>
|
||||
<tr><td><code>python web_v2.py</code></td><td>V2</td><td>Web server on :9090</td></tr>
|
||||
<tr><td><code>python jarvis_v2.py</code></td><td>V2</td><td>CLI with native tool-calling agent</td></tr>
|
||||
<tr><td><code>python ui2_small.py</code></td><td>V2 Small</td><td>Desktop GUI for 1B-3B models (green theme)</td></tr>
|
||||
<tr><td><code>python web_v2_small.py</code></td><td>V2 Small</td><td>Web server on :9091 for small models</td></tr>
|
||||
<tr><td><code>python jarvis_v2_small.py</code></td><td>V2 Small</td><td>CLI agent for small models</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Features</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></svg>
|
||||
Voice & Text
|
||||
</h3>
|
||||
<p>Interact via voice commands or text input. Multi-modal conversation with context retention.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
Desktop GUI
|
||||
</h3>
|
||||
<p>Animated Tkinter HUD interface with real-time status indicators and chat history.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Web Interface
|
||||
</h3>
|
||||
<p>Browser-based chat interface accessible from any device on your network.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Native Tool Calling
|
||||
</h3>
|
||||
<p>V2 uses Ollama's native tool_calls for multi-step reasoning with web search and file operations.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/></svg>
|
||||
Raspberry Pi Support
|
||||
</h3>
|
||||
<p>Optimized for Pi 4 with small model support. Qwen2.5 1.5B is the recommended sweet spot.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
File Operations
|
||||
</h3>
|
||||
<p>Read, write, and manage files directly through the assistant. Multi-step task execution.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Quick Start</h2>
|
||||
<div class="code-block">
|
||||
<span class="cmd">pip install -r requirements.txt</span><br>
|
||||
<span class="cmd">ollama pull qwen2.5:1.5b</span><br>
|
||||
<span class="cmd">python ui2_small.py</span> <span class="comment"># Launch desktop GUI</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">Python (100%)</span>
|
||||
<span class="tech-badge">Ollama</span>
|
||||
<span class="tech-badge">Tkinter</span>
|
||||
<span class="tech-badge">Qwen2.5</span>
|
||||
<span class="tech-badge">Llama 3.2</span>
|
||||
<span class="tech-badge">Raspberry Pi</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OmniEmu 2.0 | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>OmniEmu 2.0</span>
|
||||
</div>
|
||||
|
||||
<h1>OmniEmu 2.0</h1>
|
||||
<p class="tagline">All your games. One place. A cross-platform emulator manager, game launcher, and ROM library for Windows, macOS, and Linux.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/OmniEmu2.0" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://om.fedl.site" class="meta-chip" target="_blank">
|
||||
<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>
|
||||
Website
|
||||
</a>
|
||||
<span class="meta-chip" style="border-color: var(--green); color: var(--green);">Active Development</span>
|
||||
<span class="meta-chip">TypeScript</span>
|
||||
<span class="meta-chip">MIT License</span>
|
||||
<span class="meta-chip">v0.3.2</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Features</h2>
|
||||
<p class="section-subtitle">Everything you need to manage your game library</p>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
||||
One-Click Emulator Setup
|
||||
</h3>
|
||||
<p>Download, install, and auto-configure 20+ emulators from inside the app. No terminal required.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
ROM Library
|
||||
</h3>
|
||||
<p>Scan your ROMs, browse by platform, and launch games directly from a unified library.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/></svg>
|
||||
Game Art Scraping
|
||||
</h3>
|
||||
<p>Automatically fetches covers, screenshots, and metadata from SteamGridDB and libretro-thumbnails.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
RetroAchievements
|
||||
</h3>
|
||||
<p>View per-game achievements in the game detail modal. Supports RetroArch, PCSX2, DuckStation, and more.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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"/></svg>
|
||||
Controller Navigation
|
||||
</h3>
|
||||
<p>Navigate the entire UI with a gamepad. Apply PS/Xbox-aware controller bindings to installed emulators.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Cloud Sync
|
||||
</h3>
|
||||
<p>Sync save files between devices with built-in Syncthing integration. BIOS manager included.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Decomp Projects
|
||||
</h3>
|
||||
<p>Install and manage PC port projects like Ship of Harkinian, SM64, and more.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
||||
Light & Dark Mode
|
||||
</h3>
|
||||
<p>Choose your theme or follow system preference. Cross-platform with identical experience everywhere.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Supported Emulators</h2>
|
||||
<p class="section-subtitle">20+ emulators across Windows, macOS, and Linux</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Emulator</th><th>Systems</th><th>Windows</th><th>macOS</th><th>Linux</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Dolphin</td><td>GameCube, Wii</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>RPCS3</td><td>PlayStation 3</td><td class="check">Yes</td><td class="cross">No</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Eden</td><td>Nintendo Switch</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>PCSX2</td><td>PlayStation 2</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>DuckStation</td><td>PlayStation 1</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Mednafen</td><td>PS1, PC Engine, Lynx, Neo Geo Pocket</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>MAME</td><td>Arcade</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>PPSSPP</td><td>PSP</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>melonDS</td><td>Nintendo DS</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Flycast</td><td>Dreamcast, Naomi</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Cemu</td><td>Wii U</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>xemu</td><td>Original Xbox</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Vita3K</td><td>PS Vita</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Azahar</td><td>Nintendo 3DS</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Project64</td><td>Nintendo 64</td><td class="check">Yes</td><td class="cross">No</td><td class="cross">No</td></tr>
|
||||
<tr><td>Snes9x</td><td>SNES</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>mGBA</td><td>Game Boy, GBA</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>Mesen2</td><td>NES, SNES, GB, GBA, PC Engine</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
<tr><td>RetroArch</td><td>Multi-system</td><td class="check">Yes</td><td class="check">Yes</td><td class="check">Yes</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">TypeScript (91.4%)</span>
|
||||
<span class="tech-badge">CSS (6.8%)</span>
|
||||
<span class="tech-badge">JavaScript (0.8%)</span>
|
||||
<span class="tech-badge">Shell (0.6%)</span>
|
||||
<span class="tech-badge">Python (0.2%)</span>
|
||||
<span class="tech-badge">HTML (0.1%)</span>
|
||||
<span class="tech-badge">Vite</span>
|
||||
<span class="tech-badge">Electron</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Quick Start</h2>
|
||||
<div class="desc-text">
|
||||
<p>Download the latest release for your platform, launch OmniEmu, install an emulator from the Library, set your ROMs directory, and start playing.</p>
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<span class="comment"># macOS</span><br>
|
||||
sudo xattr -rd com.apple.quarantine /Applications/OmniEmu.app<br><br>
|
||||
<span class="comment"># Linux</span><br>
|
||||
chmod +x OmniEmu*.AppImage && ./OmniEmu*.AppImage<br><br>
|
||||
<span class="comment"># Build from source</span><br>
|
||||
<span class="cmd">npm install</span><br>
|
||||
<span class="cmd">npm run start</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rhythm Game | Miles Wolf Allen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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="../index.html" class="nav-logo">miles.dev</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="project-hero">
|
||||
<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>Rhythm Game</span>
|
||||
</div>
|
||||
|
||||
<h1>Rhythm Game</h1>
|
||||
<p class="tagline">A rhythm-based game where players hit notes as they appear on screen, with song selection, a level editor, and real-time canvas rendering.</p>
|
||||
|
||||
<div class="project-meta-bar">
|
||||
<a href="https://github.com/mileswolfallen2/new-game" class="meta-chip primary" target="_blank">
|
||||
<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>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://mileswolfallen2.github.io/new-game/" class="meta-chip" target="_blank">
|
||||
<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>
|
||||
Live Demo
|
||||
</a>
|
||||
<span class="meta-chip">HTML / JavaScript</span>
|
||||
<span class="meta-chip">MPL-2.0</span>
|
||||
<span class="meta-chip">64 commits</span>
|
||||
<span class="meta-chip">1 star</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Features</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Interactive Gameplay
|
||||
</h3>
|
||||
<p>Real-time note rendering on canvas with keyboard controls. Hit notes as they scroll down the screen.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Song Selection
|
||||
</h3>
|
||||
<p>Browse and select songs from a library. Preview songs before playing them.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Level Editor
|
||||
</h3>
|
||||
<p>Built-in editor for creating custom charts and song mappings.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
||||
User Accounts
|
||||
</h3>
|
||||
<p>Signup and login system with user settings and profile management.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
|
||||
Admin Panel
|
||||
</h3>
|
||||
<p>Admin interface for managing songs, charts, and user content.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>
|
||||
<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>
|
||||
Song Browser
|
||||
</h3>
|
||||
<p>Browse available songs with metadata, difficulty info, and chart previews.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-badge">HTML (96%)</span>
|
||||
<span class="tech-badge">JavaScript (4%)</span>
|
||||
<span class="tech-badge">Canvas API</span>
|
||||
<span class="tech-badge">Node.js Server</span>
|
||||
<span class="tech-badge">Fly.io</span>
|
||||
<span class="tech-badge">Render</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> · Built by Miles · 2026
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,305 @@
|
||||
* { 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;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
.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); }
|
||||
|
||||
.project-hero {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover { color: var(--text); }
|
||||
|
||||
.breadcrumb svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.project-hero h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.project-hero .tagline {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 600px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.project-meta-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.meta-chip:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.meta-chip svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.meta-chip.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.meta-chip.primary:hover {
|
||||
background: #4f46e5;
|
||||
}
|
||||
|
||||
section { padding: 40px 0; }
|
||||
|
||||
.section-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.feature-card h3 svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tech-badge {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
td { color: var(--text); }
|
||||
|
||||
.check { color: var(--green); }
|
||||
.cross { color: var(--text-dim); opacity: 0.4; }
|
||||
|
||||
.desc-text {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.desc-text code {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
code-block {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 20px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-dim);
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
code-block .comment { color: #4a5568; }
|
||||
code-block .cmd { color: var(--cyan); }
|
||||
|
||||
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) {
|
||||
.project-hero h1 { font-size: 1.8rem; }
|
||||
.nav-links { display: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user