Interactive CV Project

Designs

Have you seen Premii’s interactive CV?

Or Keith’s design which is close to mine?

What about Eugene’s squiggles?

These are a few examples sourced from this post on interactive CV’s. This may not be everyone’s cup of tea but if you want to work in the field as a designer-developer, then this is essential.

Why did I do this project

Well I sort of already explained that but to give it more meat, here’s another reason: I have nothing in my portfolio page and I do need to fill it up with something if I am to be taken seriously. Firing a showcase piece of work is a good start

[the original posts to this project is located here then I followed it up with this post and with this post].

How I started

I had 2 issues with building the CV from scratch: time and ignorance. Ignorance from the point of view that I was going to miss out on all the rich foundational work that’s been done before by others.

So for example, when I had a look around at what I could use as base code, then Twitter Bootstrap and Zerb Foundation leapt out.

Then while surfing one day, I was reminded of the parallax scroll and great effects one could accomplish with it. And so I stumbled upon this base framework from Andrew and thought: “This could be the base foundation“.

My prototyping process

Pen and Paper

1.  My first step is the ol’ pencil and paper, then I sketch out designs. This to me will always be the first step in prototyping an idea as it allows to create likely candidates of what the end product may look like and it allows you to fail fast (and therefore allows you to move on to the next design before committing to a sub par design). For example, if I used Balsamiq then I would have wasted more time moving elements around and would have locked my designs to a specific software.

High Fidelity Mockups?

2.  I then earmarked myself to create higher fidelity wireframes at first, but then for this exercise I found that the process was too long. I believe that high fidelity wireframes have a place in ‘client – service provider relationships’ but in this instance, I was playing the part of both. This step was therefore not required.

Rapid Prototyping

3.  I found it simpler to start developing the CV in CodePen real-time. And so I went through this process iteratively, discovering a few things along the way.

The Minimum Viable Product

So without further BS, here’s my online CV as my Minimum Viable Product:

High Level View

Birds eye view

Gallery

Some specific features include:

  • Parallax Scroll: This is a not-so-often view of my home town Sydney. If you scroll down the page, you will notice the parallax effect when the image comes out more as you scroll down the page.

Sydney

  • Tooltips: There are keywords within this CV lightly coloured in dark blue (or {color:darkslateblue;} in CSS). Once you hover your mouse over that keyword, a pop up will appear (or a:hover {color: orangered; text-decoration: none;} in CSS).

Key Words

  • Online Presence: I have a similar effect here in the social icons below. Once you hover your mouse over them, they expand and present the full name of the icon e.g Behance per example below.

Behance selection

    • Back to the top button: I have not written a single line of JQuery up to this point and I simply cannot let a project pass without injecting some interactivity (although CSS was doing a good job at this point).

And so if you hit the Back to Top button (as shown on the above image), it will do a slow scroll back to the top of the page.

This was performed using:


$('#slowscroll').click(function() {
$('html, body').animate(
{ scrollTop:0 }, 5000);
return false;
}
);

  • Writing: Dare I say another key feature was writing this all up which took a big chunk of my time. In fact this process was not as easy as rehashing my CV; this required careful thought on how I wanted to tell my story and position myself in the future (not to mention I didn’t want it to look boring or common).

Limitations of MVP

The one limitation I have with this product is that the parallax scroll does not work on mobile devices (mobile/cell phones or tablets). This is not to say that the design is not responsive because it is to a degree; got some work to do with the parallax image and converting pixel to root em (px to rem for the techs) for content. But I also discovered that  there are limitations with parallax scroll in mobile devices.

This post made an attempt at for parallax scroll on tablets and mobile phones but the example fell over when I check it with on my iPhone.

This post also contains links on possible solutions. I have not gone through all the responses, but I will check it out for a future release.

With that said, since this is an MVP..

Roadmap for future releases

I do intend to extend this project in the future and I’ll probably start by purchasing a proper domain name.

Even though time was not a factor, there are a lot of other features that I have had to trade-off in the interest of time (just because we don’t want to develop forever and a day).

For example I wanted to include a portfolio page like Keith but I’m clearly not ready as I do not have an extensive portfolio to show off.

I could also make it even more interactive by adding a few more JQuery lines but I’m just short on JQuery practice (and so I don’t know what I don’t know – but I am working towards to getting there!)

Tech thank-you’s

I created this myself in 3 weeks using my spare time. But there are a few guys out there that I need to thank:

  1. Andrew for parallax framework
  2. Paul for tooltips
  3. Sunny for social icon idea
  4. Font Awesome for being awesome
  5. Unsplash for free images via CDN
  6. Bitballoon for hosting.

I would have added another week of development and design if it were not for those guys.

The Final Episode?

This is my Githubabble MVP. My roadmap for future releases will be more dictated by time and finding features worth adding to this project. I am quite proud of this effort, having started 3 weeks ago (inside my target 1 month). And not to mention I only picked up design – development work this year (with limited time too).

I am about to start a new project soon and it will leverage my work with this online CV project.

Catch you guys soon!


PC MMAAbout this challenge

This is part of my constant evolution as a web designer / developer. Practice makes perfect and I’m a long way off. But I’m stepping on the gas and constantly move forward.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s