July 1, 2022 . 3 min read
This is my first post from my blog + portfolio website. I won't be writing much in this post but let me tell you a little about this site.
Let's see how different elements are styled. I also use this blog as reference to check how the content are rendered into HTML from Markdown.
This text will be italic
This text will be bold
You can combine them
The code snippets look like this. They have the file name at the top and also you can copy the code ( desktop users can hover, mobile users can tap ). The theme is inspired from the v2 Tailwind website.
console.log('Code snippets look like this'); console.log('The theme is custom made'); console.log('The font is Fira Code');
Blockquotes look like this!
The lists look like this and also can be nested.
The tables look like this.
|First Header||Second Header|
|Content from cell 1||Content from cell 2|
|Content in the first column||Content in the second column|
Since the blog uses MDX, we can add interactive react components like this counter below.
or this questionnaire below.
What is the best social media site?
Now lets looks at the tech stack used to build the site.
Next.js is one of the most popular frameworks out there and my go-to for building web application. It has SSR and SSG baked into it and they are super easy to use.
I am not a big fan of UI libraries like Bootstrap or Material-UI. I prefer to use TailwindCSS, because I have much more control over the styling. TailwindCSS makes it easy and quick to style your website and it works really well with React components.
MDX is the magician behind the curtain. MDX is an extended version of Markdown that also allows you to use React components. This will help me write more interactive content.
There you have it these are the 4 major technologies that I used to build my portfolio + blog site.