Merge branch 'master' of matthewkosarek.xyz:/srv/git/matthew_kosarek_xyz

6 files changed, 83 insertions, 178 deletions

diff --git a/download/cv.pdf b/download/cv.pdf
index c049783..25d5b86 100644
--- a/download/cv.pdf
+++ b/download/cv.pdf
diff --git a/download/resume_dl.html b/download/resume_dl.html
index 4130102..36d57bf 100644
--- a/download/resume_dl.html
+++ b/download/resume_dl.html
@@ -179,7 +179,7 @@
         <h2>Skills</h2>
         <div class="resume_section_content">
           <div class="skill-section">
-            <b>Languages & Tech</b><div>C/C++, C#, TypeScript/JavaScript, React, HTML & CSS, Java, OpenGL, ASP.NET, Linux, LaTeX</div>
+            <b>Languages & Frameworks</b><div>C/C++, C#, TypeScript/JavaScript, React, HTML & CSS, Java, OpenGL, ASP.NET, Linux, LaTeX</div>
           </div>
           <div class="skill-section">
             <b>Tools</b><div>git, npm, Webpack, Visual Studio Professional/Code, Unity, AWS, Emacs, LaTeX</div>
@@ -211,19 +211,22 @@
             </div>
             <ul>
               <li>
-                Led a small team in the development of a robust infrastructure for user-facing industrial software applications
+                Led a team in the development of client-facing industrial software applications including cobot palletizers, cartesian palletizers, and CNC machines
               </li>
               <li>
-				        Developed and shipped a number of time-sensitive client projects, including palletizing and path-following software applications
+				        Developed and shipped a number of time-sensitive client projects
               </li>
               <li>
-				        Interacted extensively with other teams to align on specific business goals and meet expectations
+                Architected and implemented the core infrastructure required for the development of client-facing applications
               </li>
               <li>
-                Planned and organized projects and tasks for the team, including long-term vision and day-to-day goals 
+				        Interacted extensively with other teams to align on business goals and meet deadlines
               </li>
               <li>
-                Implemented new features across the stack of a code-free programming language
+                Planned and organized projects and tasks for the team including long-term vision and day-to-day goals 
+              </li>
+              <li>
+                Individually contributed across many facets of the company, from firmware to the engine of a code-free programming languge to the application-level
               </li>
             </ul>
           </div>
@@ -266,9 +269,6 @@
               <li>
                 Initiated company-wide React and TypeScript code sharing via a private npm repository
               </li>
-              <li>
-                Worked within the Agile framework, in which I planned sprint work, attended daily stand-ups, and participated in retrospectives
-              </li>
             </ul>
           </div>
           <div class="experience-item">
@@ -310,7 +310,7 @@
             </div>
             <ul>
               <li>
-                Developed a tool based on the GTK toolkit to improve the workflow of the quality assurance team for <i>DomiNations</i>
+                Developed a tool using C# and GTK to improve the workflow of the quality assurance team for <i>DomiNations</i>
               </li>
               <li>
                 Wrote a comprehensive user manual that explains how the tool functions for both technical and non-technical users
@@ -333,7 +333,7 @@
             </div>
             <ul>
               <li>
-                Developed an application to measure and report memory usage and run times for all game systems in <i>Dropzone</i>
+                Developed a framework for profiling the game systems in <i>Dropzone</i>
               </li>
             </ul>
           </div>
diff --git a/index.css b/index.css
index d237608..3ab6a73 100644
--- a/index.css
+++ b/index.css
@@ -23,10 +23,9 @@ header > h1 {
 }
 
 header > nav {	
-    padding-top: 0.5rem;
-    padding-bottom: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
     padding-left: 0.25rem;
-    border-bottom: 1px solid lightgray;
 }
 
 header > nav > ul {
@@ -50,6 +49,7 @@ header > nav > ul a {
 
 header > nav > ul a:hover {
 	opacity: 0.7;
+	text-decoration: underline;
 }
 
 h2 {
@@ -61,7 +61,7 @@ section {
 }
 
 p {
-    text-align: center;
+    text-align: left;
 }
 
 section a {
@@ -72,78 +72,42 @@ section a:hover {
     opacity: 0.7;
 }
 
-/* Carousel styling */
-#carousel {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-}
-
-#carousel > button {
-    position: absolute;
-    top: calc(50% - 8rem);
-    font-size: 12rem;
-    border: none;
-    background-color: transparent;
-}
-
-#carousel > button:hover {
-    opacity: 0.5;
-    cursor: pointer;
-}
-
-#carousel_left {
-    visibility: hidden;
-    left: 0;
-}
-
-#carousel_right {
-    visibility: hidden;
-    right: 0;
-}
-
+/* Image styling */
 #image_container {
-    padding-left: calc(50% - 120px);
     display: flex;
     flex-direction: row;
-    height: 100%;
-    transition: all 100ms linear;
-    opacity: 0;
+    transition: transform 100ms ease-in-out;
+	flex: 0 1 auto;
+	width: 100%;
+	overflow: auto;
 }
 
-#image_container .carousel_image {
+#image_container .image_item {
     width: 240px;
-    transition: opacity 100ms linear;
+    transition: opacity 100ms ease-in-out;
     padding: 0;
     margin: 0;
     padding-right: 12px;
     cursor: pointer;
     position: relative;
-    opacity: 0;
 }
 
-#image_container .carousel_image:hover::after {
-    position: absolute;
-    top: calc(50% - 6rem);
-    left: calc(50% - 3rem);
-    font-size: 6rem;
-    color: white;
-    content: "\26F6";
+#image_container .image_item:hover > img {
+	border: 2px solid rgba(0, 0, 0, 0.7);
 }
 
-.carousel_image > figcaption {
+.image_item > figcaption {
     font-size: 10px;
     font-style: italic;
 }
 
-.carousel_image > img {
+.image_item > img {
     width: inherit;
-    border-radius: 2px;
+    border-radius: 3px;
+	border: 2px solid rgba(0, 0, 0, 0.3);
 }
 
-.carousel_image_expanded_container {
+.image_item_expanded_container {
     position: fixed;
     width: 100vw;
     height: 100vh;
@@ -155,7 +119,7 @@ section a:hover {
     z-index: 1000;
 }
 
-.carousel_image_expanded_container > .carousel_image {
+.image_item_expanded_container > .image_item {
     width: 35vw;
     opacity: 1.0 !important;
 }
@@ -202,14 +166,15 @@ input:focus {
 }
 
 /* Theme Selector */
-#theme_selector {
-	width: 50%;
+#theme_selector {;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	bottom: 1rem;
     pointer-events: all;
     opacity: 1;
     transition: opacity 150ms linear;
+	gap: 2rem;
 }
 
 #theme_selector.hidden {
@@ -226,8 +191,6 @@ input:focus {
 	background-color: white;
 	cursor: pointer;
 	transition: opacity 100ms linear;
-    margin-right: 1rem;
-    margin-left: 1rem;
 }
 
 #theme_selector > button:hover {
@@ -267,7 +230,7 @@ only screen and (max-width:960px) {
         padding-bottom: 2rem !important;
     }
 
-    .carousel_image_expanded_container > .carousel_image {
+    .image_item_expanded_container > .image_item {
         width: 80vw;
     }
 
diff --git a/index.html b/index.html
index ea1eb15..86c83c5 100644
--- a/index.html
+++ b/index.html
@@ -24,37 +24,32 @@
           </ul>
         </nav>
     </header>
-    <section id='landing_page'>
+    <section id='image_container'>
+      <figure class='image_item'>
+        <img src='images/portrait-min.jpg' />
+        <figcaption>
+          Me in front of my desktop, circa August 2021.
+        </figcaption>
+      </figure>
+      <figure class='image_item'>
+        <img src='images/dog_and_me-min.jpg' />
+        <figcaption>
+          Hanging with my dog named Rizzy, circa May 2020.
+        </figcaption>
+      </figure>
+      <figure class='image_item'>
+        <img src='images/friends-min.jpg' />
+        <figcaption>
+          Hanging with my friends, circa July 2019.
+        </figcaption>
+      </figure>
+	  
 
+    </section>
+	<section>
+	  <h2>About Me</h2>
       <p>
-        <div id='carousel'>
-          <div id='image_container'>
-            <figure class='carousel_image'>
-              <img src='images/portrait-min.jpg' />
-              <figcaption>
-                Me in front of my desktop, circa August 2021.
-              </figcaption>
-            </figure>
-            <figure class='carousel_image'>
-              <img src='images/dog_and_me-min.jpg' />
-              <figcaption>
-                Hanging with my dog named Rizzy, circa May 2020.
-              </figcaption>
-            </figure>
-            <figure class='carousel_image'>
-              <img src='images/friends-min.jpg' />
-              <figcaption>
-                Hanging with my friends, circa July 2019.
-              </figcaption>
-            </figure>
-          </div>
-          <button id='carousel_left'>&#8592;</button>
-          <button id='carousel_right'>&#8594;</button>
-        </div>
-      </p>
-      
-      <p style='padding-left: 2rem; padding-right: 2rem;'>
-        Hello! My name is Matthew Kosarek.
+        My name is Matthew Kosarek.
 		I am a computer programmer from northern New Jersey and I currently live and work in Montreal, Quebec.
 		I keep my CV up to date on this website, and I also provide some links to some extracurriculars that I am up to.
 		In my spare time, I build some graphics scenes in C++/OpenGL, compile them via <code>emcc</code> and post them here as "themes".
@@ -69,13 +64,15 @@
       </ul>
     </section>
 
-    <h2>Theme</h2>
-    <div id="theme_selector" class="hidden">
-      <button id="theme_button_default">Default</button>
-      <button id="theme_button_autumn">Autumn</button>
+	<section>
+      <h2>Theme</h2>
+      <div id="theme_selector" class="hidden">
+		<button id="theme_button_default">Default</button>
+		<button id="theme_button_autumn">Autumn</button>
 	    <button id="theme_button_winter">Winter</button>
-      <button id="theme_button_spring">Spring</button>
-    </div>
+		<button id="theme_button_spring">Spring</button>
+      </div>
+	</section>
   </body>
 
   <script src='/index.js'></script>
diff --git a/index.js b/index.js
index fd949b7..fa6dddd 100644
--- a/index.js
+++ b/index.js
@@ -3,39 +3,15 @@ function main() {
     var themeSelector = document.getElementById('theme_selector');
     themeSelector.classList.remove('hidden');
 
-    runCarousel();
+    imageCallbacks();
 }
 
-function runCarousel() {
-    var carouselContainer = document.getElementById("carousel"),
-        imageContainer = document.getElementById('image_container'),
-        leftButton = document.getElementById('carousel_left'),
-        rightButton = document.getElementById('carousel_right');
-
-    // Carousel logic
-    var carouselPosition = 0,
-        numImages = imageContainer.children.length;
-
-    function onCarouselRight() {
-        carouselPosition = (carouselPosition + 1);
-
-        if (carouselPosition === numImages) {
-            carouselPosition = 0;
-        }
-        updateCarousel();
-    }
-
-    function onCarouselLeft() {
-        carouselPosition = (carouselPosition - 1);
-        if (carouselPosition < 0) {
-            carouselPosition = numImages - 1;
-        }
-        updateCarousel();
-    }
-
+function imageCallbacks() {
+  const imageContainer = document.getElementById('image_container');
+  
     function onImageClicked() {
         var background = document.createElement('div'); // 
-        background.classList.add('carousel_image_expanded_container');
+        background.classList.add('image_item_expanded_container');
         var clone = this.cloneNode(true);
         clone.classList.add('expanded');
         background.append(clone);
@@ -50,44 +26,13 @@ function runCarousel() {
             var image = imageList[i];
             image.addEventListener('click', onImageClicked);
         }
-    }
-
-    function updateCarousel() {
-        var selectedChildPosition = -(carouselPosition * 240);
-        imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)';
-        for (var i = 0; i < numImages; i++) {
-            var image = imageList[i];
-            if (i !== carouselPosition) {
-                if (i === (carouselPosition - 1) % numImages) {
-                    image.style.opacity = 0.3;
-                } else if (i !== 0 && i === (carouselPosition + 1) % numImages) {
-                    image.style.opacity = 0.3;
-                } else {
-                    image.style.opacity = 0;
-                }
-            } else {
-                image.style.opacity = 1;
-            }
-
-            image.style.pointerEvents = image.style.opacity > 0 ? 'all' : 'none';
-        }
-
-        rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible';
-        leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible';
-    }
+    } 
 
     // -- Set up on image clicked
     var imageList = imageContainer.children,
         numImages = imageContainer.children.length;
 
     setImageClicked();
-    updateCarousel();
-
-    leftButton.addEventListener('click', onCarouselLeft);
-    rightButton.addEventListener('click', onCarouselRight);
-
-    // -- Fade in the container
-    imageContainer.style.opacity = '1';
 }
 
 main();
diff --git a/resume.html b/resume.html
index c46c6c6..2b3a4d4 100755
--- a/resume.html
+++ b/resume.html
@@ -45,7 +45,7 @@
         <h2>Skills</h2>
         <div class="resume_section_content">
           <div class="skill-section">
-            <b>Languages & Tech</b><div>C/C++, C#, TypeScript/JavaScript, React, HTML & CSS, Java, OpenGL, ASP.NET, Linux, LaTeX</div>
+            <b>Languages & Frameworks</b><div>C/C++, C#, TypeScript/JavaScript, React, HTML & CSS, Java, OpenGL, ASP.NET, Linux, LaTeX</div>
           </div>
           <div class="skill-section">
             <b>Tools</b><div>git, npm, Webpack, Visual Studio Professional/Code, Unity, AWS, Emacs</div>
@@ -77,19 +77,22 @@
             </div>
             <ul>
               <li>
-                Led a small team in the development of a robust infrastructure for user-facing industrial software applications
+                Led a team in the development of client-facing industrial software applications including cobot palletizers, cartesian palletizers, and CNC machines
               </li>
               <li>
-				        Developed and shipped a number of time-sensitive client projects, including palletizing and path-following software applications
+				        Developed and shipped a number of time-sensitive client projects
               </li>
               <li>
-				        Interacted extensively with other teams to align on specific business goals and meet expectations
+                Architected and implemented the core infrastructure required for the development of client-facing applications
               </li>
               <li>
-                Planned and organized projects and tasks for the team, including long-term vision and day-to-day goals 
+				        Interacted extensively with other teams to align on business goals and meet deadlines
               </li>
               <li>
-                Implemented new features across the stack of a code-free programming language
+                Planned and organized projects and tasks for the team including long-term vision and day-to-day goals 
+              </li>
+              <li>
+                Individually contributed across many facets of the company, from firmware to the engine of a code-free programming languge to the application-level
               </li>
             </ul>
           </div>
@@ -132,9 +135,6 @@
               <li>
                 Initiated company-wide React and TypeScript code sharing via a private npm repository
               </li>
-              <li>
-                Worked within the Agile framework, in which I planned sprint work, attended daily stand-ups, and participated in retrospectives
-              </li>
             </ul>
           </div>
           <div class="experience-item">
@@ -176,7 +176,7 @@
             </div>
             <ul>
               <li>
-                Developed a tool based on the GTK toolkit to improve the workflow of the quality assurance team for <i>DomiNations</i>
+                Developed a tool using C# and GTK to improve the workflow of the quality assurance team for <i>DomiNations</i>
               </li>
               <li>
                 Wrote a comprehensive user manual that explains how the tool functions for both technical and non-technical users
@@ -199,7 +199,7 @@
             </div>
             <ul>
               <li>
-                Developed an application to measure and report memory usage and run times for all game systems in <i>Dropzone</i>
+                Developed a framework for profiling the game systems in <i>Dropzone</i>
               </li>
             </ul>
           </div>