diff --git a/.history/index_20241211145042.html b/.history/index_20241211145042.html new file mode 100644 index 0000000..61a4b05 --- /dev/null +++ b/.history/index_20241211145042.html @@ -0,0 +1,258 @@ + + + + + + + The Ravenwood Arts: Developer Profile Jesse M. Ellis + + + + + +
+
+
+
+

Developer Profile

+

Jesse M. Ellis

+
+ Profile Picture +
+
+ +
+
+ +
+

About

+ +
+
+

About me,

+

Loading...

+
+ +
+
+ About Me Images +

+ LunaLight Concept Work by @toastydoodles +

+
+
+ About Me Images +

LunaLight Title by Jesse M. Ellis

+
+
+ About Me Images +

Across the Bridge by Jesse M. Ellis

+
+
+ About Me Images +

Under the Moon by Jesse M. Ellis

+
+
+ + +
+
+
+
+
+
+ +
+
+
+

Projects

+ + +
+ +
+

LunaLight - A Retro Game Project

+

+ Loading... +

+
+ +
+

LunaLight - First Look

+ +
+
+ + +
+ +
+

+ Capstone - A Mobile App for the CRN +

+

+ Loading... +

+
+ +
+

Capstone Demo

+ +
+
+
+
+
+ +
+
+

Previous Work

+
+ + +
+ Airship Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Jama Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Intel Icon +

Lead Engineering Technician

+

Loading...

+
+ +
+
+
+ +
+
+

ᛜ I'd love to hear from you! ᛜ

+
+ + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+

I made this website! Copyright Jesse M. Ellis 2024 😊

+
+
+
+ + diff --git a/.history/index_20250101191926.html b/.history/index_20250101191926.html new file mode 100644 index 0000000..d35dd04 --- /dev/null +++ b/.history/index_20250101191926.html @@ -0,0 +1,258 @@ + + + + + + + The Ravenwood Arts: Developer Profile Jesse M. Ellis + + + + + +
+
+
+
+

Developer Profile

+

Jesse M. Ellis

+
+ Profile Picture +
+
+ +
+
+ +
+

About

+ +
+
+

About me,

+

Loading...

+
+ +
+
+ About Me Images +

+ LunaLight Concept Work by @toastydoodles +

+
+
+ About Me Images +

LunaLight Title by Jesse M. Ellis

+
+
+ About Me Images +

Across the Bridge by Jesse M. Ellis

+
+
+ About Me Images +

Under the Moon by Jesse M. Ellis

+
+
+ + +
+
+
+
+
+
+ +
+
+
+

Projects

+ + +
+ +
+

LunaLight - A Retro Game Project

+

+ Loading... +

+
+ +
+

LunaLight - First Look

+ +
+
+ + +
+ +
+

+ Capstone - A Mobile App for the CRN +

+

+ Loading... +

+
+ +
+

Capstone Demo

+ +
+
+
+
+
+ +
+
+

Previous Work

+
+ + +
+ Airship Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Jama Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Intel Icon +

Lead Engineering Technician

+

Loading...

+
+ +
+
+
+ +
+
+

ᛜ I'd love to hear from you! ᛜ

+
+ + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+

I made this website using HTML, CSS and JavaScript! Copyright Jesse M. Ellis 2024 😊

+
+
+
+ + diff --git a/.history/index_20250101192517.html b/.history/index_20250101192517.html new file mode 100644 index 0000000..c8b9a53 --- /dev/null +++ b/.history/index_20250101192517.html @@ -0,0 +1,259 @@ + + + + + + + The Ravenwood Arts: Developer Profile Jesse M. Ellis + + + + + +
+
+
+
+

Developer Profile

+

Jesse M. Ellis

+
+ Profile Picture +
+
+ +
+
+ +
+

About

+ +
+
+

About me,

+

Loading...

+
+ +
+
+ About Me Images +

+ LunaLight Concept Work by @toastydoodles +

+
+
+ About Me Images +

LunaLight Title by Jesse M. Ellis

+
+
+ About Me Images +

Across the Bridge by Jesse M. Ellis

+
+
+ About Me Images +

Under the Moon by Jesse M. Ellis

+
+
+ + +
+
+
+
+
+
+ +
+
+
+

Projects

+ + +
+ +
+

LunaLight - A Retro Game Project

+

+ Loading... +

+
+ +
+

LunaLight - First Look

+ +
+
+ + +
+ +
+

+ Capstone - A Mobile App for the CRN +

+

+ Loading... +

+
+ +
+

Capstone Demo

+ +
+
+
+
+
+ +
+
+

Previous Work

+
+ + +
+ Airship Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Jama Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Intel Icon +

Lead Engineering Technician

+

Loading...

+
+ +
+
+
+ +
+
+

ᛜ I'd love to hear from you! ᛜ

+
+ + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+

Loading...

+ +
+
+
+ + diff --git a/.history/site_20241213170511.js b/.history/site_20241213170511.js new file mode 100644 index 0000000..2a1bab0 --- /dev/null +++ b/.history/site_20241213170511.js @@ -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." + ); + } + }); +}); diff --git a/.history/site_20250101192501.js b/.history/site_20250101192501.js new file mode 100644 index 0000000..d5ef66d --- /dev/null +++ b/.history/site_20250101192501.js @@ -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." + ); + } + }); +}); diff --git a/.history/style_20241211145042.css b/.history/style_20241211145042.css new file mode 100644 index 0000000..22f5edd --- /dev/null +++ b/.history/style_20241211145042.css @@ -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%; + } +} diff --git a/.history/style_20250101192623.css b/.history/style_20250101192623.css new file mode 100644 index 0000000..8d54a17 --- /dev/null +++ b/.history/style_20250101192623.css @@ -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%; + } +} diff --git a/.history/style_20250101192647.css b/.history/style_20250101192647.css new file mode 100644 index 0000000..fa6bdfc --- /dev/null +++ b/.history/style_20250101192647.css @@ -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%; + } +} diff --git a/.history/style_20250101192652.css b/.history/style_20250101192652.css new file mode 100644 index 0000000..8d54a17 --- /dev/null +++ b/.history/style_20250101192652.css @@ -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%; + } +} diff --git a/.history/text/credit_20241211145042.txt b/.history/text/credit_20241211145042.txt new file mode 100644 index 0000000..a676437 --- /dev/null +++ b/.history/text/credit_20241211145042.txt @@ -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! diff --git a/.history/text/credit_20250101192431.txt b/.history/text/credit_20250101192431.txt new file mode 100644 index 0000000..53d53e2 --- /dev/null +++ b/.history/text/credit_20250101192431.txt @@ -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 😊 diff --git a/.history/text/credit_20250101192546.txt b/.history/text/credit_20250101192546.txt new file mode 100644 index 0000000..c38eb5e --- /dev/null +++ b/.history/text/credit_20250101192546.txt @@ -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 diff --git a/.history/text/credit_20250101192553.txt b/.history/text/credit_20250101192553.txt new file mode 100644 index 0000000..7a3c5de --- /dev/null +++ b/.history/text/credit_20250101192553.txt @@ -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 diff --git a/.history/text/credit_20250101192718.txt b/.history/text/credit_20250101192718.txt new file mode 100644 index 0000000..9834692 --- /dev/null +++ b/.history/text/credit_20250101192718.txt @@ -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 diff --git a/.history/text/credit_20250101192731.txt b/.history/text/credit_20250101192731.txt new file mode 100644 index 0000000..24c2eed --- /dev/null +++ b/.history/text/credit_20250101192731.txt @@ -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 diff --git a/Notebook.pdf b/Notebook.pdf new file mode 100644 index 0000000..c293328 Binary files /dev/null and b/Notebook.pdf differ diff --git a/index.html b/index.html index 61a4b05..c8b9a53 100644 --- a/index.html +++ b/index.html @@ -250,7 +250,8 @@
-

I made this website! Copyright Jesse M. Ellis 2024 😊

+

Loading...

+
diff --git a/site.js b/site.js index d786e94..d5ef66d 100644 --- a/site.js +++ b/site.js @@ -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 diff --git a/style.css b/style.css index 22f5edd..8d54a17 100644 --- a/style.css +++ b/style.css @@ -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; diff --git a/text/credit.txt b/text/credit.txt new file mode 100644 index 0000000..24c2eed --- /dev/null +++ b/text/credit.txt @@ -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