Technologies I used to Created My Portfolio Website: A Journey with Next.js, Tailwind CSS, and More!

Hey there! Welcome to my blog, where I'll take you on a journey through the creation of my very own portfolio website. If you're looking to build your own site or just curious about the technologies I used, I'll be sharing my experiences in a conversational tone, so let's dive right in!

In this website, I am utilizing a combination of Next.js, MongoDB, and Tailwind CSS for development and design.

Next.js

I chose Next.js for its exceptional development experience and time-saving benefits compared to other options. The API routes in Next.js are particularly appealing.

Tailwind CSS

Tailwind CSS powers the design of this website. Its utility classes streamline styling, ensuring a consistent and visually appealing user interface.

MongoDB

For data storage, I've turned to MongoDB, utilizing the power of Mongoose to establish a connection.

Axios

Axios provides a feature-rich, flexible, and user-friendly API for managing HTTP requests. I rely on it to handle requests when the contact form is submitted.

validator.js

Specifically, I use it to validate email addresses submitted through the contact form. Validator simplifies the process of ensuring that the email addresses provided are in the correct format.

Blogging Approach

I've adopted a markdown-based approach for writing blogs. While you might wonder about the choice not to use a database, let me clarify. On this site, I exclusively post blogs detailing my projects, offering insights into their creation. Should the need for numerous blogs arise in the future, transitioning to a database is a possibility.

Gray-matter

Gray Matter, a popular JavaScript library, proves invaluable for working with front matter in Markdown files. It efficiently handles metadata management for my blogs.

Remark

Remark is a key player in transforming Markdown content. It excels in parsing, modification, and transformation tasks. Through Remark, I parse my Markdown content into an abstract syntax tree (AST).

Remark-html

The Remark-html library seamlessly converts the abstract syntax tree (AST) generated by Remark into HTML output, playing a vital role in transforming blogs into HTML.

Additional Packages

In addition to the core stack, I've integrated several useful packages:

Thank You

Thank you for taking the time to read about the technologies and tools powering this website.