JoshuaRJones.me 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;
}
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: http://css-tricks.com/8518-css3-progress-bars/
- 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.
https://github.com/JoshuaJones/JoshuaRJones.me/issues