Mohsin Yaqoob.
  • Home
  • Work
  • Blog
  • Fitness
  • Resume
  • Hire me
80%

Re-designing my website in 2022

Expected: Tuesday, 24 May 2022

4 min read

ReactJS Chakra UI Figma Prism Planet Scale

How I re-designed my website using Next.js, Typescript and Chakra UI

If you're someone who creates digital products and services, it's important for you to have a personal portfolio website – especially when you're applying for jobs or showcasing your work to your potential clients.

A nice online portfolio site, will give you a better chance of getting attention from recruiters and your potential customers. It can help you stand out by directly showcasing your skills, projects, education, and your personal brand.

So let's dive into it – I'll show you what technologies I used, how I structured the portfolio and why I did it the way I did it. 💪

Tech Stack

#

Let's talk about the tech stack I used to build this template:

1. Next.js

#

NextJs is a React framework used for building blazing-fast websites along with server-side rendering, which makes it easier for people to find your site on the internet.

I love ReactJS. The default create-react-app boilerplate comes with some limitations and disadvantages though. One of the biggest drawbacks of the CRA is that it generates HTML code in the client browser which isnt a very good thing for the search engines to index a website.

Hence, your SEO suffers. You obviously want to get found in Google, Bing and other search enginer. So you need the content of the website to be rendered on the server for better search optimization and thats were Next.js comes into the play.

You can read more about CRA vs NextJS in this blog:

2. Chakra UI

#

A simple, modular and accessible component library that gives you the building blocks you need to build your React applications. It is customizable and reusable, and most importantly it supports ReactJs, along with some other libraries too. Chakra UI is similar to Tailwind CSS. Instead of utility classes, we pas in utility props to the Chakra components. Here is an example of how to render a customized Button component in Chakra UI:

1<Box
2 display="flex"
3 alignItems="center"
4 justifyContent="center"
5 width="100%"
6 py={12}
7 bgImage="url('https://bit.ly/2Z4KKcF')"
8 bgPosition="center"
9 bgRepeat="no-repeat"
10 mb={2}
11>
12 <ButtonGroup gap="4">
13 <Button colorScheme="whiteAlpha">WhiteAlpha</Button>
14 <Button colorScheme="blackAlpha">BlackAlpha</Button>
15 </ButtonGroup>
16</Box>

3. MDX

#

Bloggers love Markdown. MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀

HTML tags are a lot to type when you’re writing long pieces of content. Markdown’s main purpose is to make you type less stuff.

Here is how MDX is used:

1import { Chart } from "./snowfall.js";
2export const year = 2018;
3
4# Last year’s snowfall
5
6In { year }, the snowfall was above average.
7It was followed by a warm spring which caused
8flood conditions in many of the nearby rivers.
9
10<Chart year={ year } color="#fcb32c" />

4. Vercel

#

Vercel provides an easy-to-use experience for developers and makes it simple to deploy sites that are both fast and delightful for users. It also makes it easy for front-end teams to develop, preview and ship delightful user experiences where performance is the default.

Vercel provides a frictionless developer experience to take care of the hard things: deploying instantly, scaling automatically, and serving personalized content around the globe.

We make it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default.

Read more about Vercel here

Conclusion

#

This portfolio site will give a recruiter or visitor everything they're looking for if they want to learn more about you and your work.

Also, we've built the site with Next.js, which shows that you're comfortable with React and its frameworks. (Recruiters are looking for you! 😍)

The website uses Chakra UI for styling, which shows that you can work with a CSS framework and cut down on styling time.

The components are granular and each serves its own purpose. The folder structure is simple and easy to understand.

You can customize the website in any way you like - I've open sourced it and the code is linked to the GitHub repo below.

I really enjoyed building this website. If you liked it, leave a star on the GitHub repo and share this peice of blog with your friends and collegues. 😊


  • Home
  • Work
  • Blog
  • Fitness
  • Resume
  • Hire me

© 2023Mohsin Yaqoob.