mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
128 lines
5.8 KiB
HTML
128 lines
5.8 KiB
HTML
<!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="mesh-bg"></div>
|
|
<div class="grid-overlay"></div>
|
|
<div class="noise"></div>
|
|
<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"><span class="logo-dot"></span> 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 class="reveal">
|
|
<div class="section-divider"></div>
|
|
<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 class="reveal">
|
|
<div class="section-divider"></div>
|
|
<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>
|
|
<script>
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
</script>
|
|
</body>
|
|
</html>
|