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:
@@ -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>
|
||||
Reference in New Issue
Block a user