├── src ├── config.yaml ├── assets │ ├── fonts │ │ ├── Hubot-Sans.woff2 │ │ └── Mona-Sans.woff2 │ └── css │ │ ├── fonts.css │ │ └── styles.css ├── pages │ ├── contact.md │ └── about.md ├── templates │ ├── page.html │ ├── home.html │ ├── layout.html │ └── resume.html └── resume │ ├── history │ ├── 2012-college.yaml │ ├── 2016-web-software.yaml │ ├── 2015-health-magazine.yaml │ ├── 2015-content-agency.yaml │ ├── 2012-blog-podcast.yaml │ ├── 2017-seo-services.yaml │ ├── 2012-health-center.yaml │ ├── 2012-freelance.yaml │ ├── 2018-entertainment-co.yaml │ ├── 2021-seo-inc.yaml │ └── 2013-mobile-solutions.yaml │ ├── about.yaml │ └── roles.yaml ├── requirements.txt ├── postcss.config.js ├── Pipfile ├── app ├── watch.py ├── server.py ├── load.py ├── build.py └── helpers.py ├── package.json ├── tailwind.config.js ├── .github └── workflows │ └── highlight-app.yml ├── main.py ├── .gitignore ├── README.md └── LICENSE /src/config.yaml: -------------------------------------------------------------------------------- 1 | --- 2 | url: https://demo.highlight.dorko.dev 3 | avatar: github 4 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | jinja2 2 | markdown 3 | markupsafe 4 | pyyaml 5 | six 6 | unicode-slugify 7 | unidecode 8 | watchdog -------------------------------------------------------------------------------- /src/assets/fonts/Hubot-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annedorko/highlight/HEAD/src/assets/fonts/Hubot-Sans.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Mona-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annedorko/highlight/HEAD/src/assets/fonts/Mona-Sans.woff2 -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | module.exports = { 3 | plugins: { 4 | 'postcss-import': {}, 5 | 'tailwindcss/nesting': {}, 6 | tailwindcss: {}, 7 | autoprefixer: {}, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /src/pages/contact.md: -------------------------------------------------------------------------------- 1 | title: Contact this Awesome Person 2 | anchor: Contact 3 | order: 2 4 | 5 | 6 | # Let’s Work Together 7 | 8 | I am currently available for new contracts. Shoot me an email with your needs and let’s work something out: [yourname@example.com](mailto:yourname@example.com) 9 | -------------------------------------------------------------------------------- /Pipfile: -------------------------------------------------------------------------------- 1 | [[source]] 2 | url = "https://pypi.python.org/simple" 3 | verify_ssl = true 4 | name = "pypi" 5 | 6 | [packages] 7 | pyyaml = "*" 8 | unicode-slugify = "*" 9 | watchdog = "*" 10 | jinja2 = "*" 11 | markdown = "*" 12 | 13 | [dev-packages] 14 | 15 | [requires] 16 | python_version = "3.8" 17 | -------------------------------------------------------------------------------- /src/templates/page.html: -------------------------------------------------------------------------------- 1 | {% extends "layout.html" %} 2 | {% block content %} 3 | 4 |
13 | {{ person.taglines.default }} 14 |
15 |49 | Located in {{ person.contact.timezone }} 50 |
51 |
61 | {{ person.education[edu].school }}
62 | {{ person.education[edu].degree }}, {{
63 | person.education[edu].study }}
64 |
99 | {{ role.summary }} 100 |
101 |136 | {{ work.description }} 137 |
138 |Highlight is a lightweight, opinionated Static Site Generator (SSG) for quickly creating a beautiful resume and portfolio site that targets multiple ideal roles.
4 | 5 |  6 | 7 | [Landing Page](https://highlight.dorko.dev) | [Demo](https://demo.highlight.dorko.dev/) | [Live Usage](https://hire.annedorko.com) 8 | 9 | If you are using Highlight and wish to be featured, please [contact me](https://github.com/annedorko/highlight#contact). 10 | 11 | **Note:** This project is experimental. Updates may introduce breaking changes. [Please follow these instructions for upgrading your Highlight installation.](https://github.com/annedorko/highlight/wiki/Updating-Highlight-Versions) Keep backups of your data and implement Highlight at your own risk! 12 | 13 | ## Who is it for? 14 | 15 | Highlight is built by and for generalists who often need tweaked versions of their resume and portfolio to be appealing for different opportunities. This SSG is built to help you _highlight_ the right parts of your diverse skill-set and experiences to the right people, quickly and elegantly. 16 | 17 | Highlight is a Static Site Generator, which means the output can be hosted anywhere as plain HTML and CSS. By default it is configured to deploy to Github Pages automatically. 18 | 19 | This repo uses dummy data (which still features much of my own resume) and the results of the auto-deployment through Github Pages can be viewed here: [Highlight Demo Site](https://demo.highlight.dorko.dev). 20 | 21 | ## Built With 22 | 23 | - [TailwindCSS](https://github.com/tailwindlabs/tailwindcss) 24 | - [Jinja](https://palletsprojects.com/p/jinja/) 25 | 26 | ## Getting Started 27 | 28 | If you use this project base, modify this project to suit your own resume and portfolio activities! 29 | 30 | ### Prerequisites 31 | 32 | Built using: 33 | 34 | - Python 3+ 35 | - Node.js 21+ 36 | - NPM 10+ 37 | 38 | The program may work on lower versions of Node or NPM but has not been thoroughly tested. 39 | 40 | ### Installation 41 | 42 | Please [check the wiki](https://github.com/annedorko/highlight/wiki/Installation/) for more detailed installation instructions. 43 | 44 | #### 1. Clone this repo into a clean project folder. 45 | ```shell 46 | git clone https://github.com/annedorko/highlight.git 47 | ``` 48 | 49 | Alternatively, you can [create a new project using Highlight as a Template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template) and checkout your new project before proceeding. 50 | 51 | #### 2. Navigate into your project folder using the console. 52 | 53 | ```shell 54 | cd highlight 55 | ``` 56 | 57 | #### 3. Install NPM packages. 58 | ```shell 59 | npm install 60 | ``` 61 | 62 | #### 4. Install Python package requirements. 63 | 64 | Depending on your preference, you can use pip, pipenv, or conda to install the requirements using the convenient npm scripts provided: 65 | 66 | ```shell 67 | npm run install-pip 68 | ``` 69 | ```shell 70 | npm run install-pipenv 71 | ``` 72 | ```shell 73 | npm run install-conda 74 | ``` 75 | 76 | #### 4. Get started! 77 | 78 | Get started developing! The following command will use `python3` to execute the start-up script which generates your Highlight site, watches for changes, and makes them available in the browser at http://localhost:4242 79 | 80 | ```shell 81 | npm run develop 82 | ``` 83 | 84 | Learn more about [available scripts in the wiki](https://github.com/annedorko/highlight/wiki/Installation/). 85 | 86 | ## Usage 87 | 88 | This repo is full of example data. Currently, that data is mostly from my own resume. You can use it as a reference to create your own site. 89 | 90 | Data in Highlight is managed through [YAML](https://yaml.org/refcard.html). If you receive errors it is likely because the YAML got mis-formatted. Be sure to follow the same indentations and patterns as provided in the example data! 91 | 92 | As Highlight is so young, the YAML formatting may slightly change from update to update without backward compatibility, so be sure to check for any special notes before updating to use new Highlight features. 93 | 94 | ### Step 1. Configure Site 95 | 96 | 1. Open `src/config.yaml` 97 | 2. Change the `url` setting to the root domain your site will be published at. 98 | 99 | This URL controls: 100 | - The root of your links throughout the site 101 | - The CNAME for Github Pages to support custom domains 102 | 103 | Note: Highlight automatically generates a [.nojekyll file](https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/) to support Github Page deployment. 104 | 105 | ### Step 2. Start Site for Local Editing 106 | 107 | If you haven’t already, you can start the development server using the following command: 108 | 109 | ```shell 110 | npm run develop 111 | ``` 112 | 113 | ### Step 3. Update Your Bio 114 | 115 | 1. Open `src/resume/about.yaml` 116 | 2. Edit the data to reflect your name, contact information, skills, and more. 117 | 118 | This document contains the data that is the same across all your resume and portfolio items. 119 | 120 | - Name 121 | - Tagline 122 | - Work availability 123 | - Skills grouped by category 124 | - Important links 125 | - Contact information 126 | - Education 127 | 128 | 129 | By default, your email will also be used to pull your Gravatar image, so I recommend ensuring you have an account there associated with your work email. Set up a professional photo that looks great on the homepage. 130 | 131 | Alternatively, you can set `avatar` to `github` in the `src/config.yaml` file and ensure that your Github username is set under `contact` in the `src/resume/about.yaml` file. 132 | 133 | Something like this: 134 | 135 | ```yaml 136 | avatar: github 137 | ``` 138 | 139 | ```yaml 140 | contact: 141 | email: you@example.com 142 | phone: +1 555 321 5432 143 | timezone: Pacific 144 | github: yourusername 145 | ``` 146 | 147 | #### Skills 148 | 149 | Categories can be written using alphanumeric values followed by a colon. If you need to include a colon in your category name, be sure to surround it with quotes. 150 | 151 | For example: 152 | 153 | - Good: `Music Production:` 154 | - Good: `'Music: Production':` 155 | - Bad: `Music: Production:` 156 | 157 | #### Links 158 | 159 | Links can be plain text, like so: 160 | 161 | `Homepage: 'https://www.annedorko.com'` 162 | 163 | Or, you can optionally provide a URL, anchor text, and even a [FontAwesome icon](https://fontawesome.com/icons?d=gallery&m=free). This makes your resume look much cleaner and enables you to include icons for Twitter, LinkedIn, or whatever sites you may be referencing. 164 | 165 | _Without icon:_ 166 | ``` 167 | Homepage: 168 | url: 'https://www.annedorko.com' 169 | text: 'annedorko.com' 170 | ``` 171 | 172 | _With icon:_ 173 | ``` 174 | Homepage: 175 | url: 'https://www.annedorko.com' 176 | text: 'annedorko.com' 177 | icon: '' 178 | ``` 179 | 180 | #### about.yaml Template 181 | 182 | Here is a blank template with a few required stand-ins if you’d like to start from scratch. Feel free to cross-reference these values with the default about.yaml to better understand how to use them. 183 | 184 | ``` 185 | --- 186 | name: '' 187 | taglines: 188 | default: '' 189 | open: 190 | available: true 191 | seeking: '' 192 | location: '' 193 | skills: 194 | Your Category Here: 195 | - skill: Write a Skill 196 | years: 1 197 | - skill: Another Skill 198 | years: 4 199 | Your 2nd Category Here: 200 | - skill: Another Skill 201 | years: 2 202 | links: 203 | Homepage: 204 | url: '' 205 | text: '' 206 | LinkedIn: 'https://linkedin.com' 207 | contact: 208 | email: '' 209 | phone: '' 210 | timezone: '' 211 | education: 212 | Degree Name Here: 213 | school: '' 214 | degree: '' 215 | study: '' 216 | graduation: '' 217 | ``` 218 | 219 | ### Step 4. Add Your Target Roles 220 | 221 | 1. Open `src/resume/roles.yaml` 222 | 2. Edit the values to reflect your target roles. 223 | 224 | This document is the root of all your generated resumes. There is no limit to the number of target roles you can add, as long as you follow the YAML format! **Every role you add will generate a new resume page targeted towards that role.** 225 | 226 | Every role requires: 227 | 228 | - Role/Title Name 229 | - Professional Summary 230 | - List of Essential Skills (Multiples of 3 work best) 231 | 232 | #### Preview Role Summary 233 |

