Blog about how I made this website

To made this website I first looked at loads of web developer/designer portfolio websites. Then planned on how my website should look like in Adobe Illustrator. After visual planning I used open source code editor called Brackets to make this website.

open source brackets adobe illustrator

Layout of Website

I wanted my website as simple as possible and thus made the 2 sections for homepage. First section has just my name, degree and social media. For portfolio and blog page I’ve made a top banner section to describe what the page is about then content section below that. I created a rough layout in Adobe Illustrator on how should my website look like so once I have the skeleton of the website, it’s easier to just focus on design bit next.

website layout demo


After completing the layout, I started designing by inserting demo content and styling it so have a rough idea on how my website will look.

Visual Design

For this website I have used adobe illustrator to create my logo and then saved as svg, to use it for my portfolio, as it works as vector file even in browser and it never blurs upon zoom. The design of my logo is very simple and easy to understand which is A W. Next the colours I choose are below.

Colours

I tried using mostly black background and white text on it as it’s very easy to read rather than colourful background with text colours hard to be read. On my landing page for social media icons, I’ve used greyscale effect which upon hover shows real icon colour. For portfolio and blog page banner I have used text with that page name as svg background image to make it look cool.

wesbite color pattee

Coding - Html / CSS

After I had the layout and visual design I started everything from scratch so that I can learn along with building my portfolio. To keep the HTML code clean and readable I have used comments to better understand different sections of website. Also by adding start and end comment is really helpful as its easy and efficient way to read where different elements are ending.

clean html code

In CSS I have mostly used the elements which I understand completely rather than just copying and pasting from internet and without knowing of its function. Moreover, I’ve properly indented and properly commented every section so it’s easier to read and in the future if I want to update my portfolio it will be much easier. I also tried using images with size less than 30kb. Only on my blog page I have used just a few svg images more than 20kb to make patterns clearly visible. Also I have tested my website on google page speed and have got a really good score which definitely proves that my design is good.

google score of my website

Problems faced and solution

  1. Landing page height to screen height – Learned from CSS-tricks.
  2. Responsiveness of website – various online sources.
  3. Overflow issues – learned online
  4. Mobile menu – online sources
  5. Image behind about me heading rotating – learned online
  6. Image circle – learned online

Reference

Normalize.css - https://necolas.github.io/normalize.css/