March 14th, 2021
During the 2020 lockdown, I spent much of my free time improving my web development skills and using what I have learned to build new projects. At the start of 2021, I decided it was time to build a new personal portfolio to showcase my skills to the world and have a place where I can add new projects and share my knowledge through blog posts.
Before designing or building the portfolio site, I spent time thinking about how I wanted the site to look aesthetically. I had the vision of creating a portfolio that looks simple and minimal as I wanted the main focus to be on the projects and the content itself. I looked at other portfolio sites and took into consideration the layout and the hierarchy of each content on the homepage. For each site, I made notes of the features that inspired me the most and then moved onto the design phase where I used the information gathered in the research phase to sketch up a wireframe.
I then sat down and opened up Adobe XD to build a simple wireframe for the homepage of my portfolio. This would act as a blueprint for when I begin to finally develop the site. Using the notes from my research, I designed an introduction section with a heading text and an image of myself presented in a two-column layout at the top of the page with a call to action button which when clicked would scroll to the 'projects' section of the page. By doing this, people who visit the site will instantly know what I do and have the option to view my work from the moment they land on the main page of the site.
I also designed an 'about me' section presented in a two-column layout. On the left, I have listed the tools I use and on the right, I have two short paragraphs explaining who I am and what I do. Just like with the introduction section, I wanted to capture the user's attention instantly by putting the 'about me' section rather than on another page for easy access.
I then designed the 'projects' section which is the most important part of the portfolio. I designed this section to be laid out in two columns and with each project presented as a card hence the box-shadow effect you see on the site. Each card has an image of the project, title, description and links to the project and code. This again captures the user's attention and they will instantly know what each project is about thanks to the project description text.
A contact form and links to my professional social media accounts were also designed into a two-column layout with the links presented as icons on the left and with the contact form on the right.
The site was designed to act as a one-page portfolio for the people visiting the site to have quick and easy access to all of the content.
Now that I have created a simple wireframe for the main page it was now time to develop the site.
I developed the site using GatsbyJS which is a React-based framework and a static site generator. I chose GatsbyJS because I wanted to build a site that was fast, accessible and can be optimised for search engines. This was also around the time when I was learning React and I decided to put to test what I have been learning by choosing GatsbyJS to build my portfolio.
I also wanted to include a blog section therefore I integrated Contentful which is an API-first content management platform. I connected Contentful to Gatsby using an API key and then used GraphQL to query the data within Contentful which I can then use to output the data in the browser. Whenever I want to create a new post, I would first log in to Contentful and then start typing up the post through the editor screen. Once I have finished creating a post I would then go to VSCode, open up the terminal and run 'gatsby clean' to clear the site's cache and then restart the site for the post to appear in the browser.
To enhance the user experience, I added a 'scroll-to' option for the navigation menu links. For example, if the user clicked on 'projects' it would automatically scroll to the projects section. I also added a 'back to the top' button so whenever the user reached the bottom of the page they can simply click the button to take them back to the top rather than having to manually scroll back up to the top.
As the site was built using a React framework, I split each section into different components for better organisation and maintenance. E.g. components for the header, hero, contact footer etc.
To style the site I used Sass along with CSS modules. The main benefit of using CSS modules is that the styling is applied and locally scoped to a specific component and nothing else which means I do not have to worry about the styling for one component overriding the styling for another component.
Once I completed developing the site, I took the repository containing all of the code and assets and linked it to Netlify where the site is currently deployed. As this was a professional portfolio I registered a domain name and linked it to my portfolio.
Netlify was used to deploy the site because it offers continuous builds. Whenever I go to make a change to the codebase, I first need to commit and push my changes to GitHub which will then notify Netlify to trigger an automatic rebuild.
Now that I have created a portfolio site I intend to use it to showcase the latest projects that I have built to share with the world and to share my thoughts and knowledge by writing more blog posts. I also hope that this portfolio will help me connect with other developers and like-minded people so we can work together on exciting new web projects.