Portfolio Boilerplate using NextJS, TailwindCSS and Rough Notation with Dark Mode support.

Building a portfolio website is a great way to showcase your skills and experience as a developer, and using the right tools can make the process much easier. In this blog post, we'll explore how to create a portfolio website using Next.js, Tailwind CSS, and Rough Notation, with support for a dark mode theme.

Next.js is a React-based framework for building server-rendered JavaScript applications. It provides a powerful set of features for building web apps, including automatic code splitting, server-side rendering, and easy integration with other tools.

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to style elements. It makes it easy to create consistent, responsive designs without having to write a lot of custom CSS.

Rough Notation is a library that allows you to create hand-drawn annotations on your web pages. It can be used to highlight text or elements on your portfolio, giving it a unique and personal touch.

To get started, you'll first need to set up a new Next.js project. You can do this by running the following command in your terminal:

npx create-next-app my-portfolio

Once the project is set up, you can install Tailwind CSS and Rough Notation by running the following commands:

npm install tailwindcss rough-notation

Next, you'll need to configure Tailwind CSS to work with Next.js. You can do this by creating a new CSS file in the /styles directory of your project and importing the Tailwind CSS styles. You should also create a new PostCSS config file in the root directory of your project and configure it to use the tailwindcss and autoprefixer plugins.

To use Rough Notation, you'll need to import the library and use the <RoughNotation> component to wrap the text or element that you want to highlight. You can then use the type prop to specify the type of annotation you want to create. For example, to create an underline annotation, you would use type="underline".

For adding dark mode functionality, you can use next-themes package that allows you to switch between different themes on your website. You can also use context API to store theme preference and use it throughout the website.

As you build your portfolio, you can use Next.js's built-in features, such as routing and server-side rendering, to create different sections for your portfolio, such as an about me section, a projects section, and a contact section. You can use Tailwind CSS to create a consistent design throughout the site, and Rough Notation to highlight important information.

When creating your portfolio, it's important to focus on showcasing your skills and experience in the most effective way possible. Using Next.js, Tailwind CSS, and Rough Notation, along with dark mode support, can help you create a professional and visually appealing portfolio that stands out from the crowd and also provide an interactive and user-friendly experience.

You can check and experiment with this on your own, here's the GitHub link for the repository: https://github.com/jaimanyash/portfolio-website