Overview

The React Portfolio is a portfolio template designed for developers. It features multiple pages with the option for dark mode, social media presence meta tags, Google Analytics integration, a modern design, and perfect Lighthouse scores.

Features

• Dark Mode Toggler and OS dark mode detection: Allows users to switch between light and dark mode and detects the dark mode setting of the user’s operating system.
• Social Media Presence meta tags: Includes meta tags for social media sharing, ensuring that the correct information and image display when sharing the portfolio link.
• Google Analytics: Integrates Google Analytics, providing data and insights on website traffic and usage.
• Multiple Pages (React Router): Utilizes React Router to support multiple pages, allowing for easy navigation between different sections of the portfolio.
• Fully Responsive: The template is designed to be fully responsive, providing an optimal user experience on any device.
• Modern Design: Features a modern and visually appealing design, showcasing the developer’s skills and projects in a professional manner.
• Perfect Lighthouse Score: The template has been optimized to achieve a perfect Lighthouse score, ensuring excellent performance, accessibility, and best practices.

Installation

To install the React Portfolio template, follow these steps:

Prerequisites:

• Make sure Git is installed on your machine.
• Ensure that Node.js is installed on your machine.
• Have basic familiarity with your machine’s command line.
• Understand how to use JSON data outlines (arrays of objects).

1. Fork the repository and clone locally: Start by forking the React Portfolio repository and then clone it to your local machine using Git.

2. Replace the images: Replace the example images with your own images. The following images need to be replaced:

   • /src/assets/img/self.png
   • /public/favicon.ico
   • /public/website.jpg (this is the image that appears when sharing the portfolio link on social media)

3. Edit your information: Open the assets/info/Info.js file and follow the instructions in the comments to replace the default information with your own. Additionally, replace /public/resume.pdf with the link to your own resume.

4. Modify the Color Scheme: To change the main gradient colors, edit the /src/assets/colors/mainGradient.js file. To change the particles background color, edit the /src/assets/colors/particlesBg.js file.

5. Configure Google Analytics: Modify the /src/utils/log.js file with your own Google Analytics credentials.

6. Update Social Media meta tags: Edit the /public/index.html file to include the necessary meta tags for social media sharing. You can use a generator to generate the correct meta tags.

7. Deployment: It is recommended to use Netlify for deployment. Follow the instructions provided to deploy your site. Note that if you encounter a bug with react-router-dom on Netlify, you will need to add a _redirects file in the public folder with the specified code.

Summary

The React Portfolio is a ready-to-use template for developers to showcase their skills and projects. With its multiple pages, dark mode support, Google Analytics integration, and modern design, it provides a professional and visually appealing portfolio solution. The template is easy to install and customize, allowing developers to personalize it according to their own preferences and branding. Netlify is recommended for deployment, ensuring a seamless and hassle-free process. Overall, the React Portfolio template offers an excellent foundation for developers to create a stunning portfolio website.