Modern Responsive React JS Portfolio Website

Welcome to the Modern Responsive React JS Portfolio Website project! This repository contains the code for a fully responsive, customizable portfolio website built using React JS. This project is designed to help you create a professional online presence with features that cater to showcasing your skills, projects, and services.

Site link:- https://portfolio.ridhampuri.in/

🚀 Features

• Responsive Design: The website is fully responsive, ensuring it looks great on desktops, tablets, and mobile devices.

• Customizable Theme: Change the primary colors, background, and other theme settings with a persistent theme customization feature.

• Interactive Sections: Each section, from About to Portfolio, is interactive and smoothly scrolls with animated transitions.

• Social Media Integration: Links to your social media profiles are included to help visitors connect with you easily.

• Project Filtering: Visitors can filter projects by category, allowing for a more personalized viewing experience.

• Contact Form: Includes a contact form that sends messages directly to your email.

• Downloadable CV: Visitors can download your CV directly from the website.

• Auto-Swipe Testimonials: Display client testimonials with auto-swipe functionality for easy reading.

Screen.Recording.2024-06-27.at.20.48.49.mov

• FAQs Section: Provides answers to frequently asked questions to help address common queries.

• Cross-Browser Compatibility: Works seamlessly across all major browsers.

📸 Preview

Screen.Recording.2024-06-27.at.20.37.01.1.1.1.mp4

📚 Table of Contents

• Installation
• Usage
• Features
• Project Structure
• Customization
• Contributing

🛠️ Installation

1. Clone the repository:

   git clone https://github.com/ritz-bot/react-portfolio-website.git
   cd react-portfolio-website

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   Open your browser and navigate to http://localhost:3000 to see the website in action.

🎨 Customization

Theme Customization

• Persistent Theme Settings: The website includes a persistent theme customization feature. You can change the primary color and background, and these settings will be saved even if you refresh or reopen the browser.

Updating Your Information

• Logo and Personal Information: Replace the placeholder logo and text with your own logo and information in the src/assets and src/components folders.
• Social Media Links: Update the social media links in the src/config.js file.

Adding Projects

• Project Details: Add or update your projects in the src/data/projects.js file. Each project entry includes fields for the title, description, technologies used, and a link to the live project or GitHub repository.

Contact Information

• Email Integration: Set your email in the src/config.js file to receive messages directly from the contact form.

📂 Project Structure

react-portfolio-website
│
├── public
│   └── index.html
│
├── src
│   ├── assets
│   │   └── [Images and Logos]
│   ├── components
│   │   └── [React Components]
│   ├── data
│   │   └── projects.js
│   ├── styles
│   │   └── [CSS and Styled Components]
│   ├── config.js
│   └── App.js
│
└── README.md

📝 Features

Responsive Layout

The website uses a responsive design that adapts to different screen sizes, including desktops, tablets, and mobile devices.

Interactive Navbar

• Fixed Navbar: The navbar remains fixed at the top as you scroll.
• Smooth Scrolling: Clicking on navbar links smoothly scrolls to the corresponding sections on the page.

Sections Overview

1. Header: Contains your image, name, and call-to-action buttons.
2. About: Showcases your experience, projects, and allows visitors to download your CV.
3. Services: Lists your professional services with hover effects and animations.
4. Portfolio: Displays your projects with filtering options.
5. Testimonials: Visitors can view testimonials with auto-scroll and swipe functionality.
6. FAQs: Provides answers to common questions.
7. Contact: Includes a contact form and links for email, Messenger, and WhatsApp.

🤝 Contributing

We welcome contributions to improve this project. Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes.
4. Commit your changes:

   git commit -m "Add some feature"

5. Push to the branch:

   git push origin feature/your-feature-name

6. Open a pull request.