summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authormattkae <mattkae@protonmail.com>2022-12-18 10:02:16 -0500
committermattkae <mattkae@protonmail.com>2022-12-18 10:02:16 -0500
commitcf95c2490a9b86545a451c3bf4a06661b854d053 (patch)
tree47b54df5f19cce0f3fe552395f7210815af1fd98
parent4f5074fa431cba03ed0cd76739e95a2c4662266a (diff)
Update to sidebar
-rw-r--r--download/cv.pdfbin1140217 -> 1152734 bytes
-rw-r--r--download/resume_dl.html195
-rwxr-xr-xresume.css26
-rwxr-xr-xresume.html169
4 files changed, 220 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
Binary files differ
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..ed894a2 100755
--- a/resume.html
+++ b/resume.html
@@ -49,91 +49,90 @@
<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>