Divij Mehra - Portfolio

This is the repo for my first Major Project while at the Coder Factory Academy bootcamp - my personal Portfolio.

About

This is my first attempt in creating a personal portfolio website.

I really wanted to use this experience to apply the skills I had learnt up till this point - mainly through the usage of HTML, CSS, Bootstrap, SASS and Ruby on Rails.

I wanted this website to be quite simple and user-friendly and use it as a skeleton to improve and add things to as I learn more through my journey to become a junior web developer. The website should also be able to reflect me as a person and at the same time, highlight my key learnings and skills to potential users and employers.

This portfolio went through multiple iterations in the design stages and was influenced by multiple websites.

How to access

https://website-portfolio-dm.herokuapp.com/. Best used with Google Chrome.

Design

To gain inspiration, I explored multiple personal portfolio websites, Dribble and Pintrest and the whole design process was quite thorough.

I first created a Trello board to keep my project organised. I created sections on:

• user stories - to figure out what I want to go into the website;
• mood board - to figure out the style and design of the page;
• key elements - this was the top elements which I had to ensure were in my website (e.g. about me, contact etc.)
• things to do - I used this to work through the list of things I had to get done in order of urgency.

After some initial thoughts, I created a low-fidelity mock-up using Balsamiq3, as shown here through the screenshots.

The layout was heavily inspired by Sean Halpin's personal portfolio website (seanhalpin.io) and can be seen through the shots below. I really liked the simplicity of his work, the playful feel of the whole website, and the general flat design. I hoped to emulate this onto mine.

Logo

I hadn't thought of having a logo until the very last moment and hence there wasn't that much design iterations. A simple logo was created using Affinity Designer. This is one key area to improve as I look to re-vamp my portfolio in the near future.

Typography and Icons

I used Google Fonts:

• Permanent Marker
• Slanted

Icons:

• Font Awesome (http://fontawesome.io/icons/)
• Flat Icons (http://www.flaticon.com/categories/web)
• Typicons (http://www.typicons.com)

Coding

Getting started from scratch was difficult for me personally. There was so much to do and I often got lost in the finer details that I didn't make too much progress initially.

This was a mistake I soon learned from however, and instead of focusing on the colors, the background images and the little alignment issues - I instead of focused on getting the skeleton of the website up and running.

There were many problems I faced (and still do haha) during the coding process:

• Flexbox - With some learning of Flexbox and having used it on other small projects before, I thought to utilise Flex on my personal website for better alignment. However, it caused my many problems and more alignment issues than I had expected.
• Smooth-scroll - I tried to download a Smooth-scroll function through an example code online - but I kept loading in multiple files and hence
• Background Positioning - show through screenshots. Essentially the background I have at the moment which I settled with, is an accident.
• UX Design - The UX in this site is average at the moment as the text does not pop out enough and as a user it is confusing as to where to click and proceed. I will be going through a short-course on this to improve on further projects.
• Getting confused with too much code - so to fix this, I utilized partials and split every html section separately and just had an index file which called the different sections.
• Thoughts - I wanted to put a lot of content here, but there simply proved to be no time. I would be adding in a skeleton to this section very shortly so I can start building SEO and credibility to my website.

Things to improve upon:

• Scrolling
• Alignment of boxes
• Improve responsiveness
• Better typography
• Include my thoughts
• Make it have a more professional feel to it but still have playful vibes
• Loading times

Looking ahead

This website was the first project I had worked on by myself from scratch which utilized both HTML and CSS. It is quite a simple attempt but something I am happy to have got through! I have learnt a lot through this project and would be updating my website very shortly!

Hope you enjoy! :)