Skip to content

Latest commit

 

History

History
94 lines (61 loc) · 2.96 KB

README.md

File metadata and controls

94 lines (61 loc) · 2.96 KB
Raw

Project Banner

🚀 Modern UI/UX Website with React.js and Tailwind CSS

Welcome to the repository for building a Modern UI/UX Website featuring sleek parallax effects and bento box layouts. This project leverages React.js and Tailwind CSS, embracing a modern web design approach that prioritizes aesthetics and performance.

Inspired by the JavaScript Mastery tutorial on YouTube, this project enhances your skills in React.js and Tailwind CSS while adhering to mobile-first principles and contemporary UI designs.

📋 Table of Contents

  1. 🤖 Introduction
  2. ⚙️ Tech Stack
  3. 🔋 Features
  4. 🤸 Quick Start
  5. 🌐 Live Demo
  6. 🎉 Acknowledgements

🤖 Introduction

The Modern UI/UX Website exemplifies contemporary web design principles, integrating sleek animations, parallax scrolling effects, and **bento box layouts to deliver an immersive user experience. This website serves as a practical resource for anyone eager to enhance their skills in React.js, Tailwind CSS, and responsive design.

⚙️ Tech Stack

This project utilizes the following technologies:

  • Vite – A fast build tool tailored for modern web development.
  • React.js – A component-based JavaScript library for crafting dynamic user interfaces.
  • Tailwind CSS – A utility-first CSS framework designed for creating custom styles directly within your HTML.

🔋 Features

  • Responsive Design: Optimized for mobile-first viewing, adaptable to all screen sizes.
  • Parallax Animations: Engaging and smooth scrolling effects that enhance user interaction.
  • Bento Box Layouts: Stylish, grid-based sections that provide a clean and modern UI.
  • Reusable Components: Modular architecture that promotes scalability and maintainability.
  • Modern UI Trends: Incorporates the latest trends in UI/UX design, including circular shapes and vibrant gradients.

🤸 Quick Start

To run this project locally, follow these steps:

Prerequisites

Ensure you have the following installed:

  • Git
  • Node.js
  • npm

Installation

  1. Clone the repository: 
    git clone (https://github.com/yousefraeis/brainwave.git)
cd brainwave
  2. Install dependencies: 
    npm install

Running the Project

Start the development server:

npm run dev

Access the project at https://brainwave-nine-taupe.vercel.app/

🌐 Live Demo

Experience the live demo here.

🎉 Acknowledgements

A special shoutout to Adrian Hajdin and his YouTube channel, JavaScript Mastery, for their exceptional tutorials that inspired this project. Be sure to check out their channel for invaluable insights into JavaScript and web development!