How i built my website.

Igor Kowalczyk

572 words • 3 min read

I have put a lot of time and effort into rebuilding this site, as well as this blog you are reading right now. My old portfolio was built on Jekyll with the addition of a few plugins. It didn't look very nice, and it wasn't very usable either. So, I decided to change that.

The Idea

In June 2022 I started learning Next.js, this framework seemed the easiest for me to understand and learn. As it turned out later - it turned out to be an excellent choice.

I didn't learned from some tutorials or blogs. I just opened a code editor and started writing. I was motivated by the desire to create a new place on the Internet in which I could show my work, write blog posts, etc. I was also motivated by the fact that I wasn't happy with my old portfolio. I hated it.

Technologies I used

As I mentioned earlier - I wanted to learn something new. I used frameworks that I didn't know before or knew about them but didn't use them

Next.js

Next.js is a React.js framework that I used to build my website. It is a framework that is ideal for production, it has many useful things like image optimization, API routes, Middleware

Next.js has several options for rendering pages:

Tailwind

Tailwind is a utility-first CSS framework. It provides multiple CSS classes like flex, text-center etc.

With Tailwind, you don't have to leave the HTML file to add styles to elements. Tailwind will generate the corresponding CSS classes during production and optimize them - no duplicates and no worries about load time.

Example

Tailwind
pages/index.jsx
[...]
<div className="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded duration-200 inline-block cursor-pointer">
<span>Tailwind</span>
</div>
[...]

Tailwind output

output.css
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

// [...]

Note: I did not use <Button> because I did not build such a component for the blog. The blog is written in MDX, not in JSX.

Contentlayer

Contentlayer is a content SDK that validates and transforms content into type-safe JSON data that you can use in your pages.

The easiest solution to manage content is to use a CMS (content management system), but the CMS does not give you control over all the elements you put on the site. You are limited by the elements that the CMS provides.

What if you want to build something more? Contentlayer allows you to add your own React components, arrange the page however you want. Contentlayer is suitable for building documentation, blog or even regular pages. Contentlayer allows you to manage all your content, it also validates it.

I chosed Contentlayer for a few reasons:

  • You can simply import the content as you would with any other library or component.
  • It comes with built-in and configurable content validations. You don't have to worry about checking every single content anymore
  • It works together with Next.js, automatically checks the content directories and renders the corresponding pages
Suggest a change