React Webpage Showcase

This project is my first React webpage, recreated from an image as part of my frontend skills showcase for HR, clients, and others interested in my work.

index

• Tech Used
• How To Install & Run
• Features
• ScreenShots
• Contact

Tech Used

• Vite React.js
• Tailwind CSS
• (HTML, CSS, JS)

Topic Used : components props useState

How to Install and Run

1. Clone the repository:

   gh repo clone Rajneeshzytox/React-Website-design
   cd react-webpage-showcase
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open your browser and visit http://localhost:5173 or other, to see the webpage.

Features

• Utilizes props to pass data dynamically.
• Renders products and banners based on data provided.
• Easily customizable: Add new elements to the data folder array to render additional products or banners.

Example data structure in data/Product_data.jsx:

[
     {
        id: "1",
        src: "img url",
        disc: "1st product text",
        prePrice: "$47.99",
        newPrice: "$28.99",
    },
     {
        id: "2",
        src: "img url",
        disc: "2nd product text",
        prePrice: "$47.99",
        newPrice: "$28.99",
    },
]

Screenshot (Project)

Screenshot (Inspiration)

---

see screenshots for mobile/tab/laptop in /public/screenshot/

---

Contact

• Email: kumarrajneesh.work@gmail.com
• LinkedIn: rajneeshzytox
• Instagram: @rajneeshzytox
• Twitter (X): rajneeshzytox
• Portfolio: rajneeshzytox