Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yousefraeis/brainwave
Brainwave is a modern UI/UX website built with React.js and Tailwind CSS, showcasing sleek parallax effects and stylish bento box layouts. This project exemplifies contemporary web design principles, prioritizing both aesthetics and performance.
https://github.com/yousefraeis/brainwave
brainwave css front-end front-end-development frontend frontend-web html html-css-javascript html5 javascript javascript-mastery javascriptmastery react reactjs taliwindcss ui ui-ux ux
Last synced: about 1 month ago
JSON representation
Brainwave is a modern UI/UX website built with React.js and Tailwind CSS, showcasing sleek parallax effects and stylish bento box layouts. This project exemplifies contemporary web design principles, prioritizing both aesthetics and performance.
- Host: GitHub
- URL: https://github.com/yousefraeis/brainwave
- Owner: yousefraeis
- Created: 2024-09-27T11:51:26.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-27T12:59:03.000Z (3 months ago)
- Last Synced: 2024-11-01T20:25:37.030Z (about 2 months ago)
- Topics: brainwave, css, front-end, front-end-development, frontend, frontend-web, html, html-css-javascript, html5, javascript, javascript-mastery, javascriptmastery, react, reactjs, taliwindcss, ui, ui-ux, ux
- Language: JavaScript
- Homepage: https://brainwave-nine-taupe.vercel.app
- Size: 10.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 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](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🌐 [Live Demo](#live-demo)
6. 🎉 [Acknowledgements](#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:
```bash
git clone (https://github.com/yousefraeis/brainwave.git)
cd brainwave
```
2. Install dependencies:
```bash
npm install
```
### Running the Project
Start the development server:
```bash
npm run dev
```
Access the project at https://brainwave-nine-taupe.vercel.app/
---
## 🌐 Live Demo
Experience the live demo [here](https://brainwave-nine-taupe.vercel.app/).
---
## 🎉 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!