<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Name - Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
</head>
<body>
<!-- Header with Navigation -->
<header>
<h1>Your Name</h1>
<nav>
<ul>
<li><a href="#biography">Biography</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main sections -->
<main>
<!-- Biography Section -->
<section id="biography">
<h2>Biography</h2>
<!-- Content here -->
</section>
<!-- Resume Section -->
<section id="resume">
<h2>Resume</h2>
<!-- Content here -->
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact</h2>
<!-- Contact form -->
</section>
</main>
<!-- Futuristic Interactive 3D Background -->
<div id="three-js-background"></div>
<!-- Footer -->
<footer>
<p>© 2040 Your Name. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>