HomeAboutProjectsContact
My Personal Portfolio
You're here now! Created using Next.js, my goal was to create a clean looking, easy to navigate portfolio to show off my skills and projects. Currently being self-hosted on my personal server throughI wanted it to be hosted with a modern framework a custom docker container.
This is my second iteration of my website. My previous version was created in HTML and CSS and hosted through Nginx. For this second iteration, I wanted to try a modern web-development framework. While I was at it, I did some research on how to design a portfolio and created a mock-up of what I wanted mine to look like based on a couple designs I liked.
For my background, I wanted something neutral that would not take attention away from the text on my page. My previous website used images I had taken with my camera, but I ran into a few problems trying to use them. First, images are large. When I compressed them, they looked grainy and took away from my site. They also were hard to scale on mobile, and ended up looking very zoomed in to fit on a portrait screen. I decided to go with a programatic background which generates to fit on any screen. I looked online for inspiration and ended up with the one I have now. I decided to go with the gridlines as I feel they go well with the "portfolio" / "journal" aesthetic I was going for with my site.
As for navigation, I tried a few configurations before I ended with my current form. Originally, I had a back button permanently fixed to the top left corner of the display. After having a few of my friends usertest my website, I realized they naturally used the browser's back button instead of mine, so I decided it didn't make sense to have it there. I then tried creating a navigation pane at the footer of the page, but found that people wouldn't always scroll all the way down to the bottom to find them. Ultimately, I decided to put the navigation pane fixed to the top of the screen so it is always accessible.
Below is a picture of my previous website, which was designed with full-screen sub-pages which was designed to be navigated by scrolling up and down the page.
My Personal Portfolio
You're here now! Created using Next.js, my goal was to create a clean looking, easy to navigate portfolio to show off my skills and projects. Currently being self-hosted on my personal server throughI wanted it to be hosted with a modern framework a custom docker container.
This is my second iteration of my website. My previous version was created in HTML and CSS and hosted through Nginx. For this second iteration, I wanted to try a modern web-development framework. While I was at it, I did some research on how to design a portfolio and created a mock-up of what I wanted mine to look like based on a couple designs I liked.
For my background, I wanted something neutral that would not take attention away from the text on my page. My previous website used images I had taken with my camera, but I ran into a few problems trying to use them. First, images are large. When I compressed them, they looked grainy and took away from my site. They also were hard to scale on mobile, and ended up looking very zoomed in to fit on a portrait screen. I decided to go with a programatic background which generates to fit on any screen. I looked online for inspiration and ended up with the one I have now. I decided to go with the gridlines as I feel they go well with the "portfolio" / "journal" aesthetic I was going for with my site.
As for navigation, I tried a few configurations before I ended with my current form. Originally, I had a back button permanently fixed to the top left corner of the display. After having a few of my friends usertest my website, I realized they naturally used the browser's back button instead of mine, so I decided it didn't make sense to have it there. I then tried creating a navigation pane at the footer of the page, but found that people wouldn't always scroll all the way down to the bottom to find them. Ultimately, I decided to put the navigation pane fixed to the top of the screen so it is always accessible.
Below is a picture of my previous website, which was designed with full-screen sub-pages which was designed to be navigated by scrolling up and down the page.