diff --git a/Notebook.md b/Notebook.md
index 2773015..a60d485 100644
--- a/Notebook.md
+++ b/Notebook.md
@@ -711,6 +711,49 @@ We have already done some of the work for this with our dynamic scrolling.
We are going to create additional _background_ layers that will be layered on top of the actual background. We will update our JavaScript scroll event listener to control the scroll speed of each of these layers. Finally we will use CSS to ensure the layers are styled correctly to get our parallax effect.
-First I tried adding additional layers to the body however this proved difficult to control the position on various screen sizes.
+First I tried adding additional layers to the body however this proved difficult to control the position on various screen sizes.
+Ultimately I decided to add another section to the bottom of the page that will include the different parallax layers. This will be our "credits" section and as th euser scrolls down into it the different layers will come into view with paralax effect giving a sense of depth.
+We will control the different scroll rates using JavaScript. We just need to add a few things to what we had before.
+
+```
+// 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)`;
+ });
+```
diff --git a/form.html b/form.html
deleted file mode 100644
index bc578b6..0000000
--- a/form.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
-
-
- Form
-
-
-
-
-
-
Website Under Construction :(
-
-
-
-
\ No newline at end of file
diff --git a/form.js b/form.js
deleted file mode 100644
index 6a9b268..0000000
--- a/form.js
+++ /dev/null
@@ -1,34 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
- const form = document.querySelector(".form-container");
-
- // handle form submission
- form.addEventListener("submit", (event) => {
- event.preventDefault();
-
- // gather form data
- const formData = new FormData(form);
-
- // Validate form for empty fields
- let isValid = true;
- formData.forEach((value, key) => {
- if (!value.trim()) {
- isValid = false;
- alert(`Please fill out the ${key} field.`);
- }
- });
-
- if (isValid) {
- console.log("========= Form Submission ==========");
- console.log(` Name: ${formData.get("name")}`);
- console.log(` Username: ${formData.get("uname")}`);
- console.log(` Email: ${formData.get("email")}`);
- console.log(` Date of Birth: ${formData.get("dob")}`);
- console.log(
- ` Preferred Pronouns: ${formData.get("pronouns") || "Not specified"}`
- );
-
- // It seems like we should reset the form after submitting
- form.reset();
- }
- });
- });
\ No newline at end of file
diff --git a/images/LL_LVL1_Forest.png b/images/LL_LVL1_Forest.png
new file mode 100644
index 0000000..c71879e
Binary files /dev/null and b/images/LL_LVL1_Forest.png differ
diff --git a/images/Teaser gif .gif b/images/Teaser gif .gif
new file mode 100644
index 0000000..82e5bd2
Binary files /dev/null and b/images/Teaser gif .gif differ
diff --git a/images/Titlescreen_share.png b/images/Titlescreen_share.png
new file mode 100644
index 0000000..1af5798
Binary files /dev/null and b/images/Titlescreen_share.png differ
diff --git a/images/Uluna tree.png b/images/Uluna tree.png
new file mode 100644
index 0000000..3046904
Binary files /dev/null and b/images/Uluna tree.png differ
diff --git a/site.html b/site.html
index 7850f56..a0227ed 100644
--- a/site.html
+++ b/site.html
@@ -67,14 +67,17 @@
-
-
Cloud Photography
+
+
LunaLight Title by Jesse M. Ellis
-
-
Website Update Mockup
+
+
Across the Bridge by Jesse M. Ellis
+
+
+
+
Under the Moon by Jesse M. Ellis
-
diff --git a/style.css b/style.css
index c36dc2f..f4db0d5 100644
--- a/style.css
+++ b/style.css
@@ -76,8 +76,6 @@ body {
align-items: center;
}
-
-
.title-box {
display: flex;
align-items: center;
@@ -495,17 +493,17 @@ button[type="reset"] {
}
.layer-1 {
- background-image: url('images/Clouds.png');
+ background-image: url("images/Clouds.png");
top: 0;
}
.layer-2 {
- background-image: url('images/Trees.png');
+ background-image: url("images/Trees.png");
top: 0;
}
.layer-3 {
- background-image: url('images/Bridge.png');
+ background-image: url("images/Bridge.png");
top: 0;
}
@@ -536,7 +534,7 @@ button[type="reset"] {
flex-direction: column;
text-align: center;
}
-
+
.work-grid {
grid-template-columns: repeat(auto-fit, minmax(510px, 1fr));
}
@@ -552,11 +550,11 @@ button[type="reset"] {
.about-image {
margin-top: 1rem;
}
-
+
.nav-left {
padding-left: 0rem;
}
-
+
.nav-right {
gap: 1rem;
padding-right: 5rem;
@@ -568,4 +566,3 @@ button[type="reset"] {
height: 120%;
}
}
-
diff --git a/styles.css b/styles.css
deleted file mode 100644
index 5ed05c2..0000000
--- a/styles.css
+++ /dev/null
@@ -1,271 +0,0 @@
-* {
- box-sizing: border-box;
- }
-
- :root {
- --black: #080808;
- --white: #fefefe;
- --gray: #565656;
- --light-light-gray: rgba(120, 118, 118, 0.1);
- --light-gray: rgba(120, 118, 118, 0.5);
-
- --teal: #006060;
- --violetred: #a2106d;
- --orange: #ffa500;
- }
-
- html {
- background-color: var(--light-light-gray);
- }
-
- body {
- font-family: "Open Sans", "Helvetica Neue", sans-serif;
- font-size: 1.2em;
- color: var(--black);
- }
-
- h1 {
- text-align: center;
- font-size: 2rem;
- }
-
- form {
- width: 400px;
- }
-
- /* Code for exercise 01-hello */
- /* .container {
- max-width: 600px;
- margin: 50px auto;
- background-color: var(--white);
- padding: 20px;
- border: 1px solid var(--light-gray);
- border-radius: 8px;
- }
-
- .img {
- display: block;
- max-width: 100%;
- height: auto;
- margin: 0 auto 20px;
- border-radius: 50%;
- border: 2px solid var(--gray);
- }
-
- .bio {
- text-align: center;
- line-height: 1.5;
- } */
-
- /* Code for exercise 02-form */
- form.form-container {
- width: 400px;
- padding: 10px;
- margin: 10px auto;
- border: 1px solid;
- border-radius: 4px;
- font-size: medium;
- }
-
- form.form-container h2 {
- margin-top: 20px;
- margin-bottom: 0;
- }
-
- form.form-container h3 {
- font-weight: normal;
- margin: 0;
- margin-bottom: 15px;
- }
-
- form.form-container .form-group {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- }
-
- form.form-container label {
- font-weight: bold;
- width: 150px;
- text-align: left;
- margin-right: 10px;
- }
-
- form.form-container fieldset {
- border: 0;
- padding: 0;
- margin: 0;
- }
-
- form.form-container .pronoun-group legend {
- font-weight: bold;
- }
-
- form.form-container .radio-label {
- font-weight: normal;
- }
-
- form.form-container input[type="text"],
- form.form-container input[type="password"],
- form.form-container input[type="date"] {
- flex: 1;
- padding: 2px;
- border: 1px solid;
- }
-
- .form-container .form-actions {
- display: flex;
- justify-content: flex-end;
- gap: 10px;
- margin-top: 20px;
- }
-
- .form-container button[type="submit"],
- .form-container button[type="reset"] {
- padding: 12px;
- width: 100%;
- text-align: center;
- margin-bottom: 15px;
- border: 1px solid;
- }
-
- .form-container button[type="submit"] {
- background-color: var(--black);
- color: var(--white);
- }
-
- .form-container button[type="reset"] {
- background-color: var(--white);
- color: var(--black);
- }
-
- .form-container button[type="submit"]:hover {
- background-color: var(--violetred);
- }
-
- .form-container button[type="reset"]:hover {
- background-color: var(--lightgrey);
- }
- * {
- box-sizing: border-box;
- }
-
- :root {
- --black: #080808;
- --white: #fefefe;
- --gray: #565656;
- --light-light-gray: rgba(120, 118, 118, 0.1);
- --light-gray: rgba(120, 118, 118, 0.5);
- --teal: #006060;
- --violetred: #a2106d;
- --orange: #ffa500;
- }
-
- html {
- background-color: var(--light-light-gray);
- }
-
- body {
- font-family: "Open Sans", "Helvetica Neue", sans-serif;
- font-size: 1.2em;
- color: var(--black);
- }
-
- h1 {
- text-align: center;
- font-size: 2rem;
- }
-
- /* Code for exercise 03-starships */
-
- /* .btn-group {
- margin: auto;
- width: 400px;
- display: flex;
- justify-content: space-evenly;
- margin-bottom: 20px;
- }
-
- .btn {
- width: 80px;
- padding: 10px;
- background-color: var(--black);
- color: var(--white);
- border: none;
- cursor: pointer;
- }
-
- .btn:hover {
- background-color: var(--violetred);
- }
-
- #results {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 20px;
- }
-
- .starship-component {
- display: grid;
- grid-template-areas:
- "title cost"
- "manufacturer manufacturer"
- "speed cargo"
- "speed cargo";
- grid-template-columns: 2fr 1fr;
- grid-template-rows: auto auto 1fr 1fr;
- gap: 10px;
- width: 500px;
- height: 250px;
- padding: 10px;
- background-color: var(--white);
- border-radius: 10px;
- border: 1px solid var(--light-gray);
- }
-
- .starship-title {
- grid-area: title;
- font-size: 1rem;
- font-weight: bold;
- }
-
- .starship-cost {
- grid-area: cost;
- font-size: 1rem;
- font-weight: bold;
- text-align: right;
- }
-
- .starship-manufacturer {
- grid-area: manufacturer;
- font-size: 1rem;
- margin-top: -5px;
- }
-
- .starship-speed {
- grid-area: speed;
- font-size: 1rem;
- font-weight: bold;
- text-align: center;
- border-right: 1px solid var(--light-gray);
- padding-right: 10px;
- align-self: center;
- }
-
- .starship-cargo {
- grid-area: cargo;
- font-size: 1rem;
- font-weight: bold;
- text-align: center;
- padding-left: 10px;
- align-self: center;
- }
-
- .result-text {
- background-color: var(--white);
- border-radius: 10px;
- text-align: center;
- font-size: 1.1rem;
- color: var(--black);
- } */
\ No newline at end of file
diff --git a/text/about.txt b/text/about.txt
index dc0fad0..a676437 100644
--- a/text/about.txt
+++ b/text/about.txt
@@ -1,3 +1,3 @@
-I’m a creative and resourceful problem-solver with a deep passion for blending technology and art. With a foundation as an Engineering Technician and years of freelance experience in illustration, graphic design and music, I bring a unique perspective that unites technical expertise with creative vision. My love for game development, music, and illustration has driven me to craft meaningful projects, including a retro game development initiative that showcases my dedication to combining art and technology.
+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.
-As a recent Computer Science graduate from Portland State University, I’ve honed my skills in web and mobile app development, backend architecture, and project leadership. Through hands-on internships and academic projects, I’ve built dynamic web applications, cross-platform mobile apps, and integrated APIs, working with diverse programming languages like Python, Java, C#, C++, JavaScript, HTML, and CSS. Leading a collaborative capstone project further solidified my ability to guide teams and deliver impactful software solutions. I thrive at the intersection of creativity and technology, continuously pushing boundaries to create innovative and engaging experiences.
\ No newline at end of file
+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/text/project2.txt b/text/project2.txt
index 37a89e1..035de66 100644
--- a/text/project2.txt
+++ b/text/project2.txt
@@ -1,3 +1,3 @@
-Hey! This section is about my retro game melody generator!
-
-Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\ No newline at end of file
+I had an amazing experience getting to be the Team Lead for my computer science capstone project. During which I lead a team of seven student software engineers to implement the UI/UX, middle-end and API service for the Community Resource Network Mobile Application. The Community Resource Network is a local non-profit organization that works to connect in-need people with resources.
+The CRN needs a cross-platform mobile application to support their growing network and ever-expanding community of organizers, donors and requesters. Through this the Community Resource Network will be enabled to meet the needs of the increasing number of folks who can benefit from their organization.
+To accomplish this we used the C# framework .NET MAUI, Multi-platform Application User Interface. Check out our demo narrated by one of our talented student developers, Marvin.
\ No newline at end of file
- 
+ 
- 
+