diff options
Diffstat (limited to 'download/resume_dl.html')
-rw-r--r-- | download/resume_dl.html | 449 |
1 files changed, 223 insertions, 226 deletions
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> |