Introduction

In this project, I'll walk you through the development process of my portfolio website using Next.js and Bootstrap. Next.js is a React framework that enables server-side rendering, automatic code splitting, and simple configuration, while Bootstrap is a popular CSS framework for building responsive and mobile-first websites.

Getting Started

Setting Up the Environment

First, I set up my development environment by installing Node.js and npm. Then, I initialized a new Next.js project by running the following command:

bash: npx create-next-app my-portfolio

Integrating Bootstrap

Since I wanted to use Bootstrap for styling, I decided to integrate it into my Next.js project. I used the react-bootstrap library, which provides Bootstrap components as React components. To install react-bootstrap, I ran the following command:

bash: npm install react-bootstrap bootstrap

Learning Next.js Basics

Before diving into the project, I familiarized myself with Next.js by reading the official documentation and following some tutorials. I learned about pages, routing, data fetching, and dynamic routes.

Development Process

Creating Components

I started by creating reusable components for the header, footer, navigation bar, and other sections of my portfolio website. These components were built using Bootstrap classes and customized as needed.

Designing Pages

Next, I designed the individual pages of my portfolio website, such as the home page, about page, portfolio page, and contact page. I utilized Next.js's file-based routing system to create separate files for each page.

Conclusion

It was a fun project to do!