Recently, I decided to put into practice the things I have learnt in Coursera. After giving it some thought, I decided that making a Portfolio website would be the best. It makes sense to make this website first, a website to show my skills and document my my achievements to come.
The Idea
When I looked at most portfolio websites for reference, I found them to be quite ordinary. Almost all of them had some sort of navigation bar at the top, and then some generic home and skill sections.
However, I wanted to infuse some of my personal taste into the portfolio rather than simply copy a generic portfolio. And since most of my skills lie in the creative aspects, I decided to give my portfolio a “D.I.Y” feel.
The planning
As I mentioned, I did not really like the “generic” portfolio “navigation” -> “home” -> “skills” framework. I wanted to make a website that was a bit unique. Coincidentally, just about that time, I discovered the Figma AI and I used it to sort of visualize exactly what I was going to build.
The prototype website allowed me to choose a rather good color scheme and plan a basic layout that suited my aesthetic wishes.
The Execution and the Lesson I learnt.
Once I started actually making the website, I came across a few problems, one of which was making the site responsive. The issue was, the website appeared to be too stiff. Usually in professional websites, you could narrow the width and the content will wrap around in order to compensate.
However, in my website, no such thing happened. Instead it remained as stiff as a board and refused to be squished together. And of course, relying too much on media queries made the work quite bothersome. So as it is in these cases, I asked help from an expert; namely Claude AI.
Thanks to it’s advice, I learn about techniques such as using “clamp()” and “flex-wrap”. With these two properties alone, I was able to make my website about 90% responsive, without the help of media queries.
The other few problems were usually little in nature, however they were still just as persistent. For example, how to animate using keyframes, using grids or box-shadows. One by one, I satisfied these gaps in my knowledge until I was able to code the whole website smoothly. The lesson I learnt from coding this portfolio was as follows:
Learn Actively
Before I had created this website, I watched two courses on Coursera; “React” and “Advanced React” by Meta. However, when I started making my last project (An Invoice Generator) I realized that I understood close to nothing on how React works. Not to the fault of the courses of course, but because what I had gained up till now was purely theoretical knowledge.
Once I actually started applying what I learnt in CSS and React, my knowledge of the language itself improved substantially. It wasn’t the knowledge itself that increased greatly, but the depth of the understanding.
When I was able to use certain pieces of code in different areas, I was able to understand the logic behind it. Making it much more easier for me to use them again.
If you would like to see my finished website then click here:
www.joshgarrett.xyz