My Professional Portfolio

August 30, 2024 | Matthius Mlengah

Building My Website

I wanted a space to showcase my skills and capabilities, somewhere I could write about the projects I’m tackling and the solutions I’ve developed to meet their requirements. This website is built, built using Next.js¹, TypeScript², and TailwindCSS³. This would be my first website, and I wasn't entirely sure where to begin. After some research, I discovered there are almost infinite ways to create a personal blog. However, as a software developer, it was important to me to take on the challenge of building it myself. In the end, I decided to use the popular MERN stack but followed React's recommendation to use Next.js instead.

Learning the Ropes

Given my limited knowledge of web development, much of this project's timeline was dedicated to learning. I had a clear vision of the website's design and sketched out wireframes for each page. I planned to create four pages: Home, About, Portfolio, and Blog. My learning journey followed a structured path:

• HTML⁴
• CSS⁵ → TailwindCSS
• JavaScript⁶ → React⁷ → Next.js
• User Interface (UI) / User Experience (UX) research

Building the Foundation

After overcoming the initial learning curve, development progressed smoothly. I began by working on the navbar and footer, integrating them into my layout.tsx file to ensure a consistent format across all my pages.

As I wrote my JavaScript, I became familiar with a functional programming style. However, I occasionally felt the urge to revert to my object-oriented programming habits, especially with ES6⁸ offering the option to create classes.

Once the top and bottom sections of the page were in place, I moved on to creating the home page. It consisted of three main sections: a hero section, an introduction, and a call to action.

Creating the Blogs Slug Experience

After this, I moved on to creating the blogs/** page. This task took the most time, as I kept coming up with new ideas I wanted to implement. Initially, I planned for a simple layout with text centred on the screen, like a typical blog. However, I found the design left too much white space.

I looked at other websites and noticed they often filled the space with ads or promotional content, which served their purpose, however that would work for me. After giving it some thought, I decided to add a table of contents that would remain visible on the page. This worked well for desktop, as it reduced the empty space and provided a useful feature to skip through content that you might not be interested in.

The challenge came when adapting this feature for mobile. Unlike the desktop version, the mobile layout didn't have the same spacing issue, so I had to figure out where to place the table of contents. The simplest solution would have been to remove it on mobile, but I wanted the experience to be consistent across both platforms.

To achieve this, I incorporated the table of contents into the navigation bar. I then modified the mobile nav bar to disappear and reappear as needed, allowing the table of contents to follow the reader down the page. Finally, I added logic to the table of contents by highlighting the section currently being read and making it interactive so that clicking on an item would take you to the correct anchor on the page.

Developing the Blogs Page

Now that I had a place to showcase my writing, I needed a way for you to easily access the content. Initially, I considered simply listing all the blog posts on the blog page, allowing readers to scroll through and find what interested them. However, as I started adding more content, this approach became awkward to navigate.

To improve the experience, I added a live search bar, to provide immediate feedback. Since the blog dataset will be relatively small to medium, the performance of these searches should be fast on most devices. Additionally, I included a filter section to allow users to filter posts by different tags, and a "sort by" button to change the order in which content appears.

Crafting the Portfolio Page

The portfolio page was my favourite to create. Maybe because it was the last? As I approached the end of development, I could see my website finally taking shape. For the final stretch of design work, I explored various card UI designs that different websites use to feature their projects. Inspired by these, I developed a card I was happy with. I chose to limit the page to a maximum of nine cards, ensuring that I only showcase the very best of my work.

Testing and Deployment

With all the visuals complete, I decided it was time to test everything using Jest⁹. In hindsight, I regret saving the testing until the end of the project because it felt like an added weight when I was so close to the finish line. Next time, I'll write tests alongside the creation of each feature.

Once the testing was complete, I set up a CI/CD workflow on GitHub¹⁰, allowing me to deploy with a single dispatch. This workflow runs all my tests, and if they pass, it automatically deploys my website. This process has greatly simplified deployment for me, as now, it’s just one click and done.

Conclusion

Building this portfolio introduced me to modern web technologies, where I learned how to use Next.js, TypeScript, and TailwindCSS. If you're interested in my work or have any questions, please feel free to reach out via email I’d be happy to connect.