diff options
| -rw-r--r-- | download/cv.pdf | bin | 75043 -> 75008 bytes | |||
| -rw-r--r-- | download/resume_dl.html | 22 | ||||
| -rw-r--r-- | index.css | 83 | ||||
| -rw-r--r-- | index.html | 67 | ||||
| -rw-r--r-- | index.js | 67 | ||||
| -rwxr-xr-x | resume.html | 22 |
6 files changed, 83 insertions, 178 deletions
diff --git a/download/cv.pdf b/download/cv.pdf Binary files differindex 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> @@ -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; } @@ -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'>←</button> - <button id='carousel_right'>→</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> @@ -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> |