Quick Details
Tech Stack
- Next.js + React
- TypeScript
- TailwindCSS
- Framer Motion
Introduction
I wanted a portfolio website for the purpose having a unified "corner of the internet" to organize all my public details. The goal of this project was to create a website which functioned as a digital portfolio and to house a few other things such as an "about me" section, a store, a blog and more.
I've made previous attempts to create a personal website, however, I was never satisfied with my past attempts both functionally and stylistically. With this website, I wanted to include more creative appeal to the pages which showcased my skills such as the programming, 2D design and 3D design pages. Additionally, I wanted this website to serve as an example of my web development capabilities.
Approaching The Design
As previously mentioned, I knew that I wanted to highlight my individual skills in their own specially designed "domains" rather then cramming everything related to my portfolio into one disorganized page. For each portfolio page, I added a twist to the design. For example, the programming portfolio pages features a terminal-inspired design. The use of the same navigation bar throughout the website was the glue to tie the designs together.
Picking My Tools
In terms of functionality my personal website was very simple as there was not a high rate at which data moved around and had to be reflected. However, I saw this website as more then a simple personal website. I wanted this website to be a playground for me to test various web technologies, and perhaps include a few overkill features just for fun which may later require a more robust technology stack. For this reason, I chose to use React and Next.js. As these were popular tools in the industry, it was worth it for me to create this website with these tools as they would serve as a portfolio example. Since Next.js prioritized building static sites, I thought that it also was good balance between my website's current technical needs and it's future ones.
Additionally, with my desire to include both complex and unique styles in various parts of my website, I chose Tailwind CSS as this tool provided a good balance between low level flexability and convenience. To bring some motion to the website, I used Framer Motion since it was a capable, yet simple to use motion and animation library.