TheRavenwoodArts/Personal-Site-RVNWD
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added previous work section

Browse Source
This commit is contained in:
jme9
2024-12-07 10:55:58 -08:00
parent 827926820c
commit 23aa5dd3fa
14 changed files with 353 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Notebook.md
+68
View File
@@ -13,6 +13,7 @@ Note: _Revision 1 will be developed from 11/24/2024 to 12/11/2024._
- [Profile Pic](#Profile-Pic) - 12/01/2024 - [Profile Pic](#Profile-Pic) - 12/01/2024
- [About Section](#About-Section) - 12/03/2024 - [About Section](#About-Section) - 12/03/2024
- [Project Section](#Project-Section) - 12/06/2024 - [Project Section](#Project-Section) - 12/06/2024
- [Previous Work Section](#Previous-Work-Section) - 12/07/2024
--- ---
@@ -521,3 +522,70 @@ In this section I want to showcase a really cool program I built that generates
To showcase this I would like to create a user form that allows the user to input the parameters and the hit a button that says "generate". As the program runs it will give some indication as to what it is doing and play each waveform. It will then prompt the user if they woudl like to save the generated wav file. To showcase this I would like to create a user form that allows the user to input the parameters and the hit a button that says "generate". As the program runs it will give some indication as to what it is doing and play each waveform. It will then prompt the user if they woudl like to save the generated wav file.
*This is actually going to be quite difficult I think... To be continued...*
---
## Previous Work Section
**12/07/2024**
For this section I am going to keep things relatively simple. I also think ths will be a good case for the use of cards. There will be three cards that give a brief overview of my experiences at a few of my favorite past work experiences. In addition each card wil act as a button to open a link to the relevant linked-in page for each of the work experiences.
```
<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 -->
<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>
<!-- Jama Card 2 -->
<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>
<!-- Intel Card 3 -->
<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>
</div>
</div>
</section>
```
To make each card a link I can add an `<a>` tag element,
```
<a href="link_to_linkedin" target="_blank" class="work-card-link">
...rest of card html
</a>
```
and add the following CSS to create a nice effect when hovering above each card.
```
.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);
}
```
images/airship.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

images/intel.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

images/jama.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

project2.txt
-5
View File
@@ -1,5 +0,0 @@
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.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
site.html
+151 -98
View File
@@ -27,113 +27,166 @@
</div> </div>
</nav> </nav>
</header> </header>
<div class="page-container">
<section id="title" class="title-section"> <section id="title" class="title-section">
<div class="title-box"> <div class="title-box">
<div class="title-text"> <div class="title-text">
<p>Developer Profile</p> <p>Developer Profile</p>
<h1>Jesse M. Ellis</h1> <h1>Jesse M. Ellis</h1>
</div>
<img
src="images/Profile.png"
alt="Profile Picture"
class="profile-pic"
/>
</div> </div>
<img </section>
src="images/Profile.png"
alt="Profile Picture"
class="profile-pic"
/>
</div>
</section>
<section id="about" class="about-section"> <section id="about" class="about-section">
<div class="about-box"> <div class="about-box">
<!-- First Column: About Text --> <!-- First Column: About Text -->
<div class="about-text"> <div class="about-text">
<h1 class="about-title">About Jesse,</h1> <h1 class="about-title">About Jesse,</h1>
<p class="about-paragraph">Loading...</p> <p class="about-paragraph">Loading...</p>
</div> </div>
<!-- Second Column: Images --> <!-- Second Column: Images -->
<div class="about-image"> <div class="about-image">
<img <img
src="images/Figma.jpg" src="images/Figma.jpg"
alt="About Me Images" alt="About Me Images"
class="current-image" class="current-image"
/> />
<img <img
src="images/Clouds.png" src="images/Clouds.png"
alt="About me images" alt="About me images"
class="hidden-image" class="hidden-image"
/> />
<img <img
src="images/SiteUpdate1.jpg" src="images/SiteUpdate1.jpg"
alt="About me images" alt="About me images"
class="hidden-image" class="hidden-image"
/> />
<div class="about-buttons"> <div class="about-buttons">
<button class="prev-btn">&larr;</button> <button class="prev-btn">&larr;</button>
<button class="next-btn">&rarr;</button> <button class="next-btn">&rarr;</button>
</div>
</div> </div>
</div> </div>
</div> </section>
</section>
<section id="projects" class="projects-section"> <section id="projects" class="projects-section">
<div class="project-box"> <div class="project-box">
<div class="grid-container"> <div class="grid-container">
<h1 class="project-box-title">Personal Projects</h1> <h1 class="project-box-title">Personal Projects</h1>
<!-- Project 1 --> <!-- Project 1 -->
<section class="grid-item"> <section class="grid-item">
<!-- Project 1 First Column: Project Overview Text --> <!-- Project 1 First Column: Project Overview Text -->
<div class="project-text"> <div class="project-text">
<h1 class="project-title">LunaLight - A Retro Game Project,</h1> <h1 class="project-title">LunaLight - A Retro Game Project,</h1>
<p id="project1-paragraph" class="project-paragraph"> <p id="project1-paragraph" class="project-paragraph">
Loading... Loading...
</p> </p>
</div> </div>
<!-- Project 1 Second Column: Video --> <!-- Project 1 Second Column: Video -->
<div class="project1-video-container"> <div class="project1-video-container">
<h1 class="project-title">LunaLight - First Look</h1> <h1 class="project-title">LunaLight - First Look</h1>
<iframe <iframe
width="560" width="560"
height="315" height="315"
src="https://www.youtube.com/embed/J_KjVaEGNk4?si=O0-429xP-P2r7JSx&autoplay=1&loop=1&playlist=J_KjVaEGNk4&mute=1" 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" title="YouTube video player"
frameborder="0" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen allowfullscreen
></iframe> ></iframe>
</div> </div>
</section> </section>
<!-- Project 2 --> <!-- Project 2 -->
<section class="grid-item"> <section class="grid-item">
<!-- Project 2 First Column: Project Overview Text --> <!-- Project 2 First Column: Project Overview Text -->
<div class="project-text"> <div class="project-text">
<h1 class="project-title"> <h1 class="project-title">
EightBiterator - A Retro Game Melody Generator, EightBiterator - A Retro Game Melody Generator,
</h1> </h1>
<p id="project2-paragraph" class="project-paragraph"> <p id="project2-paragraph" class="project-paragraph">
Loading... Loading...
</p> </p>
</div> </div>
<!-- Project 2 Second Column: Form --> <!-- Project 2 Second Column: Form -->
<div class="project2-form-container"> <div class="project2-form-container">
<h1 class="project-title">EightBiterator</h1> <h1 class="project-title">EightBiterator</h1>
</div> </div>
</section> </section>
</div>
</div> </div>
</div> </section>
</section>
<section id="work" class="work-section"> <section id="work" class="work-section">
<div class="work-box"> <div class="work-box">
<h2 class="section-title">Previous Work</h2> <h2 class="work-section-title">Previous Work</h2>
</div> <div class="work-grid">
</section> <!-- 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"> <section id="contact" class="contact-section">
<div class="contact-box"> <div class="contact-box">
<h2 class="section-title">Contact</h2> <h2 class="section-title">Contact</h2>
</div> </div>
</section> </section>
<section id="title" class="title-section"></section>
</div>
</body> </body>
</html> </html>
site.js
+12 -6
View File
@@ -10,6 +10,7 @@ document.querySelectorAll(".nav-link").forEach((anchor) => {
// dynamic scrolling // dynamic scrolling
document.addEventListener("scroll", () => { document.addEventListener("scroll", () => {
const navBar = document.querySelector(".navbar");
const titleBox = document.querySelector(".title-box"); const titleBox = document.querySelector(".title-box");
const aboutSection = document.querySelector("#about"); const aboutSection = document.querySelector("#about");
const scrollY = window.scrollY; const scrollY = window.scrollY;
@@ -18,10 +19,12 @@ document.addEventListener("scroll", () => {
// move title-box if it's above the viewport and not yet touching about-section // move title-box if it's above the viewport and not yet touching about-section
if (scrollY < aboutTop) { if (scrollY < aboutTop) {
// Adjust position adn opacity const opacity = scrollY / aboutTop;
// adjust opacity of navbar
navBar.style.opacity = Math.min(0.7 + opacity, 1);
// Adjust position and opacity of title box
titleBox.style.transform = `translateY(${scrollY * slowScrollRate}px)`; titleBox.style.transform = `translateY(${scrollY * slowScrollRate}px)`;
const opacity = 1 - scrollY / aboutTop; titleBox.style.opacity = Math.max(1 - opacity, 0);
titleBox.style.opacity = Math.max(opacity, 0);
} else { } else {
titleBox.style.transform = "translateY(0)"; titleBox.style.transform = "translateY(0)";
titleBox.style.opacity = 0; titleBox.style.opacity = 0;
@@ -52,9 +55,12 @@ function loadTextFromFile(filePath, targetSelector) {
// Load text files when page loads // Load text files when page loads
window.addEventListener("load", () => { window.addEventListener("load", () => {
loadTextFromFile("about.txt", ".about-paragraph"); loadTextFromFile("text/about.txt", ".about-paragraph");
loadTextFromFile("project1.txt", "#project1-paragraph"); loadTextFromFile("text/project1.txt", "#project1-paragraph");
loadTextFromFile("project2.txt", "#project2-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 // Image carousel
style.css
+100 -7
View File
@@ -8,6 +8,12 @@ body {
min-width: 768px; min-width: 768px;
} }
.page-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 1rem;
}
.navbar { .navbar {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -15,7 +21,7 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 1);
padding: 2.5rem; padding: 2.5rem;
z-index: 10; z-index: 10;
} }
@@ -52,6 +58,7 @@ body {
} }
.section { .section {
max-width: 1440px;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
@@ -73,7 +80,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 1);
border-radius: 100px; border-radius: 100px;
margin-top: 15rem; margin-top: 15rem;
padding: 0.75rem; padding: 0.75rem;
@@ -114,6 +121,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
max-width: 1440px;
} }
/* About box */ /* About box */
@@ -214,7 +222,7 @@ button:hover {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 2rem; gap: 2rem;
background: rgba(42, 15, 59, 0.8); background: rgba(11, 35, 48, 0.8);
padding: 2rem; padding: 2rem;
border-radius: 20px; border-radius: 20px;
color: #ffe8e8; color: #ffe8e8;
@@ -236,7 +244,7 @@ button:hover {
} }
.project-box-title { .project-box-title {
text-align: left; text-align: center;
color: #ffe8e8; color: #ffe8e8;
} }
@@ -285,9 +293,76 @@ button:hover {
position: relative; position: relative;
} }
/* ----- */ /* 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 */
.work-box,
.contact-box { .contact-box {
margin-top: 10rem; margin-top: 10rem;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
@@ -302,7 +377,21 @@ button:hover {
/* Media Queries */ /* Media Queries */
@media (max-width: 850px) { @media (min-width: 1440px) {
.page-container {
padding: 0;
}
.navbar {
justify-content: center;
}
.nav-left {
padding-right: 12rem;
}
}
@media (max-width: 1000px) {
.about-box { .about-box {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@@ -314,6 +403,10 @@ button:hover {
text-align: center; text-align: center;
} }
.work-grid {
grid-template-columns: repeat(auto-fit, minmax(510px, 1fr));
}
.grid-item { .grid-item {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
about.txt → text/about.txt
View File
text/airship.txt
+7
View File
@@ -0,0 +1,7 @@
Web Engineering
At airship I was fortunate to experience both front end and back end development.
While in front end I got to work on many components of their in-app experience editor.
While in back end I got to develop a notification flow that spanned many of the services and infrastructure acros airhips code base. Our team continuously innovates the back-end to front-end software that makes this possible using languages such as Java, Python and JavaScript.
ᛜ
text/intel.txt
+5
View File
@@ -0,0 +1,5 @@
Dry Etch - Engineering
As a senior engineering technician I oversaw, executed and developed troubleshooting plans to solve nonstandard problems on complex machinery used in the production of semiconductor processors. This includes working with a team of technicians to perform specific projects, learning new software/machinery, training, troubleshooting and developing work plans as well as maintaining parts, equipment and tools needed to perform those tasks.
ᛜ
text/jama.txt
+7
View File
@@ -0,0 +1,7 @@
Extended Engineering Services
At Jama I got to work with the talented folk's who design and develop software solutions to solve unique use cases and implement feature improvment.
I was given the challenging task of creating a tool that could copy the configuration data from one Jama instance to another in order to improve the admin user experience.
I learned their application and systems thouroughly and worked extensively with Jama's API. After successful completion I was able to demo and deliver the tool.
ᛜ
project1.txt → text/project1.txt
View File
text/project2.txt
+3
View File
@@ -0,0 +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.