10 Hour Site Homepage

10 Hour Sites are a challenge to myself to showcase my abilities: specifically, what I can create and how much I can accomplish in 10 hours or less. Each tackles a different set of requirements, skills, and themes.

The first 10 hour project is a home for the 10 hour projects. Themed around ancient stone monuments, the page is inspired by the dual meaning of the 10 hour motto: 'Projects to Beat the Test of Time.'

This website is designed to be simple but attractive and easily expandable. It is fully responsive and usable on any screen size, and completely accessible. Although not utilizing a true CMS (Content Management System), the menu is automatically generated and adding new sections is as easy as copying, pasting, and replacing text.

Langauges and Libraries used: Bootstrap, jQuery, plus standard HTML and CSS

Time Taken: 4 hours, excluding concepting and content creation

brick graphic

column section graphic

NDCB Website Overhaul

While not obsolete, the North Durham Concert Band website I had made previously was in need of a visual overhaul and clean-up.

To make it a good 10 Hour challenge, I decided to make it a fully responsive site built using only pure CSS. No Javascript is involved, nor are any external libraries used.

The result is an incredibly lightweight site. Remaking it this way was a good refresher for CSS, especially animations, and also a stark reminder of the abilities of CSS but also its limitations. Making a site without DOM manipulation puts a variety of constraints on what can be done. While certainly a useful exercise, it is not reccommended for most projects.

Ultimately, the result is a bit of a successful failure: while the objectives I laid out were met, the result still feels a bit lacking due to the contraints. The next 10 Hour Porject will seek to rectify this...

Langauges and Libraries used: Only HTML and CSS

Time Taken: 3 hours 50 minutes, excluding concepting and content creation

NDCB website image

NDCB website background tile

View the website here by clicking here

Demonstration Article 1

A dummy article for demonstration purposes, to fill out the site.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Demonstration Article 2

A dummy article for demonstration purposes, to fill out the site.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.