JD Portfolio template

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files

jdPortfolio has a public repository onBitbucket

This is a free portfolio template created using HTML, css and jquery.

HTML Structure – top

It is organized in 2 main areas: Navigation and Content (About, Works, Projects, Contact)

HTML Structure

Menu Editing – HTML

To edit the menu is a little tricky. First of all you have to add a “li” in the “#navbar” container as follows:

Menu Item

After doing this, here you can see the changes for the javascript part.

Add work

To add the details about one project, you just have to duplicate one of the divs that have the class “.prjinfo” and all of its content. Then change the id and the class “iit_number” (highlighted areas).
To add some preview screenshots of your work, add as many images as you want in the “item_slider” div. (for the screenshots you can use ‘slide_works.psd’)

Work Details

As for the thumbnails, go to the “#prjGrid” div and add an item with the id “it_number” like this: (for the thumbnail you can use ‘thumb.psd’)

Works grid

Add project

For adding a project, duplicate one of the divs “.pprj” with all of its content, and then modify the details, including the screenshot. (For the thumbnail you can use ‘thumb_project.psd’)


CSS Files and Structure – top

I’m using two CSS files in this theme.
“skins.css” contains the tools container, used to switch the colors. Also it contains all the classes and ids that are color related. If you want to remove the tools container from the html file, you can change the color theme by adding a color class to the body.
The “style.css” includes the reset for the css. Here you can find all the classes and ids that you need. The file is structured as follows:

    
/*                                                   RESET
__________________________________________________________
*/

    some code

/*                                                  GLOBAL 
__________________________________________________________
*/
    
    some code
    
/*                                                  LAYOUT 
__________________________________________________________
*/
    
    some code

/*                                              TYPOGRAPHY 
__________________________________________________________
*/
    
    some code
    
/*                                                   LINKS
__________________________________________________________
*/

    some code
    
/*                                              TOP NAVBAR
__________________________________________________________
*/

    some code
    
/*                                                   ABOUT
__________________________________________________________
*/

    some code
    
/*                                                    WORK
__________________________________________________________
*/

    some code
    
/*                                                PROJECTS
__________________________________________________________
*/

    some code
    
/*                                                 CONTACT
__________________________________________________________
*/

    some code
    
/*                                            QUERY LOADER
__________________________________________________________
*/

    some code

One more think about the css that should be mentioned is that I use google web fonts for importing ‘Oswald’ font, that you can find here.


JavaScript – top

This theme imports seven Javascript files.

  • jquery.1.4.2.min.js – jQuery
  • js.js – My custom scripts
  • sp.js – move divot scripts
  • skins.js – tools scripts
  • jquery.backgroundposition.js
  • jquery.smooth-scroll.js
  • queryLoader.js

Menu Editing – Javascript

In order to make the divot work, you’ll have to open the sp.js file, located in the “js” folder. Below I have highlighted what you have to add.

HTML Structure


HTML Structure


HTML Structure

The number “400″ that you see it keeps repeating, it’s the distance between the middle of the divot and the right margin of the “#navbar” container. This distance varies depending of the length of your item text.


PSD Files – top

I’ve included five psds with this theme:

  • PageLayout.psd
    This is the main layout for the theme.

  • Sprites.psd
    This contains the images for the icons and the navbar. I also did the slicing sctructure for you.

  • SlideWorks.psd
    You can put your screenshots in the Images Group.

  • ThumbProject.psd
    You can put your screenshots in the Images Group.

  • Thumb.psd
    You can put your screenshots in the Images Group.


Thanks for downloading this theme. I’d be glad to help you if you have any questions relating to this theme.

Your support:





Top

59 Comments

  1. Pingback: 13 Free One Page Html/CSS Templates | Allxnet

  2. Pingback: 13 бесплатных одностраничных html/css шаблонов | Tyupin K.

  3. This is a very nice design… i would love to download the whole package, including the PSD’s files, but I don’t have idea how to do that.

    Would you let me know please?.

    Thank you,

    Have a wonderful day!

  4. Pingback: 13免费HTML / CSS模板 | 编程X资讯

  5. Many thanks for this template.

    I have question, Is there any copyright issue with the template?

    Thanks again

  6. Really great template I am jelous. and Impressed at te same time.
    I just downloded it and I will try to implement it for WordPress.. I hope you don’t mind. Or can I do that?

    Ace
    Cape Town

  7. Very cool and impressive template with a well written code which is easy to customize, congratulations keep up the good work!

  8. Hello and thank you for your template is really awesome!!!
    Im having trouble in IE it displays really bad the menu gets lost and the whole template does not look good. I know is not on the HTML cause I used yours original and is the same thing. If I go to the demo on IE it works fine.
    Also am I missing something or is the php file for send mail is missing?
    I know I may be looking in the wrong place and there may not bee need for a php file to send an email under the contact form but I cannot seem to figure out where or how to do that.
    Thank you so much again.

  9. Pingback: 25 Amazing One Page WordPress Themes | TechZoomIn

  10. hello, your template is amazing!
    just one question about the “work” part: removed the background (line 410 into “style.css”) for the text area for the description.
    the problem is that if i remove the background when i select another work the previous remain on the background.. there is the possibility to “hide” all the other work except the one selected?
    hope my question make sense and hope that you are able to help me!

    thanks a lot in advance!
    Mattia

  11. congratulations cool!
    I have a problem with the navigation bar does not work correctly if I enter a new item menu.
    the tutorial is correct?

  12. hello Mihai Balea, your template is awsum!!!!!!!!!!!!!!
    i have 1 problem in contact us form,as i am not getting mail to my email address,where to put my email address so that it work,i am a newbee plz help.

    thankyou

  13. Great template.
    I seem to have the same issue as other people above though.
    Site does not work in IE, top menu does not follow for example
    On your site it works fine but when downloaded and put on own webserver it stops working

    Best regards

  14. Pingback: Freebies : 13 Single Page Scrolling HTML5/CSS Templates

  15. Pingback: Free Single Page Scrolling HTML5 & CSS Templates

  16. IE CENTERING PROBLEM:
    I was able to fix the template in IE by adding “text-align: center;” to the “wrapper” id.
    This centers the content in IE, like it already does in Chrome and Firefox!

  17. Great template!! I am having an issue with getting the “work” section to work right on my template. Is there a tutorial online showing how to make something similar??

  18. Hello, this looks like a great template for our new blog however my tech guy tells me that he was unable to find a WordPress version to download that could be updated using an ipad. Anybody have any solutions to this dilemna?

  19. Hi,
    is it possible to change the logo on your PSD ? I can’t modify jd. it seems that you don”t use the text tool :/

    awesome design btw !

  20. Hi! I think your JD portfolio with the zigzag background is really great. just what I was looking for. But I need to make the background look a bit more poststructurist, Right now the background you have created is straight lines zig zag.ed. I need atleast 1 soft curve in 1 section of the background. I dont know how to work transparency png or psds. Would you be able to send me a background file that will make the portfolio look really post-structure . Please?Thanks.Azra

  21. Pingback: 50个免费和收费的HTML单页网站模板 | 张斌博客

  22. Pingback: Free HTML5 & CSS Single Page Scrolling Portfolio Template

  23. Pingback: 13免费HTML / CSS模板 | news snack

  24. AMAZING! I love this template, I’m editing it a bit and it fix all my necessity!
    I LOVE THE SKINS FEATURE! :D

    Anyway are there any news about the Contact Form?

  25. The zip file is broken. It says “unexpected end of archive”.

    Is there any other way I can install this on my website? I am not using WordPress or Joomla or anything.

Leave a Reply to Lindz Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>