Skip to content

Commit

Permalink
refactor: replace header, drawer, and footer, with shortcodes (#31)
Browse files Browse the repository at this point in the history
* refactor!: replace header, drawer, and footer with shortcodes

Previously, the layout of the header, drawer, and
footer were dictated by template partials, which
were driven with markup encoded in the yaml
frontmatter. This severely restricted the layout
and content in each of these elements:

- the header could only contain a name and a text
  summary rendered to markdown
- the drawer could only contain an avatar,
  followed by a list of links and a list of skills
- the footer could only contain some centered
  italic text rendered with markdown

These elements are now replaced with
`{{<header>}}`, `{{<aside>}}` and `{{<footer>}}`,
which may be placed in the resume markup. Each
element only serves to render and place the
contained markup in the corresponding location of
the page.

* refactor!: replace `{{<entry>}}` with `### h3` and `{{<date-range>}}`

Previously, each resume entry required a shortcode
that dictated the layout of a name, affiliation,
date-range, and a description rendered to
markdown. This severely restricted and
unnecessarily complicated the layout and content
of the main portion of the resume.

Now, `{{<entry>}}` has been removed, but can be
closely emulated with a combination an `h3` (###)
header, a `{{<date-range>}}`, and any content that
follows these. See the changes to
`content/_index.md` for more details on how this
migration may be done.

A draw-back up of this method is that the entry
affiliation may no longer be placed on a separate
line from the position name, however, support for
this could be added using an `#### h4`. I'll do
this if there's demand for it.

* feat: add support for responsive bitmaps and svgs in markdown images

Images supplied as markdown can now reference
bitmaps or svgs. In the former case, the supplied
bitmap image is used to generate a srcset of
responsive images. In the latter case, the
supplied svg will be embedded directly into the
html, as

Bitmap images provided in the markdown, are now
used to generate a srcset of responsive images.
All configurations related to this process can be
controlled with hugo attributes. See
`layouts/_default/_markup/render-image.html` and
the changes to `content_index.md` for more details
on how this is done.

* fix: missing h2 headers in html

They were missing...I don't know why.

* fix: align date-range text with baseline of adjacent h3 text

Date ranges are normally placed to the right of an
h3, but the text wasn't aligned due to a
difference in font sizes. All elements in the main
grid are now aligned with their baselines.

* fix: best-effort prevention of page breaks inside entries

65464b7 previously removed a failed attempt at
preventing page breaks inside entries. We make a
new attempt at this by setting `break-before:
avoid` on all children of the `{{<main>}}`
element, except for <h3> headers and
{{<date-range>}} shortcodes.

* refactor(txt): stop uppercase-ing section titles

* refactor: prioritize page title over site title

Previously, the title in a page's frontmatter
would be ignored. Now, this title is read in
head.html and is prioritized over the site title.

* chore: add `dev:tailscale` script

This commit adds support for using Tailscale to
serve the website to the rest of my tailnet.

The motivation for this change was to be able to
view the live site on my phone during development.

Note that while Hugo can serve locally with SSL
certs, this also uses Tailscale to generate
certificates, as it will also distribute them.
  • Loading branch information
cjshearer committed Feb 8, 2024
1 parent f944695 commit 6cd4652
Show file tree
Hide file tree
Showing 42 changed files with 373 additions and 662 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,7 @@ build
public
resources
node_modules
hugo_stats.json
hugo_stats.json

*.crt
*.key
3 changes: 1 addition & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ resources
public
static
pnpm-lock.yaml
content/_index.md
layouts/**/*.md
layouts/partials/imgh.html
layouts/_default/_markup/render-heading.html
layouts/resume/_markup/render-heading.html
build
16 changes: 6 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
# modern-hugo-resume

[![Hugo](https://img.shields.io/badge/Hugo-%5E0.115.3-ff4088?style=round-square&logo=hugo)](https://gohugo.io/) [![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-%5E3.3.3-38B2AC?style=round-square&logo=tailwind-css)](https://tailwindcss.com/)
[![Prettier](https://img.shields.io/badge/Prettier-%5E2.8.8-c596c7?style=round-square&logo=prettier)](https://prettier.io/)
[![Stylelint](https://img.shields.io/badge/Stylelint-%5E15.10.2-3578e5?style=round-square&logo=stylelint)](https://stylelint.io)

## Overview

_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!_
Expand Down Expand Up @@ -68,12 +62,14 @@ To make changes and instantly see them at http://localhost:1313, run:
pnpm dev
```

To create a production build, run:
To make the server accessible over tailscale, run

```sh
pnpm build
pnpm dev:tailscale
```

## Note
To create a production build, run:

This project contains a file `article_txt_replace.toml`, which is released under the terms of the Apache License, Version 2.0. A copy of the Apache License is available in the `data/plaintextreplace` directory of this project. Please see the Apache License for details regarding usage and distribution restrictions.
```sh
pnpm build
```
5 changes: 0 additions & 5 deletions archetypes/default.md

This file was deleted.

37 changes: 29 additions & 8 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,45 @@
@tailwind utilities;

@layer base {
html {
@apply bg-neutral-800 text-neutral-200;

body {
/* TODO(cjshearer): remove when we update to tailwind >= v3.4.0
https://github.com/tailwindlabs/tailwindcss/pull/12299 */
-webkit-tap-highlight-color: transparent;
font-family: Roboto, sans-serif;

@apply prose prose-sm prose-invert prose-resume font-[Roboto,_sans-serif];
@apply bg-neutral-800;
}

a {
@apply underline decoration-1 underline-offset-4 hover:text-neutral-100;
@apply underline decoration-1 underline-offset-4 hover:text-neutral-100 print:no-underline;
}

code {
@apply whitespace-nowrap rounded-md border border-neutral-500 bg-neutral-900 px-1;
}
}

@media print {
a {
text-decoration: none;
@layer components {
.avatar {
@apply relative aspect-square overflow-hidden rounded-full;

/* after */
@apply 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)];
}

.button {
@apply relative flex h-12 w-12 items-center justify-center rounded-full;

/* before */
@apply before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:scale-90 before:rounded-full before:duration-[250ms] before:[box-shadow:inset_0_0_0_3rem_currentColor];

/* hover:before */
@apply hover:before:scale-100 hover:before:[box-shadow:inset_0_0_0_0.125rem_currentColor];

/* svg */
@apply [&_svg]:inline [&_svg]:h-[58%] [&_svg]:w-[58%] [&_svg]:fill-current [&_svg]:text-neutral-800;

/* hover:svg */
@apply [&_svg]:hover:text-inherit;
}
}
96 changes: 65 additions & 31 deletions content/_index.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,9 @@
---
type: resume
outputs: [html, txt]
avatar: avatar.jpg
links:
- svg: node_modules/@fortawesome/fontawesome-free/svgs/solid/globe
url: https://cjshearer.dev
name: Website
- svg: node_modules/@fortawesome/fontawesome-free/svgs/brands/github
url: https://github.com/cjshearer
name: GitHub
- svg: node_modules/@fortawesome/fontawesome-free/svgs/brands/linkedin
url: https://linkedin.com/in/cjshearer
name: LinkedIn
- svg: node_modules/@fortawesome/fontawesome-free/svgs/solid/envelope
url: mailto:cjshearer@live.com
name: Email
name: Cody 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)
dateformat:
short: Jan. 2006
long: January 2006
title: Resume
skills:
- languages:
- TypeScript
Expand Down Expand Up @@ -67,9 +50,41 @@ skills:
- SendGrid
---

{{<header class="text-center md:text-left">}}

# Cody Shearer

Software Developer with 3 Years of Experience in Full Stack Web and Mobile Development
{class="font-light mb-2"}

[![GitHub: github.com/cjshearer](svgs/brands/github.svg)](https://github.com/cjshearer "GitHub")
[![LinkedIn: cjshearer.dev](svgs/brands/linkedin.svg)](https://linkedin.com/in/cjshearer "LinkedIn")
[![Email: cjshearer@live.com](svgs/solid/envelope.svg)](mailto:cjshearer@live.com "Email")
{class="[&>*]:button [&>*]:inline-flex [&>*]:mr-1 md:hidden"}

{{</header>}}

{{<aside class="not-prose gap-4">}}

![](avatar.jpg "A close-up photo of me wearing a suit and tie")
{class="avatar w-24" sizes="256"}

[![](svgs/brands/github.svg) GitHub](https://github.com/cjshearer)
[![](svgs/brands/linkedin.svg) LinkedIn](https://linkedin.com/in/cjshearer)
[![](svgs/solid/envelope.svg) Email](mailto:cjshearer@live.com)
{class="[&_a]:mb-2 [&_a]:inline-flex [&_a]:items-center last-of-type:[&_a]:mb-0 [&_svg]:mx-1 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:fill-current"}

{{<skills layout="vertical">}}

{{</aside>}}

{{<main>}}

## Experience

{{<resume/entry name="Software Developer - Full Stack" affiliation="Krumware" startdate="2021-03-29" enddate="2023-10-20">}}
### Software Developer – Full Stack, Krumware

{{<date-range start="2021-03-29" end="2023-10-20">}}

- Collaborated in cross-functional team following agile (scrum) methodologies
- Improved time-to-market by up to 20% with project templates
Expand All @@ -81,6 +96,7 @@ skills:
- Promoted culture of continuous improvement, code reviews, and linting

Project Highlights:

- Developed React app, React-Native app, Node servers for equipment manufacturer
- Created Bluetooth abstraction with data anomaly filtering, connection recovery
- Engineered data pipeline for real-time capture and display across applications
Expand All @@ -93,27 +109,45 @@ Project Highlights:
- Developed a React SPA and Node socket server for escape room company
- Created multiplayer puzzle game with draggable puzzle pieces
- Designed email notification system for automated booking reminders
{{</resume/entry>}}

{{<resume/entry name="Research Assistant" affiliation="AI and Systems Laboratory" startdate="2020-08-01" enddate="2021-04-01">}}
### Research Assistant, AI and Systems Laboratory

{{<date-range start="2020-08-01" end="2021-04-01">}}

- Analyzed cross-platform performance behavior of deep-learning recommender system
- Reproduced results from past research on highly configurable systems
- Researched relevant works on causal inference and machine learning
{{</resume/entry>}}

{{<resume/entry name="Software Developer - Intern" affiliation="Velocity" startdate="2018-06-01" enddate="2018-08-01">}}
### Software Developer – Intern, Velocity

{{<date-range start="2018-06-01" end="2018-08-01">}}

- Created AWS storage primitive abstracting cloud complexity for high level orchestration
- Developed storage optimization solution for Amazon Elastic Block Storage
{{</resume/entry>}}

## Education

{{<resume/entry name="BS Computer Science" affiliation="University of South Carolina" startdate="2017-08-17" enddate="2021-05-06">}}
### BS Computer Science, University of South Carolina

{{<date-range start="2017-08-17" end="2021-05-06">}}

- Graduated [*magna cum laude*](pdf/usc-diploma.pdf) with a mathematics minor
- Graduated [_magna cum laude_](pdf/usc-diploma.pdf) with a mathematics minor
- Achieved [Outstanding Senior Award](https://sc.edu/about/offices_and_divisions/leadership_and_service_center/awards_and_recognition/senior-awards/index.php) and the [Palmetto Fellows Scholarship](https://sc.edu/about/offices_and_divisions/financial_aid/scholarships/scholarships_for_sc_residents/palmetto_fellows/index.php)
- Earned honors including President's List, Dean's List, and [Phi Beta Kappa](https://www.pbk.org/About)
- Served as President and Treasurer of the Carolina Movement Club (*parkour!*)
- Served as President and Treasurer of the Carolina Movement Club (_parkour!_)

## Skills {.md:hidden}

{{<skills class="md:hidden">}}

{{</main>}}

{{<footer class="text-center">}}

_Is HTML too fancy for you? [See it in plain text](/index.txt)._
{class="print:hidden"}

_Fully typeset with HTML and CSS — see [github.com/cjshearer/modern-hugo-resume](https://github.com/cjshearer/modern-hugo-resume)_
{class="hidden print:block"}

{{</resume/entry>}}
{{</footer>}}
File renamed without changes
Loading

0 comments on commit 6cd4652

Please sign in to comment.