How to Build a portfolio site

When people will visit your site they will want to know about who you are and what you do. They will be rarely interested in knowing 'everything' about you. So, limit the number of pages on your portfolio site. The most important pages in any portfolio are the pages that tell the visitor who you are (index.html), what you do (projects.html) and how they can get in touch with you (contact.html). So here is what you need to put in these pages.

Many argue to have the portfolio as a Single Page site. But a single page site will have to load all the data at once. This slows down the loading speed and thus affects the user experience adversely. These sites are optimized by using progressive loading and browser caching features. Using these web technology requires deep knowledge of HTML, CSS, caching and browsers. Therefor, unless you get familiar with these techniques, I suggest to avoid using a Single Page approach.

The Landing Page

The landing page is the first page your visitors will first see. Thus, it is probably your home.html or index.html. And you are aware that ‘the first impression is the last impression. So, take time in deciding the structure of this page. The background, colors, typography and images should be so attractive that the visitor will definitely try to explore more of your site. The first part of screen (without scrolling) should clearly define what the site is for. For example, when you visit findakshay.in, what you see first is the line “I’m Akshay. I design and develop software, websites and apps”. This clearly mentions what the site is for and who the site owner is. Use similar one-liners for your landing section.

You can even try some creative writing here.

For example, if you’re a photographer, use– “I’m Akshay. I create beautiful pixels.”

If you’re a software tester, write– “I’m Akshay. I break and crash software.”

The Projects Page

The projects page is probably the most important page/section on the site. You may show off your remarkable work here. To put here, I recommend detailing only the recent, most important and challenging work that you have performed. Limit other works to one-liners. Among all the projects I’ve done in my freelancing I decided to exhibit most effective project so that the person reading it won't get ‘bored’. By showcasing your work, our goal is to create a sense of trust with the reader and not to overload him/her with a huge list of words.

For your projects, collect/create following information

A clear title for the project

A one-liner (subtitle) for the project domain

What was the objective of the project?

What were the challenges in this project?

How did you overcome the challenges and difficulties?

What are the technologies you used for the project?

An image/photo of your work, or an abstract/vector art representing your project.

For an example, visit my projects page and see how I have detailed my projects there. Keep this information to-the-point, one or two paragraphs for each project are sufficient.

The Contact Me Page

Contact page will allow your visitors to contact you directly through you website. So, having a contact form on your site is very important. Don’t ask too much of information for contacting you. Fields such as name, email and message are sufficient. Building a contact form is probably the only ‘backend’ work of your site. You’ll have to create the form using language such as PHP. But, what I’ll suggest for the contact page is to reuse existing contact form scripts. The reason is, these scripts that are developed by the community are thoroughly tested. You don’t want to miss a message for a great offer because of an unknown bug in your contact form.

Reusing the scripts does not mean that you don’t have to write some code. There is no script that works well on the first run. You’ll still have to make few changes to the downloaded script to make it work for your website.

A note about 'code reusing' : Most people think that if you are using other’s code you are not a ‘real’ programmer. But, programming isn’t all about typing the code, the magic happens when we all collaborate with each other. A ‘real’ programmer does not waste time in repeating code. Reusing existing code, modifying parts of it and making it work for you is also a great programming skill. Reusing the code and Copying the code is different.