eyelearn » planning for your portfolio


a look at design for the web & all it entails

· view menu ·

planning for your portfolio

ink in water Ink Photographs by Alberto Seveso

Time to get serious and design your own portfolio - making your work showing to woo your future client or employer :)

useful reading

portfolios: graphic designers

portfolios: 3D designers

showing & hiding content

cubes demo Let's extend last week's design with some jQuery goodness: smooth in-page navigation and sliding panels. When working with Javascript - always bear in mind that your page should look good and give access to all content regardless. Focus on your CSS first, layout all content and present it well before adding any JS functions.

↓ download source files

mini cubes

smooth scrolling

script courtesy of Devin Sturgeon

$('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });


this code will of course require a specific markup - as used in the given sample.

// custom function for sliding content show/hide function showWork() { $('#folio ul').hide(); $('#folio h4').addClass('hidden'); $('#folio h4').click(function() { // trigger element showing on/off $(this).next().slideToggle('normal'); // remove or add class to selected item (showing the content) var $this = $(this); if( $this.is('.selected') ) { $this.removeClass('selected'); $this.addClass('hidden'); } else { $this.removeClass('hidden'); $this.addClass('selected'); } return false; }); } // activate custom function for sliding content show/hide $(document).ready(function() { showWork(); });

While your final project will be the production of your own website from scratch - you might want to check out the following options, for use either as final site in the future or as addition to your handmade portfolio.

online options

If you know of any other good options - please do share your findings in the comments below, thanks.


This week is our last session before the 3 week break - bear in mind that we will have exactly 4 more sessions before your deadline. During the next 3 weeks make notes of any topics or techniques you'd like to discuss or revisit, bring your portfolio plans as well as your project files if you would like input, feedback and help.
Bear in mind that I will only be able to give you hand if you are clear about your design ideas! If you come unprepared - I will not be able to help you much.

It will be important for you to finalise your portfolio design - so prepare your ideas and concepts as drawings or digital mockups and bring those in for discussions. Work on the coding as much as you can and I will help you solve any issues you are struggling with. The further you are - the more time for support and feedback :)


  1. prisca

    you are approaching your layout correctly, by using floats. Without seeing your code – there’s not much I can do to help.
    If you have sorted out your domain and hosting – you could upload it and share your link. If you don’t, and use dropbox – you could put your files into the public directory and share the public link (read this article for instructions).
    Ideally, use the forum to get answers and help form others too.

  2. Selorm

    I have created my elements for my website I want to position them side by side and it is getting very tricky. I already tried the float function but it has messed the page up. Can I get any help in positioning my element side by side?

Leave a comment