Renamed site.html to index.html for GitHub pages deployment.
This commit is contained in:
jme9
+251
@@ -0,0 +1,251 @@
|
||||
<!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>
|
||||
<a href="#credits" class="nav-link">Credits</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="page-container">
|
||||
<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="grid-container">
|
||||
<h1 class="about-box-title">About</h1>
|
||||
|
||||
<section class="grid-item">
|
||||
<div class="about-text">
|
||||
<h1 class="about-title">About me,</h1>
|
||||
<p class="about-paragraph">Loading...</p>
|
||||
</div>
|
||||
<!-- Second Column: Images -->
|
||||
<div class="about-image">
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="images/LunaLightConcept.png"
|
||||
alt="About Me Images"
|
||||
class="current-image"
|
||||
/>
|
||||
<p class="image-title">
|
||||
LunaLight Concept Work by @toastydoodles
|
||||
</p>
|
||||
</div>
|
||||
<div class="image-container hidden-image">
|
||||
<img src="images/Titlescreen_share.png" alt="About Me Images" />
|
||||
<p class="image-title">LunaLight Title by Jesse M. Ellis</p>
|
||||
</div>
|
||||
<div class="image-container hidden-image">
|
||||
<img src="images/Teaser gif .gif" alt="About Me Images" />
|
||||
<p class="image-title">Across the Bridge by Jesse M. Ellis</p>
|
||||
</div>
|
||||
<div class="image-container hidden-image">
|
||||
<img src="images/LL_LVL1_Forest.png" alt="About Me Images" />
|
||||
<p class="image-title">Under the Moon by Jesse M. Ellis</p>
|
||||
</div>
|
||||
<div class="about-buttons">
|
||||
<button class="prev-btn">←</button>
|
||||
<button class="next-btn">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="projects-section">
|
||||
<div class="project-box">
|
||||
<div class="grid-container">
|
||||
<h1 class="project-box-title">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: Video -->
|
||||
<div class="project1-video-container">
|
||||
<h1 class="project-title">LunaLight - First Look</h1>
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/J_KjVaEGNk4?si=O0-429xP-P2r7JSx&autoplay=1&loop=1&playlist=J_KjVaEGNk4&mute=1"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Project 2 -->
|
||||
<section class="grid-item">
|
||||
<!-- Project 3 First Column: Project Overview Text -->
|
||||
<div class="project-text">
|
||||
<h1 class="project-title">
|
||||
Capstone - A Mobile App for the CRN
|
||||
</h1>
|
||||
<p id="project2-paragraph" class="project-paragraph">
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
<!-- Project 3 Second Column: Form -->
|
||||
<div class="project2-video-container">
|
||||
<h1 class="project-title">Capstone Demo</h1>
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/D4xNEe4QDXE?si=pHNHbAHnsie91A7P&autoplay=1&loop=1&playlist=D4xNEe4QDXE&mute=1"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work" class="work-section">
|
||||
<div class="work-box">
|
||||
<h2 class="work-section-title">Previous Work</h2>
|
||||
<div class="work-grid">
|
||||
<!-- Airship Card 1 -->
|
||||
<a
|
||||
href="https://www.linkedin.com/company/airship-social/posts/?feedView=all"
|
||||
target="_blank"
|
||||
class="work-card-link"
|
||||
>
|
||||
<div class="work-card">
|
||||
<img
|
||||
src="images/airship.png"
|
||||
alt="Airship Software Icon"
|
||||
class="work-card-image"
|
||||
/>
|
||||
<h3 class="work-card-title">Software Development Intern</h3>
|
||||
<p id="airship-text" class="work-card-text">Loading...</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Jama Card 2 -->
|
||||
<a
|
||||
href="https://www.linkedin.com/company/jama-software/posts/?feedView=all"
|
||||
target="_blank"
|
||||
class="work-card-link"
|
||||
>
|
||||
<div class="work-card">
|
||||
<img
|
||||
src="images/jama.png"
|
||||
alt="Jama Software Icon"
|
||||
class="work-card-image"
|
||||
/>
|
||||
<h3 class="work-card-title">Software Development Intern</h3>
|
||||
<p id="jama-text" class="work-card-text">Loading...</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Intel Card 3 -->
|
||||
<a
|
||||
href="https://www.linkedin.com/company/intel-corporation/posts/?feedView=all"
|
||||
target="_blank"
|
||||
class="work-card-link"
|
||||
>
|
||||
<div class="work-card">
|
||||
<img
|
||||
src="images/intel.png"
|
||||
alt="Intel Icon"
|
||||
class="work-card-image"
|
||||
/>
|
||||
<h3 class="work-card-title">Lead Engineering Technician</h3>
|
||||
<p id="intel-text" class="work-card-text">Loading...</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact-section">
|
||||
<div class="contact-box">
|
||||
<h1 class="contact-section-title">ᛜ I'd love to hear from you! ᛜ</h1>
|
||||
<form
|
||||
id="contact-form"
|
||||
method="POST"
|
||||
action="https://formspree.io/f/xwpkjpal"
|
||||
class="contact-form"
|
||||
>
|
||||
<label for="email">Your Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
/>
|
||||
<label for="message">Your Message:</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows="5"
|
||||
placeholder="Enter your message"
|
||||
required
|
||||
></textarea>
|
||||
<div class="form-buttons">
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Clear</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section id="credits" class="credits-section">
|
||||
<div class="parallax-layer layer-1"></div>
|
||||
<div class="parallax-layer layer-2"></div>
|
||||
<div class="parallax-layer layer-3"></div>
|
||||
<div class="credits-box">
|
||||
<div class="title-text">
|
||||
<p>I made this website! Copyright Jesse M. Ellis 2024 😊</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user