Readme

Tech Stack

TypeScript

GraphQL

Next.js

Tailwind CSS

Framer Motion

Three.js Shaders

Vercel PaaS

Hashnode Headless

Hygraph CMS

DigitalOcean Cloud

Resend Email API

Shadcn UI

Radix UI

Design Philosophy

Colors

One of my favorite things about my 2023 portfolio was the abundance of color in it. I wanted to refine that idea and make it even more appealing. The 2023 portfolio had different colors in one page depending on the reference. For example, the color for work experience was blue, so if there was a link or button referencing work experience in another page, that link was also blue to make that connection. However, this slowly started looking like a mess. I made a new rule that one page will have a singular accent color, no matter the content, references, etc. Then, instead of the bright solid colors in my old portfolio, I used muted and dark gradients in the new one, to make it not only look more modern, but also add a luscious dimensionality of shadows, bleed through, metallic texture, and glows. This is especially evident in the grid items, which have a partially opaque gradient background on a negative Z index, and the content overlayed on a bed of a gradient box, creating a shadow to finish the look.

Grid Design

This is not tremendously different from my 2023 portfolio, which is outdated but still available

here

. I wanted to keep the trendy grid design, but make it more interesting. So I made the grid container bigger, from 4 columns to 6 columns, and made the grid system more flexible, by adding mini grid sections throughout the page, instead of making the page one huge grid container. Then, I added section containers with pill stickers and large titles to separate the containers when required.

Hero Sections

The idea of muted colors and luscious texture is perhaps most evident in the hero section, or the title header of each page, which has a moving gradient made using Three.js shaders, made possible through a wonderful tool called

ShaderGradient

Typography

Getting typography right is incredibly difficult in my opinion. I knew for a fact that I changed typefaces and experimented with new ones on my old portfolio very frequently. For this portfolio, I went with

Figtree

, a font admired by some of the best UI designers. All title and title-adjacent text has tight tracking, which I think adds a modern flair to the text. As with the broad color philosophy, the text has gradient clip backgrounds, adding subtle color and more dimensionality to it.

Buttons

I brought back the Marquee Buttons from my old portfolio, since I loved them so much! I added the same gradient backgrounds to them. I also added a subtle shine element to the bottom of each button, which becomes brighter on hover, alongwith a new shine artifact appearing on the top as well. The primary links (button-style) are smaller, and pill-shaped. They also have the same shine properties, in addition to another one of my favorite animations, the bounce up and down animation, made very easily using

Framer Motion