finally figured it out

.drone.yml

@@ -11,10 +11,13 @@ trigger:
 
 steps:
   - name: build-resume
-    image: browserless/chrome
+    image: jshaver/root-browserless-chrome
     commands:
-      - "sleep 6"
-      - "chrome-browser --headless --disable-gpu  --run-all-compositor-stages-before-draw --print-to-pdf='./John-Shaver-Resume-2021.pdf' http://resume-server:8080/ --virtual-time-budget=10000;"
+      - git submodule init
+      - git submodule update --recursive --remote
+      - sleep 25
+      - "google-chrome --headless --enable-logging=stderr -v=1 --no-sandbox --disable-gpu  --run-all-compositor-stages-before-draw --virtual-time-budget=20000 --print-to-pdf='./John-Shaver-Resume-2021.pdf' http://resume:8080/"
+      - chmod 644 ./John-Shaver-Resume-2021.pdf
   - name: deploy
     image: drillster/drone-rsync
     settings:
@@ -25,14 +28,16 @@ steps:
         from_secret: deploy-key
       source: ./
       target: /var/www/jshaver_net/stage/${DRONE_BRANCH}/resume
+      prescript:
+        - mkdir -p /var/www/jshaver_net/stage/${DRONE_BRANCH}/resume
       recursive: true
-      args:
-        - "--files-from=deploy-list.txt"
+      args: "-v --files-from=deploy-list.txt"
 
 services:
-  - name: resume-server
+  - name: resume
     image: node
     commands:
+      - 'echo "running the command"'
       - "npx http-server"
 
 ---
@@ -48,11 +53,18 @@ trigger:
     - push
 
 steps:
-  - name: build-resume
-    image: browserless/chrome
+  - name: submodules
+    image: alpine/git
     commands:
-      - "sleep 6"
-      - "chrome-browser --headless --disable-gpu  --run-all-compositor-stages-before-draw --print-to-pdf='./John-Shaver-Resume-2021.pdf' http://resume-server:8080/ --virtual-time-budget=10000;"
+      - git submodule update --recursive --remote
+  - name: build-resume
+    image: jshaver/root-browserless-chrome
+    commands:
+      - git submodule init
+      - git submodule update --recursive --remote
+      - sleep 25
+      - "google-chrome --headless --no-sandbox --disable-gpu  --run-all-compositor-stages-before-draw --print-to-pdf='./John-Shaver-Resume-2021.pdf' http://resume:8080/ --virtual-time-budget=10000;"
+      - chmod 644 ./John-Shaver-Resume-2021.pdf
   - name: deploy
     image: drillster/drone-rsync
     settings:
@@ -64,5 +76,11 @@ steps:
       source: ./
       target: /var/www/jshaver_net/resume
       recursive: true
-      args:
-        - "--files-from=deploy-list.txt"
+      args: "-v --files-from=deploy-list.txt"
+
+services:
+  - name: resume
+    image: node
+    commands:
+      - "npx http-server"
+

Dockerfile

@@ -0,0 +1,3 @@
+FROM browserless/chrome
+USER root
+CMD ["ls", "-la"]

deploy-list.txt

@@ -1,4 +1,7 @@
-./dep/
 ./style.css
 index.html
 ./John-Shaver-Resume-2021.pdf
+./dep/normalize.css/normalize.css
+./dep/Font-Awesome/css/all.css
+./dep/Font-Awesome/webfonts/fa-brands-400.woff2
+./dep/Font-Awesome/webfonts/fa-solid-900.woff2

index.html

@@ -31,35 +31,42 @@
     <section id="main">
       <header id="title">
         <h1>John Shaver</h1>
-        <span class="subtitle">Full-Stack Engineer and Devops Enthusiast</span>
+        <span class="subtitle">Full-Stack Engineer</span>
       </header>
+      <!--
+      <section class="main-block summary">
+        <p>I'm a fullstack engineer with experience troubleshooting </p>
+      </section>
+      -->
       <section class="main-block">
         <h2>
           <i class="fa fa-suitcase"></i> Experiences
         </h2>
         <section class="blocks">
           <div class="date">
-            <span>present</span><span>2017</span>
+            <span>present</span><span>2019</span>
           </div>
           <div class="decorator">
           </div>
           <div class="details">
             <header>
-              <h3>Technical Co-founder</h3>
-              <span class="place"><a href="https:/ppl.family/">ppl :)</a></span>
-              <span class="location fa">Remote (Provo, UT)</span>
+              <h3>Software Engineer III and Lead Developer for Skillabi</h3>
+              <span class="place"><a href="https:/economicmodeling.com/">Emsi/BurningGlass</a></span>
+              <span class="location fa">Moscow, ID</span>
             </header>
             <div>
               <ul>
-                <li>Building a home server to replace the ever expanding list of "cloud" services relied upon by today's family.</li>
-                <li>Developing authentication protocols and network stack to support secure collection, access and sharing.</li>
+                <li>Worked with a team to successfully develop Skillsmatch MVP.</li>
+                <li>Worked with a team on multiple iterations of the Skillabi Prototype.</li>
+                <li>Currently leading a team to develop the Skillabi MVP and it's APIs.</li>
+                <li>Lead the move away from application-wide credentials to secure, per-user, role based auth.</li>
               </ul>
             </div>
           </div>
         </section>
         <section class="blocks">
           <div class="date">
-            <span>present</span><span>2014</span>
+            <span>2019</span><span>2014</span>
           </div>
           <div class="decorator">
           </div>
@@ -72,7 +79,7 @@
             <div>
               <ul>
                 <li>Design, implement and ship web based software to fit customer needs.</li>
-                <li>This included: rest APIs, modern SPA interfaces, automating deployments and developer environments, OAuth2/OIDC authentication, implementing secure RPC calls over UDP, and much more.</li>
+                <li>This included: rest APIs, modern SPA interfaces, automating deployments and developer environments, OAuth2/OIDC authentication, etc.</li>
               </ul>
               </div>
           </div>
@@ -98,7 +105,8 @@
             </div>
           </div> 
         </section>
-        <section class="blocks">
+        <!--
+          <section class="blocks">
           <div class="date">
             <span>2013</span><span>2012</span>
           </div>
@@ -118,6 +126,7 @@
             </div>
           </div> 
         </section>
+        -->
       </section>
       <section class="main-block">
         <h2>
@@ -125,42 +134,41 @@
         </h2>
         <section class="blocks">
           <div class="date">
-            <span>2018</span>
+            <span>2021</span>
           </div>
           <div class="decorator">
           </div>
           <div class="details">
             <header>
-              <h3>Telebit</h3>
-              <span class="place"><a href="https://telebit.cloud">https://telebit.cloud</a></span>
+              <h3>Skillabi</h3>
+              <span class="place"><a href="https://skillabi.com">https://skillabi.com</a></span>
             </header>
             <div>
               <ul>
-                <li>Implemented design specification in HTML/CSS and Javascript.</li>
-                <li>Developed the email confirmation process from working prototype to production.</li>
-                <li>Working to develop a cross platform electron implementation of the Telebit client interface.</li>
+                <li>Lead the development of the Skillabi from prototype to scalable production ready application.</li>
+                <li>Design and develop role-based, per-user authorization on top of AWS Cognito to keep customer data secure.</li>
+                <li>Design and lead development and documenation of new API for storing customer data that is searchable, filterable, and secure.</li>
               </ul>
             </div>
           </div>
         </section>
         <section class="blocks">
           <div class="date">
-            <span>2017</span>
+            <span>2019</span>
           </div>
           <div class="decorator">
           </div>
           <div class="details">
             <header>
-              <h3>Historical Records Database</h3>
-              <span class="place">Not yet public.</span>
+              <h3>SkillsMatch</h3>
+              <span class="place"><a href="https://match.emsiskills.com">https://match.emsiskills.com</a></span>
             </header>
             <div>
               <ul>
-                <li>Converted the historical records database from MS Access to MySQL.</li>
-                <li>Built an interface for searching the records in the database and finding information.</li>
-                <li>User authentication to allow specified users to add/edit records to/in the database.</li>
-                <li>User interface for adding/editing/deleting records by authenticated users.</li>
-                <li>Administration interface for administrators to add/create users.</li>
+                <li>Worked on a team developing an MVP SAAS for to help adults coming back to school to find a path to their new career</li>
+                <li>A react/redux front-end that interfaces with several APIs and micro-services</li>
+                <li>Implement CI/CD via cypress, ava, and terraform on Codeship.com</li>
+                <li>We built several micro services and an API on AWS lambdas managed by serverless.js</li>
               </ul>
             </div>
           </div>
@@ -191,74 +199,70 @@
     </section>
     <aside id="sidebar">
       <div class="control-buttons no-print">
-        <a class="print-button" target="_blank" href="John-Shaver-Resume-2018.pdf"><i class="fas fa-print"></i></a>
-        <a class="download-button no-print" href="John-Shaver-Resume-2018.pdf" download><i class="fas fa-file-download"></i></a>
+        <a class="print-button" target="_blank" href="John-Shaver-Resume-2021.pdf"><i class="fas fa-print"></i></a>
+        <a class="download-button no-print" href="John-Shaver-Resume-2021.pdf" download><i class="fas fa-file-download"></i></a>
       </div>
-      <div class="side-block" id="contact">
-        <h1>
-          Contact Info
-        </h1>
-        <ul>
-          <li><i class="fas fa-globe fa-fw"></i> <a href="https://jshaver.net">https://jshaver.net</a></li>
-          <li><i class="fab fa-linkedin fa-fw"></i> <a href="https://www.linkedin.com/in/thejshaver">thejshaver</a></li>
-          <li><i class="fas fa-envelope fa-fw"></i> <a href="mailto:john@jshaver.net?subject=%5C(%E2%80%A2%20%E2%97%A1%20%E2%80%A2)%2F%20OMG!%20Amazing%20Resume!!&body=Dear%20John%2C%0A">john@jshaver.net</a></li>
-          <li><i class="fas fa-phone fa-fw"></i> <a href="tel:18018503052">801.850.3052</a></li>
-          <li><i class="fas fa-code-branch fa-fw"></i> <a href="https://git.jshaver.net/jshaver">git.jshaver.net/jshaver</a></li>
-        </ul>
-      </div>
-      <div class="side-block skills">
-        <h1>
-          Skills
-        </h1>
-        <ul>
-          <li></li>
-          <li>Troubleshooting</li>
-          <li>Self Motivation</li>
-          <li>Functional Programming</li>
-          <li>Effective Communication</li>
-        </ul>
-        <ul>
-          <li><i class="fab fa-js fa-fw"></i> Javascript</li>
-          <li>
-            <i class="fab fa-fw">
-              <svg class="ts-logo" viewBox="0 0 630 630">
-                <use xlink:href="#svg-ts-logo"></use>
-              </svg></i> Typescript
-          </li>
-          <li><i class="fab fa-react fa-fw"></i> React</li>
-          <li><i class="fas fa-rocket fa-fw"></i> express.js</li>
-          <li><i class="fas fa-database fa-fw"></i> Relational Databases</li>
-          <li><i class="fab fa-linux fa-fw"></i> Linux</li>
-          <li><i class="fas fa-code-branch fa-fw"></i> git</li>
-          <li><i class="fab fa-aws fa-fw"></i> AWS</li>
-          <li><i class="fab fa-docker fa-fw"></i> Docker</li>
-          <!-- <li><i class="fas fa-user-ninja fa-fw"></i> nunchuck</li> -->
-        </ul>
-      </div>
-      <div class="side-block recommendations">
-        <h1>
-          Recommendations
-        </h1>
-        <div class="recommendation">
-          "John Shaver has produced consistently excellent work over the years..."
-          <div class="attribution"><a href="https://www.linkedin.com/in/joel-pomije-7123822/">Joel Pomije<br>Lead Developer</a></div>
+      <div>
+        <div class="side-block" id="contact">
+          <h1>
+            Contact Info
+          </h1>
+          <ul>
+            <li><i class="fas fa-globe fa-fw"></i> <a href="https://jshaver.net">https://jshaver.net</a></li>
+            <li><i class="fab fa-linkedin fa-fw"></i> <a href="https://www.linkedin.com/in/thejshaver">thejshaver</a></li>
+            <li><i class="fas fa-envelope fa-fw"></i> <a href="mailto:john@jshaver.net?subject=%5C(%E2%80%A2%20%E2%97%A1%20%E2%80%A2)%2F%20OMG!%20Amazing%20Resume!!&body=Dear%20John%2C%0A">john@jshaver.net</a></li>
+            <li><i class="fas fa-phone fa-fw"></i> <a href="tel:18018503052">801.850.3052</a></li>
+            <li><i class="fas fa-code-branch fa-fw"></i> <a href="https://git.jshaver.net/jshaver">git.jshaver.net/jshaver</a></li>
+          </ul>
         </div>
-        <div class="recommendation">
-          "He is very knowledgable in the fields of JavaScript, as well as networking, servers and the internet in general."
-          <div class="attribution"><a href="https://www.linkedin.com/in/drew-warren-853551122/">Drew Warren<br>Scrum Master/Developer</a></div>
+        <div class="side-block skills">
+          <h1>
+            Skills
+          </h1>
+          <ul>
+            <li><i class="fab fa-js-square fa-fw"></i> Javascript</li>
+            <li>
+              <i class="fab fa-fw">
+                <svg class="ts-logo" viewBox="0 0 630 630">
+                  <use xlink:href="#svg-ts-logo"></use>
+                </svg></i> Typescript
+            </li>
+            <li><i class="fab fa-react fa-fw"></i> React</li>
+            <li><i class="fab fa-node fa-fw"></i> node.js</li>
+            <li><i class="fas fa-database fa-fw"></i> Relational Databases</li>
+            <li><i class="fab fa-linux fa-fw"></i> Linux</li>
+            <li><i class="fas fa-globe fa-fw"></i> Terraform</li>
+            <li><i class="fab fa-aws fa-fw"></i> AWS</li>
+            <li><i class="fab fa-docker fa-fw"></i> Docker</li>
+            <li><i class="fab fa-css3 fa-fw"></i> CSS</li>
+            <!-- <li><i class="fas fa-user-ninja fa-fw"></i> nunchuck</li> -->
+          </ul>
         </div>
-        <div class="recommendation">
-          "He has a very broad knowledge base that he brings to any project..."
-          <div class="attribution"><a href="https://www.linkedin.com/in/james-hager-ab361112a/">James Hagar<br>Project Manager</a></div>
+        <div class="side-block recommendations">
+          <h1>
+            Recommendations
+          </h1>
+          <div class="recommendation">
+            "John Shaver has produced consistently excellent work over the years..."
+            <div class="attribution"><a href="https://www.linkedin.com/in/joel-pomije-7123822/">Joel Pomije<br>Lead Developer</a></div>
+          </div>
+          <div class="recommendation">
+            "He is very knowledgable in the fields of JavaScript, as well as networking, servers and the internet in general."
+            <div class="attribution"><a href="https://www.linkedin.com/in/drew-warren-853551122/">Drew Warren<br>Scrum Master/Developer</a></div>
+          </div>
+          <div class="recommendation">
+            "He has a very broad knowledge base that he brings to any project..."
+            <div class="attribution"><a href="https://www.linkedin.com/in/james-hager-ab361112a/">James Hagar<br>Project Manager</a></div>
+          </div>
+          <div class="recommendation">
+            "John is an extremely capable and high value asset to a team. ..."
+            <div class="attribution"><a href="https://coolaj86.com/">AJ ONeal<br>Backend Engineer</a></div>
+          </div>
         </div>
-        <div class="recommendation">
-          "John is an extremely capable and high value asset to a team. ..."
-          <div class="attribution"><a href="https://coolaj86.com/">AJ ONeal<br>Backend Engineer</a></div>
+        <div class="source-link no-print">
+          source code: <a href="https://git.jshaver.net/jshaver/html-resume">https://git.jshaver.net/jshaver/html-resume</a>
         </div>
       </div>
-      <div class="source-link no-print">
-        source code: <a href="https://git.jshaver.net/jshaver/html-resume">https://git.jshaver.net/jshaver/html-resume</a>
-      </div>
     </aside>
   </body>
 </html>

style.css

@@ -53,7 +53,7 @@ li{
   float: left;
   width: var(--main-width);
   padding: 2.7rem 2.7rem 0 2.7rem;
-  font-size: 1.124972rem;
+  font-size: 1.3rem;
 }
 
 #sidebar{
@@ -101,6 +101,12 @@ li{
   margin-top: 2.7rem;
 }
 
+.main-block.summary{
+  text-align: center;
+  font-size: 1.4rem;
+  font-style: italic;
+}
+
 #main h2{
   position: relative;
   top: var(--row-blocks-padding-top);
@@ -242,6 +248,7 @@ li{
 
 .details h3{
   font-size: 1.349966rem;
+  margin-bottom: 0.2rem;
 }
 
 .main-block:not(.concise) .details div{
@@ -324,10 +331,14 @@ li{
 #sidebar h1{
   font-weight: 400;
   font-size: 1.649959rem;
+  margin-bottom: 2rem;
 }
 
+.side-block:first-child{
+  margin-top: 7rem;
+}
 .side-block{
-  margin-top: 6.5rem;
+  margin-top: 8.2rem;
 }
 
 #contact ul{
@@ -345,7 +356,7 @@ li{
 }
 
 .skills{
-  line-height: 1.5;
+  line-height: 1.7;
 }
 
 .skills ul{
@@ -397,7 +408,7 @@ body > *{
 
 
 .recommendation {
-    margin: 1.5em 0.0rem;
+    margin-bottom: 1.5rem;
     font-style: italic;
 }