feat: Implement comprehensive repository improvements
- Set up ESLint and Prettier for code quality - Split large script.js into modular architecture (DOM, animations, effects, easter-eggs, sound, interactions) - Organize assets into proper directory structure (assets/css, assets/js/modules, assets/images) - Add semantic HTML5 landmarks (header, main, nav, footer) - Implement ARIA labels and keyboard navigation for accessibility - Set up Vite build system with minification and optimization - Add CSS custom properties for design tokens - Create sitemap.xml and robots.txt for SEO - Add MIT LICENSE - Expand README with comprehensive documentation - Set up GitHub Actions CI/CD workflow - Optimize build output: ~59KB total (30KB image + 13KB CSS + 16KB JS gzipped) Co-authored-by: ZaneThePython <102631678+ZaneThePython@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
170
index.html
170
index.html
@@ -1,91 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="ZaneDev - A certified epik guy who likes to make random stuff. Check out my projects and get in touch!">
|
||||
<meta name="keywords" content="ZaneDev, developer, programming, projects, web development">
|
||||
<meta name="author" content="ZaneDev">
|
||||
<meta property="og:title" content="ZaneDev - Personal Website">
|
||||
<meta property="og:description" content="Bored guy who likes to make random stuff. Check out my projects and connect with me!">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://zanedev.com">
|
||||
<meta name="robots" content="index, follow">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="ZaneDev - A certified epik guy who likes to make random stuff. Check out my projects and get in touch!"
|
||||
/>
|
||||
<meta name="keywords" content="ZaneDev, developer, programming, projects, web development" />
|
||||
<meta name="author" content="ZaneDev" />
|
||||
<meta property="og:title" content="ZaneDev - Personal Website" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Bored guy who likes to make random stuff. Check out my projects and connect with me!"
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://zanedev.com" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<title>ZaneDev :P</title>
|
||||
<link rel="icon" type="image/jpeg" href="Zane.jpg">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Avatar Section -->
|
||||
<div class="avatar-section">
|
||||
<div class="avatar">
|
||||
<img src="Zane.jpg" alt="ZaneDev's Profile Picture" class="profile-image">
|
||||
</div>
|
||||
<h1 class="brand-name">ZaneDev</h1>
|
||||
<p class="tagline">Certified Epik Guy</p>
|
||||
<link rel="icon" type="image/jpeg" href="assets/images/Zane.jpg" />
|
||||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container" role="main" aria-label="Main content">
|
||||
<!-- Avatar Section -->
|
||||
<header class="avatar-section" role="banner">
|
||||
<div class="avatar" tabindex="0" role="img" aria-label="ZaneDev's profile avatar">
|
||||
<img src="assets/images/Zane.jpg" alt="ZaneDev's Profile Picture" class="profile-image" />
|
||||
</div>
|
||||
<h1 class="brand-name" tabindex="0">ZaneDev</h1>
|
||||
<p class="tagline">Certified Epik Guy</p>
|
||||
</header>
|
||||
|
||||
<!-- About Section -->
|
||||
<div class="about-section">
|
||||
<p class="about-text">Bored guy who likes to make random stuff.</p>
|
||||
<p class="not-for-hire-note">(not for hire btw)</p>
|
||||
</div>
|
||||
<!-- About Section -->
|
||||
<section class="about-section" aria-labelledby="about-heading">
|
||||
<h2 id="about-heading" class="sr-only">About</h2>
|
||||
<p class="about-text">Bored guy who likes to make random stuff.</p>
|
||||
<p class="not-for-hire-note" aria-live="polite">(not for hire btw)</p>
|
||||
</section>
|
||||
|
||||
<!-- Navigation Section -->
|
||||
<div class="navigation">
|
||||
<a href="https://fred.zane.org" class="nav-button" target="_blank" rel="noopener noreferrer">
|
||||
<span>Fred: Origins</span>
|
||||
</a>
|
||||
<a href="https://github.com/ZaneThePython" class="nav-button" target="_blank" rel="noopener noreferrer">
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a href="mailto:contact@zane.org" class="nav-button">
|
||||
<span>Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Navigation Section -->
|
||||
<nav class="navigation" role="navigation" aria-label="Main navigation">
|
||||
<a
|
||||
href="https://fred.zane.org"
|
||||
class="nav-button"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Visit Fred: Origins (opens in new tab)"
|
||||
>
|
||||
<span>Fred: Origins</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/ZaneThePython"
|
||||
class="nav-button"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Visit GitHub profile (opens in new tab)"
|
||||
>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:contact@zane.org"
|
||||
class="nav-button"
|
||||
aria-label="Send email to contact@zane.org"
|
||||
>
|
||||
<span>Contact</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<div class="disclaimer">
|
||||
<p><em>*Note* This website is not FDA approved</em></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Disclaimer -->
|
||||
<footer class="disclaimer" role="contentinfo">
|
||||
<p><em>*Note* This website is not FDA approved</em></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Projects button popup functionality
|
||||
document.querySelector('.projects-button').addEventListener('click', function() {
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'popup';
|
||||
popup.innerHTML = `
|
||||
<div class="popup-content">
|
||||
<p>No projects as of now :P</p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(popup);
|
||||
|
||||
// Remove popup after 3 seconds
|
||||
setTimeout(() => {
|
||||
popup.style.opacity = '0';
|
||||
setTimeout(() => popup.remove(), 300);
|
||||
}, 3000);
|
||||
});
|
||||
</script>
|
||||
<script src="script.js"></script>
|
||||
<!-- Screen reader only class for accessibility -->
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module" src="assets/js/main.js"></script>
|
||||
|
||||
<!-- Add structured data for better SEO -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "Person",
|
||||
"name": "ZaneDev",
|
||||
"url": "https://zanedev.com",
|
||||
"sameAs": [
|
||||
"https://github.com/ZaneThePython"
|
||||
]
|
||||
}
|
||||
"sameAs": ["https://github.com/ZaneThePython"]
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user