Updates to images and website text.
This commit is contained in:
jme9
+44
-1
@@ -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)`;
|
||||
});
|
||||
```
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
<!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>Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script defer src="form.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Website Under Construction :(</h1>
|
||||
<form action="/submit" class="form-container">
|
||||
<h2>Sign Up Form</h2>
|
||||
<h3>Fill in the form below.</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="uname">Username:</label>
|
||||
<input type="text" id="uname" name="uname" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pword">Password:</label>
|
||||
<input type="password" id="pword" name="pword" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dob">Date of birth:</label>
|
||||
<input type="date" id="dob" name="dob" />
|
||||
</div>
|
||||
|
||||
<fieldset class="pronoun-group">
|
||||
<legend>Preferred Pronouns</legend>
|
||||
<label class="radio-label"
|
||||
><input type="radio" name="pronouns" value="she-her" />
|
||||
She/Her</label
|
||||
>
|
||||
<br />
|
||||
<label class="radio-label"
|
||||
><input type="radio" name="pronouns" value="he-him" /> He/Him</label
|
||||
>
|
||||
<br />
|
||||
<label class="radio-label"
|
||||
><input type="radio" name="pronouns" value="they-them" />
|
||||
They/Them</label
|
||||
>
|
||||
<br />
|
||||
<label class="radio-label"
|
||||
><input type="radio" name="pronouns" value="no-preference" /> I
|
||||
prefer not to say</label
|
||||
>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 996 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
@@ -67,14 +67,17 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="image-container hidden-image">
|
||||
<img src="images/Clouds.png" alt="About Me Images" />
|
||||
<p class="image-title">Cloud Photography</p>
|
||||
<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/SiteUpdate1.jpg" alt="About Me Images" />
|
||||
<p class="image-title">Website Update Mockup</p>
|
||||
<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>
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
-271
@@ -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);
|
||||
} */
|
||||
+2
-2
@@ -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.
|
||||
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!
|
||||
|
||||
+3
-3
@@ -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.
|
||||
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.
|
||||
Reference in New Issue
Block a user