jme9
259 lines
9.5 KiB
HTML
259 lines
9.5 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>The Ravenwood Arts: Developer Profile Jesse M. Ellis</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script defer src="site.js"></script>
|
|
</head>
|
|
<body
|
|
style="
|
|
background-image: url('images/Moon.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
"
|
|
>
|
|
<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 using HTML, CSS and JavaScript! Copyright Jesse M. Ellis 2024 😊</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|