update to credit section
This commit is contained in:
jme9
@@ -0,0 +1,258 @@
|
||||
<!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! Copyright Jesse M. Ellis 2024 😊</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,258 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!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 id="credit-text" class="work-card-text">Loading...</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,159 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Scroll page
|
||||
document.querySelectorAll(".nav-link").forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const target = document.querySelector(this.getAttribute("href"));
|
||||
if (!target) return;
|
||||
|
||||
const targetPosition =
|
||||
target.getBoundingClientRect().top + window.scrollY;
|
||||
const startPosition = window.scrollY;
|
||||
const distance = targetPosition - startPosition;
|
||||
const duration = 1000;
|
||||
let startTime = null;
|
||||
|
||||
function easeOutCubic(t) {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
|
||||
function scrollAnimation(currentTime) {
|
||||
if (!startTime) startTime = currentTime;
|
||||
const timeElapsed = currentTime - startTime;
|
||||
const progress = Math.min(timeElapsed / duration, 1);
|
||||
const easeProgress = easeOutCubic(progress);
|
||||
window.scrollTo(0, startPosition + distance * easeProgress);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(scrollAnimation);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(scrollAnimation);
|
||||
});
|
||||
});
|
||||
|
||||
// dynamic scrolling
|
||||
document.addEventListener("scroll", () => {
|
||||
const navBar = document.querySelector(".navbar");
|
||||
const titleBox = document.querySelector(".title-box");
|
||||
const aboutSection = document.querySelector("#about");
|
||||
const contactSection = document.querySelector("#contact");
|
||||
const creditsSection = document.querySelector("#credits");
|
||||
const parallaxlayer1 = document.querySelector(".layer-1");
|
||||
const parallaxlayer2 = document.querySelector(".layer-2");
|
||||
const parallaxlayer3 = document.querySelector(".layer-3");
|
||||
|
||||
const scrollY = window.scrollY;
|
||||
const aboutTop = aboutSection.getBoundingClientRect().top + scrollY;
|
||||
const contactTop = contactSection.getBoundingClientRect().top + scrollY;
|
||||
const sectionTop = creditsSection.offsetTop;
|
||||
const slowScrollRate = 0.5;
|
||||
|
||||
if (scrollY < aboutTop) {
|
||||
const opacity1 = scrollY / aboutTop;
|
||||
titleBox.style.transform = `translateY(${scrollY * slowScrollRate}px)`;
|
||||
titleBox.style.opacity = Math.max(1 - opacity1, 0);
|
||||
} else {
|
||||
titleBox.style.transform = "translateY(0)";
|
||||
titleBox.style.opacity = 0;
|
||||
}
|
||||
|
||||
if (scrollY > contactTop) {
|
||||
const opacity2 =
|
||||
(scrollY - contactTop) / (document.body.scrollHeight - contactTop);
|
||||
navBar.style.opacity = Math.max(1 - opacity2, 0.5);
|
||||
} else {
|
||||
navBar.style.opacity = 1;
|
||||
}
|
||||
|
||||
const relativeScrollY = sectionTop - scrollY;
|
||||
parallaxlayer1.style.transform = `translateY(${relativeScrollY * 0.2}px)`;
|
||||
parallaxlayer2.style.transform = `translateY(${relativeScrollY * 0.4}px)`;
|
||||
parallaxlayer3.style.transform = `translateY(${relativeScrollY * 0.6}px)`;
|
||||
});
|
||||
|
||||
// Function to load text from a file into an html component
|
||||
function loadTextFromFile(filePath, targetSelector) {
|
||||
fetch(filePath)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch file: " + response.statusText);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then((text) => {
|
||||
const targetElement = document.querySelector(targetSelector);
|
||||
if (targetElement) {
|
||||
targetElement.textContent = text;
|
||||
} else {
|
||||
console.error(`Target element not found: ${targetSelector}`);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading text from file:", error);
|
||||
});
|
||||
}
|
||||
|
||||
// Load text files when page loads
|
||||
window.addEventListener("load", () => {
|
||||
loadTextFromFile("text/about.txt", ".about-paragraph");
|
||||
loadTextFromFile("text/project1.txt", "#project1-paragraph");
|
||||
loadTextFromFile("text/project2.txt", "#project2-paragraph");
|
||||
loadTextFromFile("text/airship.txt", "#airship-text");
|
||||
loadTextFromFile("text/jama.txt", "#jama-text");
|
||||
loadTextFromFile("text/intel.txt", "#intel-text");
|
||||
});
|
||||
|
||||
// Image carousel
|
||||
const images = document.querySelectorAll(".image-container");
|
||||
const prevBtn = document.querySelector(".prev-btn");
|
||||
const nextBtn = document.querySelector(".next-btn");
|
||||
let currentIndex = 0;
|
||||
function updateImages() {
|
||||
images.forEach((img, index) => {
|
||||
img.classList.toggle("current-image", index === currentIndex);
|
||||
img.classList.toggle("hidden-image", index !== currentIndex);
|
||||
});
|
||||
}
|
||||
prevBtn.addEventListener("click", () => {
|
||||
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
||||
updateImages();
|
||||
});
|
||||
nextBtn.addEventListener("click", () => {
|
||||
currentIndex = (currentIndex + 1) % images.length;
|
||||
updateImages();
|
||||
});
|
||||
|
||||
updateImages();
|
||||
|
||||
// On contact submit
|
||||
document
|
||||
.getElementById("contact-form")
|
||||
.addEventListener("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
const form = event.target;
|
||||
const formData = new FormData(form);
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: form.method,
|
||||
body: formData,
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
alert("Thank you! Your message has been sent.");
|
||||
form.reset();
|
||||
} else {
|
||||
alert("Oops! There was a problem submitting your form.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert(
|
||||
"There was a problem submitting your form. Please try again later."
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,160 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Scroll page
|
||||
document.querySelectorAll(".nav-link").forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const target = document.querySelector(this.getAttribute("href"));
|
||||
if (!target) return;
|
||||
|
||||
const targetPosition =
|
||||
target.getBoundingClientRect().top + window.scrollY;
|
||||
const startPosition = window.scrollY;
|
||||
const distance = targetPosition - startPosition;
|
||||
const duration = 1000;
|
||||
let startTime = null;
|
||||
|
||||
function easeOutCubic(t) {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
|
||||
function scrollAnimation(currentTime) {
|
||||
if (!startTime) startTime = currentTime;
|
||||
const timeElapsed = currentTime - startTime;
|
||||
const progress = Math.min(timeElapsed / duration, 1);
|
||||
const easeProgress = easeOutCubic(progress);
|
||||
window.scrollTo(0, startPosition + distance * easeProgress);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(scrollAnimation);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(scrollAnimation);
|
||||
});
|
||||
});
|
||||
|
||||
// dynamic scrolling
|
||||
document.addEventListener("scroll", () => {
|
||||
const navBar = document.querySelector(".navbar");
|
||||
const titleBox = document.querySelector(".title-box");
|
||||
const aboutSection = document.querySelector("#about");
|
||||
const contactSection = document.querySelector("#contact");
|
||||
const creditsSection = document.querySelector("#credits");
|
||||
const parallaxlayer1 = document.querySelector(".layer-1");
|
||||
const parallaxlayer2 = document.querySelector(".layer-2");
|
||||
const parallaxlayer3 = document.querySelector(".layer-3");
|
||||
|
||||
const scrollY = window.scrollY;
|
||||
const aboutTop = aboutSection.getBoundingClientRect().top + scrollY;
|
||||
const contactTop = contactSection.getBoundingClientRect().top + scrollY;
|
||||
const sectionTop = creditsSection.offsetTop;
|
||||
const slowScrollRate = 0.5;
|
||||
|
||||
if (scrollY < aboutTop) {
|
||||
const opacity1 = scrollY / aboutTop;
|
||||
titleBox.style.transform = `translateY(${scrollY * slowScrollRate}px)`;
|
||||
titleBox.style.opacity = Math.max(1 - opacity1, 0);
|
||||
} else {
|
||||
titleBox.style.transform = "translateY(0)";
|
||||
titleBox.style.opacity = 0;
|
||||
}
|
||||
|
||||
if (scrollY > contactTop) {
|
||||
const opacity2 =
|
||||
(scrollY - contactTop) / (document.body.scrollHeight - contactTop);
|
||||
navBar.style.opacity = Math.max(1 - opacity2, 0.5);
|
||||
} else {
|
||||
navBar.style.opacity = 1;
|
||||
}
|
||||
|
||||
const relativeScrollY = sectionTop - scrollY;
|
||||
parallaxlayer1.style.transform = `translateY(${relativeScrollY * 0.2}px)`;
|
||||
parallaxlayer2.style.transform = `translateY(${relativeScrollY * 0.4}px)`;
|
||||
parallaxlayer3.style.transform = `translateY(${relativeScrollY * 0.6}px)`;
|
||||
});
|
||||
|
||||
// Function to load text from a file into an html component
|
||||
function loadTextFromFile(filePath, targetSelector) {
|
||||
fetch(filePath)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch file: " + response.statusText);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then((text) => {
|
||||
const targetElement = document.querySelector(targetSelector);
|
||||
if (targetElement) {
|
||||
targetElement.textContent = text;
|
||||
} else {
|
||||
console.error(`Target element not found: ${targetSelector}`);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading text from file:", error);
|
||||
});
|
||||
}
|
||||
|
||||
// Load text files when page loads
|
||||
window.addEventListener("load", () => {
|
||||
loadTextFromFile("text/about.txt", ".about-paragraph");
|
||||
loadTextFromFile("text/project1.txt", "#project1-paragraph");
|
||||
loadTextFromFile("text/project2.txt", "#project2-paragraph");
|
||||
loadTextFromFile("text/airship.txt", "#airship-text");
|
||||
loadTextFromFile("text/jama.txt", "#jama-text");
|
||||
loadTextFromFile("text/intel.txt", "#intel-text");
|
||||
loadTextFromFile("text/credit.txt", "#credit-text");
|
||||
});
|
||||
|
||||
// Image carousel
|
||||
const images = document.querySelectorAll(".image-container");
|
||||
const prevBtn = document.querySelector(".prev-btn");
|
||||
const nextBtn = document.querySelector(".next-btn");
|
||||
let currentIndex = 0;
|
||||
function updateImages() {
|
||||
images.forEach((img, index) => {
|
||||
img.classList.toggle("current-image", index === currentIndex);
|
||||
img.classList.toggle("hidden-image", index !== currentIndex);
|
||||
});
|
||||
}
|
||||
prevBtn.addEventListener("click", () => {
|
||||
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
||||
updateImages();
|
||||
});
|
||||
nextBtn.addEventListener("click", () => {
|
||||
currentIndex = (currentIndex + 1) % images.length;
|
||||
updateImages();
|
||||
});
|
||||
|
||||
updateImages();
|
||||
|
||||
// On contact submit
|
||||
document
|
||||
.getElementById("contact-form")
|
||||
.addEventListener("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
const form = event.target;
|
||||
const formData = new FormData(form);
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: form.method,
|
||||
body: formData,
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
alert("Thank you! Your message has been sent.");
|
||||
form.reset();
|
||||
} else {
|
||||
alert("Oops! There was a problem submitting your form.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert(
|
||||
"There was a problem submitting your form. Please try again later."
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,564 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
color: black;
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
padding: 2.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.icon-pic {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
margin-right: 1rem;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(24, 18, 18, 0.8);
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 1440px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 3rem;
|
||||
margin-right: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 100px;
|
||||
margin-top: 15rem;
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-width: 80%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.title-text p {
|
||||
margin: 0;
|
||||
color: #a07d7d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.work-section,
|
||||
.projects-section,
|
||||
.contact-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
color: #ffe8e8;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* About box */
|
||||
|
||||
.about-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.about-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* About box image carousel */
|
||||
|
||||
.about-image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
background-color: #001316;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
text-align: center;
|
||||
display: none;
|
||||
height: 400px;
|
||||
width: 95%;
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - 40px);
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.image-container.current-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
margin-top: 10px;
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 60%;
|
||||
gap: 15rem;
|
||||
}
|
||||
|
||||
button.prev-btn,
|
||||
button.next-btn {
|
||||
font-size: xx-large;
|
||||
background: rgba(40, 49, 102, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
line-height: 1.6rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(45, 38, 75, 0.5);
|
||||
}
|
||||
|
||||
/* Projects Box */
|
||||
|
||||
.project-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.project-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.project-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Project 1 */
|
||||
|
||||
.project1-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project1-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Project 2 */
|
||||
|
||||
.project2-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project2-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Previous Work */
|
||||
|
||||
.work-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 95%;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.work-section-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.work-card {
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link:hover .work-card {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.work-card-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.work-card-title {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.work-card-text {
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
|
||||
.contact-section {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 500px;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-section-title {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
color: #ffe8e8;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-buttons button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #336854;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button[type="reset"] {
|
||||
background-color: #06425a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Credits Section - parallax background */
|
||||
|
||||
.credits-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
min-width: 768px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.credits-section .parallax-layer {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.credits-box {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 100px;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.parallax-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 768px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
background-image: url("images/Clouds.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
background-image: url("images/Trees.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
background-image: url("images/Bridge.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-right: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.about-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 1040px;
|
||||
}
|
||||
|
||||
.project-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(510px, 1fr));
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 1rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.parallax-layer {
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,564 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
color: black;
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
padding: 2.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.icon-pic {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
margin-right: 1rem;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(24, 18, 18, 0.8);
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 1440px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 3rem;
|
||||
margin-right: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 100px;
|
||||
margin-top: 15rem;
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-width: 80%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.title-text p {
|
||||
margin: 0;
|
||||
color: #a07d7d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.work-section,
|
||||
.projects-section,
|
||||
.contact-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
color: #ffe8e8;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* About box */
|
||||
|
||||
.about-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.about-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* About box image carousel */
|
||||
|
||||
.about-image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
background-color: #001316;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
text-align: center;
|
||||
display: none;
|
||||
height: 400px;
|
||||
width: 95%;
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - 40px);
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.image-container.current-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
margin-top: 10px;
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 60%;
|
||||
gap: 15rem;
|
||||
}
|
||||
|
||||
button.prev-btn,
|
||||
button.next-btn {
|
||||
font-size: xx-large;
|
||||
background: rgba(40, 49, 102, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
line-height: 1.6rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(45, 38, 75, 0.5);
|
||||
}
|
||||
|
||||
/* Projects Box */
|
||||
|
||||
.project-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.project-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.project-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Project 1 */
|
||||
|
||||
.project1-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project1-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Project 2 */
|
||||
|
||||
.project2-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project2-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Previous Work */
|
||||
|
||||
.work-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 95%;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.work-section-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.work-card {
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link:hover .work-card {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.work-card-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.work-card-title {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.work-card-text {
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
|
||||
.contact-section {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 500px;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-section-title {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
color: #ffe8e8;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-buttons button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #336854;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button[type="reset"] {
|
||||
background-color: #06425a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Credits Section - parallax background */
|
||||
|
||||
.credits-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
min-width: 768px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.credits-section .parallax-layer {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.credits-box {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 50px;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.parallax-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 768px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
background-image: url("images/Clouds.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
background-image: url("images/Trees.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
background-image: url("images/Bridge.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-right: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.about-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 1040px;
|
||||
}
|
||||
|
||||
.project-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(510px, 1fr));
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 1rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.parallax-layer {
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,564 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
color: black;
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
padding: 2.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.icon-pic {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
margin-right: 1rem;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(24, 18, 18, 0.8);
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 1440px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 3rem;
|
||||
margin-right: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 100px;
|
||||
margin-top: 15rem;
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-width: 80%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.title-text p {
|
||||
margin: 0;
|
||||
color: #a07d7d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.work-section,
|
||||
.projects-section,
|
||||
.contact-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
color: #ffe8e8;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* About box */
|
||||
|
||||
.about-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.about-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* About box image carousel */
|
||||
|
||||
.about-image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
background-color: #001316;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
text-align: center;
|
||||
display: none;
|
||||
height: 400px;
|
||||
width: 95%;
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - 40px);
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.image-container.current-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
margin-top: 10px;
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 60%;
|
||||
gap: 15rem;
|
||||
}
|
||||
|
||||
button.prev-btn,
|
||||
button.next-btn {
|
||||
font-size: xx-large;
|
||||
background: rgba(40, 49, 102, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
line-height: 1.6rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(45, 38, 75, 0.5);
|
||||
}
|
||||
|
||||
/* Projects Box */
|
||||
|
||||
.project-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.project-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.project-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Project 1 */
|
||||
|
||||
.project1-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project1-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Project 2 */
|
||||
|
||||
.project2-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project2-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Previous Work */
|
||||
|
||||
.work-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 95%;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.work-section-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.work-card {
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link:hover .work-card {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.work-card-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.work-card-title {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.work-card-text {
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
|
||||
.contact-section {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 500px;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-section-title {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
color: #ffe8e8;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-buttons button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #336854;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button[type="reset"] {
|
||||
background-color: #06425a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Credits Section - parallax background */
|
||||
|
||||
.credits-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
min-width: 768px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.credits-section .parallax-layer {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.credits-box {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 50px;
|
||||
width: 600px;
|
||||
padding: 10px;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.parallax-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 768px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
background-image: url("images/Clouds.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
background-image: url("images/Trees.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
background-image: url("images/Bridge.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-right: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.about-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 1040px;
|
||||
}
|
||||
|
||||
.project-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(510px, 1fr));
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 1rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.parallax-layer {
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,564 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
color: black;
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
padding: 2.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.icon-pic {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
margin-right: 1rem;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(24, 18, 18, 0.8);
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 1440px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 3rem;
|
||||
margin-right: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 100px;
|
||||
margin-top: 15rem;
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-width: 80%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.title-text p {
|
||||
margin: 0;
|
||||
color: #a07d7d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.work-section,
|
||||
.projects-section,
|
||||
.contact-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
color: #ffe8e8;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* About box */
|
||||
|
||||
.about-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.about-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* About box image carousel */
|
||||
|
||||
.about-image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
background-color: #001316;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
text-align: center;
|
||||
display: none;
|
||||
height: 400px;
|
||||
width: 95%;
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - 40px);
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.image-container.current-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
margin-top: 10px;
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 60%;
|
||||
gap: 15rem;
|
||||
}
|
||||
|
||||
button.prev-btn,
|
||||
button.next-btn {
|
||||
font-size: xx-large;
|
||||
background: rgba(40, 49, 102, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
line-height: 1.6rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(45, 38, 75, 0.5);
|
||||
}
|
||||
|
||||
/* Projects Box */
|
||||
|
||||
.project-box {
|
||||
display: flex;
|
||||
margin-top: 10rem;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 95%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.project-box-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.project-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-paragraph {
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Project 1 */
|
||||
|
||||
.project1-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project1-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Project 2 */
|
||||
|
||||
.project2-video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project2-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Previous Work */
|
||||
|
||||
.work-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 95%;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.work-section-title {
|
||||
text-align: center;
|
||||
color: #ffe8e8;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.work-card {
|
||||
background: rgba(11, 35, 48, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.work-card-link:hover .work-card {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.work-card-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.work-card-title {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
color: #ffe8e8;
|
||||
}
|
||||
|
||||
.work-card-text {
|
||||
font-size: 1rem;
|
||||
color: #ffe8e8;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
|
||||
.contact-section {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
margin-top: 10rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 500px;
|
||||
color: #ffe8e8;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-section-title {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
color: #ffe8e8;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-buttons button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #336854;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button[type="reset"] {
|
||||
background-color: #06425a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Credits Section - parallax background */
|
||||
|
||||
.credits-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
min-width: 768px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.credits-section .parallax-layer {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.credits-box {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 50px;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.parallax-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 768px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
background-image: url("images/Clouds.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
background-image: url("images/Trees.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
background-image: url("images/Bridge.png");
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-right: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.about-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 1040px;
|
||||
}
|
||||
|
||||
.project-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(510px, 1fr));
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 1rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.parallax-layer {
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
I am a creative problem-solver who thrives at the intersection of art and technology. With a background in illustration, design, music and engineering I found that software development is the perfect amalgam of my creative passions.
|
||||
|
||||
A few years ago I embarked on a creative project aimed at combining these different creative skills through game development. My current project is a retro-style platformer called LunaLight and has only solidified my interests in software development. Working on the game showed me that this is what I want, so I went to school to become a software developer. Now multiple rewarding projects, internships and a computer science degree later, I am ready to put knowledge to the test through professional development and keep developing my own retro game projects on the side! Check out some of the sprite work and concept art from my current game project!
|
||||
@@ -0,0 +1,9 @@
|
||||
I made this website using HTML, CSS and JavaScript!
|
||||
|
||||
This website was built as a personal website for a final project in
|
||||
Intro to Web Development at Portland State University.
|
||||
|
||||
Currently the website is under construction to become the landing page
|
||||
for my independent game development project mentioned above!
|
||||
|
||||
Copyright Jesse M. Ellis 2024 😊
|
||||
@@ -0,0 +1,9 @@
|
||||
I made this website using HTML, CSS and JavaScript!
|
||||
|
||||
This website was built as a personal website for a final project in
|
||||
Intro to Web Development at Portland State University.
|
||||
|
||||
Currently the website is under construction to become the landing page
|
||||
for my independent game development project mentioned above!
|
||||
|
||||
Copyright Jesse M. Ellis - 2024
|
||||
@@ -0,0 +1,9 @@
|
||||
I made this website using HTML, CSS and JavaScript!
|
||||
|
||||
This website was built as a personal website for a final project in
|
||||
Intro to Web Development at Portland State University.
|
||||
|
||||
Currently the website is under construction to become the landing page
|
||||
for my independent game development project mentioned above!
|
||||
|
||||
Copyright Jesse M. Ellis 2024
|
||||
@@ -0,0 +1,7 @@
|
||||
I made this website using HTML, CSS and JavaScript!
|
||||
|
||||
This website was built as a personal website for a final project in Intro to Web Development at Portland State University.
|
||||
|
||||
Currently the website is under construction to become the landing page for my independent game development project mentioned above!
|
||||
|
||||
Copyright Jesse M. Ellis 2024
|
||||
@@ -0,0 +1,8 @@
|
||||
I made this website using HTML, CSS and JavaScript!
|
||||
|
||||
This website was built as a personal website for a final project in Intro to Web Development at
|
||||
Portland State University.
|
||||
|
||||
Currently the website is under construction to become the landing page for my independent game development project mentioned above!
|
||||
|
||||
Copyright Jesse M. Ellis 2024
|
||||
Binary file not shown.
+2
-1
@@ -250,7 +250,8 @@
|
||||
<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>
|
||||
<p id="credit-text" class="work-card-text">Loading...</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
const distance = targetPosition - startPosition;
|
||||
const duration = 1000;
|
||||
let startTime = null;
|
||||
|
||||
|
||||
function easeOutCubic(t) {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
@@ -104,6 +104,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
loadTextFromFile("text/airship.txt", "#airship-text");
|
||||
loadTextFromFile("text/jama.txt", "#jama-text");
|
||||
loadTextFromFile("text/intel.txt", "#intel-text");
|
||||
loadTextFromFile("text/credit.txt", "#credit-text");
|
||||
});
|
||||
|
||||
// Image carousel
|
||||
@@ -125,7 +126,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
currentIndex = (currentIndex + 1) % images.length;
|
||||
updateImages();
|
||||
});
|
||||
|
||||
|
||||
updateImages();
|
||||
|
||||
// On contact submit
|
||||
|
||||
@@ -471,7 +471,7 @@ button[type="reset"] {
|
||||
.credits-box {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
border-radius: 100px;
|
||||
border-radius: 50px;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
I made this website using HTML, CSS and JavaScript!
|
||||
|
||||
This website was built as a personal website for a final project in Intro to Web Development at
|
||||
Portland State University.
|
||||
|
||||
Currently the website is under construction to become the landing page for my independent game development project mentioned above!
|
||||
|
||||
Copyright Jesse M. Ellis 2024
|
||||
Reference in New Issue
Block a user