Building and Deploying My Personal Portfolio Using React & Node.js

Introduction:

Hello, everyone! In my latest project, I created and deployed a personal portfolio website using React and Node.js. This project allowed me to not only showcase my skills and projects but also gain hands-on experience in deploying and managing a personal website. In this post, I’ll walk you through the process and share what I learned along the way.

1. Project Overview

The goal of this project was to build a dynamic and responsive personal portfolio where I could showcase my skills, projects, and learning journey. Here’s a quick overview of the key components:

Frontend with React: I used React to build the frontend, taking advantage of its component-based architecture to create a clean and responsive user interface.
Backend with Node.js: For the backend, I used Node.js, which provided a flexible environment for handling server-side logic and integrating any additional functionalities.
Deployment on GitHub Pages: I chose GitHub Pages as the hosting platform, which allowed for easy and automatic updates every time I pushed new changes to the repository.

2. Challenges & Solutions

Every project comes with its own set of challenges. Here’s how I tackled a few during this one:

GitHub Pages Configuration: Configuring GitHub Pages to work seamlessly with my custom domain and React app required some research, but once set up, it provided a reliable and easy-to-manage hosting solution.
Responsive Design: Ensuring the portfolio was fully responsive and looked great on all devices was a key challenge. I focused on media queries and flexible layout design to achieve this.

3. Key Learnings

Here are some of the valuable lessons I learned from this project:

Deploying with GitHub Pages: This project was my first experience deploying a site with GitHub Pages, and it taught me how to automate deployments and manage a live site.
Version Control Practices: Working with Git to manage updates and ensure that the site was always up-to-date was a great exercise in version control best practices.
Responsive Web Design: I gained more experience in making web designs responsive, ensuring that the site provides a great user experience across different devices. ### 4. Reflecting on the Experience

Creating and deploying this personal portfolio was a rewarding experience that solidified my understanding of web development and deployment. I’m excited to keep updating the portfolio with new projects and insights as I continue my learning journey.

Conclusion:
Building this portfolio was a great way to apply what I’ve learned so far in my DevOps journey. It’s an ongoing project that I plan to keep updating. If you’re also working on a portfolio or have experience with React, Node.js, or GitHub Pages, let’s connect and share insights!

Link to portfolio page
link to GITHUB_REPO