542d80802e
- 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>
112 lines
3.7 KiB
HTML
112 lines
3.7 KiB
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" />
|
|
<title>ZaneDev :P</title>
|
|
<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 -->
|
|
<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 -->
|
|
<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 -->
|
|
<footer class="disclaimer" role="contentinfo">
|
|
<p><em>*Note* This website is not FDA approved</em></p>
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- 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"]
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|