Technical Portfolio

Overview

The portfolio documents and follows my continuous personal development in Web Development since February 2022, when I first began teaching myself HTML and CSS. The website contains reflective summaries on some of my favourite projects and allows me to showcase all completed projects to date.

I learnt the basics of React, Next.js and Tailwind by building this website.

Website Design and Features

The original design was based on this tutorial by Code Commerce. As I completed more projects and deepened by understanding of React and Tailwind, I made many design changes. Recently, I took inspiration from ForrestKnight’s portfolio and changed the structure of my website.

My pokedex project page on different screen sizes

Challenges

The main challenges were:

• Understanding the fundamentals of React - Components, Props and State

• Understanding how to use the pages directory and routing in Next

• Understanding how to setup and use Tailwind

Here are some of the resources I used:

• The Beta React documentation is a good starting point for learning the fundamentals. At the time of writing, the “Learn React” section is 99% finished and the API reference is 100% finished.

  If you want to see React used in a project, I recommend watching JavaScript Mastery's videos. The projects show common practices of writing React code and use third-party APIs, UI libraries and even backend technologies.

• Vercel, the creators and maintainers of Next.js, have documentation on the basics of React and Next.js, as well as what features Next.js offers on top of the core React library. JavaScript Mastery also has a few videos on using Next.js in projects.

• Tailwind also has documentation on how to setup and implement Tailwind into projects.

I find a combination of reading the documentation, following project-based tutorials and, most importantly, building your own websites to be an effective way to learn. By building Hamworks I became comfortable with React, Next.js and Tailwind since I was able to apply what I learnt from Code Commerce’s portfolio tutorial.

To gain more experience with React, I recently built Final Fantasy XIV tools for finding players and characters, and a user dashboard. I also used these projects to learn MUI.

Future Features

I’ve recently remade my portfolio for 2023 which you can view here.