Skip to content

Latest commit

 

History

History
164 lines (107 loc) · 5.99 KB

README.md

File metadata and controls

164 lines (107 loc) · 5.99 KB

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.

Xnip2024-06-27_20-46-48

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

Xnip2024-06-27_20-47-02

  • 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. Xnip2024-06-27_20-48-12

  • 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.

Xnip2024-06-27_20-51-12

  • Downloadable CV: Visitors can download your CV directly from the website. Xnip2024-06-27_20-58-13

  • 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.

Xnip2024-06-27_20-52-23

  • 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

  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.