jQuery Mobile Portfolio Site Template

Sam Deering
Tweet

I have developed a basic jQuery Mobile Template for a Personal Portfolio Site free just for the jQuery4u blog readers! :) Features are specific to portfolios with this initial version of the template you can create a basic Mobile Portfolio Site with personal bio, portfolio image gallery and contact form. This is just the first version so stay tuned for updates.

View Live Demo Download

How to Setup Your Own Mobile Portfolio Site

  1. Download the jQuery Mobile Portfolio Template files
  2. Enter your profile information and add a profile picture or choose one from the cartoon avatars
  3. Create your portfolio items either as single items with or as image galleries
  4. Enter your social links into the JS settings
  5. Enter your contact form name and email address into the JS setting
  6. Upload the site to your domain
  7. Add mobile sniffer code to redirect mobile viewers to the mobile site

Homepage

Very basic clean looking homepage with 4 main sections.

1-homepage

Profile Section

The profile section is pretty basic and can contain personal details you might find on a standard resume such as name, age, location, skills, experience, education etc..

2-profile_1

3-profile_2

If you don’t want to use your own profile picture you can choose from some cool avatars in the Free Social Avatar Icon Set below.
avatar-icons

Portfolio Section

The portfolio section can be used to show examples of your work as single items or as image galleries.

4-portfolio_1

Portfolio Page.

5-portfolio_2

Portfolio Image Gallery.

6-portfolio_3

Portfolio Image.

7-portfolio_4

Social Section

The social section is (at the moment) just links to your online web presence mostly social networks. I have further plans to keep users in the mobile site to view as social streams. We’ll see how this version goes first.

8-social_1

Heaps of social icons!

social-icons

Contact Section

The contact page is a basic web form with submission to a PHP script which sends an email.

9-contact

View Live Demo Download

Comments welcome.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jim McGarity

    Thanks for the template!

    In addition to the great icons, I particularly like the use of navigation buttons (symbolizing “previous” and “next”) at the bottom of each screen. This makes your site much easier to use than just having the back-link at the top of each page.

    • http://jquery4u.com/ jQuery4u

      Your welcome! :)

  • Jugle

    Thank you

  • http://simplyhire.me/ Karim Abdelwahab

    nice :)

  • http://jquery4u.com/ jQuery4u

    For fixed header on template: http://pastebin.com/DtSen6jS

  • adonai

    Very nice template! I will surely use it.
    That’s a pity there’s no “effect” on “+” menu (just like personal profile in profile section). There’s a quick solution for that?

    Thanks a lot for your work