Developing a Mind-Blowing Personal Portfolio in 3 Weeks

by on 15th June 2012 with 2 Comments

screenshot

So you decided you are going to design and develop yourself a personal portfolio. That’s great! You are well ahead of half of the web design and development community. But what about the remaining 50%? You have to show exclusive skills in a tiny space in order to shine in this fast growing industry.

In the past 3 weeks – since I made that decision, I learned a lot about developing a unique portfolio. Now I feel it is time to share this newly acquired knowledge with you.

What I came up after those 3 weeks is a cool game-inspired portfolio.

Week #1: Seek Beyond What You See

At least once every six months, a new web trend is born. It’s so hard to follow all these trends no matter how many blogs and developers you are following on your social networks. One page websites, parallax, sliders, minimalist design and so on… The list of web trends is endless and we could keep counting them all day long.

So, the first thing that you’re going to do is a short research project about what’s “In” regarding web design and web development trends. One good thing about this kind of research is that you’re getting ideas and maybe a first draft of how your portfolio should be. The problem is that it can cause you to seal your mind to creativity and innovative ideas of your own.

An important thing you shouldn’t forget in this week is to write all your marketing material. I think this is one of the hardest parts that you will deal with. It’s not easy to write the things that basically could determine if a client will contact you or not. Write it down on paper and ask yourself the following question: “If I were a potential client, what would cause me to contact me?”

Don’t forget that this portfolio will present you to the world. You have to come up with original ideas, innovative thinking and a portfolio concept that will blow people away.

What I came up with after the first week was a decision: “No matter how hard it will be, I’m going to develop myself a web game based on front end programming”. Three weeks was the time I gave myself to do so…

Week #2: Coding Like There is No Tomorrow

After you’ve got a basic idea, and not a moment before, it’s time to start thinking about the development stage.

I decided that my portfolio will be functional as a web-based game, so I started to search for JavaScript frameworks which could help me save time and work. The thing about frameworks is that usually, they will be good for head start – but in the long-term they won’t fit your needs.

A good example in my portfolio are the lightboxes which supply information about me and activate when a user enters a house. That kind of functionality doesn’t exist on a regular JS game engine.

Now, there is always an option to take an existing framework and improve it by adding your own code, but consider that sometimes diving into somebody else code will take longer than writing your own. Moreover, if you rewrite somebody else’s code, that could be a problem on new version releases.

screenshot

After I passed over a few game engine frameworks, I felt like I have no choice than to build my own game engine that would fit my needs.

Let’s take a quick overview about the main methods that I run in the game.

For handling the arrows keyboard events I used the following code:

$(window).bind('keydown', function(event) {
	switch (event.keyCode) {
		case 37: // Left					
			me.moveX(me.leftPos - 5, 'left');
		break;

		case 39: // Right
			me.moveX(me.leftPos + 5, 'right');
		break;

		case 38: // Up
			me.moveY(me.topPos - 5, 'up');
		break;

		case 40: // Down
			me.moveY(me.topPos + 5, 'down');
		break;
	}			
	event.preventDefault();
});

As you can see, the code is very simple. In case the user press the “Up” or “Down” arrows I call the “moveY” function, and in case of “Right” or “Left” I call “moveX” function.

A quick look on one of them will reveal where all the magic happen:

moveX: function(x, dir) {
	var player = this.player;
	var canMove = this.canImove(x, null);	
	if(canMove){
		this.leftPos = x;
		player.animate({'left': x + 'px'}, 10);
	}
}

For each user step I check with a special method called “canImove” (Can I Move?) if the character can move over the game canvas. This method includes screen boundaries, house positions, roads limit and so on… If it can, I return True and the character keeps moving, else I return False and the character stays in its current position.

Now, because we are still talking about the web, I had thoughts that moving with the keyboard arrows is not enough. You always have to think about the end user – your potential client that maybe doesn’t have the time to “hang out in your world”. This is why I added both a navigation bar and an option to “teleport” the character directly to a specific point in the game.

screenshot

The “teleport” method looks like this:

teleport: function(x, y) {		
	var player = this.player;
	player.css({
		opacity: 0,
		top: y,
		left: x
	}).show().stop(true, true).animate({opacity: 1});
}

I get the “x” and “y” parameters from the mouse click event with “event.pageX” and “event.pageY”, after I have both, I change the player CSS “left” and “top” properties and use the jQuery “animate” method to animate the player’s opacity – so I could create the “Fade” effect.

One good tip that I can tell you that unfortunately I learned the hard way, is to keep your code as dynamic as possible. Write code in such a way that if you want to add more content to your portfolio in the future – your code will support it.

Week #3: Feedback Is Your New Best Friend

The last week of my portfolio development was very tricky. I had to close final design touches and code stuff while I fought myself not to publish it already. It was like keeping a secret that you’re not sure is completely true.

I found a solution to this annoying contradiction. Take ten people you know and trust, show them your work and ask them for feedback. Preferably, those ten people should be completely unlike each other. Here are the ten people I chose for this top secret mission:

  • My Mom
  • My boss
  • My best friend
  • My 6 year old nephew
  • A senior web designer
  • A senior front end developer
  • A potential client
  • A client I worked with
  • A QA engineer
  • Another super-multi-ninja web developer (Just in case)

Ask them to give you feedback about anything. Starting from your mom that tells you “It’s not working on my computer!” (Well duh, you’re using IE5.5…) which reminds you that you have to write some IE fallbacks, to your 6 year old nephew that amazingly enough can give you a free usability test, and finally to your boss and the “ninja web developer” who will give you a painstaking detail code review that can help you to improve your code and make it even more efficient.

You have no idea how many good changes feedback can get you. Stick with it.

Conclusion

Although developing a personal portfolio is definitely not an easy task, it worth every penny. I learned a lot from this process and got some really great feedback.

Take the time and think about your own unique and “mind-blowing” idea for your portfolio, don’t hesitate to consult with other people about design, user interfaces and marketing issues, and always remember the most important thing… have fun!

Comments & Discussion

2 Comments

  • ev0

    Oh man this is awesome! I was hoping for some pokemon music haha. Really really inspired here. Thanks for this!

  • sceder

    good pictures))))

Subscribe
Membership
About the Author