React website sample for portfolio

TL;DR: I make a website about kitties for portfolio, and here is the source code

Introduction

Hello people! So I have been trying to do a little freelance as a front-end web developer. Programming is my passion, but it has yet to feed me. I always heard that front-end web developer is the most common job in the market; many start-ups need a website, right(?). I've realised that I don't really have a web project to show off my web-making skill. My portfolio website doesn't count as it is made using vanilla javascript. So I guess it is time to make a random website using modern and popular framework like React.

The tech stack is very simple:

• Vite for project setup and bundling.
• React (of course)

I was about to use Material UI as they give a bunch of cool reusable components that is already stylised. But, it feels too "Google" and I am a C programmer (having an obsession over reinvent the wheel).

Setting up the project

Vite projects are VERY easy to setup to the point that I feel like it is too good to be true. The last time I play around with web, vite is yet to exist and configuring webpack took me 30 minutes of scanning through the docs only to be forgotten once the setup is completed.

For vite, it really just these magic word:

npm create vite@latest

Do some command line inputs and it is done, amazing.

Working the design

Alright, I'll going to be honest here: I kind of want to finish this ASAP in the weekend so I made things up along the way instead of planning it in Figma.

I first checking out any good fonts on Google font that fits the theme of the website. I select the Nunito as I could feel the playful vibe behind it.

Then, I get some color palette from this color palette generator. I have been using it since the very beginning of web dev journey, a good color palette could better describe the theme of the website.

CSS

Writing CSS is much a creative process here since I don't have a mockup, thus it is kind of describe it in detail. But I will still share things that I usually do in CSS.

1. reset.css
   I will always use the reset stylesheet. It is because different web browser has its own default stylesheet that could mess up my code. So I just copy the code and put it in the project.

2. CSS variables
   I love CSS variables, I use it to for the color palette.
   

:root {
  --light: #f5f5f5;
  --grey: #796c9f;
  --dark: #392f5a;
  --primary: #2ea9c4;
  --primary-light: #a1d8eb;
  --secondary: #ff9f1c;
  --secondary-light: #ffbf69;
}

It avoids hardcoding colors. Then, I only need to change the value of the variable instead of searching through the codebase for that particular color code.

Javascript

Since it is React, I need to do something special here.
I decided to use the Cataas API to fetch cat pictures in my code to display the random cats.

But behind the scene, it is just useState and useEffect hook.

  const [catImage, setCatImage] = useState(initialCatImage);

  useEffect(() => {
    const updateCatImage = () =>
      (async () => {
        const response = await fetch(
          `https://cataas.com/cat?width=250&height=250`
        );
        setCatImage(URL.createObjectURL(await response.blob()));
      })();

    const id = setInterval(updateCatImage, 5000);
    return () => {
      clearInterval(id);
    };
  });

And that is all the special stuff in the website...

Deployment

I'm using pgs.sh to host my static site. It uses ssh (secure shell) and rsync (a file transfer protocol) to do all the stuff. It doesn't need to create account or whatsoever. Very quick to setup, very cool.

Conclusion

Well, I got a website to show-off and maybe get a freelance project. And, you get to see all my source code and learn something. It is beneficial to both of us. Thank you for reading this late night posting and have a nice day/night.