diff --git a/Notebook.md b/Notebook.md index ff8a4bc..5ad57aa 100644 --- a/Notebook.md +++ b/Notebook.md @@ -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 - [About Section](#About-Section) - 12/03/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. +*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. + +``` +
+
+

Previous Work

+
+ +
+ Airship Software Icon +

Software Development Intern

+

Loading...

+
+ +
+ Jama Software Icon +

Software Development Intern

+

Loading...

+
+ +
+ Intel Icon +

Lead Engineering Technician

+

Loading...

+
+
+
+
+``` + +To make each card a link I can add an `` tag element, + +``` + + +...rest of card html + + + +``` + +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); +} +``` + + diff --git a/images/airship.png b/images/airship.png new file mode 100644 index 0000000..52d83bc Binary files /dev/null and b/images/airship.png differ diff --git a/images/intel.png b/images/intel.png new file mode 100644 index 0000000..4d1b493 Binary files /dev/null and b/images/intel.png differ diff --git a/images/jama.png b/images/jama.png new file mode 100644 index 0000000..44eadc0 Binary files /dev/null and b/images/jama.png differ diff --git a/project2.txt b/project2.txt deleted file mode 100644 index c3ece0e..0000000 --- a/project2.txt +++ /dev/null @@ -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. \ No newline at end of file diff --git a/site.html b/site.html index 8af5ee1..753a854 100644 --- a/site.html +++ b/site.html @@ -27,113 +27,166 @@ - -
-
-
-

Developer Profile

-

Jesse M. Ellis

+
+
+
+
+

Developer Profile

+

Jesse M. Ellis

+
+ Profile Picture
- Profile Picture -
-
+ -
-
- -
-

About Jesse,

-

Loading...

-
- -
- About Me Images - About me images - About me images -
- - +
+
+ +
+

About Jesse,

+

Loading...

+
+ +
+ About Me Images + About me images + About me images +
+ + +
-
-
+ -
-
-
-

Personal Projects

+
+
+
+

Personal Projects

- -
- -
-

LunaLight - A Retro Game Project,

-

- Loading... -

-
- -
-

LunaLight - First Look

- -
-
+ +
+ +
+

LunaLight - A Retro Game Project,

+

+ Loading... +

+
+ +
+

LunaLight - First Look

+ +
+
- -
- -
-

- EightBiterator - A Retro Game Melody Generator, -

-

- Loading... -

-
- -
-

EightBiterator

-
-
+ +
+ +
+

+ EightBiterator - A Retro Game Melody Generator, +

+

+ Loading... +

+
+ +
+

EightBiterator

+
+
+
-
-
+ -
-
-

Previous Work

-
-
+
+
+

Previous Work

+
+ + +
+ Airship Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Jama Software Icon +

Software Development Intern

+

Loading...

+
+ + + +
+ Intel Icon +

Lead Engineering Technician

+

Loading...

+
+ +
+
+
-
-
-

Contact

-
-
+
+
+

Contact

+
+
+ +
+ diff --git a/site.js b/site.js index 61956cd..70a17de 100644 --- a/site.js +++ b/site.js @@ -10,6 +10,7 @@ document.querySelectorAll(".nav-link").forEach((anchor) => { // dynamic scrolling document.addEventListener("scroll", () => { + const navBar = document.querySelector(".navbar"); const titleBox = document.querySelector(".title-box"); const aboutSection = document.querySelector("#about"); 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 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)`; - const opacity = 1 - scrollY / aboutTop; - titleBox.style.opacity = Math.max(opacity, 0); + titleBox.style.opacity = Math.max(1 - opacity, 0); } else { titleBox.style.transform = "translateY(0)"; titleBox.style.opacity = 0; @@ -52,9 +55,12 @@ function loadTextFromFile(filePath, targetSelector) { // Load text files when page loads window.addEventListener("load", () => { - loadTextFromFile("about.txt", ".about-paragraph"); - loadTextFromFile("project1.txt", "#project1-paragraph"); - loadTextFromFile("project2.txt", "#project2-paragraph"); + 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 diff --git a/style.css b/style.css index 21e5e57..231c475 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,12 @@ body { min-width: 768px; } +.page-container { + max-width: 1440px; + margin: 0 auto; + padding: 0 1rem; +} + .navbar { position: fixed; top: 0; @@ -15,7 +21,7 @@ body { display: flex; justify-content: space-between; align-items: center; - background: rgba(0, 0, 0, 0.8); + background: rgba(0, 0, 0, 1); padding: 2.5rem; z-index: 10; } @@ -52,6 +58,7 @@ body { } .section { + max-width: 1440px; display: flex; justify-content: center; padding: 2rem; @@ -73,7 +80,7 @@ body { display: flex; align-items: center; justify-content: space-between; - background: rgba(0, 0, 0, 0.8); + background: rgba(0, 0, 0, 1); border-radius: 100px; margin-top: 15rem; padding: 0.75rem; @@ -114,6 +121,7 @@ body { display: flex; justify-content: center; width: 100%; + max-width: 1440px; } /* About box */ @@ -214,7 +222,7 @@ button:hover { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; - background: rgba(42, 15, 59, 0.8); + background: rgba(11, 35, 48, 0.8); padding: 2rem; border-radius: 20px; color: #ffe8e8; @@ -236,7 +244,7 @@ button:hover { } .project-box-title { - text-align: left; + text-align: center; color: #ffe8e8; } @@ -285,9 +293,76 @@ button:hover { 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 { margin-top: 10rem; background: rgba(0, 0, 0, 0.8); @@ -302,7 +377,21 @@ button:hover { /* 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 { flex-direction: column; text-align: center; @@ -314,6 +403,10 @@ button:hover { text-align: center; } + .work-grid { + grid-template-columns: repeat(auto-fit, minmax(510px, 1fr)); + } + .grid-item { grid-template-columns: 1fr; } diff --git a/about.txt b/text/about.txt similarity index 100% rename from about.txt rename to text/about.txt diff --git a/text/airship.txt b/text/airship.txt new file mode 100644 index 0000000..35bf15e --- /dev/null +++ b/text/airship.txt @@ -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. + +ᛜ \ No newline at end of file diff --git a/text/intel.txt b/text/intel.txt new file mode 100644 index 0000000..797818d --- /dev/null +++ b/text/intel.txt @@ -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. + +ᛜ \ No newline at end of file diff --git a/text/jama.txt b/text/jama.txt new file mode 100644 index 0000000..2ff464b --- /dev/null +++ b/text/jama.txt @@ -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. + +ᛜ \ No newline at end of file diff --git a/project1.txt b/text/project1.txt similarity index 100% rename from project1.txt rename to text/project1.txt diff --git a/text/project2.txt b/text/project2.txt new file mode 100644 index 0000000..37a89e1 --- /dev/null +++ b/text/project2.txt @@ -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. \ No newline at end of file