Personal Resume like website
Pull request Compare This branch is 75 commits behind JoshuaJones:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
robots.txt Resume Layout strives to be a clean, semantic and responsive resume-like site layout. Largely inspired from Bold - CV / Resume Template by Nathan McMillan.

I desired a responsive resume layout without extra divs with a class of .clear to make the layout work. It's a slow work in progress, mostly because I'm busy with numerous other projects, but it should be a solid semantic resume layout when it's completed.

Themes: To get a different theme, there are really only two areas that need tweaking. The body's background color:

body { background: -> #9ebf75 <- url( ../images/grid-bg.png); }

And if you want to keep the unified feel, you'll need to edit the colors for the progress meters:

.meter span {
    background-color: #acd27c;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd27c), to(#7aa04b));
    background-image: -webkit-linear-gradient(top, #acd27c 0%, #7aa04b 100% );
    background-image:    -moz-linear-gradient(top, #acd27c 0%, #7aa04b 100% );
    background-image:     -ms-linear-gradient(top, #acd27c 0%, #7aa04b 100% );
    background-image:      -o-linear-gradient(top, #acd27c 0%, #7aa04b 100% );
    background-image:         linear-gradient(top, #acd27c 0%, #7aa04b 100% );
    display: block;
    overflow: hidden;

Skillset Region

The progress bars in the skillset region are inspired from Chris Coyier's progress bars article, updated and cleaned up a bit.

The span element inside the div with the class .meter has an inline style attribute to declare the width in a percentage. This spans out the bar inside of the div, giving the appearance of a progress bar.

More here:


  • JavaScript trigger that slides down brief explanation when a skillset is clicked on.
  • CSS opacity hover effects on social icons and gallery thumbs


  • IE6 and IE7 have problems with responsive images. Portfolio thumbnails appear wrong.

If you find a bug playing with the layout, please create an issue here on GitHub.