How I built my Portfolio Website(The Process)

How I built my Portfolio Website(The Process)

Faisal Albasu's photo
Faisal Albasu
·Mar 5, 2021·

5 min read

Firstly, you should know my portfolio website was the first-ever full-fledged website I've ever built, all others were practice, and some I've never even finished. So it was a bit intimidating at first because I was overwhelmed and was overthinking of how the final result would look like. I was overthinking how the layout should be, what color combination to use, the typography, and so on. Luckily, I had created a mood board on Behance and have saved a couple of inspiring portfolio websites and I used a blog I found and saved on Hashnode of some inspiring dev portfolios so that made me feel a little bit at ease. Unfortunately, that didn't last for long before I got another paralysis by analysis thinking that I have to create a wireframe and a style guide. That delayed the project for a while but I managed to get past it by just ditching all those stuff and I just started my designs by using the ideas I got from the mood board I had.

Now comes the design part. The homepage took the longest because that was where all my major decision-making took place, what to use for my hero image, typography, color, and layout. I didn't have any problem with the copy because I have already done that beforehand. After wasting hours on deciding how the hero page should look like, I finally came out with a decent design using a vector image I got on Vecteezy . I know a lot of designers say you should use your image on the hero section of which I even got feedback from a more experienced designer on Instagram but something just didn't feel right especially with the images I have(Note that I don't have a lot of professional images) and I just like it more with vector image. The rest of the design went smoothly with little to no issues since I already had some of the resources I needed and the rest such as icons I imported using Figma plugins.

Then comes the development part. One thing I'm grateful for is all the mistakes I went through when building my practice projects, as I was able to avoid a lot of them here such as

  • lack of proper planning
  • lack of proper file arrangement
  • designing for desktop first(this is a little bit debatable)

Also if you're developing without any design or reference, you should start designing first as it makes the development process so much easier and faster.

The homepage development went pretty smoothly except for the mobile nav-bar(which is still a nightmare to me) which I had issues with, but after some research and asking for help, I finally got it fixed. I had some minor issues with the styling especially with the media queries because I use a 27-inch monitor with fullscreen apps so when I exit developer tools, the content gets small and unreadable so I had to add more media queries.

The last part was my worst nightmare in this whole building process. As I was going through all this I didn't know that the gitignore template I was using was ignoring my CSS files, it was after I was done with the homepage that I noticed there was no CSS file. Luckily the fix was simple, I copied the files I wanted to be ignored and created a new gitignore file and pasted them then deleted the previous one and the rest was a pretty smooth process till deployment.

It wasn't an easy ride though but I've definitely learned some lessons from it and I hope you did too from reading this.

You can check it out here and let me know what you think. Feel free to reach out to me on Twitter @albas_phaysal and on Instagram @albas_phaysal

Share this