Portfolio
This is just a sample of the work I have done over the years. If anything, it shows the evolution of my creativity, technical knowledge, & skill set through commercial, freelance, and for-fun works.
Timer Widget
This is just a simple timer widget that I coded up as part of a code-quality test from a prospective employer. PSD slicing, HTML, CSS and jQuery were all done in under 5 hours. The UI is completely functional, but the actual timer countdown functionality was not required for this task. Feel free to look at the code.
CSS3 Buttons
This is just a simple collection of various sized buttons sprites that use CSS3 and a 64-bit encoded png file for the stripes, so this done with 100% code.
Feel free to view (steal) the source if you like what you see.
ClintMilner.com Version 2
Version 2 of ClintMilner.com - I gave myself the challenge to do a full redesign and build a theme for WordPress. I created a few different page templates, incorporated the WordPress 3.0 menu system, and some custom widgets that could be accessed from the Admin. Included a Portfolio section as well as a Services menu which gave prospective clients an idea of costs and timelines for the most common jobs.
The Randomator HTML5 Web App
The Randomator is an HTML5 web app which will let the user input team names, configure the size of the teams, and randomize the players for the outputed teams. The end product used Local Storage to store all the user data, but I was responsible for the design and front-end web development. All HTML, CSS, JS and Photoshop work is my own. This page has all aspects of the app working except for the randomize fucntion which was developed by a colleague. This wasn’t designed to be cross-browser, so it will probably break in < IE9, and to ensure fast page load times, the site was created CSS3 with a few CSS sprites. Some cool Google Web Fonts (Bevan and Open Sans) were used. Check it out.
Time to Hex
This was my first attempt at converting the current time to a hex value. The background color of this window is basically the current time using the 24 hour clock. Since the (r)ed value doesn't go higher than 24, and the (g)reen & (b)lue values only reach a maximum of 60, the color are very dark and on the cool side of the spectrum. Not great for display.
Gotta rethink this one... Check out Time to RGBA
Product Details E-commerce Site
This is a static, high fidelity mock-up of the product details page of a popular fashion brand I had the honor of working on while at a former employer. This is a full-featured page and every component is being shown in this mock-up. The page renders very well for users with JavaScript turned off. The page includes 2 breakpoints; the first is at 960px (for iPad) and the other is at 1280px. On the completed website, this is a lightbox that appears over the listing page so the user doesn’t have to click the Back button to return to the listings. This is also beneficial because it reduces server load by keeping the listings page and filters in the background.
A Necessary Death (Movie Site)
This was a fun 1-pager (kind of) for the recent movie release of A Necessary Death. This smooth-scrolling website uses a lot of custom JavaScript for the scrolling, scaling background and image galleries. I say that it’s ‘kind of’ a 1 page website, technically it uses some AJAX calls to pull in the Cast & Crew profiles, as well as the movie trailers, but when JavaScript is enabled, everything appears to be on one page. Oh yeah, have I mentioned that it’s responsive too? Go ahead, try it out, I’ll wait. It looks especially good on my wife’s iPad. Now I don’t usually do this, but check out A Necessary Death on iTunes!
Rebasoft
This site was a full, bespoke re-design, re-code, and re-launch of the Rebasoft corporate website. This is a smooth-scrolling, paralaxing, media-querying, Bootstrapping, Wordpressing site packed with custom widgets for Products, Team, Case Studies, and Twitter Feed. The Rebasoft branding is all SVG and really looks good on retina devices. All of this was done in 4 days I might add... Check it out!
Marylebone Implant Centre
This was a built-from-scratch website that started itself as a simple client-supplied logo. From there, I mocked up the home and secondary content pages in Photoshop. Mock-ups and changes were sent back and forth until the client was happy and then I hand coded a static site by hand into HTML/CSS/jQuery. The client required CMS functionality, so I created a custom theme in WordPress/PHP. This site features custom post types for the image slider, testimonials, and before & after gallery. Here's the original HTML site used for approvals before converting to WordPress.
Time to RGBA
Here's my second attempt to convert the current time to a color. Learning from my Time to Hex experiment, I decided that I wanted to try to use the majority of the RGB color space, so I'm taking the ratio of current time by 23:59:59 and multiplying that by 255 to get a 'prettier' color. I like this version better. You might notice certain aspects of the site change color periodically. This isn't great for JavaScript paint times, I think it's a neat touch.
Random Number to Hex
This site was a mash-up of a couple ideas I had when I had some free time. The first idea I had was that I could take a random number, and using a small JavaScript library I found on the web, convert that number into a MD5 hash. Since MD5 hashes are all hexadecimal values, I then took the first 6 alphanumerics in that result, and made that the hex color of an element on the page. Not stopping there, I filled the window with these elements, and made the background. The second idea started as an inside joke at Craftsy.com. Since I was in the UK during the interview process, I soon became 'British Clint.' So I started a Twitter account, and pulled in the last tweet and displayed it on the page. Since then though, Twitter has moved to its OAuth model, so the script I was using now fails (gracefully).
ClintMilner.com 'The Original'
This was my first homepage for ClintMilner.com. It was all on one page, and when you clicked the links, the content and background slid right or left for ~5000 pixels in a parallax fashion ( ...before it was cool! ). Lots of jQuery! All vector art done by me. It was even featured on the website 1 Page Love. Fonts provided by the Google Font Depository. View full view here