CSS Grid Resume Template

Deployed on GitHub pages here.

A concrete example of my own resume can be found here.

This is a responsive web application, with different formatting for various size displays. For Mobile, the site is displayed mostly veritical. For web browsers, it is a normal page with some action buttons (possibly a drop down in the furure). For printing, the action buttons are removed, etc.

My hope is that the origianl template and this concrete example will be useful for others to copy/clone and add their own online resume.

Cloning/Copying Project

This project uses a very simple Github Actions script. When you first commit it to your own GitHub project it will fail. This is because you need to generate and install your own PERSONAL_TOKEN.

To generate a PERSONAL_TOKEN:

• click on your user icon in the top right of GitHub page:, select settings
• on lower left, select 'Deveoper settings'
• on left, select 'Personal acces tokens'
• use button 'generate new token'
• you will need to enter password for GitHub
• name this token the same as the GitHub project
• select 'repo' permissions
• copy the key (don't close window until the install is done, you might need to go back)

To install a PERSONAL_TOKEN:

• navigate to your Github project
• select 'Settings' tab
• on left, select 'Secrets'
• add new Secret
• name it PERSONAL_TOKEN
• copy/paste token from generation above

Test GitHub Action:

• Change something and push
• I find it easiest to use GitHub page and edit README.md (add a line)
• If it passes, you can close generation window

Background

The idea for this started from a blog post on CSS Tricks here.

As I was starting from that example, other sites/examples were found. One that was bven better is the code pen referenced. It is layed out differently. here.

Local Test of index.html

• cd .
• python -m SimpleHTTPServer
• open http://localhost:8000/

My onging TODO List and Ideas

• change px to rem
• BONUS: easteregg animation

References

How to use :before to add bullets https://www.w3.org/Style/Examples/007/color-bullets.en.html

Used https://stackoverflow.com/questions/54791658/vertical-divider-as-pseudo-element-with-css-grids for seperators

Used this for gh-pages (used the script only for now, with change to PUBLISH_DIR) https://github.com/peaceiris/actions-gh-pages