jme9
130 lines
4.0 KiB
HTML
130 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<title>MyWebsite</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script defer src="site.js"></script>
|
|
</head>
|
|
<body>
|
|
<header id="top" class="site-header">
|
|
<nav class="navbar">
|
|
<div class="nav-left">
|
|
<img
|
|
class="icon-pic"
|
|
src="images/Ravenwood Watermark .png"
|
|
alt="Ravenwood Watermark"
|
|
/>
|
|
<a href="#top" class="nav-link">The Ravenwood Arts</a>
|
|
</div>
|
|
<div class="nav-right">
|
|
<a href="#about" class="nav-link">About</a>
|
|
<a href="#projects" class="nav-link">Projects</a>
|
|
<a href="#work" class="nav-link">Work</a>
|
|
<a href="#contact" class="nav-link">Contact</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<section id="title" class="title-section">
|
|
<div class="title-box">
|
|
<div class="title-text">
|
|
<p>Developer Profile</p>
|
|
<h1>Jesse M. Ellis</h1>
|
|
</div>
|
|
<img
|
|
src="images/Profile.png"
|
|
alt="Profile Picture"
|
|
class="profile-pic"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about-section">
|
|
<div class="about-box">
|
|
<!-- First Column: About Text -->
|
|
<div class="about-text">
|
|
<h1 class="about-title">About Jesse,</h1>
|
|
<p class="about-paragraph">Loading...</p>
|
|
</div>
|
|
<!-- Second Column: Images -->
|
|
<div class="about-image">
|
|
<img
|
|
src="images/Figma.jpg"
|
|
alt="About Me Images"
|
|
class="current-image"
|
|
/>
|
|
<img
|
|
src="images/Clouds.png"
|
|
alt="About me images"
|
|
class="hidden-image"
|
|
/>
|
|
<img
|
|
src="images/SiteUpdate1.jpg"
|
|
alt="About me images"
|
|
class="hidden-image"
|
|
/>
|
|
<div class="about-buttons">
|
|
<button class="prev-btn">←</button>
|
|
<button class="next-btn">→</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects" class="projects-section">
|
|
<div class="project-box">
|
|
<div class="grid-container">
|
|
<h1 class="project-box-title">Personal Projects</h1>
|
|
|
|
<!-- Project 1 -->
|
|
<section class="grid-item">
|
|
<!-- Project 1 First Column: Project Overview Text -->
|
|
<div class="project-text">
|
|
<h1 class="project-title">LunaLight - A Retro Game Project,</h1>
|
|
<p id="project1-paragraph" class="project-paragraph">
|
|
Loading...
|
|
</p>
|
|
</div>
|
|
<!-- Project 1 Second Column: Images -->
|
|
<div class="project1-video-container">
|
|
<h1 class="project-title">LunaLight - Teaser</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Project 2 -->
|
|
<section class="grid-item">
|
|
<!-- Project 2 First Column: Project Overview Text -->
|
|
<div class="project-text">
|
|
<h1 class="project-title">
|
|
EightBiterator - A Retro Game Melody Generator,
|
|
</h1>
|
|
<p id="project2-paragraph" class="project-paragraph">
|
|
Loading...
|
|
</p>
|
|
</div>
|
|
<!-- Project 2 Second Column: Images -->
|
|
<div class="project2-form-container">
|
|
<h1 class="project-title">EightBiterator</h1>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="work" class="work-section">
|
|
<div class="work-box">
|
|
<h2 class="section-title">Previous Work</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact-section">
|
|
<div class="contact-box">
|
|
<h2 class="section-title">Contact</h2>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|