Digital Portfolio Site
To design and implement a portfolio website which would showcase my projects to date and me as a designer, creative thinker, problem solver, maker, researcher, coder, programmer, storyteller, artist... etc.
In short, if I want people to hire me I better be able to show them what I can do.
As someone who likes to know how things work and coupled with the way I've been taught to program, I decided that I would build the website myself rather than using something like a Wordpress or Dribble account. The entire site is built using a combination of HTML, CSS & JS, there's also a Processing project too.
I've been refining and updating this site since November 2015 and by January 2016 I had the guts of it built. Now apart from a few tweaks here and there, I only need to update the content with each project as I go.
- Although I have worked on parts of web projects before, this is the first time I have brought a website from conception to implementation to completion stages.
- I studied Web Development in college, but being taught in a modularised way meant I had to join the dots myself.
- Often there is an option to implement features through CSS, JS or jQuery. There isn't necessarily a right way, but perhaps there is a better way.
- This is the first project I have undertaken outside of college, I didn't have my peer network or tutors to check in with daily.
- Creating a coding workflow across the HTML, CSS & JS files.
- Creating an effective workflow for bringing my local files onto the server.
- Building features which were intuitive, e.g users expect to be able to change images using an arrow key.
- HTML & CSS
- CSS Animation & animate.css
- JavaScrit & jQuery
- wow.js & onscroll animation
- Wireframes & Balsamiq
- Hosting and FTP
- Search Engine Optimisation
- Google Analytics & Search Console
- Optimising metadata, including Facebook meta tags
- Optimising images for web use
- Controlling browser caches through .htpaccess files
- Semantic HTML5 tags
I was both client and designer for this project and as a client, I knew how I wanted the site to look from very early on, as demonstrated in my sketches but as a designer there was a lot of trial and error. Luckily, I've been understanding towards, em, myself.
I used JS & jQuery to work out some of the features like the lightbox and portfolio entry reveals. I then added CSS animation to make the site more interesting to look at. I painstakingly cropped and resized every image - there are 83 project images and 22 site images by the way. I usually do the images for a portfolio entry first, it helps me to revisit the project.
There are several things I'm proud of about this site, it's pretty much a one page design - except for the Sokoban and Buckminster Fuller sketches which are hosted on other pages for clarity. But most of all, the image lightbox which is revealed when you click an image and can be controlled using the arrow keys, I'm pretty delighted with that. I coded it all myself with JS working it out over a few sessions: I realised how to make it loop on a plane. I could have used a readymade js script, but nothing feels better than cracking it yourself.
Web Hosting and SEO were new skills for me, when I began I actually thought for a moment How do I get my files onto the internet? Luckily that passed. As a client I'm really happy with the website, it is exactly what I wanted. As a designer, well I haven't made any currency in the form of a job yet, but who says it's all about the money?