The Project

This was my initial attempt at a portfolio site. It was based loosely off a tutorial project done by the Net Ninja on YouTube. In that project, he created a recipe/cooking site using Next JS and Contentful. I took that basic idea and tried to transform it into a portfolio site.

Initially, I was quite pleased with it as I thought it contained a lot of information about myself and looked decent. However, as time went on and I learned a bit more about design, UI, UX, and all that I began to feel that it was too complicated and maybe one more for people who had lots of stuff to show or for a different type of portfolio.

The Design

The initial design idea was to have four different sections: About and Business Info, Portfolio Items, Blog Posts, and Contact. So, there were those four pages plus a home page where visitors could jump to those four pages. On the home page, it would display the most recent portfolio item and blog post.

The blog and portfolio pages would both show all of the items and have a short description of the post or item. The About/Business and Contact pages would just have basic information about my business ideas, background, and ways to get in contact. Simple enough.

Like most(?) developers, I prefer dark mode viewing so I made the site a little bit with a darker background and color theme. I tried to use Framer Motion to make it a little more interesting visually. Font wise I tried to keep it simple and clean looking.

The Process

The first step was of course, completing the tutorial version of the site. The tutorial version was a bit simpler (single page), so converting it to a home page and separate pages was the first step. After that it was connecting the blog posts and portfolio items from Contentful to the site and getting all the information to render properly. Once that was done, it was on to styling and just writing the information.

The final step was make it 'international'. Because I lived in South Korea for several years and still have several contacts there, I wanted to make it at least a little accessible for Koreans to visit. So, I looked into Next JS' internationalization feature. Fortunately it was quite simple. So, Korean text went in and the i18n settings were configured and it worked quite well.

The Stack

This project was made with Next JS. At that time, I had started using Next JS more and more just in general because I really like the routing that came with it (as opposed to using React Router or whatever). Which is another reason that I was interested in the original tutorial because it used Next JS. So, Next JS was used and Contentful was used as the headless CMS. I didn't really care about the headless CMS that much as long as it was simple enough to create the content, didn't cost me, and was easy enough to fetch the data from. And fortunately, Contentful ticked off those boxes. Since Vercel maintains Next JS it was the obvious place to host the site since pushing projects on Github to Vercel is super easy. The domain name was purchased through domains.com. All the images were standardized using Photoshop.

Reflections

So why did I decide to re-make this site? Mainly because I think it failed to effectively communicate my intentions. If you opened the site, I think it was okay, but not great for a relatively new freelance developer. If I (or whoever was using the site) was more established and was looking more to show off the various projects I've made I think it would be okay. Because people would likely be visiting to see the projects and such. But for a newer developer, I think it's probably more important to 'sell' my ideas, style, and communication more than what I've done.

I was also not satisfied with the responsiveness of the site. When designing the site, things looked okay on different screen sizes, but in real life after pushing to production everything was just a little bit off. So I think it might be better to design from a mobile-first perspective and then make it responsive to larger screens.