Free website template: present your portfolio online in a single webpage
We are about to introduce you with another free resource: this time it’s a website template that is developed in a single page and that will allow you to present your works on the web.
After demonstrating to you, step by step, how to design it in Photoshop, we have codified the graphic layout and now we can release the real site in (x)HTML and CSS.
Live Preview Your Inspiration Folio
Versione: 1.0
Pubblicato: 07 December 2009
Dimensione: 5.8 MB
Download: Your Inspiration Folio
Characteristics of Your Inspiration Folio Template
Your Inspiration Folio is a free template which allows you to be present on the web in a professional way thanks to a simple and functional layout at the same time.
The entire website is developed in a single page: in fact, it is this peculiarity which makes this template outstanding; particularity that is taking hold more and more in freelancing sites lately.
A more detailed view: under the hood of the template
Despite being a single page layout, it is not necessary to scroll with the lateral bar in the browser to navigate through the various sections of the site since a javascript has been used which enables the shifting from one section to another by means of an animation effect: enough clicking with the mouse on the navigation link.
The part that encompasses the menu remains always fixed on the screen, while the various pages are alternated from time to time in the central section of the template. The limitation of the height dimension in the left section is owed to this fact so as to allow the display even on the monitors of users that use lower resolutions (es. 1024×768).
Typography also has its own importance
A lot of attention has been dedicated to the typography as well: the choice of font, interline, blank spaces, everything to render the aesthetic equilibrium generated at first sight more harmonious.
For the main section titles, the navigation menu and the Homepage content, it was decided to use a non standard font (denominated “dustismo”) that complies with the rest of the graphic items used.
The font has been implemented in the inside of the template with the utilization of the Cufon method in order to render the personalization much easier: to personalize these items, it will be sufficient to modify the text content inside the(x)HTML page.
The various sections Your Inspiration Folio is composed of
Home Page
It is the main page that is displayed once you are on the website. In this section, you can add a slogan, a phrase, a quote which enables you to introduce the users with the message you want to transmit and communicate in a few simple lines.
About
In the About page you can insert some information on yourself: title of study, eventual training courses attended, certificates, diplomas. Or you can describe your dreams, your work experiences…in a few words everything that can represent you on the web in a decisive and original way.
Insert a small picture or even a cartoon just like the one I have inserted: nowdays illustrations are the trend!
Portfolio
This section is entirely dedicated to the exhibition of your works. For this particular purpose Fancy-zoom has been used, a plugin of the Mootools framework which allows the display of image enlargement by means of an animated effect. Moreover, in order to make the inserting of your works easier the timThumb script php has been used which is capable of automatically generating the miniatures with no need of losing precious time for doing them manually.
Contacts
Those visitors of your website who want to get further information like preventives or something, they will find in this section a contact module that will enable them, in a simple and intuitive way, to directly send an email to your inbox. Also, in this page you can insert other information such as telephone numbers or addresses, in case you want to give the users an alternative contact option.
What does the package include?
Inside the archive that you have downloaded, we have included:
- The Photoshop (.psd) source file so that you can easily modify the graphic elements of the template.
- The folder of the theme in (x)HTML & CSS.
- Screenshot and a brief description of the theme’s characteristics.
- Users license.
Support
If you are having difficulty in the personalization of the template or if you need to clarify any doubts , you can drop a comment to this article or visit our support forum. If you need, open a new thread: we will answer as soon as we can.
License and credits
The template is released under the license Creative Commons Attribuzione 3.0; this means you are free to reproduce, distribute, or modify this work provided that you attribute authorship to us leaving unaltered our credits on the theme.
This is a trivial thing if you take into consideration the work we have done; moreover, we have struggled to render this template graphically captivating and simple to personalize, and now we are offering it to you for free. What we are asking you for is to recognize and make our work know to others.
Your Inspiration Folio by Your Inspiration Web is licensed under a Creative Commons Attribuzione 3.0 Unported License.
Live Preview Your Inspiration Folio
Versione: 1.0
Pubblicato: 07 December 2009
Dimensione: 5.8 MB
Download: Your Inspiration Folio
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
86 comments
Trackback e pingback
-
One-page-folio: How to create a layout for your portfolio? | Your Inspiration Web
[...] Thus, you’ll have a free original and creative template for your portfolio, in xhtml and css. Down... Versione: 1.0Pubblicato: ... -
20+ Free Portfolio Templates, Themes And PSDs :: Graficznie
[...] Your Inspiration Folio (With PSD) (demo) [...] -
20+ Free Portfolio Templates, Themes And PSDs | Site Design Tips
[...] single page portfolio template with a unique design that has a slider and tooltips integrated.Your Inspiration Folio (With PSD) ... -
20+ Free Portfolio Templates, Themes And PSDs - Programming Blog
[...] Your Inspiration Folio (With PSD) (demo) [...] -
20+ Free Portfolio Templates, Themes And PSDs | Seventy Seven magazine
[...] Your Inspiration Folio (With PSD) (demo) [...] -
20 plantillas gratuitas para tu portafolio | VisualGraf Comunicación
[...] Your Inspiration Folio (PSD) (demo) [...] -
wp-popular.com » Blog Archive » Free website template: present your portfolio online in a single webpage | Your Inspiration Web
[...] this link: Free website template: present your portfolio online in a single webpage | Your Inspiration Web Tags: design, ... -
WhiteFolio: a free template for a portfolio (but not only) elegant and creative | Your Inspiration Web
[...] released in the course of this first year of blogging (don’t tell me that you lost YIFolio and YIMinimal!), we ... -
10 Free WordPress Portfolio Themes « Web Design Tutorials | Web Design Stuff
[...] 2. Your Inspiration Folio [...] -
10 Free Minimalist HTML Portfolio Templates
[...] Your InspirationFolio Graphically beautiful and great for freelancer and individual web/graphic designers. [...] -
Free One Page Portfolio Templates | manic subsidal
[...] Your Inspiration Folio [...] -
20+ Free Portfolio Templates, Themes And PSDs | The Web logix Blog
[...] Your Inspiration Folio (With PSD) (demo) [...] -
Parallax Resume Templates Free Download « Free Web Templates Online
[...] Download [...] -
40+ Creative Portfolio Website PSD Templates
[...] Your Inspiration Folio Template – MORE INFO [...] -
40+ Creative Portfolio Website PSD Templates | Web Development, Search Engine Optimization, Social Media Marketing Guru
[...] Your Inspiration Folio Template – MORE INFO [...]
this is a great template, I loved the one of a kind idea of this one, thanks for sharing
Welcome to Your Inspiration Web, Mars,
and thank you for visiting
It takes a lot of effort creating these resources and we’re glad our readers appreciate them
Will there ever be a tutorial on how to take your own custom PSD and code it into this fantastic “one-page-awesome-scroll” layout?!
Please I really need help with this I’m a beginner on code
I’ve tried to look on the code but I only understand half of it
Hello. Nice template, but I’ve got two problems:
1 – i cannot download it anymore
2 – scrolling crashes on the opera – when i click anything but “home” from the menu – the page go straight to the “contact”. Also, some screen flipping appears.
this is awesome, i downloaded and will use is soon. thank you soo much
Really nice, i use it form my Portfolio!
Ty
Nice Design
but doesnt work with OPERA ….
Thanks for your comment, we are going to fix it.
yhea, seen the problem is scroll.js. I think is a Opera bug, becouse i test it with all other browser and it work well.
The form!! If i send without fill the form, i receive anyway. This becouse the text box is alright filled with “Name”, “Email”…
How i fixed that?!?
PS: sorry my english
I found a bug in IE8. The anchor is not correct in IE, the links are out of line.
fcuk ie. it shouldnt be called a web browser.
This is awesome!
Hello,
Can you tell me what fonts do you used ?
Best regards,
Andrei
I found the font – it`s dustismo. But there is a problem in Opera with page scrooling. Is there any way to fix it ?
Thank you,
Andrei
It’s an bug of Opera, we can’t fix it…
I love this template…is there a way to get SWF files or animated GIFs to work in the lightbox?
Hi Lorrain
I’m sorry, but Fancybox Js doesn’t works with swf, only images. Maybe you can replace Fancybox with Fancyzoom and use this javascript to include swf in this template:
http://videobox-lb.sourceforge.net/
Let me know
I’d like to use this theme for Safari on iPad and iPhone, but on my iPhone the scroll function doesn’t work, like on my Notebook. Anyone who can help me out?
Do you have to have wordpress installed to use this? There are no installation directions. Do you just upload it and it works without any configuration?
Hi Henrietta, this isn’t a WordPress theme, sorry..
how the h3ll do you install this in joomla? there are no install instructions.
I’m not sure what’s different, but the tomthumb script doesn’t work on the file I downloaded, even though the code looks identical in both index.html and tomthumb.php. Does the site have to be uploaded to a server for the script to work or something?
i got the same problem too. why does the images in the portfolio thumbnail doesn’t show up?
Thanks.
me too! I have the exactly same problem….
can this be used for Joomla? I can’t get it to install
No, it’snt a WordPress theme, sorry..
Thank you for such a good template
HI guys , can I change the logo ? I will use it for a friend of mine need a portfolio for her art work but she cant modify or work on computers …:P
let me know what it needs to stay on the template.
Hi Alejandro, sure, you can change the logo
i got the same problem with Ben above. why does the images in the portfolio thumbnail doesn’t show up?
another thing, how can i add another balloon so that there will be 2 or more balloons in the portfolio?
hi,
there is a php script “timthumb.php” for thumbnails, you’ve to put the template in php server
yeah. i was wrong. should have uploaded it on a php server. i only tested it offline. thanks for the help.
Hola, estoy utilizando la plantilla, pero tengo un problema y es que las imagenes en miniatura de la página de Portafolio no se muestran todas solo salen ocho, y además se salen del globo podrían ayudarme a solucionarlo, muchas gracias
hi
, really a great work , best free template ever, thank you guys 
just there is problem with ie9 … some text missing when JavaScript activated ?
thank you
If you don’t fill out the form on the contact form the code appears?
How do you fix that?
you’ve to run the template in a php server to call the script
Greate freebie.
Many thank
Contact form doesn’t work.
Just filled in the name and it responded email sent successfully.
Please advise.
Thanks!
I just realized the form isn’t working for me either, even though it says the message has been sent successfully. Please help us out!
Thanks,
-Jessica
*** Need answer to reply above ***
Contact form not working!
Thanks!!
Downloaded again as psd file seems corrupt (Photoshop 6.0). Can someone test and confirm?
how do i add the timthumb template to a php server?
Installed site on a PHP server and thumbnails don’t show up…is there a specific location we need to put the timthumb template? Thanks so much, it’s a great template!
Hot news! On Google Chrome 12.x menu JS doesn’t work! It worked on versions 11.x but on 12.x it’s not working at all.
yeah I noticed this as well.. any solutions ?
Meanwhile I found solution – make anchors (a#about-page, a#contact-page, etc.) display as block elements (for example , or add css style – a#about-page, a#contact-page {display: block;}).
ahh nice fix.. thanks =)
Need an answer to my question (post #37), please.
I have waited 3+ months.
Thanks!!
Having major issues with the template working and displaying correctly using IE9.
Perfect on all other browsers. Any solutions?
Thank you .
Luke
@Luke.. I’m having the same problems unfortunately!
Lovely theme. Very simple with good character.
Yes, I must admit I was very disappointed to build a couple of pages based on this template only to discover the IE problem.
Probably no fault of the designer as it is certainly an IE9 issue and the design was no doubt built before then.
Trouble is, I used this as a quick solution and don’t have the time to debug – if anyone manages to resolve the issue (the pop-ups are displaying as their own blocks with the loading.gif displaying), please post on this page.
Excelente Trabajo, se adapta exactamente a lo que buscaba
y lo mejor de todo es que es gratis 
no ganan dinero, pero se ganaron un lector nuevo 
Sigan diseñando de esa forma, saludos desde Republica Dominicana
All of your templates are so good!
Thanks for your comment
Hi, used Pengbos wp-theme based on this and made some changes at http://www.vivavox.se
Want to thank you for a great piece of work
incredible one. thank you.
I am good web designer. I realized that the new techniques are really helpful to design.
does not work on ie 9, any solution?
Okay… I may be missing something here, but what is the font used inside the Add Me on Skype image? I’d like to change “your nickname” to my nickname. Thanks!
In the portfolio only shows 10 thumbnails, and published 14 … how do I show more?
thank tou very much I going to used it for my academic portfolio.
Hi,
Use the FancyBox instead of Fancyzoom, is fully working by Jquery not using Mootools. It’s works fine in all browsers include IE9 and below and have same effects as Fancyzoom.
URL: http://fancybox.net/
beautiful template. I will use in a future project, I liked the design. Nando Congratulations!
Oh man, thanks for share this template, i’m use on my personal portfolio!
Thanks again!
Hi, many thanks for the free template. I’ve been using this for my portfolio site for a long time. I was wondering if we could expect a wordpress theme of the same
I’ve been wanting to include a blog on my site as well. Thanks again !
beautiful and responsive theme, i am using it to create my own portfolio.
thanks
Hi. I’m Andrés. Could you tell me how can I use this template in Blogger? Thanks.
THANKYOU aDMIN….
Trank!, its great template