- Best viewed in Chrome and Safari
- Basic HTML knowledge required
- Includes HTML, CSS and javascript files
- 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:
About Page
The about page is pretty straight forward, you can replace the text and image to customize it.
Portfolio Page
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.
Contact Page
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.
Enjoy 
EDIT:
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 )
With:
if( Modernizr.csstransforms3d && navigator.userAgent.indexOf("Firefox") == -1 )
And on line 101 of the index.html page replace:
if( !Modernizr.csstransforms3d )
With
if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox") != -1 )
Hey Jon,
sorry for my english. I found you because i looked for solution to fix the trouble with the great slicebox plugin. today i found e working solution by myself. I hope you agree if i post my solution on your blog, because the comments on the project page are closed.
first you need two helper functions.
var crossBrowserIt = function(data){
if($.browser.webkit){
return ‘-webkit-’ + data;
}
if($.browser.mozilla){
return ‘-moz-’ + data;
}
if($.browser.msie){
return ‘-ms-’ + data;
}
if($.browser.opera){
return ‘-o-’ + data;
}
}
var returnObj = function(name, val){
var obj = {};
obj[name] = val;
return obj;
}
I think there is no reason to these functions.
for example:
side2 : returnObj(crossBrowserIt(‘transform’), ‘translate3d( 0, 0, -’ + ( this.size.height / 2 ) + ‘px ) rotate3d( 1, 0, 0, -90deg )’)
returns with firefox:
side2 : {-moz-transform: ‘translate3d( 0, 0, -’ + ( this.size.height / 2 ) + ‘px ) rotate3d( 1, 0, 0, -90deg )’}
with safari:
side2 : {-moz-transform: ‘translate3d( 0, 0, -’ + ( this.size.height / 2 ) + ‘px ) rotate3d( 1, 0, 0, -90deg )’}
best regards, marco
p.s. i like the way you work!! nice websites!!
Thanks Marco!
Hello, what goes between the brackets of navigator.userAgent.indexOf( ) ?
I am having the same problem.
Thanks
Hi John,
Just put “Firefox” in the brackets. It should fix the issue with Firefox.
Regards,
Jon
@macro : Where to put the code
var crossBrowserIt = function(data){
if($.browser.webkit){
return ‘-webkit-’ + data;
}
if($.browser.mozilla){
return ‘-moz-’ + data;
}
if($.browser.msie){
return ‘-ms-’ + data;
}
if($.browser.opera){
return ‘-o-’ + data;
}
}
You gave above! Please reply asap
what about IE
hi…its doesn’t support in IE…after i got updated to IE9
Hi Prem,
Sorry for the late reply. IE currently doesn’t support CSS 3D Transform, but the slide show does fallback as to not break the site. So when a user views the site in IE they will just see a standard slider.
Regards,
Jon