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

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

Browse Source
This commit is contained in:
miles
2026-07-24 18:48:36 -05:00
parent 445762b1f2
commit d4f4b7e36d
12 changed files with 1039 additions and 823 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/issue-tracker.html
+16 -4
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>
@@ -42,14 +45,16 @@
</div>
</section>
<section>
<section class="reveal">
<div class="section-divider"></div>
<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>
<section class="reveal">
<div class="section-divider"></div>
<h2 class="section-title">Features</h2>
<div class="feature-grid">
<div class="feature-card">
@@ -83,7 +88,8 @@
</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">HTML (91.1%)</span>
@@ -97,5 +103,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>