<!-- ── Navigation ── -->
<nav id="topnav">
<div class="nav-inner">
<span class="nav-logo">◆ Project</span>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#getting-started">Get Started</a></li>
<li><a href="./about.html">More</a></li>
</ul>
</div>
</nav>
<!-- ── Hero with Three.js canvas ── -->
<section id="hero">
<canvas id="three-canvas"></canvas>
<div class="hero-content">
<div class="badge">v1.0.0 · Open Source</div>
<h1 class="hero-title">My <span class="gradient-text">Project</span></h1>
<p class="hero-sub">A beautiful, interactive README with live 3D visuals built right into the page.</p>
<div class="hero-actions">
<a href="#getting-started" class="btn btn-primary">Get Started</a>
<a href="#about" class="btn btn-ghost">Learn More</a>
</div>
</div>
<div class="hero-scroll-hint">scroll ↓</div>
</section>
<!-- ── About ── -->
<section id="about" class="content-section">
<div class="container">
<h2 class="section-title">About</h2>
<p class="section-body">
This project is a starting point for building something great. Edit this page to describe what your project does, who it's for, and why it matters. The 3D scene above is rendered with <strong>Three.js</strong> — fully customisable in <code>assets/js/scene.js</code>.
</p>
<div class="cards">
<div class="card">
<div class="card-icon">△</div>
<h3>Fast</h3>
<p>Pure static files — no build step needed. Loads instantly in any browser.</p>
</div>
<div class="card">
<div class="card-icon">◆</div>
<h3>3D Ready</h3>
<p>Three.js wired up out of the box. Add meshes, lights and animations freely.</p>
</div>
<div class="card">
<div class="card-icon">◯</div>
<h3>Customisable</h3>
<p>Clean HTML, CSS and JS structure makes it easy to make this your own.</p>
</div>
</div>
</div>
</section>
<!-- ── Features ── -->
<section id="features" class="content-section alt-bg">
<div class="container">
<h2 class="section-title">Features</h2>
<ul class="feature-list">
<li><span class="check">✓</span> Animated Three.js hero with floating 3D geometry</li>
<li><span class="check">✓</span> Mouse-interactive camera drift</li>
<li><span class="check">✓</span> Responsive layout — looks great on mobile & desktop</li>
<li><span class="check">✓</span> Dark-mode styled code blocks</li>
<li><span class="check">✓</span> No dependencies beyond Three.js CDN</li>
<li><span class="check">✓</span> Easy to extend with your own content</li>
</ul>
</div>
</section>
<!-- ── Getting Started ── -->
<section id="getting-started" class="content-section">
<div class="container">
<h2 class="section-title">Getting Started</h2>
<p class="section-body">Clone the repository and open <code>README.md</code> in your browser — or deploy straight to Replit.</p>
<div class="code-block">
<div class="code-header">
<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
<span class="code-label">bash</span>
</div>
<pre><code><span class="c"># Clone the repo</span>
git clone https://github.com/your-username/your-repo.git cd your-repo
# Open locally (no build step needed) open README.md
<p class="section-body" style="margin-top:2rem;">To customise the 3D scene, edit <code>assets/js/scene.js</code>. Some things you can change:</p>
<div class="code-block">
<div class="code-header">
<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
<span class="code-label">scene.js</span>
</div>
<pre><code><span class="c">// Change geometry type</span>
const geo = new THREE.IcosahedronGeometry(1, 0);
// Change colour palette const colors = ['#667eea', '#764ba2', '#f093fb'];
// Change particle count const COUNT = 60;
<!-- ── Footer ── -->
<footer>
<div class="container">
<p>Built with ♥ and Three.js · Edit this page in <code>README.md</code></p>
</div>
</footer>
<!-- Three.js via CDN -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="./assets/js/scene.js"></script>