Update of resume

9 files changed, 319 insertions, 207 deletions

diff --git a/#index.js# b/#index.js#
new file mode 100644
index 0000000..f666098
--- /dev/null
+++ b/#index.js#
@@ -0,0 +1,93 @@
+
+function main() {
+    var themeSelector = document.getElementById('theme_selector');
+    themeSelector.classList.remove('hidden');
+
+    runCarousel();
+}
+
+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 onImageClicked() {
+        var background = document.createElement('div'); // 
+        background.classList.add('carousel_image_expanded_container');
+        var clone = this.cloneNode(true);
+        clone.classList.add('expanded');
+        background.append(clone);
+        clone.addEventListener('click', function(event) { event.stopPropagation(); });
+        background.addEventListener('click', function() { background.remove(); });
+        window.addEventListener('keydown', function(e) { if (e.key === 'Escape') background.remove(); });
+        document.body.parentElement.prepend(background);
+    }
+
+    function setImageClicked() {
+        for (var i = 0; i < numImages; i++) {
+            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';
+}
+
+window.onload = main;
diff --git a/download/build.sh b/download/build.sh
index b3c88af..475bf7e 100755
--- a/download/build.sh
+++ b/download/build.sh
@@ -1 +1 @@
-wkhtmltopdf resume_dl.html cv.pdf
\ No newline at end of file
+wkhtmltopdf --encoding 'UTF-8' resume_dl.html cv.pdf 
\ No newline at end of file
diff --git a/download/cv.pdf b/download/cv.pdf
index bb0dc1d..44ae7ac 100644
--- a/download/cv.pdf
+++ b/download/cv.pdf
diff --git a/download/resume_dl.html b/download/resume_dl.html
index bd4ea57..e09e36c 100644
--- a/download/resume_dl.html
+++ b/download/resume_dl.html
@@ -3,169 +3,179 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta charset="UTF-8" />
+      <script src="https://twemoji.maxcdn.com/2/twemoji.min.js?11.2"></script>
+      <script>window.onload = function () { twemoji.parse(document.body);}</script>
     <style>
-        body {
-           font-family: Arial, Helvetica, sans-serif; 
-            font-size: 14px;
-            padding: 2rem;
-        }
+      html {
+          overflow-y: overlay;
+      }
 
-        header {
-            padding-bottom: 1rem;
-        }
+      body {
+          font-size: 16px !important;
+          padding-top: 72px;
+          padding-left: 48px;
+          padding-right: 48px;
+      }
 
-        #actions_container {
-            padding-bottom: 1rem;
-            
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-        }
+      header {
+          padding-bottom: 1rem;
+      }
 
-        #resume {
-            position: relative;
-            text-align: left;
-            background-color: white;
-            color: black;
-            font-family: Arial,Helvetica Neue,Helvetica,sans-serif !important; 
-            line-height: 1.2rem;
-            padding-bottom: 1rem;
-        }
+      #actions_container {
+          padding-bottom: 1rem;
+          
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+      }
 
-        #resume_button_container {
-            position: absolute;
-            top: 0;
-            right: 1rem;
-            text-align: right;
-            
-        }
+      #resume {
+          position: relative;
+          text-align: left;
+          background-color: white;
+          color: black;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+          line-height: 1.2rem;
+          padding-bottom: 1rem;
+      }
 
-        #resume_button_container > button {
-            border: none;
-            background-color: transparent;
-        }
+      #resume_header {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+      }
 
-        #resume_button_container > button:hover {
-            cursor: pointer;
-            opacity: 0.8;
-        }
+      #resume_header > h1 {
+        font-size: 24px;
+        padding: 0;
+        margin: 0;
+        font-weight: 500;
+      }
 
-        #resume.resume_fullscreen {
-            position: fixed;
-            top: 0;
-            left: 0;
-            padding: 2rem;
-            width: calc(100vw - 4rem);
-            height: calc(100vh - 4rem);
-            overflow: auto;
-        }
+      #resume_header_contact {
+        font-size: 14px;
+      }
 
+      #resume_header_contact span {
+          margin-right: 0.5rem;
+          margin-left: 0.5rem;
+      }
 
-        #resume > div {
-            text-align: left;
-        }
+      img.emoji {
+        height: 1em;
+        width: 1em;
+        margin: 0 .05em 0 .1em;
+        vertical-align: -0.1em;
+      }
 
-        #resume > header {
-            width: 100%;
-            text-align: center;
-        }
+      #resume_header_contact i {
+        margin-right: 0.25rem;
+        font-style: normal;
+      }
 
-        #resume > header > h1 {
-            font-size: 1.7rem;
-            padding: 0;
-            margin: 0;
-          font-weight: 500;
-        }
+      .resume_section {
+          width: 100%;
+          text-align: left;
+      }
 
-        #resume > header > div {
-            padding-top: 0.8rem;
-        }
+      .resume_section > h2 {
+        font-size: 18px !important;
+        font-variant: small-caps;
+        font-weight: bold;
+        padding: 0;
+        margin: 0;
+        padding: 10px;
+        background-color: #2E4C6D;
+        color: white;
+      }
 
-        #resume > header > div > span {
-            padding-right: 0.5rem;
-            padding-left: 0.5rem;
-        }
+      .resume_section_content {
+        padding: 0.5rem;
+      }
 
-        #resume > header > div > span > i {
-            padding-right: 0.25rem;
-        }
+      .skill-section {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+      }
 
-        .resume_section {
-            width: 100%;
-        }
+      .skill-section > div {
+          width: 75%;
+      }
 
-        .resume_section > h2 {
-            font-size: 1.25rem !important;
-            font-variant: small-caps;
-            font-weight: bold;
-            padding: 0;
-            margin: 0;
-          padding: 0.5rem;
-            background-color: #2E4C6D;
-          color: white;
-        }
+      .experience-header > div {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+      }
 
-        .resume_section > div {
-          padding-top: 0.5rem;
-          padding-bottom: 0.5rem;
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-        }
+      .experience-item li {
+          width: 100%;
+      }
 
-        .skill-section {
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-        }
 
-        .skill-section > b {
-            width: 25%;
-            font-weight: bold;
-            margin: 0;
-            padding: 0;
-        }
+      /** Web-only **/
+      #resume_button_container {
+          width: 100%;
+          text-align: right;
+          margin-right: 1rem;
+          margin-bottom: 1rem;
+          
+      }
 
-        .skill-section > div {
-            width: 75%;
-        }
+      #resume_button_container > button {
+          border: none;
+          background-color: transparent;
+          font-size: 20px;
+      }
 
-        .experience-header > div {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-        }
+      #resume_button_container > button:hover {
+          cursor: pointer;
+          opacity: 0.8;
+      }
 
-        .experience-item li {
-            width: 100%;
-        }
+      #resume.resume_fullscreen {
+          position: fixed;
+          top: 0;
+          left: 0;
+          padding: 2rem;
+          width: calc(100vw - 4rem);
+          height: calc(100vh - 4rem);
+          overflow: auto;
+      }
     </style>
   </head>
   <body>
     <section id='resume'>
-      <header>
+      <header id="resume_header">
         <h1>Matthew Kosarek</h1>
-        <div>
-          <span><i>&#128422;</i>Computer Programmer</span>
-          <span><i>&#128222;</i> +1-201-400-2699</span>
+        
+        <div id="resume_header_contact">
+          <span><i>&#128422;</i> Computer Programmer</span>
+          <span><i>☎️</i> +1-201-400-2699</span>
           <span><i>&#128231;</i> mkosare1@gmail.com</span>
+          <span><i>🇺🇸</i> United States Citizen</span>
         </div>
       </header>
 
       <section class='resume_section'>
         <h2>Skills</h2>
-        <div>
+        <div class="resume_section_content">
           <div class="skill-section">
-            <b>Languages & Tech</b><div>C/C++, C#, TypeScript/JavaScript, HTML & CSS, Java, OpenGL, ASP.NET, ReactJS, WebGL, SQL</div>
+            <b>Languages & Tech</b><div>C/C++, C#, TypeScript/JavaScript, ReactJS, HTML & CSS, Java, OpenGL, ASP.NET, Linux</div>
           </div>
           <div class="skill-section">
-            <b>Tools</b><div>Git, Visual Studio Professional, Unity, npm, Webpack, TeamCity, NuGet, AWS</div>
+            <b>Tools</b><div>git, npm, Webpack Visual Studio Professional, Visual Studio Code, Unity, TeamCity, NuGet, Emacs</div>
           </div>
         </div>
 	    </section>
 
       <section class='resume_section'>
         <h2>Experience</h2>
-        <div>
+        <div class="resume_section_content">
           <div class="experience-item">
             <div class="experience-header">
               <div>
@@ -179,19 +189,19 @@
             </div>
             <ul>
               <li>
-                Led the MachineApps team in the development of a robust infrastructure for industrial software applications
+                Led a small team in developing a robust infrastructure for customer-facing industrial software applications
               </li>
               <li>
-              Developed and shipped a number of time-sensitive client projects 
+				        Developed and shipped a number of time-sensitive client projects, including palletizing and path-following software applications
               </li>
               <li>
-              Interacted extensively with other teams to align on specific business goals and meet client deadlines
+				        Interacted extensively with other teams to align on specific business goals and meet expectations
               </li>
               <li>
-                Implemented new features and fixed bugs in both the engine and frontend of a code-free programming language
+                Planned and organized project tasks for the team via Github tickets 
               </li>
               <li>
-                Developed a CNC application that accepts G-Code files as input and provides a realtime rendering of the path during execution
+                Implemented new features in both the engine and frontend of MachineLogic, which is the company's code-free programming language
               </li>
             </ul>
           </div>
@@ -223,7 +233,7 @@
                 Met weekly with various disciplines to discuss ways to improve the UX of the company's tools
               </li>
               <li>
-                Initiated company-wide React and TypeScript code sharing via a private NPM repository
+                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
@@ -289,7 +299,7 @@
       
       <section class='resume_section'>
         <h2>Education</h2>
-        <div>
+        <div class="resume_section_content">
           <div class="experience-item">
             <div class="experience-header">
               <div>
diff --git a/index.js b/index.js
index d6a4d6e..f666098 100644
--- a/index.js
+++ b/index.js
@@ -15,7 +15,7 @@ function runCarousel() {
     // Carousel logic
     var carouselPosition = 0,
         numImages = imageContainer.children.length;
-    
+
     function onCarouselRight() {
         carouselPosition = (carouselPosition + 1);
 
@@ -24,7 +24,7 @@ function runCarousel() {
         }
         updateCarousel();
     }
-    
+
     function onCarouselLeft() {
         carouselPosition = (carouselPosition - 1);
         if (carouselPosition < 0) {
@@ -34,7 +34,7 @@ function runCarousel() {
     }
 
     function onImageClicked() {
-        var background = document.createElement('div');
+        var background = document.createElement('div'); // 
         background.classList.add('carousel_image_expanded_container');
         var clone = this.cloneNode(true);
         clone.classList.add('expanded');
diff --git a/resume.css b/resume.css
index e5b983f..e426252 100755
--- a/resume.css
+++ b/resume.css
@@ -23,102 +23,64 @@ header {
     text-align: left;
     background-color: white;
     color: black;
-    font-family: Arial,Helvetica Neue,Helvetica,sans-serif !important; 
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
     line-height: 1.2rem;
     padding-bottom: 1rem;
 }
 
-#resume_button_container {
-    position: absolute;
-    top: 0;
-    right: 1rem;
-    text-align: right;
-    
-}
-
-#resume_button_container > button {
-    border: none;
-    background-color: transparent;
-}
-
-#resume_button_container > button:hover {
-    cursor: pointer;
-    opacity: 0.8;
-}
-
-#resume.resume_fullscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding: 2rem;
-    width: calc(100vw - 4rem);
-    height: calc(100vh - 4rem);
-    overflow: auto;
-}
-
-
-#resume > div {
-    text-align: left;
-}
-
-#resume > header {
+#resume_header {
     width: 100%;
-    text-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
 }
 
-#resume > header > h1 {
-    font-size: 1.7rem;
+#resume_header > h1 {
+    font-size: 30px;
     padding: 0;
     margin: 0;
 	font-weight: 500;
 }
 
-#resume > header > div {
-    padding-top: 0.8rem;
+#resume_header_contact {
 }
 
-#resume > header > div > span {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+#resume_header_contact span {
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
 }
 
-#resume > header > div > span > i {
-    padding-right: 0.25rem;
+#resume_header_contact i {
+    margin-right: 0.25rem;
+    font-style: normal;
 }
 
 .resume_section {
     width: 100%;
+    text-align: left;
 }
 
 .resume_section > h2 {
-    font-size: 1.25rem !important;
+    font-size: 18px !important;
     font-variant: small-caps;
     font-weight: bold;
     padding: 0;
     margin: 0;
-	padding: 0.5rem;
+	padding: 10px;
     background-color: #2E4C6D;
 	color: white;
 }
 
-.resume_section > div {
-	padding-top: 0.5rem;
-	padding-bottom: 0.5rem;
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+.resume_section_content {
+	padding: 0.5rem;
 }
 
 .skill-section {
     width: 100%;
     display: flex;
     flex-direction: row;
-}
-
-.skill-section > b {
-    width: 25%;
-    font-weight: bold;
-    margin: 0;
-    padding: 0;
+    justify-content: space-between;
 }
 
 .skill-section > div {
@@ -133,4 +95,35 @@ header {
 
 .experience-item li {
     width: 100%;
+}
+
+
+/** Web-only **/
+#resume_button_container {
+    width: 100%;
+    text-align: right;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    
+}
+
+#resume_button_container > button {
+    border: none;
+    background-color: transparent;
+    font-size: 20px;
+}
+
+#resume_button_container > button:hover {
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+#resume.resume_fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    width: calc(100vw - 4rem);
+    height: calc(100vh - 4rem);
+    overflow: auto;
 }
\ No newline at end of file
diff --git a/resume.html b/resume.html
index b645791..90e4acc 100755
--- a/resume.html
+++ b/resume.html
@@ -27,33 +27,32 @@
           &#128229;
         </a>
       </div>
-
-      <header>
+      <header id="resume_header">
         <h1>Matthew Kosarek</h1>
-
         
-        <div>
-          <span><i>&#128422;</i>Computer Programmer</span>
-          <span><i>&#128222;</i> +1-201-400-2699</span>
+        <div id="resume_header_contact">
+          <span><i>&#128422;</i> Computer Programmer</span>
+          <span><i>☎️</i> +1-201-400-2699</span>
           <span><i>&#128231;</i> mkosare1@gmail.com</span>
+          <span><i>🇺🇸</i> United States Citizen</span>
         </div>
       </header>
 
       <section class='resume_section'>
         <h2>Skills</h2>
-        <div>
+        <div class="resume_section_content">
           <div class="skill-section">
-            <b>Languages & Tech</b><div>C/C++, C#, TypeScript/JavaScript, HTML & CSS, Java, OpenGL, ASP.NET, ReactJS, WebGL, SQL</div>
+            <b>Languages & Tech</b><div>C/C++, C#, TypeScript/JavaScript, ReactJS, HTML & CSS, Java, OpenGL, ASP.NET, Linux</div>
           </div>
           <div class="skill-section">
-            <b>Tools</b><div>Git, Visual Studio Professional, Unity, npm, Webpack, TeamCity, NuGet, AWS</div>
+            <b>Tools</b><div>git, npm, Webpack Visual Studio Professional, Visual Studio Code, Unity, TeamCity, NuGet, Emacs</div>
           </div>
         </div>
 	    </section>
 
       <section class='resume_section'>
         <h2>Experience</h2>
-        <div>
+        <div class="resume_section_content">
           <div class="experience-item">
             <div class="experience-header">
               <div>
@@ -67,13 +66,16 @@
             </div>
             <ul>
               <li>
-                Led the MachineApps team in the development of a robust infrastructure for industrial software applications
+                Led a small team in developing a robust infrastructure for customer-facing industrial software applications
+              </li>
+              <li>
+				        Developed and shipped a number of time-sensitive client projects, including palletizing and path-following software applications
               </li>
               <li>
-				Developed and shipped a number of time-sensitive client projects, including palletizing and path-following software applications
+				        Interacted extensively with other teams to align on specific business goals and meet expectations
               </li>
               <li>
-				Interacted extensively with other teams to align on specific business goals and meet expectations
+                Planned and organized project tasks for the team via Github tickets 
               </li>
               <li>
                 Implemented new features in both the engine and frontend of MachineLogic, which is the company's code-free programming language
@@ -174,7 +176,7 @@
       
       <section class='resume_section'>
         <h2>Education</h2>
-        <div>
+        <div class="resume_section_content">
           <div class="experience-item">
             <div class="experience-header">
               <div>
diff --git a/themes/Renderer3d.cpp b/themes/Renderer3d.cpp
index a7779e2..300a73b 100644
--- a/themes/Renderer3d.cpp
+++ b/themes/Renderer3d.cpp
@@ -11,6 +11,7 @@
 const char* vertexShader = 
 "attribute vec4 position; \n"
 "attribute vec4 color; \n"
+"attribute vec4 normal \n"
 "uniform mat4 projection; \n"
 "uniform mat4 view; \n"
 "uniform mat4 model; \n"
@@ -47,6 +48,7 @@ void Renderer3D::load(WebglContext* inContext) {
 	useShader(shader);
 	attributes.position = getShaderAttribute(shader, "position");
 	attributes.color = getShaderAttribute(shader, "color");
+	attributes.normal = getShaderAttribute(shader, "normal");
 	uniforms.projection = getShaderUniform(shader, "projection");
 	uniforms.view = getShaderUniform(shader, "view");
 	uniforms.model = getShaderUniform(shader, "model");
@@ -177,9 +179,19 @@ Mesh3d Mesh3d_fromObj(Renderer3D* renderer, const char* content, const i32 len)
 					lt.v.indices[lt.idx] = atoi(buffer);
 					lt.idx++;
 				}
-				result.indices.add(lt.v.indices[0] - 1);
-				result.indices.add(lt.v.indices[1] - 1);
-				result.indices.add(lt.v.indices[2] - 1);
+				
+				auto v1idx = lt.v.indices[0] - 1;
+				auto v2idx = lt.v.indices[1] - 1;
+				auto v3idx = lt.v.indices[2] - 1;
+
+				result.indices.add(v1idx);
+				result.indices.add(v2idx);
+				result.indices.add(v3idx);
+
+				auto v1 = result.vertices[v1idx];
+				auto v2 = result.vertices[v2idx];
+				auto v3 = result.vertices[v3idx];
+				auto normal = (v1 - v2).cross(v1 - v3);
 				break;
 			case LineType_Comment:
 				i = readPastLine(i, content);
diff --git a/themes/Renderer3d.h b/themes/Renderer3d.h
index 71fc8fe..7e89c93 100644
--- a/themes/Renderer3d.h
+++ b/themes/Renderer3d.h
@@ -10,6 +10,7 @@ struct Renderer3D;
 struct Vertex3d {
     Vector4 position;
     Vector4 color;
+	Vector4 normal;
 };
 
 struct Mesh3d {
@@ -36,6 +37,7 @@ struct Renderer3D {
     struct {
 		i32 position;
 		i32 color;
+		i32 normal;
 	} attributes;
 
 	struct {