miles/miles-web
1
0
Fork 0
mirror of https://github.com/mileswolfallen2/miles-web.git synced 2026-09-08 11:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
miles
2026-07-25 17:00:36 -05:00
parent d73ac305eb
commit e50219252b
12 changed files with 189 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+60 -56
View File
@@ -5,12 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miles Wolf Allen | Developer & 3D Artist</title> <title>Miles Wolf Allen | Developer & 3D Artist</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
:root { :root {
--bg: #05050a; --bg: #05050a;
--surface: rgba(15, 15, 25, 0.7); --surface: rgba(15, 15, 25, 0.7);
@@ -19,17 +17,17 @@
--border-bright: rgba(255, 255, 255, 0.12); --border-bright: rgba(255, 255, 255, 0.12);
--text: #f0f0f5; --text: #f0f0f5;
--text-dim: #6b6b80; --text-dim: #6b6b80;
--accent: #7c5cff; --accent: #0ea5e9;
--accent-2: #00d4ff; --accent-2: #34d399;
--accent-3: #ff5caa; --accent-3: #f97316;
--green: #00ff88; --green: #34d399;
--purple: #a855f7; --orange: #f97316;
--glow: rgba(124, 92, 255, 0.4); --glow: rgba(14, 165, 233, 0.4);
--glow-2: rgba(0, 212, 255, 0.3); --glow-2: rgba(52, 211, 153, 0.3);
} }
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: 1.6;
@@ -37,6 +35,10 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
h1, h2, h3, .hero h1, .section-header h2 {
font-family: 'Fraunces', serif;
}
/* ANIMATED MESH BACKGROUND */ /* ANIMATED MESH BACKGROUND */
.mesh-bg { .mesh-bg {
position: fixed; position: fixed;
@@ -52,7 +54,7 @@
top: -25%; top: -25%;
left: -25%; left: -25%;
background: background:
radial-gradient(ellipse 600px 600px at 20% 20%, rgba(124, 92, 255, 0.12) 0%, transparent 70%), radial-gradient(ellipse 600px 600px at 20% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 70%),
radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 400px 400px at 50% 80%, rgba(255, 92, 170, 0.06) 0%, transparent 70%); radial-gradient(ellipse 400px 400px at 50% 80%, rgba(255, 92, 170, 0.06) 0%, transparent 70%);
animation: meshMove 20s ease-in-out infinite alternate; animation: meshMove 20s ease-in-out infinite alternate;
@@ -123,7 +125,7 @@
} }
@keyframes dotPulse { @keyframes dotPulse {
0%, 100% { box-shadow: 0 0 12px var(--glow); } 0%, 100% { box-shadow: 0 0 12px var(--glow); }
50% { box-shadow: 0 0 24px var(--glow), 0 0 48px rgba(124, 92, 255, 0.2); } 50% { box-shadow: 0 0 24px var(--glow), 0 0 48px rgba(14, 165, 233, 0.2); }
} }
.nav-links { display: flex; gap: 8px; align-items: center; } .nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a { .nav-links a {
@@ -157,7 +159,7 @@
.nav-links .theme-btn:hover { .nav-links .theme-btn:hover {
border-color: var(--accent); border-color: var(--accent);
color: var(--text); color: var(--text);
box-shadow: 0 0 16px rgba(124, 92, 255, 0.15); box-shadow: 0 0 16px rgba(14, 165, 233, 0.15);
} }
.theme-btn svg { width: 16px; height: 16px; } .theme-btn svg { width: 16px; height: 16px; }
@@ -245,11 +247,11 @@
.btn-glow { .btn-glow {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
box-shadow: 0 0 20px rgba(124, 92, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px rgba(14, 165, 233, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
} }
.btn-glow:hover { .btn-glow:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 0 40px rgba(124, 92, 255, 0.5), 0 8px 32px rgba(0, 0, 0, 0.4); box-shadow: 0 0 40px rgba(14, 165, 233, 0.5), 0 8px 32px rgba(0, 0, 0, 0.4);
} }
.btn-glass { .btn-glass {
background: var(--surface); background: var(--surface);
@@ -345,13 +347,13 @@
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
border: 3px solid var(--accent); border: 3px solid var(--accent);
box-shadow: 0 0 30px rgba(124, 92, 255, 0.2); box-shadow: 0 0 30px rgba(14, 165, 233, 0.2);
flex-shrink: 0; flex-shrink: 0;
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
} }
.profile-avatar:hover { .profile-avatar:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 0 50px rgba(124, 92, 255, 0.35); box-shadow: 0 0 50px rgba(14, 165, 233, 0.35);
} }
.profile-info h2 { .profile-info h2 {
font-size: 1.6rem; font-size: 1.6rem;
@@ -404,7 +406,7 @@
.achievement:hover { .achievement:hover {
border-color: var(--accent); border-color: var(--accent);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(124, 92, 255, 0.1); box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
} }
.achievement svg { width: 18px; height: 18px; color: var(--accent); } .achievement svg { width: 18px; height: 18px; color: var(--accent); }
@@ -441,9 +443,9 @@
} }
.skill:hover { .skill:hover {
border-color: var(--accent); border-color: var(--accent);
background: rgba(124, 92, 255, 0.08); background: rgba(14, 165, 233, 0.08);
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(124, 92, 255, 0.12); box-shadow: 0 8px 30px rgba(14, 165, 233, 0.12);
} }
.skill svg { width: 22px; height: 22px; color: var(--accent); } .skill svg { width: 22px; height: 22px; color: var(--accent); }
@@ -485,7 +487,7 @@
.project-card:hover::after { opacity: 1; } .project-card:hover::after { opacity: 1; }
.project-card:hover { .project-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(124, 92, 255, 0.08); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(14, 165, 233, 0.08);
} }
.project-card .pc-top { .project-card .pc-top {
display: flex; display: flex;
@@ -497,8 +499,8 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
background: rgba(124, 92, 255, 0.1); background: rgba(14, 165, 233, 0.1);
border: 1px solid rgba(124, 92, 255, 0.2); border: 1px solid rgba(14, 165, 233, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -734,14 +736,14 @@
.contact-card:hover { .contact-card:hover {
border-color: var(--accent); border-color: var(--accent);
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(124, 92, 255, 0.1); box-shadow: 0 8px 30px rgba(14, 165, 233, 0.1);
} }
.contact-card .cc-icon { .contact-card .cc-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
background: rgba(124, 92, 255, 0.1); background: rgba(14, 165, 233, 0.1);
border: 1px solid rgba(124, 92, 255, 0.15); border: 1px solid rgba(14, 165, 233, 0.15);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -791,15 +793,17 @@
--border-bright: rgba(0, 0, 0, 0.15); --border-bright: rgba(0, 0, 0, 0.15);
--text: #111; --text: #111;
--text-dim: #777; --text-dim: #777;
--accent: #6c47ff; --accent: #0ea5e9;
--accent-2: #00b4d8; --accent-2: #34d399;
--accent-3: #e04080; --accent-3: #f97316;
--green: #16a34a; --green: #34d399;
--glow: rgba(108, 71, 255, 0.25); --orange: #f97316;
--glow: rgba(14, 165, 233, 0.25);
--glow-2: rgba(52, 211, 153, 0.2);
} }
[data-theme="lite"] .mesh-bg::before { [data-theme="lite"] .mesh-bg::before {
background: background:
radial-gradient(ellipse 600px 600px at 20% 20%, rgba(108, 71, 255, 0.06) 0%, transparent 70%), radial-gradient(ellipse 600px 600px at 20% 20%, rgba(14, 165, 233, 0.06) 0%, transparent 70%),
radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 180, 216, 0.04) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 180, 216, 0.04) 0%, transparent 70%),
radial-gradient(ellipse 400px 400px at 50% 80%, rgba(224, 64, 128, 0.03) 0%, transparent 70%); radial-gradient(ellipse 400px 400px at 50% 80%, rgba(224, 64, 128, 0.03) 0%, transparent 70%);
} }
@@ -849,13 +853,13 @@
<section class="hero"> <section class="hero">
<div class="hero-chip"> <div class="hero-chip">
<span class="live-dot"></span> <span class="live-dot"></span>
Available to collaborate usually online
</div> </div>
<h1> <h1>
<span class="line">Hi, I'm</span> <span class="line">Hi, I'm</span>
<span class="line grad">Miles Wolf Allen</span> <span class="line grad">Miles Wolf Allen</span>
</h1> </h1>
<p class="hero-sub">Developer & 3D artist building games, tools, and websites. Currently obsessed with backend JavaScript and web-based emulators.</p> <p class="hero-sub">I make games, tools, and websites. Right now I'm deep into backend JavaScript and building emulators that run in your browser. Send help.</p>
<div class="hero-actions"> <div class="hero-actions">
<a href="https://github.com/mileswolfallen2" class="btn btn-glow" target="_blank"> <a href="https://github.com/mileswolfallen2" class="btn btn-glow" target="_blank">
<svg 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> <svg 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>
@@ -869,19 +873,19 @@
<div class="stats-bar reveal"> <div class="stats-bar reveal">
<div class="stat-item"> <div class="stat-item">
<div class="stat-num" id="s-repos">--</div> <div class="stat-num" id="s-repos">--</div>
<div class="stat-label">Repos</div> <div class="stat-label">repos online</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-num" id="s-stars">--</div> <div class="stat-num" id="s-stars">--</div>
<div class="stat-label">Stars</div> <div class="stat-label">stars earned</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-num" id="s-followers">--</div> <div class="stat-num" id="s-followers">--</div>
<div class="stat-label">Followers</div> <div class="stat-label">people watching</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-num" id="s-following">--</div> <div class="stat-num" id="s-following">--</div>
<div class="stat-label">Following</div> <div class="stat-label">people I watch</div>
</div> </div>
</div> </div>
@@ -892,7 +896,7 @@
<div class="profile-info"> <div class="profile-info">
<h2>Miles Wolf Allen</h2> <h2>Miles Wolf Allen</h2>
<div class="handle">@mileswolfallen2</div> <div class="handle">@mileswolfallen2</div>
<div class="bio">Building cool stuff on the web. Games, tools, and whatever catches my interest.</div> <div class="bio">I build things on the internet. Some of them are games, some are tools, and some are just because I thought it would be fun.</div>
<div class="profile-stats"> <div class="profile-stats">
<div class="ps"><b id="p-repos">142</b> repos</div> <div class="ps"><b id="p-repos">142</b> repos</div>
<div class="ps"><b id="p-stars">91</b> stars</div> <div class="ps"><b id="p-stars">91</b> stars</div>
@@ -920,10 +924,10 @@
<div class="section-divider"></div> <div class="section-divider"></div>
<div class="section-header"> <div class="section-header">
<h2>Skills & Tech</h2> <h2>Skills & Tech</h2>
<p>Technologies, tools, and things I work with</p> <p>what I actually know how to use</p>
</div> </div>
<div class="skills-label">Proficient In</div> <div class="skills-label">can build stuff with</div>
<div class="skills-grid"> <div class="skills-grid">
<div class="skill"><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"><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"><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"><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>
@@ -940,7 +944,7 @@
<div class="skill"><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 class="skill"><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-label">Currently Learning</div> <div class="skills-label">figuring out right now</div>
<div class="skills-grid"> <div class="skills-grid">
<div class="skill"><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"><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"><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"><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>
@@ -954,7 +958,7 @@
<div class="section-divider"></div> <div class="section-divider"></div>
<div class="section-header"> <div class="section-header">
<h2>Projects</h2> <h2>Projects</h2>
<p>Things I've built and forked</p> <p>stuff I've made (and some I forked)</p>
</div> </div>
<div class="projects-grid"> <div class="projects-grid">
@@ -964,7 +968,7 @@
<span class="pc-tag active">Active</span> <span class="pc-tag active">Active</span>
</div> </div>
<h3>OmniEmu 2.0</h3> <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> <p>All your emulators in one place. Install 20+ emulators, scan your ROMs, and launch games without opening 15 different apps.</p>
<div class="pc-meta"><span>&#9733; 1</span><span>MIT</span><span>v0.3.2</span></div> <div class="pc-meta"><span>&#9733; 1</span><span>MIT</span><span>v0.3.2</span></div>
</a> </a>
@@ -974,7 +978,7 @@
<span class="pc-tag community">Community</span> <span class="pc-tag community">Community</span>
</div> </div>
<h3>FEDL</h3> <h3>FEDL</h3>
<p>Geometry Dash demon list site with ranked levels, run submissions, admin moderation, and community features.</p> <p>The demon list for Geometry Dash. Ranked levels, run submissions, and a community of people way better at the game than me.</p>
<div class="pc-meta"><span>&#9733; 2</span><span>196 commits</span><span>Live</span></div> <div class="pc-meta"><span>&#9733; 2</span><span>196 commits</span><span>Live</span></div>
</a> </a>
@@ -984,7 +988,7 @@
<span class="pc-tag active">Active</span> <span class="pc-tag active">Active</span>
</div> </div>
<h3>Noto</h3> <h3>Noto</h3>
<p>AI-powered note-taking app built with Flutter and Dart. Features Cortex AI integration and Markdown support.</p> <p>Note-taking app with AI built in. Built with Flutter, powered by Cortex AI, and actually good at organizing my chaos.</p>
<div class="pc-meta"><span>&#9733; 1</span><span>MIT</span></div> <div class="pc-meta"><span>&#9733; 1</span><span>MIT</span></div>
</a> </a>
@@ -994,7 +998,7 @@
<span class="pc-tag lang">Python</span> <span class="pc-tag lang">Python</span>
</div> </div>
<h3>Nova AI</h3> <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> <p>AI assistant that runs on your machine. Desktop GUI, web interface, and CLI. No cloud, no subscriptions, just vibes.</p>
<div class="pc-meta"><span>&#9733; 1</span><span>MIT</span></div> <div class="pc-meta"><span>&#9733; 1</span><span>MIT</span></div>
</a> </a>
@@ -1004,7 +1008,7 @@
<span class="pc-tag lang">JavaScript</span> <span class="pc-tag lang">JavaScript</span>
</div> </div>
<h3>Music App</h3> <h3>Music App</h3>
<p>Ad-free music player web app inspired by YouTube Music. Stream music without interruptions.</p> <p>Music player that doesn't interrupt you with ads. Inspired by YouTube Music but without the annoying parts.</p>
<div class="pc-meta"><span>&#9733; 1</span><span>Apache-2.0</span></div> <div class="pc-meta"><span>&#9733; 1</span><span>Apache-2.0</span></div>
</a> </a>
@@ -1014,7 +1018,7 @@
<span class="pc-tag lang">HTML</span> <span class="pc-tag lang">HTML</span>
</div> </div>
<h3>Rhythm Game</h3> <h3>Rhythm Game</h3>
<p>Rhythm-based game with song selection, real-time note rendering, and keyboard controls.</p> <p>Hit keys to the beat. Song selection, real-time notes, and keyboard controls. My fingers hurt.</p>
<div class="pc-meta"><span>&#9733; 1</span><span>MPL-2.0</span></div> <div class="pc-meta"><span>&#9733; 1</span><span>MPL-2.0</span></div>
</a> </a>
@@ -1024,7 +1028,7 @@
<span class="pc-tag wip">WIP</span> <span class="pc-tag wip">WIP</span>
</div> </div>
<h3>FEDL Geode Mod</h3> <h3>FEDL Geode Mod</h3>
<p>Geometry Dash mod for viewing the ranked demon list, playing roulette, and checking for banned mods.</p> <p>Geometry Dash mod that shows the demon list in-game. Roulette mode, banned mod detection, and more.</p>
<div class="pc-meta"><span>MIT</span></div> <div class="pc-meta"><span>MIT</span></div>
</a> </a>
@@ -1034,7 +1038,7 @@
<span class="pc-tag lang">HTML</span> <span class="pc-tag lang">HTML</span>
</div> </div>
<h3>Decompilations</h3> <h3>Decompilations</h3>
<p>Showcase of native PC ports, decompilations, and recompilations with progress tracking.</p> <p>Native PC ports and decompilations of games. Progress tracking for projects that probably shouldn't exist.</p>
<div class="pc-meta"><span>MIT</span></div> <div class="pc-meta"><span>MIT</span></div>
</a> </a>
@@ -1044,7 +1048,7 @@
<span class="pc-tag lang">HTML</span> <span class="pc-tag lang">HTML</span>
</div> </div>
<h3>Issue Tracker</h3> <h3>Issue Tracker</h3>
<p>Custom issue tracker built from scratch with a Node.js backend.</p> <p>Built my own issue tracker because why not. Node.js backend, no frameworks, just raw determination.</p>
<div class="pc-meta"><span>MIT</span></div> <div class="pc-meta"><span>MIT</span></div>
</a> </a>
@@ -1054,7 +1058,7 @@
<span class="pc-tag lang">HTML</span> <span class="pc-tag lang">HTML</span>
</div> </div>
<h3>Moon Gaming</h3> <h3>Moon Gaming</h3>
<p>Game hub with 1,542+ commits. Browse, play, and explore a growing library of browser games.</p> <p>Game hub with 1,500+ commits. Browse, play, and explore a growing library of browser games I made at 2am.</p>
<div class="pc-meta"><span>&#9733; 1,542</span><span>MIT</span></div> <div class="pc-meta"><span>&#9733; 1,542</span><span>MIT</span></div>
</a> </a>
</div> </div>
@@ -1155,7 +1159,7 @@
<div class="section-divider"></div> <div class="section-divider"></div>
<div class="section-header"> <div class="section-header">
<h2>Get In Touch</h2> <h2>Get In Touch</h2>
<p>Let's build something together</p> <p>unless you're a bot, then please go away</p>
</div> </div>
<div class="contact-grid"> <div class="contact-grid">
@@ -1183,7 +1187,7 @@
</section> </section>
<footer> <footer>
Built by Miles &middot; 2026 &middot; Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> Built by Miles &middot; 2026 &middot; Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
projects/decompilations.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decompilations | Miles Wolf Allen</title> <title>Decompilations | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -121,7 +123,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/fedl.html
+3 -1
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FEDL | Miles Wolf Allen</title> <title>FEDL | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -157,7 +159,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
projects/geode-mod.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FEDL Geode Mod | Miles Wolf Allen</title> <title>FEDL Geode Mod | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -153,7 +155,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/issue-tracker.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Issue Tracker | Miles Wolf Allen</title> <title>Issue Tracker | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -118,7 +120,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/moon-gaming.html
+6 -5
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moon Gaming | Miles Wolf Allen</title> <title>Moon Gaming | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -142,10 +144,9 @@
</div> </div>
</section> </section>
<a href="../index.html" class="back-link"> <footer>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
Back to Home </footer>
</a>
</div> </div>
<script> <script>
fetch('https://api.github.com/repos/mileswolfallen2/moon-gaming') fetch('https://api.github.com/repos/mileswolfallen2/moon-gaming')
projects/music-app.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music App | Miles Wolf Allen</title> <title>Music App | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -138,7 +140,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/noto.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noto | Miles Wolf Allen</title> <title>Noto | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -184,7 +186,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2025 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/nova.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nova AI | Miles Wolf Allen</title> <title>Nova AI | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -167,7 +169,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/omniemu.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniEmu 2.0 | Miles Wolf Allen</title> <title>OmniEmu 2.0 | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -202,7 +204,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/rhythm-game.html
+4 -2
View File
@@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rhythm Game | Miles Wolf Allen</title> <title>Rhythm Game | Miles Wolf Allen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -16,7 +18,7 @@
<div class="container"> <div class="container">
<nav> <nav>
<a href="../index.html" class="nav-logo"><span class="logo-dot"></span> miles.dev</a> <a href="../index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
<div class="nav-links"> <div class="nav-links">
<a href="../index.html#about">About</a> <a href="../index.html#about">About</a>
<a href="../index.html#skills">Skills</a> <a href="../index.html#skills">Skills</a>
@@ -132,7 +134,7 @@
</section> </section>
<footer> <footer>
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 2026 Built by Miles · 2026 · Powered by <a href="https://docs.github.com/en/rest" target="_blank">GitHub API</a> and too much coffee
</footer> </footer>
</div> </div>
<script> <script>
projects/style.css
+88 -24
View File
@@ -8,16 +8,17 @@
--border-bright: rgba(255, 255, 255, 0.12); --border-bright: rgba(255, 255, 255, 0.12);
--text: #f0f0f5; --text: #f0f0f5;
--text-dim: #6b6b80; --text-dim: #6b6b80;
--accent: #7c5cff; --accent: #0ea5e9;
--accent-2: #00d4ff; --accent-2: #34d399;
--accent-3: #ff5caa; --accent-3: #f97316;
--green: #00ff88; --green: #34d399;
--purple: #a855f7; --orange: #f97316;
--glow: rgba(124, 92, 255, 0.4); --glow: rgba(14, 165, 233, 0.4);
--glow-2: rgba(52, 211, 153, 0.3);
} }
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: 1.6;
@@ -25,7 +26,9 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); h1, h2, h3 { font-family: 'Fraunces', serif; }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Fraunces:opsz,[email protected],300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&display=swap');
/* ANIMATED MESH BG */ /* ANIMATED MESH BG */
.mesh-bg { .mesh-bg {
@@ -42,9 +45,9 @@ body {
top: -25%; top: -25%;
left: -25%; left: -25%;
background: background:
radial-gradient(ellipse 600px 600px at 20% 20%, rgba(124, 92, 255, 0.12) 0%, transparent 70%), radial-gradient(ellipse 600px 600px at 20% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 70%),
radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 30%, rgba(52, 211, 153, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 400px 400px at 50% 80%, rgba(255, 92, 170, 0.06) 0%, transparent 70%); radial-gradient(ellipse 400px 400px at 50% 80%, rgba(249, 115, 22, 0.06) 0%, transparent 70%);
animation: meshMove 20s ease-in-out infinite alternate; animation: meshMove 20s ease-in-out infinite alternate;
} }
@keyframes meshMove { @keyframes meshMove {
@@ -76,6 +79,37 @@ body {
z-index: 1; z-index: 1;
} }
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
pointer-events: none;
z-index: 1;
}
.bg-glow {
position: fixed;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
z-index: 0;
}
.bg-glow-1 {
width: 600px; height: 600px;
top: -200px; left: -100px;
background: radial-gradient(circle, rgba(14, 165, 233, 0.08), transparent 70%);
}
.bg-glow-2 {
width: 500px; height: 500px;
bottom: -200px; right: -100px;
background: radial-gradient(circle, rgba(52, 211, 153, 0.06), transparent 70%);
}
.container { .container {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
@@ -90,9 +124,12 @@ nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: relative;
z-index: 10;
} }
.nav-logo { .nav-logo {
font-family: 'Montserrat', sans-serif;
font-weight: 900; font-weight: 900;
font-size: 1.2rem; font-size: 1.2rem;
color: var(--text); color: var(--text);
@@ -112,7 +149,7 @@ nav {
} }
@keyframes dotPulse { @keyframes dotPulse {
0%, 100% { box-shadow: 0 0 12px var(--glow); } 0%, 100% { box-shadow: 0 0 12px var(--glow); }
50% { box-shadow: 0 0 24px var(--glow), 0 0 48px rgba(124, 92, 255, 0.2); } 50% { box-shadow: 0 0 24px var(--glow), 0 0 48px rgba(14, 165, 233, 0.2); }
} }
.nav-links { display: flex; gap: 8px; align-items: center; } .nav-links { display: flex; gap: 8px; align-items: center; }
@@ -282,6 +319,7 @@ section { padding: 48px 0; }
} }
.section-title { .section-title {
font-family: 'Fraunces', serif;
font-size: 2rem; font-size: 2rem;
font-weight: 900; font-weight: 900;
letter-spacing: -0.04em; letter-spacing: -0.04em;
@@ -312,28 +350,24 @@ section { padding: 48px 0; }
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.feature-card::after { .feature-card::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; top: 0; left: 0; right: 0;
border-radius: 14px; height: 3px;
padding: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
background: linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
pointer-events: none;
} }
.feature-card:hover::after { opacity: 1; } .feature-card:hover::before { opacity: 1; }
.feature-card:hover { .feature-card:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(124, 92, 255, 0.06); border-color: rgba(14, 165, 233, 0.3);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(14, 165, 233, 0.08);
} }
.feature-card h3 { .feature-card h3 {
font-family: 'Fraunces', serif;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 8px;
@@ -450,6 +484,36 @@ footer a { color: var(--accent); text-decoration: none; }
transform: translateY(0); transform: translateY(0);
} }
/* LITE THEME */
[data-theme="lite"] {
--bg: #f8f6f3;
--surface: rgba(255, 255, 255, 0.8);
--surface-solid: #fff;
--border: rgba(0, 0, 0, 0.08);
--border-bright: rgba(0, 0, 0, 0.15);
--text: #111;
--text-dim: #777;
--accent: #0ea5e9;
--accent-2: #34d399;
--accent-3: #f97316;
--green: #34d399;
--orange: #f97316;
--glow: rgba(14, 165, 233, 0.25);
--glow-2: rgba(52, 211, 153, 0.2);
}
[data-theme="lite"] .mesh-bg::before {
background:
radial-gradient(ellipse 600px 600px at 20% 20%, rgba(14, 165, 233, 0.06) 0%, transparent 70%),
radial-gradient(ellipse 500px 500px at 80% 30%, rgba(52, 211, 153, 0.04) 0%, transparent 70%),
radial-gradient(ellipse 400px 400px at 50% 80%, rgba(249, 115, 22, 0.03) 0%, transparent 70%);
}
[data-theme="lite"] .grid-overlay {
background-image:
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}
[data-theme="lite"] .noise { opacity: 0.015; }
@media (max-width: 640px) { @media (max-width: 640px) {
.project-hero h1 { font-size: 2rem; } .project-hero h1 { font-size: 2rem; }
.nav-links { display: none; } .nav-links { display: none; }