Added my resume

css/output.css

@@ -657,6 +657,26 @@ video {
   inset-inline-end: 0.25rem;
 }
 
+.end-0 {
+  inset-inline-end: 0px;
+}
+
+.top-12 {
+  top: 3rem;
+}
+
+.top-10 {
+  top: 2.5rem;
+}
+
+.top-5 {
+  top: 1.25rem;
+}
+
+.right-0 {
+  right: 0px;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -665,6 +685,10 @@ video {
   isolation: auto;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .float-start {
   float: inline-start;
 }
@@ -729,6 +753,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.mb-auto {
+  margin-bottom: auto;
+}
+
 .mr-auto {
   margin-right: auto;
 }
@@ -737,16 +765,20 @@ video {
   margin-top: 0.5rem;
 }
 
-.mb-auto {
+.mt-4 {
-  margin-bottom: auto;
+  margin-top: 1rem;
 }
 
 .mt-auto {
   margin-top: auto;
 }
 
-.mt-4 {
+.mb-2 {
-  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.ml-12 {
+  margin-left: 3rem;
 }
 
 .box-border {
@@ -901,6 +933,10 @@ video {
   height: 100svh;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -975,6 +1011,26 @@ video {
   width: max-content;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
 .min-w-40 {
   min-width: 10rem;
 }
@@ -1196,6 +1252,10 @@ video {
   list-style-position: outside;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1921,6 +1981,10 @@ video {
   border-width: 1px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;
@@ -2141,6 +2205,42 @@ video {
   padding-right: 6rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-24 {
+  padding-top: 6rem;
+}
+
+.pt-20 {
+  padding-top: 5rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2207,6 +2307,21 @@ video {
   line-height: 2.5rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -2765,6 +2880,20 @@ video {
     width: -moz-fit-content;
     width: fit-content;
   }
+
+  .max-lg\:flex-row {
+    flex-direction: row;
+  }
+}
+
+@media not all and (min-width: 768px) {
+  .max-md\:right-0 {
+    right: 0px;
+  }
+
+  .max-md\:pt-1 {
+    padding-top: 0.25rem;
+  }
 }
 
 @media (min-width: 640px) {
@@ -2774,9 +2903,37 @@ video {
 }
 
 @media (min-width: 768px) {
+  .md\:top-5 {
+    top: 1.25rem;
+  }
+
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:h-20 {
+    height: 5rem;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .md\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .md\:text-right {
+    text-align: right;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -2788,10 +2945,6 @@ video {
     width: 100%;
   }
 
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2809,6 +2962,10 @@ video {
   .xl\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .xl\:flex-row {
+    flex-direction: row;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

henry.html

@@ -94,18 +94,17 @@
               <a href="mailto:henry@hobbs.zone">henry@hobbs.zone</a>.
             </p>
           </div>
-          <!--TODO-->
+          <div class="bg-slate-900 p-4 m-4 rounded">
-          <!-- <div class="bg-slate-900 p-4 m-4 rounded">
             <h2 class="text-2xl font-bold mb-4">Resume</h2>
             <p>
               You can view my resume
               <a
-                href="./resume.html"
+                href="/henry/resume.html"
                 class="bg-slate-300 text-slate-900 rounded-sm"
                 >here</a
-              >, or download a PDF version <a href="./resume.pdf">here</a>.
+              >.
             </p>
-          </div> -->
+          </div>
         </div>
       </div>
     </div>

henry/resume.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Henry Hobbs - Resume</title>
+    <link href="/css/output.css" rel="stylesheet" />
+  </head>
+  <body class="bg-slate-800 items-center flex-col flex min-h-svh text-white">
+    <header
+      class="bg-slate-900 p-4 w-full h-32 md:h-20 flex flex-col md:flex-row"
+    >
+      <div class="h-full text-left text-2xl pt-2 flex-1">
+        <h1>Henry M. Hobbs</h1>
+      </div>
+      <div class="md:text-right max-md:pt-1">
+        <p>Email: <a href="mailto:henry@hobbs.zone">henry@hobbs.zone</a></p>
+        <p>Phone: 919-XXX-XXXX</p>
+      </div>
+    </header>
+    <img
+      class="border-4 rounded-full w-32 h-32 absolute md:top-5 max-md:right-0"
+      src="/img/henry-profesh.jpg"
+    />
+    <main class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full p-4 md:pt-20">
+      <section class="bg-slate-900 rounded-md p-4">
+        <h2 class="text-xl pb-2">About Henry</h2>
+        <p>
+          I am a talented and accomplished full-stack software engineer in
+          Raleigh, NC. I take pride in my ability to solve complex problems and
+          create beautiful user experiences. My greatest strength is my ability
+          to learn quickly and adapt to new technologies, and I am driven by a
+          strong desire to build software solutions that improve the lives of
+          others.
+        </p>
+      </section>
+      <section class="bg-slate-900 rounded-md p-4">
+        <h2 class="text-xl pb-2">Education</h2>
+        <h3 class="text-lg">North Carolina State University</h3>
+        <p>Bachelor of Computer Science</p>
+        <p>Graduated Cum Laude <span class="pl-2 pr-2">&bull;</span> 2019</p>
+      </section>
+      <section class="bg-slate-900 rounded-md p-4">
+        <h2 class="text-xl pb-2">Work Experience</h2>
+        <h3 class="text-lg">The American Board of Anesthesiology</h3>
+        <div class="flex flex-row text-sm">
+          <p>Senior Software Engineer</p>
+          <p class="text-right flex-1">January 2024 - present</p>
+        </div>
+        <div class="flex flex-row text-sm">
+          <p>Software Engineer</p>
+          <p class="text-right flex-1">June 2019 - 2023</p>
+        </div>
+        <div class="flex flex-row text-sm">
+          <p>Software Engineering Intern</p>
+          <p class="text-right flex-1">June 2018 - 2019</p>
+        </div>
+        <p class="mt-2">Responsibilities</p>
+        <ul class="list-disc ml-12">
+          <li>
+            Develop modern full-stack multi-platform applications for web,
+            Android and iOS
+          </li>
+          <li>
+            Create continuous integration and deployment pipelines for a variety
+            of products to both on-premises and cloud-based platforms
+          </li>
+          <li>
+            Work with business customers and other stakeholders to find
+            efficient software solutions to evolving business needs
+          </li>
+          <li>
+            Subject matter expert for payment, mobile deployment, and azure
+            pipelines
+          </li>
+        </ul>
+        <p class="mt-2">Accomplishments</p>
+        <ul class="list-disc ml-12">
+          <li>
+            Wrote an end-to-end payment processing system, allowing doctors to
+            pay their exam fees on web or mobile, and automated the back-end
+            processing of those transactions
+          </li>
+          <li>
+            Designed and implemented a web utility to automate the processing of
+            exam scores, eliminating the manual work of importing score files,
+            processing registrations, recognizing revenue, and certifying
+            doctors
+          </li>
+          <li>
+            Had a key role in creating a multi-platform application for doctors
+            to register for exams, answer continuing certification questions,
+            manage their certificate information, request services, pay fees,
+            and much more
+          </li>
+        </ul>
+      </section>
+      <section class="bg-slate-900 rounded-md p-4">
+        <h2 class="text-xl pb-2">Skills</h2>
+        <h3 class="text-lg">Languages</h3>
+        <p>
+          C# &bull; JavaScript &bull; T-SQL &bull; TypeScript &bull; HTML &bull;
+          CSS &bull; Java &bull; C &bull; PowerShell &bull; Python &bull; YAML
+          &bull; Bash
+        </p>
+        <h3 class="text-lg pt-2">Frameworks</h3>
+        <p>React &bull; React Native &bull; .NET</p>
+        <h3 class="text-lg pt-2">Technologies</h3>
+        <p>
+          SQL Server &bull; Azure Cloud Services &bull; Azure DevOps &bull;
+          Docker &bull; Kubernetes
+        </p>
+        <h3 class="text-lg pt-2">Operating Systems</h3>
+        <p>Windows &bull; Linux</p>
+      </section>
+      <section class="bg-slate-900 rounded-md p-4 md:col-span-2">
+        <h2 class="text-xl pb-2">References</h2>
+        <p>
+          Please see my printed resume or email me if you need my references!
+        </p>
+      </section>
+    </main>
+  </body>
+</html>