Update to sidebar

4 files changed, 237 insertions, 170 deletions

diff --git a/download/cv.pdf b/download/cv.pdf
index 30dfc13..00d4c6f 100644
--- a/download/cv.pdf
+++ b/download/cv.pdf
diff --git a/download/resume_dl.html b/download/resume_dl.html
index 4ed036f..e956da3 100644
--- a/download/resume_dl.html
+++ b/download/resume_dl.html
@@ -135,6 +135,32 @@ header {
   margin-right: 0.5rem;
 }
 
+.skills_table {
+  width: 100%;
+  margin-bottom: 2rem;
+  border-spacing: 0;
+  border: 1px solid gray;
+  border-radius: 2px;
+}
+
+.skills_table th {
+  text-align: center;
+}
+
+.skills_table th, .skills_table tr:not(:last-child) td {
+  border-bottom: 1px solid lightgray;
+}
+
+.skills_table tr th {
+  color: #2E4C6D;
+}
+
+.skills_table td, th {
+  font-size: 0.9rem;
+  padding: 0.35rem 0.5rem;
+  width: 50%;
+}
+
 #skills_section {
   display: flex;
   flex-direction: column;
@@ -276,91 +302,90 @@ img.emoji {
               <span><i>🇺🇸</i> United States Citizen</span>
             </div>
           </div>
-          <div id='skills_section'>
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">C/C++</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">JavaScript/TypeScript</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">C#</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">HTML/CSS</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">Python</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill three"></span>
-              </span>
-              <span class="skills_section_label">Java</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">Git</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">Node.js</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">Webpack</span>
-            </div>
-
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">OpenGL</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">Linux</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill three"></span>
-              </span>
-              <span class="skills_section_label">AWS</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.5 yrs</td>
+              </tr>
+              <tr>
+                <td>Python</td>
+                <td>2.5 yrs</td>
+              </tr>
+              <tr>
+                <td>C/C++</td>
+                <td>1 yrs</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.5 yrs</td>
+              </tr>
+              <tr>
+                <td>Unity</td>
+                <td>2.5 yrs</td>
+              </tr>
+              <tr>
+                <td>ASP.NET</td>
+                <td>2.5 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>VSCode</td>
+                <td>2.5 yrs</td>
+              </tr>
+              <tr>
+                <td>Visual Studio</td>
+                <td>2.5 yr</td>
+              </tr>
+            </tbody>
+          </table>
         </header>
 
         <main>
diff --git a/resume.css b/resume.css
index e6b4256..a71be83 100755
--- a/resume.css
+++ b/resume.css
@@ -125,6 +125,32 @@ header {
   margin-right: 0.5rem;
 }
 
+.skills_table {
+  width: 100%;
+  margin-bottom: 2rem;
+  border-spacing: 0;
+  border: 1px solid gray;
+  border-radius: 2px;
+}
+
+.skills_table th {
+  text-align: center;
+}
+
+.skills_table th, .skills_table tr:not(:last-child) td {
+  border-bottom: 1px solid lightgray;
+}
+
+.skills_table tr th {
+  color: #2E4C6D;
+}
+
+.skills_table td, th {
+  font-size: 0.9rem;
+  padding: 0.35rem 0.5rem;
+  width: 50%;
+}
+
 #skills_section {
   display: flex;
   flex-direction: column;
diff --git a/resume.html b/resume.html
index 1294dec..c321e33 100755
--- a/resume.html
+++ b/resume.html
@@ -49,91 +49,107 @@
               <span><i>🇺🇸</i> United States Citizen</span>
             </div>
           </div>
-          <div id='skills_section'>
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">C/C++</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">JavaScript/TypeScript</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">C#</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">HTML/CSS</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">Python</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill three"></span>
-              </span>
-              <span class="skills_section_label">Java</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">Git</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill five"></span>
-              </span>
-              <span class="skills_section_label">Node.js</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">Webpack</span>
-            </div>
-
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">OpenGL</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill four"></span>
-              </span>
-              <span class="skills_section_label">Linux</span>
-            </div>
-  
-            <div class="skills_section_item">
-              <span class="skills_section_bar">
-                <span class="skills_section_bar_fill three"></span>
-              </span>
-              <span class="skills_section_label">AWS</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.5 yrs</td>
+              </tr>
+              <tr>
+                <td>Python</td>
+                <td>2.5 yrs</td>
+              </tr>
+              <tr>
+                <td>C/C++</td>
+                <td>1 yrs</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.5 yrs</td>
+              </tr>
+              <tr>
+                <td>Unity</td>
+                <td>2.5 yrs</td>
+              </tr>
+              <tr>
+                <td>ASP.NET</td>
+                <td>2.5 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>VSCode</td>
+                <td>2.5 yrs</td>
+              </tr>
+              <tr>
+                <td>Visual Studio</td>
+                <td>2.5 yr</td>
+              </tr>
+              <tr>
+                <td>Webpack</td>
+                <td>2 yrs</td>
+              </tr>
+            </tbody>
+          </table>
+          <table class="skills_table">
+            <thead>
+              <tr>
+                <th colspan="2">Other</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Linux</td>
+                <td>5 yrs</td>
+              </tr>
+            </tbody>
+          </table>
         </header>
 
         <main>