Tech Stack
For the front-end, I wanted to use React. But React alone is not good enough for SEO; and I did have to consider many factors like routing, image optimization etc. So, I chose Astro as my main front-end stack. And of course TypeScript for type checking.
For styling, I use TailwindCSS. This is because I love developer experience that Tailwind gives and it has a lot of flexibilities compared to other component UI libraries like MUI or React Bootstrap.
Here are the frameworks, libraries and services that I’ve used for this project.
- Front-end: Astro with React, TailwindCSS, TypeScript
- Deployment: Vercel
Features
The following are certain features of my portfolio and blog
Dynamic Sitemap
Sitemap plays an important part in SEO. Because of this, every single page of this site should be included in sitemap.xml. I made an auto generated sitemap in my website whenever I create a new content or tags or categories.
Light & Dark Themes
Due to dark theme trend in recent years, many websites include dark theme out of the box nowadays. Certainly, my website also supports light & dark themes.
Fully Accessible
This website is fully accessible. You can navigate around by only using keyboard. I put all a11y enhancement best practices like including alt text in all images, no skipping headings, using semantic HTML tags, using aria-attributes properly.
Search box, Categories & Tags
All blog contents can be searched by search box. Moreover, contents can be filtered by categories and tags. In this way, blog readers can search and read what they really want.