-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit adds a second column to the right of the original content (e.g. experience and education sections) at and above the `md` breakpoint. At smaller breakpoints, this column defaults to hidden, although it can be opened as a drawer through a new hamburger menu button. This new column/drawer is used to display a photo, contact information, and a list of skills.
- Loading branch information
Showing
11 changed files
with
224 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.