How I built my website.

Igor Kowalczyk

593 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

I wanted to build a website that would be easy to maintain and update. I also wanted to make it look nice and be easy to use. I also wanted to learn some new technologies and tools, so I decided to build it using Next.js and Tailwind CSS.

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 learn 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.css

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
<a href="https://tailwindcss.com/" 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>
</a>

Output

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

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)[https://en.wikipedia.org/wiki/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, and 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 chose 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