Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Thomashighbaugh/resume

An HTML resume styled with Tailwind.css based on Universal Resume
https://github.com/Thomashighbaugh/resume

html-resume online-resume resume-template stylish-resume tailwind

Last synced: 6 days ago
JSON representation

An HTML resume styled with Tailwind.css based on Universal Resume

Awesome Lists containing this project

README 

        
## Universal Résumé Template



## What This Is



This is the repository housing my personal resume, which I can conveniently host as a website because instead of writing it in Word (which I can't do as a Linux user) or Libreoffice (which sucks) or LaTex (which I have done, but is a bit of a pain and OverLeaf is a challenge itself) I opted to **write it out in HTML**. 



There is really no reason I have come across that I shouldn't use **HTML** to write my resume, since I know it pretty well and write a lot of notes and documents in it or at least **MArkdown** that is just a shorthand of **HTML** anyway. It is easy to write, most code editors can syntax highlight it without need for additional modifications (including some included text editors for various desktop environments) and its a lot more powerful than using the same 5 word templates over and over again. I want to show people that may hire me something unique, so here it is. 



## Inspiration

This was inspired by, and parts adapted from, WebPraktikos' `universal resume template`, which tries harder to be supported across use cases so in case you need A4 sizing or anything else like that, I would check out his repo. I cannot understate how enlightening I found that project and how deeply it inspired this one. 



Additional props goes to the author of [heropatterns](https://heropatterns.com) who provided the svg pattern I have gotten somewhat experimental with as the background. **SVG** is essentially **HTML** with some unique tags called paths, so its pretty natural I would use something like that in this resume, but it would have probably taken me decades to come up with some of the awesome patterns you can use free of charge thanks to **heropatterns** which is pretty awesome and definitely worth looking into to give your site a little `sugar`. 



### Right to Copy or Adapt to Your Needs



This is my personal resume, written out using `universal resume template` as a guide, which means my name and information is all over the thing and I didn't set it up specifically to be a template or anything, so I would advise if you use it yourself, probably best to change the name and contact information (but if not and you get me a job, I really wouldn't mind!). Other than that, have fun and good luck with finding your next job. The beauty of open source my friends, I borrow from you and you borrow from me and we all are better for it. 






## How to run it

Clone the git repository 

```

git clone https://github.com/Thomashighbaugh/resume

```



Navigate to the base directory:



```

cd resume

```



Install the dependencies:



```

yarn install

```



Start the development server after building the stylesheet out of the Tailwind configuration:



```

yarn build && yarn serve

```



Only generate CSS that is used on the page which results in a much smaller file size:



```

yarn build

```






## Starting Point



`docs/index.html` is the main content file. By copying HTML: add pages, sections, subsection, and other parts.



`npm run build` enables drag and drop support of the `docs` directory, which you find helpful unloading your copy on GitHub if terminal/command prompt is not your thing. 






## Tailwind CSS



A nice bootstrap alternative that doesn't have as much opinionation that is all the rage these days with the 'hates css' crowd that while not a part of, I definitely didn't want to fall behind and thus I took this oppurtunity to practice a bit. 



**Note:** The way I am using Tailwind here varies wildly from the way I use it elsewhere and is a bit of an old school way to deploy it but `it works` just fine so I am not going to throw the monkey wrench in the project anytime soon on that front. 






## Custom CSS



Code from `tailwind.config.js` and `tailwind.css` transpiles to `docs/style.css`.






## Balanced Columns



Removing `col-fill-auto` class will make both columns equally tall. Moreover, removing `md:h-letter` and `md:h-letter-col` classes will eliminate fixed proportions of the letter or A4 page — thereby removing unnecessary vertical space when displaying short columns.






## Printing



### Chrome



Right-click → Print.  



OR 



You can save it as a PDF which will probably keep the SVG image and the other things being stripped out by the print optimizations, but there are use cases for that as well and its not like there really is a `right way` 



------



### Firefox



File → Print.



### Adobe Acrobat Reader



File → Print.



By clicking on the **Page Setup** button, you are taken to the window with A4 and Letter options.