In the beginning stages, I started the ideation process by writing a couple of ideas on what my portfolio was going to be about. I looked at various expertise of mine but eventually decided that I wanted to
create a professional portfolio to brand myself to recruiters, grad schools etc. I also realized that this would be a good opportunity for me to gather all of my experiences and skills and compile them in one place.
That being this website.
One of my key stages was gathering all the content needed for the website. This included pictures, list of extra-curricular and job experience, online photos and some of the projects I had to work on. For some parts
of the website such as "projects" and "references", I had to gather resources externally to ensure that I was following all rules.
The next stage of the ideation process was commiting to a design theme to ensure there was consistency throughout the whole website. For example, I started this process by researching colour pallets.
I was not able to find one online, so I created a colour pallet using Canva. I decided to go with one dark blue shade and one mustard yellow shade that compliment each other.
The design stage also consisted of finding an icon style that was complimentary to the overall layout. I decided to choose a fun and colourful set of icons that complimented the overall design with their soft and light colours.
When it came to decide a typology style, I had to follow the assignment instruction which stated that the typology style had to differentiate between all the pages. So, I began with looking at components available on the Bootstrap website. I liked several of their components and went on to decide how which component can be used to display what type of content. For example, I chose cards for content that had a mix and match of content and picture. Then, I chose a carousel component for only picture focused content. I also chose other components such as Jumbotron, Hero section, Icon grid, Columns, forms, tables etc, that are available throughout my website. In terms of dynamic visual components I chose several images, video, motions, and links.
Although this is my favourite and most useful project I have done in my two years of undergrad, there were some tedious problems that took a bit longer to fix. For example, it took me a while to get used to the different sections
and divs in my html code. I learned a lot from the labs but I included some features that were not included in the labs. For example, adding certain styling features took a bit getting used to. I had to over ride a lot of bg-secondary
colours because I created a whole new colour pallet for my website. Next, I created a separate section for each page in the css file to make sure that there was consistency yet every page had a different look in terms of typology
and the layout. I was also alternating between different sections that required different colour codes and this had to be done to all pages. Another time-consuming step was ensuring that the fonts were the same for each heading
on all pages. Like, on all pages h1 is the same font that is of the subheading on all pages. However, the most tedious task was to create a resume. At first, I wanted to add a pdf or a png of my resume on the resume page. However,
that is not accessible friendly at all, since the aria feature would not have been able to read my resume content for the visually impaired. Therefore, I had to create several columns and rows to add all my information from my original
resume.
All in all, creating this bootstrap website was one of my favourite projects I have ever done. I definitely learned a lot from lectures, labs and trial and error. The HTML and CSS skills that I learned in this class will definitely
benefit me in the future and my professional life.
As I have mentioned my design choice rational in the previous sections, I want to reiterate my choices of the structure. Starting off, I had several other pages included when I was creating the Menu Bar. For instance, I wanted to
include a separate skills page. However, I quickly realized that I did not have enough information on my skills to create a separate page. So, I decided to combine the skills page and the experience page as that gave me enough
information to put on one page.
When I was creating the home page, I originally had the education information underneath the hero section on the Home page. Due to consistent layout reasons, I decided to create a separate page for the education page as well.
I prefer the home page as it is because when the user lands on my page, I just want them to be introduced to me as a person. Up next, they have the choices of knowing more about me by clicking on the different pages of the
navigation bar.
In terms of rough work, there was a lot of going back and forth between different pages. For example, I originally had the carousel on the education page because I wanted to showcase some of my course work. However, that did not work
out since I wanted more writing in the description of the course work. This is why I chose to put the pictures and text beside each other rather than on top like in the carousel. Therefore, I chose the carousel for the experience page
to showcase some of my event features with a little bit of text.
Icons via Icons8.
The framework was created with Bootstrap5.
Screenshots and Screencast provided by Fatima Ashfaq.
Image References: