How I Built My Full Stack Portfolio Website With the Coolest Techs🐬
Tags: webdev, beginners, nextjs, tutorial
Published: 2023-02-10 17:42:40

A **portfolio** or **personal** website has become necessary nowadays, whether you want to `freelance`, `find a job`, or `market` your Saas product. You must surely build it at some point if you're a **web developer**. When It comes to a portfolio, every developer has their unique way of creating it using their favorite tools or remarkable frameworks. However, when it comes to portfolio sites, most are just front-end focused with little or no back end, but that was not the case for me.

**Next.js** is always my favorite option for building a web application, as It supports `SSG` and `SSR`. However, I also wanted a **type-safe** solution for my site, so I also decided to use the **typescript**! I’m a big fan of the typescript as It helps to code more **efficiently** and **productively**. Therefore, this article is not a tutorial but a walkthrough and breakthrough of my site.

---

> 💡 **Note:** If you don’t want to read till the end, you can visit the site [here](https://portfolio-khaki-iota-89.vercel.app/) and view the source code [here](https://github.com/arafat4693/portfolio). Don’t forget to give a **star** to the project if you like it!

---

## The Stack

Technologies that I used in my portfolio are:

- **Nextjs** (framework)
- **Tailwind CSS** (Styling)
- **Typescript** (Doesn’t need any explanation🤣)
- **Hygraph** (GraphQL headless CMS)
- **Apollo-client** (Caching and state management)

And there is no exception that I have used all these excellent techs in my portfolio!!!

---

> 💡 The **contents** in my portfolio are still a work in progress. However, I am working on them.

---

## The About Page

The **about** page is the first page that people will see as they enter my portfolio. You can also label it as my portfolio's **Home** page or I**ndex** page.

Here people can find a bit **about me**, the **services** I provide, the pricing, **clients** I've worked with, **testimonials**, and some **fun facts** about me. Of course, there are a lot of sections that I could divide into **multiple** pages. However, I like this minimal approach where a single page contains a lot of information so that my client doesn't have to change page after page every time, which could also be tiresome. And all the data that you can see in the page are all dynamic, coming from the headless CMS I mentioned above.

{% vimeo 797730415 %}

## The Resume Page

On the resume page, people can find my experience, education, skills, languages that I can speak, and my favorite quote as a web developer. Again most of these data are dynamically coming from my CMS.
 
{% vimeo 797732924 %}

## The Works Page

The works page is an essential part of my portfolio. Here people can find all the **projects** I have worked with, and upon clicking on any project, a lightbox will open, where people can see all the other information necessary to know about the project. People can even find the **project link** and the **GitHub link** there, which will increase the chance to getting traffic to my projects and a star in my GitHub repo. 

The lightbox is very heavy on content, So I've used markdown and [tailwind's typography plugin](https://tailwindcss.com/docs/typography-plugin)
for styling. I didn't have to parse the markdown to HTML, as my **CMS** automatically does that for me. If you are curious to know how I did it, head over to my **GitHub repo** which I mentioned above.

The work page even uses `cursor based pagination`. You can even call it **infinite scrolling**. I’ve implemented it with the help of my **CMS** and **apollo-client**. Cursor-based pagination uses `cursor` and `take` to return a limited set of results **before or after** a specific cursor. The cursor marks your position in the result set and must have a **unique** value such as an `ID` or `timestamp`. To learn more about **cursor based pagination**, visit this [link](https://www.prisma.io/docs/concepts/components/prisma-client/pagination).

{% vimeo 797760295 %}

## The Blogs Page

Here people can find all of my blogs I've written so far in [dev.to](http://dev.to/). The data here comes from the [dev.to](http://dev.to/) API, not from my CMS. Suppose you want to learn about [dev.to](http://dev.to/) API functionalities like `pagination`, `limit`, `posts per page`, etc., you can visit the [GitHub repo](https://github.com/arafat4693/portfolio) or their own [docs](https://developers.forem.com/api).

Like the work page, the blog page also uses pagination. However, this time It is `offset-based` pagination where you have the **total number of pages** based on the **total number of Items per page**. To learn more about offset-based pagination, you can head to this [page](https://www.prisma.io/docs/concepts/components/prisma-client/pagination).

{% vimeo 797734245 %}

## The Stats Page

The stats page is a simple **dashboard** for my portfolio where people can see the **traffic** on my portfolio, how many **projects** I've done, with who I've worked, etc. In addition, I've also added all of my **social media** links where people can **connect** with me.

Here I've used the [google analytics API](https://developers.google.com/analytics/devguides/reporting/core/v4) to get the traffic information. To see how I've implemented the API, visit this [GitHub page](https://github.com/arafat4693/portfolio/blob/main/pages/api/analytics/traffics.ts) or read this [dev.to](https://dev.to/j471n/how-to-use-google-analytics-data-api-2133) article by **Jatin Sharma**. His article helped me a lot, really recommend it👌.

{% vimeo 797735148 %}

## The Guest Book

The Guest book page is the one I like the most in my portfolio. The central concept is that people can leave messages on the site for me and others. All of the messages get stored in the CMS, and wherever people will visit the page, all of the previous messages get fetched with the help of apollo-client. Here also, I am using cursor-based pagination(infinite scrolling) to avoid fetching all messages at once.

Here is what the page looks like -

![guest book](https://res.cloudinary.com/dafxmvvzp/image/upload/v1676050655/Sk%C3%A4rmbild_20230210_160838_sdkfah.png)

## The Contact Page

As It sounds, here people can find all the related information about how to contact me. It has a google map and a form to send me a direct message.

{% vimeo 797735694 %}

---

## Conclusion

Overall, I like how the portfolio looks like. However, if something is wrong with the portfolio or something that I can improve, please let me know in the comment section. If you’re looking for the site, it’s deployed using Vercel [https://portfolio-khaki-iota-89.vercel.app/](https://portfolio-khaki-iota-89.vercel.app/), and the source code is available on the [GitHub Repo](https://github.com/arafat4693/portfolio).

Thanks for reading. See you in the next blog!😊🙌

**Visit:**
👨‍💻[My Portfolio](https://portfolio-khaki-iota-89.vercel.app/)
🏞️[My Fiverr](https://www.fiverr.com/sunnyislam990)
🌉[My Github](https://github.com/arafat4693)