diff --git a/README.md b/README.md
index f8ee532..56df088 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 ## Overview
 
-_A minimal static resume builder; inspired by [Sproogen's modern-resume-theme](https://github.com/sproogen/modern-resume-theme) and powered by Hugo, Tailwind CSS, and GitHub Pages._
+_A minimal static resume builder; inspired by [sproogen's modern-resume-theme](https://github.com/sproogen/modern-resume-theme) and [mnjul's html-resume](https://github.com/mnjul/html-resume).Powered by Hugo, Tailwind CSS, and GitHub Pages._
 
 _Host your own resume on GitHub for free!_
 
diff --git a/assets/css/main.css b/assets/css/main.css
index d757c24..c4f78cd 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@media screen {
+  a {
+    text-decoration: underline;
+  }
+}
+
 html {
   @apply bg-neutral-800;
 }
@@ -13,7 +19,7 @@ body {
 }
 
 a {
-  @apply underline decoration-1 underline-offset-4 hover:text-neutral-100;
+  @apply decoration-1 underline-offset-4 hover:text-neutral-100;
 }
 
 code {
diff --git a/data/resume.yaml b/data/resume.yaml
index aff048c..d7b0ece 100644
--- a/data/resume.yaml
+++ b/data/resume.yaml
@@ -1,17 +1,63 @@
-header:
-  avatar: avatar.jpg
-  name:
-    first: Cody
-    last: Shearer
-  titles:
-    - Software Developer, Krumware
-    - B.S. Computer Science, USC
-  email: cjshearer@live.com
-  links:
-    - svg: github
-      link: https://github.com/cjshearer
-    - svg: linkedin
-      link: https://linkedin.com/in/cjshearer
+avatar: avatar.jpg
+website: cjshearer.dev
+links:
+  - svg: node_modules/@fortawesome/fontawesome-free/svgs/brands/github
+    link: github.com/cjshearer
+    protocol: https
+  - svg: node_modules/@fortawesome/fontawesome-free/svgs/brands/linkedin
+    link: linkedin.com/in/cjshearer
+    protocol: https
+  - svg: node_modules/@fortawesome/fontawesome-free/svgs/solid/envelope
+    link: cjshearer@live.com
+    protocol: mailto
+name:
+  first: Cody
+  last: Shearer
+summary: |
+  Software developer with ~3 years of experience in full stack web and mobile development.
+footer: |
+  Fully typeset with HTML and CSS. See [github.com/cjshearer/modern-hugo-resume](https://github.com/cjshearer/modern-hugo-resume).
+
+skills:
+  - languages:
+      - TypeScript
+      - Go
+      - SQL
+      - Rust
+      - Python
+      - Java
+      - C++
+  - frameworks:
+      - React
+      - React-Native
+      - TailwindCSS
+      - Vue
+      - Nuxt
+      - Hugo
+  - concepts:
+      - Cloud-Native
+      - Microservices
+      - REST
+      - GitOps
+      - Agile/Scrum
+  - tools:
+      - Git
+      - Docker
+      - ESLint
+      - Postman
+  - ci/cd:
+      - CircleCI
+      - GitHub Actions
+      - Fastlane
+  - databases:
+      - MySQL
+      - PostgreSQL
+      - MongoDB
+  - services:
+      - Auth0
+      - LogRocket
+      - Sentry
+      - Stripe
 
 sections:
   about:
@@ -59,8 +105,7 @@ sections:
         date:
           start: 2017-08-17
           end: 2021-05-06
-        title: |
-          [BS Computer Science](pdf/usc-diploma.pdf)
+        title: BS Computer Science
         subtitle: Minor Mathematics
         icon: fa fa-file-pdf
         description: |
diff --git a/layouts/index.html b/layouts/index.html
index e2bbc18..d748163 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,7 +3,7 @@
 <!DOCTYPE html>
 <html lang="en">
   {{ partial "head.html" . }}
-  <body class="mx-4 mb-4 mt-8 sm:mx-8">
+  <body class="flex justify-center">
     {{ partial "resume/index.html" $data }}
   </body>
 </html>
diff --git a/layouts/partials/resume/avatar.html b/layouts/partials/resume/avatar.html
new file mode 100644
index 0000000..05ca5e8
--- /dev/null
+++ b/layouts/partials/resume/avatar.html
@@ -0,0 +1,7 @@
+<div class="relative aspect-square overflow-hidden rounded-full">
+  <div
+    class="after:absolute after:top-0 after:block after:h-full after:w-full after:rounded-full after:[box-shadow:inset_0_0_20px_0_theme(colors.neutral.500)]"
+  >
+    {{ partial "imgh.html" (dict "src" .) }}
+  </div>
+</div>
diff --git a/layouts/partials/resume/drawer.html b/layouts/partials/resume/drawer.html
new file mode 100644
index 0000000..f7aa0b4
--- /dev/null
+++ b/layouts/partials/resume/drawer.html
@@ -0,0 +1,59 @@
+<button
+  aria-controls="drawer"
+  aria-label="open drawer"
+  class="absolute right-2 top-2 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
+  onclick="drawer.setAttribute('data-open', 'true')"
+>
+  {{ partial "svg.html" (dict "src" "node_modules/@fortawesome/fontawesome-free/svgs/solid/bars" "size" "1.5rem") }}
+</button>
+
+<aside
+  class="group invisible sticky top-0 z-10 grid h-screen grid-cols-[min-content_1fr] backdrop-blur-sm [grid-area:stack] [transition:visibility_0s_150ms] data-[open]:visible data-[open]:transition-none md:visible md:relative md:transition-none"
+  id="drawer"
+>
+  <div
+    class="flex w-min -translate-x-full flex-col gap-4 bg-neutral-800 px-2 pt-4 transition-transform group-data-[open]:translate-x-0 motion-reduce:transform-none md:translate-x-0 md:pl-0 md:pr-4 md:transition-none"
+  >
+    {{ partial "resume/avatar" .avatar }}
+    {{ with .links }}
+      <ul aria-label="social links">
+        {{ range . }}
+          <li>
+            <a href="{{ .protocol }}://{{ .link }}" class="text-sm">
+              {{ .link }}
+            </a>
+          </li>
+        {{ end }}
+      </ul>
+    {{ end }}
+    {{ with .skills }}
+      <section aria-label="skills">
+        {{ range . }}
+          {{ range $category, $skills := . }}
+            <ul aria-label="{{ $category }}" class="mb-2">
+              {{ range $skills }}
+                <li class="text-sm">
+                  {{ . }}
+                </li>
+              {{ end }}
+            </ul>
+          {{ end }}
+        {{ end }}
+      </section>
+    {{ end }}
+  </div>
+  <button
+    aria-controls="drawer"
+    aria-label="close drawer"
+    onclick="drawer.removeAttribute('data-open')"
+    class="md:hidden"
+  />
+</aside>
+
+<script>
+  document.addEventListener("keyup", (e) => {
+    if (e.key === "Escape") {
+      drawer.removeAttribute("data-open");
+    }
+  });
+</script>
diff --git a/layouts/partials/resume/footer.html b/layouts/partials/resume/footer.html
index 9b33ed0..5a4dec5 100644
--- a/layouts/partials/resume/footer.html
+++ b/layouts/partials/resume/footer.html
@@ -1,5 +1,3 @@
-<footer>
-  <p class="text-center font-light italic">
-    {{ .name.first }} {{ .name.last }} - {{ .email }} - References on request
-  </p>
+<footer class="col-span-3 text-center text-sm font-light italic">
+  {{ .footer | markdownify }}
 </footer>
diff --git a/layouts/partials/resume/header.html b/layouts/partials/resume/header.html
index e8600f3..9a90f46 100644
--- a/layouts/partials/resume/header.html
+++ b/layouts/partials/resume/header.html
@@ -1,52 +1,29 @@
 <header
-  class="mb-8 flex flex-wrap whitespace-nowrap text-center md:flex-nowrap"
+  class="col-span-2 mx-auto text-center md:col-span-1 md:ml-0 md:text-left"
 >
-  <div class="mx-auto flex flex-col md:ml-0 md:text-left">
-    <p class="text-4xl font-medium">
-      {{ .name.first }}
-      {{ .name.last }}
+  <p class="text-2xl font-medium">
+    {{ .name.first }}
+    {{ .name.last }}
+  </p>
+  {{ with .summary }}
+    <p class="text-sm font-light">
+      {{ . | markdownify }}
     </p>
-    <div class="flex flex-wrap gap-2 overflow-hidden text-lg font-light">
-      {{ range $titleIndex, $title := .titles }}
-        <p class="mx-auto text-xl font-light md:ml-0">
-          {{ $title }}
-        </p>
-        {{ if ne (add $titleIndex 1) (len $.titles) }}
-          <hr class="mx-[-2px] h-6 self-center border-l-2 border-neutral-400" />
-        {{ end }}
-      {{ end }}
-    </div>
-  </div>
-  <div class="flex w-full flex-col gap-2 md:w-auto md:text-right">
-    <div class="flex h-[3.75rem] justify-center">
-      <ul class="flex list-none justify-center gap-2">
-        {{ range $socialLink := .links }}
-          <li class="aspect-square">
-            <a
-              class="group relative block h-full w-full rounded-full text-center before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:scale-90 before:rounded-[inherit] before:transition-[transform_box-shadow] before:duration-[250ms] before:[box-shadow:inset_0_0_0_3rem_currentColor] hover:before:scale-100 hover:before:[box-shadow:inset_0_0_0_0.125rem_currentColor]"
-              href="{{ .link }}"
-            >
-              <div
-                class="flex h-full w-full items-center justify-center text-neutral-800 group-hover:text-inherit"
-              >
-                {{ partial "svg.html" (dict "src" .svg "size" "2.15rem") }}
-              </div>
-            </a>
-          </li>
-        {{ end }}
-        {{ with .avatar }}
-          <li class="relative aspect-square overflow-hidden rounded-full">
-            <div
-              class="after:absolute after:top-0 after:block after:h-full after:w-full after:rounded-full after:[box-shadow:inset_0_0_20px_0_theme(colors.neutral.500)]"
-            >
-              {{ partial "imgh.html" (dict "src" .) }}
-            </div>
-          </li>
-        {{ end }}
-      </ul>
-    </div>
-    <a aria-label="{{ .name.first }}'s email" href="mailto:{{ .email }}">
-      {{ .email }}
-    </a>
-  </div>
+  {{ end }}
+  <ul class="mt-2 flex h-12 list-none justify-center gap-2 md:hidden">
+    {{ range .links }}
+      <li class="aspect-square">
+        <a
+          class="group relative block h-full w-full rounded-full text-center before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:scale-90 before:rounded-[inherit] before:transition-[transform_box-shadow] before:duration-[250ms] before:[box-shadow:inset_0_0_0_3rem_currentColor] hover:before:scale-100 hover:before:[box-shadow:inset_0_0_0_0.125rem_currentColor]"
+          href="{{ .protocol }}://{{ .link }}"
+        >
+          <div
+            class="flex h-full w-full items-center justify-center text-neutral-800 group-hover:text-inherit"
+          >
+            {{ partial "svg.html" (dict "src" .svg "size" "1.75rem") }}
+          </div>
+        </a>
+      </li>
+    {{ end }}
+  </ul>
 </header>
diff --git a/layouts/partials/resume/index.html b/layouts/partials/resume/index.html
index 5f943a8..242f1a0 100644
--- a/layouts/partials/resume/index.html
+++ b/layouts/partials/resume/index.html
@@ -1,5 +1,12 @@
-{{ partial "resume/header" .header }}
-{{ range slice .sections.about .sections.timeline }}
-  {{ partial "resume/section" . }}
-{{ end }}
-{{ partial "resume/footer" .header }}
+<div
+  class="relative grid max-w-[8.5in] grid-cols-[min-content_[stack]_1fr] grid-rows-[[stack]_1fr] md:grid-cols-[1fr_min-content_[stack]_min-content] md:gap-5"
+>
+  {{ partial "resume/drawer" . }}
+  <main
+    class="grid px-2 pt-4 [grid-area:stack] md:col-span-2 md:grid-cols-subgrid md:pl-4 md:pr-0"
+  >
+    {{ partial "resume/header" . }}
+    {{ range .sections }}{{ partial "resume/section" . }}{{ end }}
+  </main>
+  {{ partial "resume/footer" . }}
+</div>
diff --git a/layouts/partials/resume/section.html b/layouts/partials/resume/section.html
index fcdc73c..dd44c11 100644
--- a/layouts/partials/resume/section.html
+++ b/layouts/partials/resume/section.html
@@ -1,9 +1,7 @@
 {{ $dateFormat := "2006" }}
-<section>
+<section class="col-span-2 my-2 gap-x-4 md:grid md:grid-cols-subgrid">
   {{ with .title }}
-    <h1
-      class="mb-8 border-b-2 border-dashed border-neutral-400 pb-2 text-center text-3xl font-light capitalize"
-    >
+    <h1 class="col-span-2 text-xl font-light capitalize">
       {{ . }}
     </h1>
   {{ end }}
@@ -14,33 +12,33 @@
       {{ $startDate = time.Format $dateFormat .start }}
       {{ with .end }}{{ $endDate = time.Format $dateFormat . }}{{ end }}
     {{ end }}
-    <section class="mb-12 break-inside-avoid gap-2 md:grid md:grid-cols-12">
-      <div class="col-span-11">
-        <div class="flex justify-between gap-2">
-          {{ with .name }}
-            <h2 class="text-2xl font-medium">{{ . }}</h2>
-          {{ end }}
-          {{ with .date }}
-            <p class="whitespace-nowrap md:hidden">
-              {{ $startDate }} -
-              {{ $endDate }}
-            </p>
-          {{ end }}
-        </div>
+    <div class="break-inside-avoid-page">
+      <div class="flex items-center justify-between">
         {{ with .title }}
-          <h3 class="text-lg">{{ . | markdownify }}</h3>
+          <h2 class="text-lg font-medium">{{ . }}</h2>
         {{ end }}
-        {{ with .description }}
-          <div class="prose prose-invert">{{ . | markdownify }}</div>
+        {{ with .date }}
+          <p class="whitespace-nowrap text-sm md:hidden">
+            {{ $startDate }} -
+            {{ $endDate }}
+          </p>
         {{ end }}
       </div>
-      {{ with .date }}
-        <div class="hidden text-center md:block">
-          <p>{{ $startDate }}</p>
-          <p>|</p>
-          <p>{{ $endDate }}</p>
+      {{ with .name }}
+        <h3 class="text-base font-light">{{ . }}</h3>
+      {{ end }}
+      {{ with .description }}
+        <div class="prose prose-sm prose-invert">
+          {{ . | markdownify }}
         </div>
       {{ end }}
-    </section>
+    </div>
+    <div class="mx-auto hidden text-center text-sm md:block">
+      {{ with .date }}
+        <p>{{ $endDate }}</p>
+        <p>|</p>
+        <p>{{ $startDate }}</p>
+      {{ end }}
+    </div>
   {{ end }}
 </section>
diff --git a/tailwind.config.js b/tailwind.config.js
index d4069e5..86fe8ff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,27 +5,34 @@ module.exports = {
   theme: {
     extend: {
       typography: () => ({
-        DEFAULT:
-          /** @type {import('tailwindcss').Config['theme']} */
-          {
-            css: {
-              a: {
-                color: false,
-                fontWeight: false,
-                textDecoration: false,
-              },
-              "blockquote p:first-of-type::before": false,
-              "blockquote p:last-of-type::after": false,
-              code: {
-                color: false,
-                fontWeight: false,
-              },
-              "code::after": false,
-              "code::before": false,
-              maxWidth: false,
+        DEFAULT: {
+          css: {
+            a: {
+              color: false,
+              fontWeight: false,
+              textDecoration: false,
             },
+            "blockquote p:first-of-type::before": false,
+            "blockquote p:last-of-type::after": false,
+            code: {
+              color: false,
+              fontWeight: false,
+            },
+            "code::after": false,
+            "code::before": false,
+            maxWidth: false,
           },
+        },
       }),
+      // TODO(cjshearer): remove once
+      // https://github.com/tailwindlabs/tailwindcss/pull/12298/files is
+      // released
+      gridTemplateColumns: {
+        subgrid: "subgrid",
+      },
+      gridTemplateRows: {
+        subgrid: "subgrid",
+      },
     },
   },
 };
