From 07b9f9997d20ca98bb299be3bd16703c661c04a4 Mon Sep 17 00:00:00 2001
From: mattkae <mattkae@protonmail.com>
Date: Wed, 1 Feb 2023 19:32:41 -0500
Subject: Improved resume viewing on the web

---
 download/cv.pdf         | Bin 1218167 -> 1213787 bytes
 download/resume_dl.html | 449 ++++++++++++++++++++++++------------------------
 resume.css              | 264 ++++++++++++++--------------
 resume.html             | 186 ++++++++++----------
 resume.mobile.css       |  25 +++
 5 files changed, 472 insertions(+), 452 deletions(-)
 create mode 100644 resume.mobile.css

diff --git a/download/cv.pdf b/download/cv.pdf
index 5485c0a..8698660 100644
Binary files a/download/cv.pdf and b/download/cv.pdf differ
diff --git a/download/resume_dl.html b/download/resume_dl.html
index 25e5add..89ae604 100644
--- a/download/resume_dl.html
+++ b/download/resume_dl.html
@@ -18,111 +18,112 @@ img.emoji {
       <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">
 <style>
 html {
-  overflow-y: overlay;
-  font-size: 16px;
+    overflow-y: overlay;
+    font-size: 16px;
 }
 
 header {
-  padding-bottom: 1rem;
+    padding-bottom: 1rem;
 }
 
 #actions_container {
-  padding-bottom: 1rem;
-  
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+    padding-bottom: 1rem;
+    
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
 }
 
 #resume {
-  position: relative;
-  text-align: left;
-  background-color: white;
-  color: black;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
-  line-height: 1.325rem;
-  padding-bottom: 1rem;
+    position: relative;
+    text-align: left;
+    background-color: white;
+    color: black;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+    line-height: 1.325rem;
+    padding-bottom: 1rem;
 }
 
 #resume_container {
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 #resume a {
-  color: #343231;
+    color: #343231;
 }
 
 #resume_sidebar {
-  width: 12rem;
-  margin-right: 1.5rem;
+    width: 12rem;
+    margin-right: 1.5rem;
 }
 
 #resume_header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
 }
 
 .resume_header_name {
-  font-size: 3rem;
-  font-variant: small-caps;
-  word-wrap: break-word;
-  padding: 0;
-  margin: 0;
-	font-weight: 500;
-  margin-bottom: 2rem;
+    font-size: 3rem;
+    line-height: 3rem;
+    font-variant: small-caps;
+    word-wrap: break-word;
+    padding: 0;
+    margin: 0;
+	  font-weight: 500;
+    margin-bottom: 2rem;
 }
 
 #resume_header_contact {
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: row;
-  flex-direction: column;
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    flex-direction: column;
 }
 
 #resume_header_contact span {
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 #resume_header_contact i {
-  margin-right: 0.5rem;
-  font-style: normal;
+    margin-right: 0.5rem;
+    font-style: normal;
 }
 
 .resume_section {
-  width: 100%;
-  text-align: left;
-  font-size: 1rem;
+    width: 100%;
+    text-align: left;
+    font-size: 1rem;
 }
 
 .resume_section > h2 {
-  font-size: 1.125rem;
-  font-variant: small-caps;
-  font-weight: bold;
-  padding: 0;
-  margin: 0;
-	padding: 0.25rem;
-  background-color: #2E4C6D;
-	color: white;
+    font-size: 1.125rem;
+    font-variant: small-caps;
+    font-weight: bold;
+    padding: 0;
+    margin: 0;
+	  padding: 0.25rem;
+    background-color: #2E4C6D;
+	  color: white;
 }
 
 .resume_section_content {
-	padding: 0.5rem;
+	  padding: 0.5rem;
 }
 
 .experience-header > div {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
 .experience-item ul {
@@ -130,143 +131,142 @@ header {
 }
 
 .experience-item li {
-  width: 100%;
+    width: 100%;
 }
 
 .experience-tech {
-  font-size: 1rem;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  margin-top: 0.2rem;
+    font-size: 1rem;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-top: 0.2rem;
 }
 
 .experience-tech > svg {
-  width: 1.125rem;
-  height: 1.125rem;
-  margin-right: 0.5rem;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-right: 0.5rem;
+}
+
+.skills_table_container {
+    display: flex;
+    flex-direction: column;
 }
 
 .skills_table {
-  width: 100%;
-  margin-bottom: 2rem;
-  border-spacing: 0;
-  border: 1px solid gray;
-  border-radius: 2px;
+    width: 100%;
+    border-spacing: 0;
+    border: 1px solid gray;
+    border-radius: 2px;
+    margin-bottom: 2rem;
 }
 
 .skills_table th {
-  text-align: center;
+    text-align: center;
 }
 
 .skills_table th, .skills_table tr:not(:last-child) td {
-  border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid lightgray;
 }
 
 .skills_table tr th {
-  color: #2E4C6D;
+    color: #2E4C6D;
 }
 
 .skills_table td, th {
-  font-size: 0.9rem;
-  padding: 0.35rem 0.5rem;
-  width: 50%;
+    font-size: 0.9rem;
+    padding: 0.35rem 0.5rem;
+    width: 50%;
 }
 
 #skills_section {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .skills_section_item {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1.5rem;
 }
 
 .skills_section_bar {
-  position: relative;
-  width: 100%;
-  height: 1rem;
-  background-color: white;
-  border-radius: 3px;
-  border: 1px solid lightgray;
+    position: relative;
+    width: 100%;
+    height: 1rem;
+    background-color: white;
+    border-radius: 3px;
+    border: 1px solid lightgray;
 }
 
 .skills_section_bar_fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-image: linear-gradient(to right,#007acc, #00E091);
-  border-radius: 3px;
-  background-size: 12rem 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-image: linear-gradient(to right,#007acc, #00E091);
+    border-radius: 3px;
+    background-size: 12rem 100%;
 }
 
 .skills_section_bar_fill.one {
-  width: 20%;
+    width: 20%;
 }
 
 .skills_section_bar_fill.two {
-  width: 40%;
+    width: 40%;
 }
 
 .skills_section_bar_fill.three {
-  width: 60%;
+    width: 60%;
 }
 
 .skills_section_bar_fill.four {
-  width: 80%;
+    width: 80%;
 }
 
 .skills_section_bar_fill.five {
-  width: 100%;
+    width: 100%;
 }
 
 .skills_section_label {
-  width: 100%;
-  margin-top: 0.25rem;
-  color: black;
-  font-size: 1rem;
+    width: 100%;
+    margin-top: 0.25rem;
+    color: black;
+    font-size: 1rem;
 }
 
 
 /** Web-only **/
 #resume_button_container {
-  width: 100%;
-  text-align: right;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  
+    width: 100%;
+    text-align: right;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    
 }
 
 #resume_button_container > button {
-  border: none;
-  background-color: transparent;
-  font-size: 20px;
+    border: none;
+    background-color: transparent;
+    font-size: 20px;
 }
 
 #resume_button_container > button:hover {
-  cursor: pointer;
-  opacity: 0.8;
+    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;
-}
-
-@media (max-width: 767.98px) {
-  html {
-    font-size: 12px;
-  }
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    width: calc(100vw - 4rem);
+    height: calc(100vh - 4rem);
+    overflow: auto;
 }
 
 html {
@@ -309,8 +309,7 @@ img.emoji {
       <div id="resume_container">
         <header id="resume_sidebar">
           <div id="resume_header">
-            <span class="resume_header_name">Matthew</span>
-            <span class="resume_header_name">Kosarek</span>
+            <span class="resume_header_name">Matthew</br> Kosarek</span>
             
             <div id="resume_header_contact">
               <span><i>🖥️</i> Software Developer</span>
@@ -323,98 +322,96 @@ img.emoji {
               <span><i>🇺🇸</i> United States Citizen</span>
             </div>
           </div>
-          <table class="skills_table">
-            <thead>
-              <tr>
-                <th colspan="2">Languages</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>JavaScript</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>TypeScript</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-              <tr>
-                <td>C#</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Python</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>C/C++</td>
-                <td>1 yr</td>
-              </tr>
-              <tr>
-                <td>Java</td>
-                <td>1 yr</td>
-              </tr>
-            </tbody>
-          </table>
-          <table class="skills_table">
-            <thead>
-              <tr>
-                <th colspan="2">Libraries/Frameworks</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>React</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>node.js</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Unity</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>ASP.NET</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>OpenGL</td>
-                <td>1 yr</td>
-              </tr>
-            </tbody>
-          </table>
-          <table class="skills_table">
-            <thead>
-              <tr>
-                <th colspan="2">Tools</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>git</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>Linux</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>VSCode</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Visual Studio</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Webpack</td>
-                <td>2½ yrs</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="skills_table_container">
+            <table class="skills_table">
+              <thead>
+                <tr>
+                  <th colspan="2">Languages</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>JavaScript/ TypeScript</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <tr>
+                    <td>C#</td>
+                    <td>2½ yrs</td>
+                  </tr>
+                  <tr>
+                    <td>Python</td>
+                    <td>2½ yrs</td>
+                  </tr>
+                  <tr>
+                    <td>C/C++</td>
+                    <td>1 yr</td>
+                  </tr>
+                  <tr>
+                    <td>Java</td>
+                    <td>1 yr</td>
+                  </tr>
+              </tbody>
+            </table>
+            <table class="skills_table">
+              <thead>
+                <tr>
+                  <th colspan="2">Technologies</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>React</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <td>node.js</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>Unity</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>ASP.NET</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>OpenGL</td>
+                  <td>1 yr</td>
+                </tr>
+              </tbody>
+            </table>
+            <table class="skills_table">
+              <thead>
+                <tr>
+                  <th colspan="2">Tools</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>git</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <td>Linux</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <td>VSCode</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>Visual Studio</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>Webpack</td>
+                  <td>2½ yrs</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </header>
 
         <main>
diff --git a/resume.css b/resume.css
index ba1ef6a..cca2e19 100755
--- a/resume.css
+++ b/resume.css
@@ -1,109 +1,110 @@
 html {
-  overflow-y: overlay;
-  font-size: 16px;
+    overflow-y: overlay;
+    font-size: 16px;
 }
 
 header {
-  padding-bottom: 1rem;
+    padding-bottom: 1rem;
 }
 
 #actions_container {
-  padding-bottom: 1rem;
-  
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+    padding-bottom: 1rem;
+    
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
 }
 
 #resume {
-  position: relative;
-  text-align: left;
-  background-color: white;
-  color: black;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
-  line-height: 1.325rem;
-  padding-bottom: 1rem;
+    position: relative;
+    text-align: left;
+    background-color: white;
+    color: black;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+    line-height: 1.325rem;
+    padding-bottom: 1rem;
 }
 
 #resume_container {
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 #resume a {
-  color: #343231;
+    color: #343231;
 }
 
 #resume_sidebar {
-  width: 12rem;
-  margin-right: 1.5rem;
+    width: 12rem;
+    margin-right: 1.5rem;
 }
 
 #resume_header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
 }
 
 .resume_header_name {
-  font-size: 3rem;
-  font-variant: small-caps;
-  word-wrap: break-word;
-  padding: 0;
-  margin: 0;
-	font-weight: 500;
-  margin-bottom: 2rem;
+    font-size: 3rem;
+    line-height: 3rem;
+    font-variant: small-caps;
+    word-wrap: break-word;
+    padding: 0;
+    margin: 0;
+	  font-weight: 500;
+    margin-bottom: 2rem;
 }
 
 #resume_header_contact {
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: row;
-  flex-direction: column;
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    flex-direction: column;
 }
 
 #resume_header_contact span {
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 #resume_header_contact i {
-  margin-right: 0.5rem;
-  font-style: normal;
+    margin-right: 0.5rem;
+    font-style: normal;
 }
 
 .resume_section {
-  width: 100%;
-  text-align: left;
-  font-size: 1rem;
+    width: 100%;
+    text-align: left;
+    font-size: 1rem;
 }
 
 .resume_section > h2 {
-  font-size: 1.125rem;
-  font-variant: small-caps;
-  font-weight: bold;
-  padding: 0;
-  margin: 0;
-	padding: 0.25rem;
-  background-color: #2E4C6D;
-	color: white;
+    font-size: 1.125rem;
+    font-variant: small-caps;
+    font-weight: bold;
+    padding: 0;
+    margin: 0;
+	  padding: 0.25rem;
+    background-color: #2E4C6D;
+	  color: white;
 }
 
 .resume_section_content {
-	padding: 0.5rem;
+	  padding: 0.5rem;
 }
 
 .experience-header > div {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
 .experience-item ul {
@@ -111,141 +112,140 @@ header {
 }
 
 .experience-item li {
-  width: 100%;
+    width: 100%;
 }
 
 .experience-tech {
-  font-size: 1rem;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  margin-top: 0.2rem;
+    font-size: 1rem;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-top: 0.2rem;
 }
 
 .experience-tech > svg {
-  width: 1.125rem;
-  height: 1.125rem;
-  margin-right: 0.5rem;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-right: 0.5rem;
+}
+
+.skills_table_container {
+    display: flex;
+    flex-direction: column;
 }
 
 .skills_table {
-  width: 100%;
-  margin-bottom: 2rem;
-  border-spacing: 0;
-  border: 1px solid gray;
-  border-radius: 2px;
+    width: 100%;
+    border-spacing: 0;
+    border: 1px solid gray;
+    border-radius: 2px;
+    margin-bottom: 2rem;
 }
 
 .skills_table th {
-  text-align: center;
+    text-align: center;
 }
 
 .skills_table th, .skills_table tr:not(:last-child) td {
-  border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid lightgray;
 }
 
 .skills_table tr th {
-  color: #2E4C6D;
+    color: #2E4C6D;
 }
 
 .skills_table td, th {
-  font-size: 0.9rem;
-  padding: 0.35rem 0.5rem;
-  width: 50%;
+    font-size: 0.9rem;
+    padding: 0.35rem 0.5rem;
+    width: 50%;
 }
 
 #skills_section {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .skills_section_item {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1.5rem;
 }
 
 .skills_section_bar {
-  position: relative;
-  width: 100%;
-  height: 1rem;
-  background-color: white;
-  border-radius: 3px;
-  border: 1px solid lightgray;
+    position: relative;
+    width: 100%;
+    height: 1rem;
+    background-color: white;
+    border-radius: 3px;
+    border: 1px solid lightgray;
 }
 
 .skills_section_bar_fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-image: linear-gradient(to right,#007acc, #00E091);
-  border-radius: 3px;
-  background-size: 12rem 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-image: linear-gradient(to right,#007acc, #00E091);
+    border-radius: 3px;
+    background-size: 12rem 100%;
 }
 
 .skills_section_bar_fill.one {
-  width: 20%;
+    width: 20%;
 }
 
 .skills_section_bar_fill.two {
-  width: 40%;
+    width: 40%;
 }
 
 .skills_section_bar_fill.three {
-  width: 60%;
+    width: 60%;
 }
 
 .skills_section_bar_fill.four {
-  width: 80%;
+    width: 80%;
 }
 
 .skills_section_bar_fill.five {
-  width: 100%;
+    width: 100%;
 }
 
 .skills_section_label {
-  width: 100%;
-  margin-top: 0.25rem;
-  color: black;
-  font-size: 1rem;
+    width: 100%;
+    margin-top: 0.25rem;
+    color: black;
+    font-size: 1rem;
 }
 
 
 /** Web-only **/
 #resume_button_container {
-  width: 100%;
-  text-align: right;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  
+    width: 100%;
+    text-align: right;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    
 }
 
 #resume_button_container > button {
-  border: none;
-  background-color: transparent;
-  font-size: 20px;
+    border: none;
+    background-color: transparent;
+    font-size: 20px;
 }
 
 #resume_button_container > button:hover {
-  cursor: pointer;
-  opacity: 0.8;
+    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;
-}
-
-@media (max-width: 767.98px) {
-  html {
-    font-size: 12px;
-  }
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    width: calc(100vw - 4rem);
+    height: calc(100vh - 4rem);
+    overflow: auto;
 }
diff --git a/resume.html b/resume.html
index 6955ce1..7c6c408 100755
--- a/resume.html
+++ b/resume.html
@@ -4,6 +4,7 @@
 	  <meta charset="utf-8">
 	  <link rel="stylesheet" href="/index.css">
     <link rel="stylesheet" href="/resume.css">
+    <link rel="stylesheet" href="/resume.mobile.css">
     <script src='/resume.js'  defer></script>
 
 	  <title>Matthew Kosarek - Resume</title>
@@ -35,8 +36,7 @@
       <div id="resume_container">
         <header id="resume_sidebar">
           <div id="resume_header">
-            <span class="resume_header_name">Matthew</span>
-            <span class="resume_header_name">Kosarek</span>
+            <span class="resume_header_name">Matthew</br> Kosarek</span>
             
             <div id="resume_header_contact">
               <span><i>🖥️</i> Software Developer</span>
@@ -49,98 +49,96 @@
               <span><i>🇺🇸</i> United States Citizen</span>
             </div>
           </div>
-          <table class="skills_table">
-            <thead>
-              <tr>
-                <th colspan="2">Languages</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>JavaScript</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>TypeScript</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-              <tr>
-                <td>C#</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Python</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>C/C++</td>
-                <td>1 yr</td>
-              </tr>
-              <tr>
-                <td>Java</td>
-                <td>1 yr</td>
-              </tr>
-            </tbody>
-          </table>
-          <table class="skills_table">
-            <thead>
-              <tr>
-                <th colspan="2">Libraries/Frameworks</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>React</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>node.js</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Unity</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>ASP.NET</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>OpenGL</td>
-                <td>1 yr</td>
-              </tr>
-            </tbody>
-          </table>
-          <table class="skills_table">
-            <thead>
-              <tr>
-                <th colspan="2">Tools</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>git</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>Linux</td>
-                <td>5 yrs</td>
-              </tr>
-              <tr>
-                <td>VSCode</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Visual Studio</td>
-                <td>2½ yrs</td>
-              </tr>
-              <tr>
-                <td>Webpack</td>
-                <td>2½ yrs</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="skills_table_container">
+            <table class="skills_table">
+              <thead>
+                <tr>
+                  <th colspan="2">Languages</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>JavaScript/ TypeScript</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <tr>
+                    <td>C#</td>
+                    <td>2½ yrs</td>
+                  </tr>
+                  <tr>
+                    <td>Python</td>
+                    <td>2½ yrs</td>
+                  </tr>
+                  <tr>
+                    <td>C/C++</td>
+                    <td>1 yr</td>
+                  </tr>
+                  <tr>
+                    <td>Java</td>
+                    <td>1 yr</td>
+                  </tr>
+              </tbody>
+            </table>
+            <table class="skills_table">
+              <thead>
+                <tr>
+                  <th colspan="2">Technologies</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>React</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <td>node.js</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>Unity</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>ASP.NET</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>OpenGL</td>
+                  <td>1 yr</td>
+                </tr>
+              </tbody>
+            </table>
+            <table class="skills_table">
+              <thead>
+                <tr>
+                  <th colspan="2">Tools</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>git</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <td>Linux</td>
+                  <td>5 yrs</td>
+                </tr>
+                <tr>
+                  <td>VSCode</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>Visual Studio</td>
+                  <td>2½ yrs</td>
+                </tr>
+                <tr>
+                  <td>Webpack</td>
+                  <td>2½ yrs</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </header>
 
         <main>
diff --git a/resume.mobile.css b/resume.mobile.css
new file mode 100644
index 0000000..5790e0e
--- /dev/null
+++ b/resume.mobile.css
@@ -0,0 +1,25 @@
+@media (max-width: 767.98px) {
+    html {
+        font-size: 12px;
+    }
+
+    #resume_container {
+        flex-direction: column;
+    }
+
+    #resume_header {
+        flex-direction: row;
+    }
+
+    #resume_sidebar {
+        width: 100%;
+    }
+
+    .skills_table_container {
+        width: 100%;
+        justify-content: space-evenly;
+        display: flex;
+        flex-direction: row;
+        column-gap: 4px;
+    }
+}
-- 
cgit v1.2.1