Redesign UI: animated mesh bg, glassmorphism, glow effects, scroll reveals, bold typography

This commit is contained in:
2026-07-24 18:48:36 -05:00
parent 445762b1f2
commit d4f4b7e36d
12 changed files with 1039 additions and 823 deletions
+20 -6
View File
@@ -7,13 +7,16 @@
<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">miles.dev</a>
<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>
@@ -43,7 +46,8 @@
</div>
</section>
<section>
<section class="reveal">
<div class="section-divider"></div>
<h2 class="section-title">Features</h2>
<div class="feature-grid">
<div class="feature-card">
@@ -77,7 +81,8 @@
</div>
</section>
<section>
<section class="reveal">
<div class="section-divider"></div>
<h2 class="section-title">Settings</h2>
<div class="desc-text">
<p>Configure the mod in Geode mod settings:</p>
@@ -98,14 +103,16 @@
</div>
</section>
<section>
<section class="reveal">
<div class="section-divider"></div>
<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>
<section class="reveal">
<div class="section-divider"></div>
<h2 class="section-title">Tech Stack</h2>
<div class="tech-stack">
<span class="tech-badge">C++ (98.2%)</span>
@@ -115,7 +122,8 @@
</div>
</section>
<section>
<section class="reveal">
<div class="section-divider"></div>
<h2 class="section-title">Build</h2>
<div class="code-block">
<span class="comment"># Install Geode CLI if you haven't already</span><br>
@@ -130,5 +138,11 @@
<a href="../index.html" style="color: var(--accent); text-decoration: none;">Back to Home</a> &middot; Built by Miles &middot; 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>