Skip to content

Latest commit

 

History

History
51 lines (40 loc) · 1.89 KB

README.md

File metadata and controls

51 lines (40 loc) · 1.89 KB
Raw

Particle Background Web App

This is a React application that showcases a particle background effect using react-tsparticles. The project includes a Navbar, a Pricing Section, and a particle animation that renders in the background, adding a modern aesthetic to the web page.

Features

  • Particle Background: A dynamic particle effect running smoothly in the background using react-tsparticles.
  • Responsive Design: The UI is responsive and adapts to different screen sizes, providing a seamless experience on both desktop and mobile devices.
  • Dark Mode: Supports light and dark themes, enhancing usability and accessibility.

Tech Stack

  • React : A JavaScript library for building user interfaces.
  • TypeScript : Provides type safety and better developer experience.
  • Tailwind CSS : A utility-first CSS framework for rapidly building custom designs.
  • tsparticles : A lightweight library for creating animated particle backgrounds.

Installation

Prerequisites

  • Node.js (v14.x or higher)
  • npm or yarn

Project Structure

  ├── public
  │ └── index.html
  ├── src
  │ ├── components
  │ │ ├── darkParticleBackground.tsx
  │ │ ├── lightParticleBackground.tsx
  │ │ ├── Navbar.tsx
  │ │ ├── PricingSection.tsx
  │ │ └── ParticleBackground.tsx
  │ ├── contexts
  │ │ └── ThemeContext.tsx
  │ ├── App.tsx
  │ ├── index.css
  │ └── main.tsx
  ├── package.json
  ├── tailwind.config.js
  └── README.md
  • components: Contains the React components like Navbar, PricingSection, and ParticleBackground.
  • contexts: Includes context providers like ThemeContext for managing global state.
  • styles: Houses global styles and configurations.
  • App.tsx: The main component that ties everything together.
  • index.tsx: Entry point of the application.