- Best viewed in Chrome and Safari
- Basic HTML knowledge required
- Also includes photoshop file
When it comes to web design I’m a huge fan of both minimalism as well as heavy imagery. If you’re a photographer, artist or designer, minimalism is a great way to emphasize your work.It allows the user to focus on a single aspect of the site at a time while still remaining visually pleasing.
I recently put together a minimalist portfolio design which I haven’t yet been able to use. I started with just the design and decided to chop it up and code it to feature on the blog.
The design itself is fairly simple but also very easy on the eyes. As for the code, I used Codrops’ ‘Slicebox’. A great slideshow plugin that utilizes the CSS3 3D transform property. You can read up on some of the documentation on their site. I’m also using the bxslider along with fancybox for the subfeature thumbnail image slides.
Feel free to download the source files and use them for your project. They’re very easy to customize, simply replace the image paths in the array:
var thumbImages = [ "image/large-1.jpg", "image/large-2.jpg", "image/large-3.jpg", "image/large-4.jpg", "image/large-5.jpg", "image/large-6.jpg" ];
with you’re own images and you’re good to go.
For the thumbnails you can use your full sized images and it will resize it accordingly. Just replace the image paths:
The about page is pretty straight forward, you can replace the text and image to customize it.
The portfolio page is similar to the home page, with regards to the image replacement. Simply replace the images in the array:
var portfolioImage = [ "image/large-1.jpg", "image/large-2.jpg", "image/large-3.jpg", "image/large-4.jpg", "image/large-5.jpg", "image/large-6.jpg" ];
with you’re own images.
The contact page form is set up visually but you will need to add phpmailer or some form of mailer for the functionality.
If you have any questions feel free to send me a message or post in the comments.
There was a bug with the Slicebox plugin that made it break in Firefox 10. I’ve made a quick modification to the plugin for now until I can find a better solution to the problem. Here’s the fix:
On line 93 of the plugin (jquery.slicebox.js) replace:
if( Modernizr.csstransforms3d )
if( Modernizr.csstransforms3d && navigator.userAgent.indexOf("Firefox") == -1 )
And on line 101 of the index.html page replace:
if( !Modernizr.csstransforms3d )
if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox") != -1 )