How I built my website

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 with React.js and was made at the beginning of my coding journey. It did look okay, and it was somewhat usable.. So, I decided to change that.

#The Idea

hello

memo memo memo memo

I wanted to build a website that would be easy to maintain and update, look modern and reflect my skills. I also wanted to make it look nice and be easy to use. I also wanted to learn more about Next.JS and test out some libraries and features.

In probably about 1.5 to 2 years ago 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 did watch some shot tutorials at the beginning but after that I just opened a code editor and the docs 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 didn't hated it but it also wasent very good.

#Technologies I used

As I mentioned earlier - I wanted to learn more about Next.js and test out some libraries and features. I also wanted to use some new technologies that I haven't used before. I wanted to use a CSS framework that would make it easier to style the website and make it look modern.

#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:

SSR (Server-side rendering) - it will pre-render this page on each request server-side.
SSG (Static-site generation) - it will pre-render this page at build time.
ISR (Incremental Static Regeneration) - it will pre-render this page at build time and then on-demand.

#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.

Tailwind

page.tsx

js
<a href="https://tailwindcss.com/" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-sm duration-200 inline-block cursor-pointer">
<span>Tailwind</span>
</a>

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

// [...]

tailwind.config.js

json
{
  "content": [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  "theme": {
    "extend": {}
  },
  "plugins": []
}

#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, 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