Project Description

I needed a portfolio website in order to showcase my abilities and gain work as a web designer and developer. I take pride in everything I do and I knew that I had to take extra care with this project as it would help me line up more interesting work.

I wanted to do something really simple and clean by using as much white space as I could get away with. A lot of websites at the moment are split into alternating coloured blocks where the sections are clearly visible. This was a look I knew I wanted to avoid as I wanted to stand out as much as possible.

With this in mind I chose three colours initially - black, white and grey and began splitting content out using simple grey HR tags which would subtly lead the user to the next section. This is done without broadcasting that there is a section at all. I think what this does is introduce a flow to the content and also entices the user to scroll further.

I wanted to display a large image in the background that would really grab the users as they land on each page. The photo I chose for the home page header is of a past trip I had to Swan park in Buncrana. This makes the site personal straight away and this is clear to the users. To this effect I also added a section containing images of past experiences I have had with friends and family and on my own. These images give a little insight into my personality without going overboard.

In order for me to benefit from the site I needed to be clear about what I am offering. Being a server-side developer for the most part of my career to date I wanted to use this as an advantage. The advantage of having someone who has a passion for web design but who is also proficient at coding. To highlight this I used two SVG graphics which are very visual and easy on the eye.

Whilst I built the pages out to display the relative information about me and my services I began to dabble with the idea of adding some server side code to the site. I decided to build a blog engine and I did this using PHP and a MYSQL backend database. In addition to this I built nested comment functionality to allow users to leave comments on individual blog pages.

I did not have great PHP experience prior to this project and decided to use the language to improve my ability with it. In line with this I also chose not to use an HTML framework such as bootstrap. The reason for this is because I wanted to achieve a deeper understanding of responsive web design. I also believe that these types of frameworks are bloated and contain a lot of things you don't need. This project was completed with pure HTML, CSS, JQuery and PHP.

I also developed an administrative backend for the site in order for me to be able to post new blog articles and approve/decline comments. You can see some screenshots of the admin backend below...

Project Type

Personal Portfolio Creation

What I did

  • Website Design
  • Blog Engine
  • Nested Comment System
  • Responsive Website Design
  • Administrative backend

Technology used

  • HTML5, CSS3/SASS, JQuery, Ajax, PHP,Photoshop
Visit website

Admin Screens

Follow my blog

Enter your email to receive notifications of my latest blogs.

I'll never distribute your email. I'm anti spam.

Follow me on Twitter

I tweet what I find interesting about design & development. Nothing else.

Follow

Hire me

Need a responsive mobile-ready website? Get in touch.

Drop me a line