Behind the Scenes:

About

This page is an explanation of how this website was made and what technologies were used to make it.

The Projects Component

The projects section in the main page and the project page is one of the highlights of this portfolio. All my project details are housed in a typescript file called `projects.ts`,

Each project section also has 2 booleans `isClient` and `isFeatured` . `isClient` indicates whether a project is personal or is commissioned while `isFeatured` defines whether a project is to be featured in the main page or is only to be showcased in the `/projects` page.

Along with this, each project is also assigned a unique id which is used to open a page `/projects/[id]` which uses mdx to display a manifest of the respective project.

dashboard image
dashboard image

The Certificate Component

Similar to the projects component, the certificates component is managed in the `certs.ts`.

The certificate card has a hyperlink to that respective certificate. Each certificate object also has a boolean `isProf` which decides if a certificate is a professional certificate or not. A professional certificate is identified with a star.s

The Status Component

The status component of my portfolio is by far, the proudest section of this website. Using discord's API, I am able to fetch all of my user details, including my discord status, my Rich Presence Activity and my spotify status. DThis data, once scraped is then formatted and sent to `/api/data` .

The client fetches the `status` from the api in order to display my status. Discord has 4 status options: Do not disturb, online, offline, and idle. These are identified using the red, green, gray and yellow pinging dots respectively. This component is visible in my navbar, my index page and the `/status` page

dashboard image