10 Fresh & Inspirational HTML5 One-Page Portfolios

Categories Articles

It’s been a long time since we published an inspirational roundup on InspiredMag but here we go again – better later than never. Check out these amazing website that use HTML5 and sport a neat vertical scrolling system as well. Let me know what you think and feel free to contribute with more links in the comments area.

The City is Burning

Pete is a web & multimedia designer from Leeds and has an obsession with pixel perfect design!

Rob Edwards

Long scrolling design – great use of typography and illustration. Beautiful!

Pixel Odyssey

Beautiful clean but effective use of colur and texture, what a great portfolio!

Pink Turkey

Quirky use of illustration and a great example of a single page scrolling HTML5 portfolio.

Hello I’m Tom

Lovely color palette with a great focus on projects, nice balance of text and imagery with the alternate alignment used.

Keebs

Minimalist design beautifully crafted in HTML5, such clarity!

Ogilvy Interactive

Great use of HTML5 and grid layouts, very similar to the site above. I love the footer on this one!

Catalytic Design

Nice way of displaying a huge amount of content in a single page. Scrolling can be interesting!

Carl Rosekilly

Not a very long page but a great use of neon colors and imagery on a dark background. Usually a very difficult style to pull off successfully.

Ousmane Ndiaye

Nice palette and use of textures.

Rainy Pixels

This one has a newspaper feel to it and incorporates a great collection of small but impressive illustrations.

Your turn now – saw any cool HTML5 portfolios recently? Ping us and we’ll update the post. Rock on!

<a href="http://twitter.com/zorzini">Catalin</a> is the founder of <a href="http://mostash.com/">Mostash</a> - a <a href="http://mostash.com/">social marketing boutique</a> - and he's always happy to share his passion for graphic design & social media.
  • Eric Cran

    hey nice post!

  • Nice list. Check out http://www.1pagewebdesign.com for more examples of one-page sites! :)

  • Amazing selection, great portfolios, fresh designs, html5 coded one page sites. La creme de la creme :)

  • fractalfrog

    Pink Turkey might be nice but it is NOT a one-page portfolio.

  • very nice selection! especially catalytic design is a real good piece of work. my compliments.

  • i love this post. so cool!

  • Wow. Impresionante. Gracias por el post.

  • I’m just curious what makes the fact that they are done using html5 worth highlighting? Is there something about any of them that couldn’t be achieved without html5? It’s sort of like trumpeting that a website uses css3. So what?

  • @ChrisRaymond

    Good question! With a lot of the core HTML5 features not being fully supported yet there’s not a huge amount that you can do. It’s more about embracing the future of the web and using some of the supported features and meaningful syntax.

    My website is the ‘http://www.thecityisburning.com’ one in the article above.

    Some of the HTML5 / CSS3 features I used are:

    – section, header & footer tags to help organise my page better and reduce the amount of divs needed.
    – embedded custom fonts
    – moz-highlight attribute, try highlighting each section on my website, you’ll see that it highlights in each colour (not working in all browsers though!)
    – better use of syntax, being sure to use h1 and p tags more
    – text shadow stylings
    – HTML5 contact form

    Granted it’s not a lot and you could replicate most of it in XHTML but I would highly recommend making a website entirely in HTML5 just to get a feel for it.

    I’m looking forward to more features being supported in the future though!

    Thanks for including my website inspiredmag :)

  • Thanks for the feature, very much appreciated ;-)

  • Nice list. I like the color combination of Carl Rosekilly.

  • I would like to share my portfolio
    http://www.alaabadran.com

    Hope you like it :)