Published on | Prototyping: From UX to Front End — Medium Nikhil Yadav

A descriptive guide on how I designed and developed my interactive portfolio website.

A month ago, I launched my portfolio website and it performed unexpectedly well. There are now around 2200 new users in a month. Since then, many among you have asked me about how I created my portfolio website; what was fun to implement; what was trickier to achieve? In this blog, I will answer all these questions. I hope you’ll enjoy reading it.

Not rocket science

Before beginning with my blog, I would like to clear that creating such websites is not rocket science. All you need is a little knowledge of HTML/CSS/Javascript, and diligence and patience and the openness to get inspired from things around you and things you do. Before reaching on this idea, I created, developed, and scrapped many of my portfolio website designs. You can find some collections of my previous designs below.

Previous one page portfolio designs

Goal of the website

My aim with this website was to show respect for the time of the viewers. Thanks to online applications, recruiters today receive unmanageable number of applications everyday and they spend negligible time (almost 2–3 minutes) on each application. In these 2–3 minutes, they should find that their time spent was worth it and at the same time, they should easily get to know about your skills and profile. While this was my primary focus while designing this portfolio, I also wanted to keep it engaging and fun to use.

Exploration

In a search for answers on how to keep people engaged and how they would like every second of their stay in the website, I read many medium articles on the characteristics of an ideal portfolio and how the recruiters could get to know about the skills and process behind each project.

I explored many creative portfolio ideas over the internet and saw the portfolios of people from different professions. They all inspired me to create a portfolio that reflected the work I do.

Some of the portfolios that inspired me a lot:

Robby Leornardi Resume

Portfolio of a Interaction Designer, Robby Leonardi: The portfolio combines “resume” and “game” to give a live experience of playing a video game while watching the resume.

Dhruv Bhanushali Resume

Portfolio of a Developer, Dhruv Bhanushali: The portfolio combines “resume” and “command terminal” where you can write commands to access different sections of the resume.

The idea

I always wanted to have an interactive and unique website after watching these websites. So, I decided to make it happen and started creating my own interactive website. After thinking about it for a while, I came up with an idea to make my portfolio look like Adobe Illustrator. I never saw someone that combined a resume with Illustrator so this would be very unique. I also felt that most of the work of the designers is centered around creating graphics and websites in design apps like Illustrator and Sketch. Therefore, it would easily show what the portfolio is about in a first look.

Challenge

It was not easy to combine resume and illustrator since they were very different. A resume shows lots of text whereas the Illustrator would look well with graphics in it. It would be too crowded if I just put them together literally. I wanted a clean look for the website.

Solution

In order to make sure that the website felt and worked completely like an Adobe Illustrator and at the same time conveyed all the information:

I used multiple artboards as different sections of my portfolio.
Since the website was going to feature a design app UI which would contain a toolbox, I used the toolbox to add interactiveness to the website.
I used multiple tabs feature for displaying case studies in separate tabs.
I made the navigation menu look like an artboard panel and added a feature to control visibility of different sections of the home page.
I also added some keyboard shortcuts like V (select selection tool), M (select rectangle tool), L (select ellipse tool), E (select eraser tool), Esc (back to initial state) and Del (delete an object).

Branding

In order to make the website colorful and playful, I used different shades of dark blue for Design App UI and white for artboards. I used some brighter colors like pink(for cta), green and yellow for small playful elements(vectors).
For the typography, I used Segoe UI for primary headings and different font-sizes and weights for hierarchy.

Can I code this?

Designed Mockup

When I completed my mockups, the first big question was whether I could code it. For the whole of the past year, I had left frontend development and focussed more on designing. Now I was afraid if I could code the whole UI of the website. This was going to be a big project for me with a very small coding experience. I was equally nervous and excited about it. And thanks to the internet (mostly StackOverflow) which has the answer to my every dumbest question, I could clear most of my queries just by searching.

Techstack used

I used HTML, CSS, Javascript to build this website. I also used Bootstrap framework in some parts of website. I also used JQuery and JQuery UI for the animations and Ajax for asynchronous loading of the case studies. I also tried to use JQuery touch punch UI for enabling touch events in mobile but then finally removed it as I wanted to keep it simple to use in mobile. I also used Git–a version control system to keep track of the code. I was coding, adding, committing, and pushing the changes regularly. I made the website fully responsive and cross-browser compatible too so that it an be viewed on any platform.

Tricky things to achieve

There were two big and tricky features of the website to achieve:

Selection of Vectors

Selection of Vectors: Just like Illustrator where you can select vectors/circles, transform and drag them. A transformation border is also created around them. I took this challenge to code this feature in my website too.

Multiple Tabs

Multiple tabs: To avoid showing all information on a single place, I added case studies in a separate tab within the screen. You can access multiple tabs at single time.

Most of the time was spent implementing these features. I wrote the code, tested, failed and then corrected it again. Resolving frontend bugs also became frustrating sometimes. For example, one day, my whole JQuery stopped working. I wasted almost 3–4 hrs in finding the problem in the code. Then finally ended up finding that I had forgotten putting a semicolon after a statement in JQuery. Argh!.

Fun things to implement

Response Messages

Adding interactiveness to the website was the part of the project that I really enjoyed. I was thinking of all the ideas of how I could use the tools and features of Illustrator to my advantage to add some life to the website. I finally thought of adding a funny response message for the instance whenever a user tried to resize or erase my image.

Timeline

It took me 15 days of rigorous coding to finish this project. I drew, designed, and coded this website by myself. Due to summer vacations going on, I had plenty of time to finish the project. I also wrote some project case studies in between to add to my website. Final task was to buy a domain name and launch my website. I was also lucky enough to get a domain name as nikhilyadav.com for my website.

The launch

Dribbble shot made for the launch

I launched my portfolio on July 3, 2017. I updated my status and tweeted about it. I was just amazed at the response I got. Within 30 minutes of posting, social media got full with comments and appreciations about the work. This chain reaction in social media made a significant impact.

Response I got over facebook

People from around the world contacted and congratulated me. Then I also submitted my website to some design award websites. The website got featured on one of such websites, “One Page love” which again added to more hits on the website. You can view it here.

That’s all folks

While making this portfolio, I stumbled across many medium articles on an ideal portfolio. Here, I have compiled some characteristics of an ideal portfolio. Hope they will help you in making an amazing portfolio.

USP: In a market of so many talented professionals, You can never afford to get mixed with the crowd. You need to stand out in the crowd with a unique, creative, and out of the box idea for your portfolio. Make your idea your Unique Selling Point(USP).
Present your work as case study: Sharing your work as case studies lets employers/clients know about your design sense. It is important to show that your work had a process and that it didn’t just magically appear. Show that you can solve problems, and you’ll show that you’re worth hiring. Writing and sharing your design process is an excellent approach towards doing so. Therefore, try to fill your portfolio with as many case studies as possible. For more details on how to write case studies, you can read this beautiful article on Medium.
Make the website interactive: What if your website is good and unique enough to attract recruiters but fails to engage them? Your goal is not fulfilled then either. It is very important that your viewers like every single click on your website and how the website responds to each click. Adding interactiveness make your website lively and fun to use.
Keep it short: Don’t fill your portfolio with unnecessary information about you. Your portfolio should be short and simple. Tailor your portfolio to show the best of you.

This was all about the project. Next can be yours! I am available for freelance work. If you have any other project, you think, we can work together on, feel free to mail me at yadavnikhil012@gmail.com.

PS: Thanks Vineet Arora for suggesting edits in the blog. You’re awesome.

Making of my Portfolio Website was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Making of my Portfolio Website

Cool stuff, every week

More Articles