Just so you are aware, I do not have a clue what am doing as I stated in my previous blog, I will be making it up / googling as I go through, so I may be doing things wrong but this was an important task for me to just go at it and make it work by any means and my thinking is that if it works, I don't care if it is built wrong in someone else opinion. Once the project is complete and working I will reflect using other people's opinions to help me research how I can refactor and can make it better. so please leave me your comments if you have any then i can come back to them.

hopefully, this will give others, that are like me, the confidence to follow Nike's motto and "JUST DO IT"

Also, I am writing these first set of blogs during my annual leave from my job, so may get the first couple close together, but then I will fit in time to build the project around my job, as this is just a hobby, after all, so bear with me if you get to this early 😊

The Original Portfolio Site

So I decided whilst going through my Web Developer Bootcamp on Udemy by Colt Steele, that I need to have my own piece of the internet because in my mind to validate what I am doing and get skin in the game

so I needed to build a site but I wasn't ready to build a site from scratch,(could give it a go now but not going to) so after some searching, I came across a very simple and basic bootstrap template ( alternative link ), which was great as I had just finished the bootstrap section.

so after messing around with it, it looked like this 👇

as you can see from the above, it was $#!T 💩 but I think that was because it was just a template, it lacked a purpose, and was just thrown together without knowing what I needed on it or what I wanted on it.

Steps Taken to Change

so this is where we all agree, lots need to change with that site but I will take a more structured approach and bring you along for the ride by blogging it so below i have broken the project down into points I need to consider before getting into building the site:

Decide The Goal of the Site

The goal of my new portfolio site is to be a better landing page for redirecting anyone on Twitter that may be wondering who the random nutter is that tweets too much, and also get practice building a react app with integrations. it will also be the home for these blogs that I write through hashnode.

Decide My Tech

So from the beginning, I have said i wanted to be a MERN stack developer and to maintain some connection to that, this means ill be starting off with the below

• React JS
• Tailwind CSS
• Hosted by TBD

Get My Canvas Ready

So now I have decided what route I want to go, I need to get my canvas ready to go, so I clone a local copy of my current portfolio site from GitHub , so I can keep the git history in one place of how my portfolio will develop.

so I have a GitHub action attached to the main branch, that activates on a push with any changes, and from looking how the professionals do it, you create a new branch that you merge in later when finsihed, so therefore I need to create a new branch which is have called ReactVersion

I do not need to keep anything from the current site so I just delete every single file currently within the VS code side menu, I open the terminal and write the following command:

NPX create-react-app . --use-npm

this then starts to go mental like I am hacking some crazy stuff but the reality is that this will initialize a React Template with all the necessary files for me to build with.

I just delete the stock text and we now have our blank canvas ready to go. but what do we build?

Choose The Design

you see so many posts online about where to start, and I am in that same boat as I am no designer. I remembered hearing on all the youtube videos of portfolio reviews or podcasts, they mention if you can show the process of turning a designer's designs into a reality that will be good if you ever need to show someone to do some freelance work or ever go for a job. Although neither of these are my intention I thought this is a good way to start so I will start by searching google, Behance, dribble, and all the other locations until I find a design I think I can achieve that would look nice too

so after some digging around and seeing a lovely thread by Figma on their Twitter account (twitter.com/figmadesign/status/147954214934.. )

I found two designs which I liked:

• One by Tinjo Thomas figma.com/community/file/882879599442878081
• Another by Pooja Sinha figma.com/community/file/883766363000361657

so the design I will go with is the one designed by Tinjo, as I think the layout is clean, simple, and will be a good start for me to get to grips with what I am trying to achieve with my current technical ability. it will stretch me but should be a great learning curve

The Next Step

So my next move is to duplicate the Figma file so I have it within my account, I can now make notes and reference what I need to build.

now I need to work out how to convert this design into React components and actually resemble the design, obviously with my own spin on things but I will use Tailwind CSS to help with the build process.

I then want these blog posts to be integrated into the new site for all to see and I can direct you to them, so i will cut this blog here and post in the next one how we start to build it

Keep up with the series of blogs Here: blog.liambrewster.co.uk/series/portfolio-ht..

LET'S GO!! 🚀 🔜🔛🔝