Ensure page is responsive on narrow displays new
authorJack Kinsey <j.jameskinsey@gmail.com>
Tue, 16 Nov 2021 23:23:28 +0000 (18:23 -0500)
committerJack Kinsey <j.jameskinsey@gmail.com>
Tue, 16 Nov 2021 23:23:28 +0000 (18:23 -0500)
* Restructure HTML to be more semantic
* Put reset.css back & fix styles
* Ensure page is responsive on narrow displays

index.html
res/style.css

index a17b99feaec769bc0efacd9672057f2ddeba95fa..ab99b7fe7a649e10f1c9cf6eff51fbe9eafafd03 100644 (file)
     <body>
     <main>
 
-        <header id="menu" class="top">
-            <div id="name"><a href="/" class="home"><h1><span class="h">Jack Kinsey</span></h1></a></div>
+        <header>
+            <h1><a href="/"><span>Jack Kinsey</span></a></h1>
             <nav id="links">
                 <ul>
-                    <li><a href="#experience" class="h">Experience</a></li>
-                    <li><a href="#skills" class="h">Skills</a></li>
-                    <li><a href="#elsewhere" class="h">Elsewhere</a></li>
+                    <li><a href="#experience">Experience</a></li>
+                    <li><a href="#skills">Skills</a></li>
+                    <li><a href="#elsewhere">Elsewhere</a></li>
                 </ul>
             </nav>
         </header>
 
-        <div id="content">
-            <article id="resume">
-                <div>
-                    <h2 id="experience">Experience</h2>
-                    <details open>
-                        <summary>Senior Consultant at Booz Allen Hamilton in Washington, D.C.<em>(2019&mdash;Present)</em></summary>
-                        <ul>
-                            <p><em>At <a href="https://www.niaid.nih.gov/">NIAID</a> under <a href="https://www.niaid.nih.gov/about/cyber-infrastructure-computational-biology-contacts">OCICB</a>:</em></p>
-                            <li>Develop business process software using a mix of custom development and low-code tools</li>
-                            <li>Create design and documentation standards for team of 5+ Power Platform developers</li>
-                            <li>Create GitHub automation for one button Power Platform solution deployments and commits</li>
-                            <li>Develop Power Platform application suite used by 20+ team members to allocate staff time to projects</li>
-                            <li>Led introductory Power Apps team training for 6 fellow team members</li>
-                            <li>Visualized budget statistics in Section 508-compliant charts using d3</li>
-                            <li>Improved client visibility into document library via custom Vue.js interface</li>
-                            <li>Provided business process workflow notifications to an internal website userbase of 5000+ via AWS Lambda web service</li>
-                        </ul>
-                    </details>
-                    <details>
-                        <summary>Summer Games intern at Booz Allen Hamilton in Arlington, VA <em>(2018)</em></summary>
-                        <ul>
-                            <li>Worked alongside a team of 4 to deliver a functional software product for use internally</li>
-                            <li>Led development of a JavaScript/HTML/CSS user interface from scratch</li>
-                            <li>Integrated with a custom Python backend built to do graph analytics</li>
-                        </ul>
-                    </details>
-                    <details>
-                        <summary>Committee member (Various) at Setsucon in State College, PA <em>(2017&mdash;2021)</em></summary>
-                        <ul>
-                            <p><em>As Programming Director:</em></p>
-                            <li>Led team of 7+ fellow volunteers to organize programming for an online convention</li>
-                            <li>Designed novel programming events to reach online audience</li>
-                            <p><em>As Panels Coordinator:</em></p>
-                            <li>Curated panel submissions from nearly 40 panelists</li>
-                            <li>Designed the schedule for a 2 day convention of over 1000 people</li>
-                            <li>Coordinated with a team of 20+ fellow volunteers</li>
-                        </ul>
-                    </details>
-                    <details>
-                        <summary>Web intern at Fox Chapel Publishing in East Petersburg, PA <em>(2016&mdash;2017)</em></summary>
-                        <ul>
-                            <li>Migrated 3+ WordPress sites and 1 forum from one hosting provider to another</li>
-                            <li>Customized WordPress CSS for 4+ blogs</li>
-                            <li>Presented Google Analytics data on 3+ sites to superiors</li>
-                            <li>Prepared over 40 articles worth of backlog content for web publishing</li>
-                            <li>Managed DNS records for 10+ sites</li>
-                            <li>Provided technical support to over 400 active users across 2 forum sites</li>
-                            <li>Helped manage Magento web commerce backend</li>
-                        </ul>
-                    </details>
-                    <details>
-                        <summary>Independent web developer, programmer, and sysadmin <em>(2013&mdash;Present)</em></summary>
-                        <ul>
-                            <li>Host and maintain a professional and personal website</li>
-                            <li>Develop sites and web applications for friends, fun, and other commitments</li>
-                            <li>Build and maintain an Arch Linux desktop</li>
-                        </ul>
-                    </details>
-                </div>
-                <div>
-                    <h2 id="education">Education</h2>
-                    <details open>
-                        <summary>Graduate of The Pennsylvania State University in State College, PA <em>(2016&mdash;2019)</em></summary>
-                        <ul>
-                            <li>Member of The Schreyer Honors College</li>
-                            <li>Bachelor's in Computer Science from The College of Engineering</li>
-                        </ul>
-                    </details>
-                </div>
-                <div>
-                    <h2 id="skills">Skills</h2>
-                    <details open>
-                        <summary>Tools</summary>
-                        <ol>
-                            <li>Git, GitHub, jq, Power Apps, Power Automate, Dataverse, OData</li>
-                            <li>Docker, Jira, Power BI, Dynamics 365, GitLab</li>
-                            <li>LaTeX, WordPress, Vue, d3</li>
-                            <li>AWS (<em>Lambda, DocumentDB, API Gateway, CDK</em>)</li>
-                        </ol>
-                    </details>
-                    <details open>
-                        <summary>Systems</summary>
-                        <ol>
-                            <li>Arch Linux, Alpine Linux</li>
-                            <li>Windows</li>
-                            <li>Debian Linux, macOS</li>
-                        </ol>
-                    </details>
-                    <details open>
-                        <summary>Programming</summary>
-                        <ol>
-                            <li>JavaScript, HTML, CSS, Bash, POSIX Shell</li>
-                            <li>Python, TypeScript</li>
-                            <li>SQL, <a href="https://git.jkinsey.net/?p=adventofcode2019.git;a=tree">Clojure</a>, <a href="https://git.jkinsey.net/?p=adventofcode2020.git;a=tree">Common Lisp</a></li>
-                            <li>C, C++, C#, <a href="https://git.jkinsey.net/?p=adventofcode2018.git;a=tree">Haskell</a>, Rust, Go</li>
-                        </ol>
-                    </details>
-                    <details open>
-                        <summary>Writing</summary>
-                        <ol>
-                            <li>Project documentation, development design documents</li>
-                            <li>Research, presentation to leadership</li>
-                        </ol>
-                    </details>
-                </div>
-            </article>
+        <article id="resume">
+            <section>
+                <h2 id="experience">Experience</h2>
+                <details open>
+                    <summary><h3>Senior Consultant at Booz Allen Hamilton in Washington, D.C. <em>(2019&mdash;Present)</em></h3></summary>
+                    <ul>
+                        <p><em>At <a href="https://www.niaid.nih.gov/">NIAID</a> under <a href="https://www.niaid.nih.gov/about/cyber-infrastructure-computational-biology-contacts">OCICB</a>:</em></p>
+                        <li>Develop business process software using a mix of custom development and low-code tools</li>
+                        <li>Create design and documentation standards for team of 5+ Power Platform developers</li>
+                        <li>Create GitHub automation for one button Power Platform solution deployments and commits</li>
+                        <li>Develop Power Platform application suite used by 20+ team members to allocate staff time to projects</li>
+                        <li>Led introductory Power Apps team training for 6 fellow team members</li>
+                        <li>Visualized budget statistics in Section 508-compliant charts using d3</li>
+                        <li>Improved client visibility into document library via custom Vue.js interface</li>
+                        <li>Provided business process workflow notifications to an internal website userbase of 5000+ via AWS Lambda web service</li>
+                    </ul>
+                </details>
+                <details>
+                    <summary><h3>Summer Games intern at Booz Allen Hamilton in Arlington, VA <em>(2018)</em></h3></summary>
+                    <ul>
+                        <li>Worked alongside a team of 4 to deliver a functional software product for use internally</li>
+                        <li>Led development of a JavaScript/HTML/CSS user interface from scratch</li>
+                        <li>Integrated with a custom Python backend built to do graph analytics</li>
+                    </ul>
+                </details>
+                <details>
+                    <summary><h3>Committee member (Various) at Setsucon in State College, PA <em>(2017&mdash;2021)</em></h3></summary>
+                    <ul>
+                        <p><em>As Programming Director:</em></p>
+                        <li>Led team of 7+ fellow volunteers to organize programming for an online convention</li>
+                        <li>Designed novel programming events to reach online audience</li>
+                        <p><em>As Panels Coordinator:</em></p>
+                        <li>Curated panel submissions from nearly 40 panelists</li>
+                        <li>Designed the schedule for a 2 day convention of over 1000 people</li>
+                        <li>Coordinated with a team of 20+ fellow volunteers</li>
+                    </ul>
+                </details>
+                <details>
+                    <summary><h3>Web intern at Fox Chapel Publishing in East Petersburg, PA <em>(2016&mdash;2017)</em></h3></summary>
+                    <ul>
+                        <li>Migrated 3+ WordPress sites and 1 forum from one hosting provider to another</li>
+                        <li>Customized WordPress CSS for 4+ blogs</li>
+                        <li>Presented Google Analytics data on 3+ sites to superiors</li>
+                        <li>Prepared over 40 articles worth of backlog content for web publishing</li>
+                        <li>Managed DNS records for 10+ sites</li>
+                        <li>Provided technical support to over 400 active users across 2 forum sites</li>
+                        <li>Helped manage Magento web commerce backend</li>
+                    </ul>
+                </details>
+                <details>
+                    <summary><h3>Independent web developer, programmer, and sysadmin <em>(2013&mdash;Present)</em></h3></summary>
+                    <ul>
+                        <li>Host and maintain a professional and personal website</li>
+                        <li>Develop sites and web applications for friends, fun, and other commitments</li>
+                        <li>Build and maintain an Arch Linux desktop</li>
+                    </ul>
+                </details>
+            </section>
+            <section>
+                <h2 id="education">Education</h2>
+                <details open>
+                    <summary><h3>Graduate of The Pennsylvania State University in State College, PA <em>(2016&mdash;2019)</em></h3></summary>
+                    <ul>
+                        <li>Member of The Schreyer Honors College</li>
+                        <li>Bachelor's in Computer Science from The College of Engineering</li>
+                    </ul>
+                </details>
+            </section>
+            <section>
+                <h2 id="skills">Skills</h2>
+                <details open>
+                    <summary><h3>Tools</h3></summary>
+                    <ol>
+                        <li>Git, GitHub, jq, Power Apps, Power Automate, Dataverse, OData</li>
+                        <li>Docker, Jira, Power BI, Dynamics 365, GitLab</li>
+                        <li>LaTeX, WordPress, Vue, d3</li>
+                        <li>AWS (<em>Lambda, DocumentDB, API Gateway, CDK</em>)</li>
+                    </ol>
+                </details>
+                <details open>
+                    <summary><h3>Systems</h3></summary>
+                    <ol>
+                        <li>Arch Linux, Alpine Linux</li>
+                        <li>Windows</li>
+                        <li>Debian Linux, macOS</li>
+                    </ol>
+                </details>
+                <details open>
+                    <summary><h3>Programming</h3></summary>
+                    <ol>
+                        <li>JavaScript, HTML, CSS, Bash, POSIX Shell</li>
+                        <li>Python, TypeScript</li>
+                        <li>SQL, <a href="https://git.jkinsey.net/?p=adventofcode2019.git;a=tree">Clojure</a>, <a href="https://git.jkinsey.net/?p=adventofcode2020.git;a=tree">Common Lisp</a></li>
+                        <li>C, C++, C#, <a href="https://git.jkinsey.net/?p=adventofcode2018.git;a=tree">Haskell</a>, Rust, Go</li>
+                    </ol>
+                </details>
+                <details open>
+                    <summary><h3>Writing</h3></summary>
+                    <ol>
+                        <li>Project documentation, development design documents</li>
+                        <li>Research, presentation to leadership</li>
+                    </ol>
+                </details>
+            </section>
+        </article>
 
-            <article id="elsewhere">
-                <div>
-                    <h2><span class="h">Elsewhere</span></h2>
-                    <p>
-                      <a href="https://github.com/jackkinsey/" class="h">github</a>
-                      <a href="https://www.linkedin.com/in/jack-kinsey-26406994/" class="h">linkedin</a>
-                    </p>
-                </div>
-            </article>
-        </div>
+        <article id="elsewhere">
+            <section>
+                <h2><span>Elsewhere</span></h2>
+                <p>
+                <a href="https://github.com/jackkinsey/">github</a>
+                <a href="https://www.linkedin.com/in/jack-kinsey-26406994/">linkedin</a>
+                </p>
+            </section>
+        </article>
 
     </main>
     </body>
index 803443d98e1f55d4854d1f247c86acc3db824691..08aa894a139227a5570c058b8c7a2a1ee15cea93 100644 (file)
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+       margin: 0;
+       padding: 0;
+       border: 0;
+       font-size: 100%;
+       font: inherit;
+       vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+       display: block;
+}
+body {
+       line-height: 1;
+}
+ol, ul {
+       list-style: none;
+}
+blockquote, q {
+       quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+       content: '';
+       content: none;
+}
+table {
+       border-collapse: collapse;
+       border-spacing: 0;
+}
+
+/*** End reset.css ***/
+
+
 body {
     background: url(blackstars.png);
     background-color: #111;
     color: #fefefe;
     font-family: monospace;
     padding: 16px;
+    margin: 8px;
 }
 
-header { 
-    width: 700px;
+
+main {
+    max-width: 700px;
     margin: 0 auto;
 }
 
+a {
+    color: #f771fc;
+}
+
+a, p, h1, h2, h3, li {
+    background-color: #111111;
+}
+
+em {
+    font-style: italic;
+}
+
+em > em {
+    font-style: normal;
+    font-weight: bold;
+}
+
+
+/** Header **/
+
 header h1 {
     font-size: 2em;
+    font-weight: bold;
     margin: 0;
 }
 
-header > div > a {
-    color:inherit;
-    text-decoration:none;
+header h1 a {
+    color: inherit;
+    text-decoration: none;
 }
 
 header nav {
-    display:flex;
-    flex-direction:column;
-    width: 400px;
+    padding: 16px 0px 16px 0px;
+    line-height: 2em;
 }
 
 header nav ul {
-    display:flex;
-    flex-direction:row;
-    padding: 0;
-    margin: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 header nav ul li {
-    display:inline-block;
-    text-align:center;
-    height:50px;
+    display: inline-block;
+    text-align: center;
     margin-right: 24px;
-    font-size:1.25em;
-    line-height:50px;
+    font-size: 1.25em;
     background-color: inherit;
 }
 
-a {
-    color: #f771fc;
-}
-
 header nav ul li::before {
     font-size: .75em;
     line-height: .1em;
@@ -55,60 +122,63 @@ header nav ul li::before {
 }
 
 header nav ul li a:link, header nav ul li a:visited {
-    text-decoration:none;
-    color:inherit;
+    text-decoration: none;
+    color: inherit;
 }
 
-header nav ul li a:hover, header nav ul li a.selected {
-    text-decoration:underline;
+header nav ul li a:hover {
+    text-decoration: underline;
 }
 
-article {
-    width: 700px;
-    margin: 0 auto;
-}
+/** End Header **/
+
+
+/** Article **/
 
 article h2 {
+    margin: 1em 0 1em 0;
     font-size: 1.2em;
+    font-weight: bold;
 }
 
-em {
-    font-style:italic;
+article p {
+    margin: 1em 0 1em 0;
+    line-height: 1.25em;
 }
 
-em > em {
-    font-style:normal;
-    font-weight:bold;
+article h3 {
+    display: inline-flex;
+    width: 95%;
+    margin: 8px 0px 8px 0px;
+    font-weight: bold;
+    padding: 0;
+    font-size: 1em;
 }
 
-
-article p {
-    line-height: 1.25em;
+article h3 em {
+    text-align: right;
+    flex-grow: 1;
 }
 
-article div {
+article section {
     margin: 16px 0px 16px 0px;
 }
 
-article div ul li {
-    margin: 8px 0px 8px 0px;
+article section ul, article section ol {
+    padding-left: 40px;
 }
 
-article div ol li {
+article section li {
     margin: 8px 0px 8px 0px;
+    line-height: 1.25em;
 }
 
-a, p, h1, h2, li, summary {
-    background-color: #111111;
+article section ul li {
+    list-style-type: disc;
 }
 
-article details summary {
-    margin: 8px 0px 8px 0px;
-    font-weight: bold;
-    display: flex;
+article section ol li {
+    list-style-type: decimal;
 }
 
-article details summary em {
-    text-align: right;
-    flex-grow: 1;
-}
+/** End Article **/