How I changed my portfolio site from HTML/CSS/ JS to my first React/Tailwind/Hashnode project [Part 2 - Build Components]

How I changed my portfolio site from HTML/CSS/ JS to my first React/Tailwind/Hashnode project [Part 2 - Build Components]

Turning design into components

Liam Brewster's photo
Liam Brewster
·Feb 2, 2022·

6 min read

Table of contents

  • Break The UI Into A Component Hierarchy
  • Build A Static Version in React
  • Pull Request
  • Next Time

So we ended the last blog with me deciding which design I want to build, so now I need to know how to do it, so let the research commence as I don't have a clue right now.

The first thing I did was read the react documentation as I remember someone saying it had an article about how to “Think in React” hoping this would give me an epiphany moment so I had a clue where to start.

Break The UI Into A Component Hierarchy

So following the article above, I went into Figma and the first thing I did was begin to group together the layers into logical components to help with this process.

to do this I would just draw a box around the section on the design, this would highlight all the layers on the left menu, to which I can then right-click and group them together, so just give this section a meaningful name

image.png

so the left section should look nice and organised now, ready for me to split into components:

image.png

Again, referring to the react documentation, it goes through an exercise of drawing boxes around sections to break the design down into building blocks that you can have a go at. so I now have lots of random coloured boxes over the design but this now will allow me to go tunnel vision and build the home page part by part.

ideo to gif.gif

so just before I go onto the building, just wanted to add a random image of me and my name to the mockup, so I can feel connected to the design. then I'm good to go. so let's get installing the packages and dance on the keyboard

image.png

So there we go, a complete Figma design file with lots of random guides, to help me break the design into what will hopefully be manageable chunks, so let us get into it

Build A Static Version in React

so based on the breakdown above we have a list of sections/components to focus on building, this will also show me the components within components (not sure if they have a name but hopefully you know what I mean), that I will need to build:

  • NavBar
  • Top Hero Section
  • Latest Post Section
  • Featured Work Section
  • Footer

so let's get into building the 5 sections

Firstly, I didn't have the tailwind setup, so I followed their documentation to get started

Also, I don't want to turn this into a tutorial, so therefore I am just going to skim the main bits and share snippets about the bits I think will be interesting for anyone else as I have had to look it up. so ask if you have any questions

I am using google to find code snippets of already made components then adapting them. I feel bad but it works and that is the goal of this task

Navbar Component

so the first bit is what I am hoping to be an easy Navbar with all the content on the right-hand side within a container, so I have added a components folder under src, then also put another folder for layout, just in case I make this bigger later it will be easier to find files. in the layouts folder I will add a new file Navbar.jsx and because I have the ES7+ React/Redux/React-Native snippets VS code extension I can just type rfce then enter and it will create the main parts of the component for me, I will repeat this for each component later but I would type about it.

I just needed a basic nav component for this, so found one on google to use and I came across a site Creative-Tim.com that has components you can use, so I chose the plain text version in a random colour to copy into my project, then adjusted the colors and removed the left-hand side text so it was blank to match the design

screenshot-www.creative-tim.com-2022.02.02-00_05_20.png

Top Hero Component

Now onto the main focal point when you enter my site, the hero section. for this component, i just took the example within Tailwinds documentation , and change the wording to match what I want, with colours to match the theme but i liked the span of text being in a different colour so i kept this in for my name to stand out. then luckily the image I chose was already formated so no extra CSS is needed to make it rounded etc. the image is made with an iPhone app called PhotoRoom, that i have been using to create my recent profile pictures across various social media, so that will be one of the first things i need to improve after it goes live.

screenshot-tailwindui.com-2022.02.02-00_06_34.png

Latest Post Component

So onto the post section, I just want this to display my two latest blogs that I have posted to hashnode, with a "View All" button that a person can click.

firstly to temporarily get the data I declared a variable, which had an array of all the blog posts information, that I could loop over with my card design, meaning if I need to manually update the data, it's all in one place and easy to find, after deploying I will look to get this from the hashnode API if I can figure it out

blogs.png

so after some searching, I found a blog article on ordinarycoders.com which had lots of different card components to choose from, so I found a simple one that did match what the Figma design had, ill put the code snippet along with how it looked below code-snapshot.png image.png

but if I'm honest, I thought it was flat and I wanted something a little more to publish on my portfolio, so I went hunting again and landed on some awesome designs on codepen, and ended up with a design by Sanjay Sanjel that I really liked, so after some tweaking, I landed on a design I liked.

image.png

now onto the featured work section, for the data to populate this area, I did exactly the same as I did for the blogs section by just declaring a variable which I would just loop over to create the information,

projects.png

I also spent more time searching online for some code to copy than I want to admit, I tried some but couldn't get it to work or fit right, so deleted it and started again multiple times, then I just gave up and thought I am wasting time, so why not just try to build the basic layout myself, and I managed to name the layout very quickly which annoyed me more.

again a very basic layout found online, that I copied, imported some react icons, and very quickly had a footer looking good to go

Pull Request

so I am happy I have managed to achieve the design with my own spin on some areas, a quick check to remove all the TODO items I placed within the code, and also ensure the HREF links have destinations, so I am now ready for this to go live as my first version, so I submitted a pull request to merge the "ReactVersion" branch into "Main", then I am ready to look for a home for this project

the ready to go version is below, do you think it looks like the Figma design, or have I missed the brief?

FinalPRVersion.gif

Next Time

In the next blog, I am now going to try to deploy this somewhere and turn the static content of the site into dynamic by retrieving my most recent post from Hashnode and also, I need to work out how I want to show my featured work, either use the Github API or have JSON data somewhere in my project that I can just add too

so come back soon

Keep up with the series of Blogs Here 👈

LET'S GO!! 🚀 🔜🔛🔝

 
Share this