Designing a website is can be fun, or can really feel like a chore for some people. Well for me, it's kinda in the middle. When I started coding the website I really got into it, but after a while I start questioning myself on why I didn't use a website builder like Wix or Lovable. But since I've already gotten so far, the only thing I could do was to continue it till the end. And so here is the entire story.
Background
How did this website come about? It started when a certain polytechnic module required a website portfolio, and other documents for submission, to be used in a mock interview.
Designing this website
At first I thought of using a black-and-white color scheme, but after seeing the common use of it by most, if not all of my course mates, I found it quite overused. And hence, I decided to settle with this pink-purple color scheme because it was my favourite color, and I wanted it to stand out from the regular minimalist, black and white colored stuff.
Designing and Coding
Before designing the website, I looked online to see what kind of webpage layouts, and different designs there were that could make my website look beautiful. But then I remembered that I was building a portfolio website. Most of the website layouts I searched didn't give me what I felt was perfect for a portfolio.
After extensive searching and combining webpage layouts, I finally came to a beautiful landing page. By no means was it the best, but I took what I got.
Following the landing page, I began working on the page that would act as a "table of contents" to my projects. This page was simple, as all it served was to list my projects. Hence, I created a list of boxes and in each, a summary and an image of the project.
And finally for each of the project articles, I took inspiration from online news article layouts. Well, since I was going to write articles for each of my projects, why not make it look like an online newspaper article?
Key Learnings
- HTML tags and their semantics
- CSS and ways to manipulate them
- A bit of self-learned javascript to make the webpages reactive and alive.