https://github.com/programmersiam/ps-brainwave
Learn to create modern websites with sleek parallax effects and bento box layouts. This course covers everything from stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills.
https://github.com/programmersiam/ps-brainwave
react-dom react-just-parallax react-router-dom reactjs responsive scroll-lock tailwindcss
Last synced: about 1 month ago
JSON representation
Learn to create modern websites with sleek parallax effects and bento box layouts. This course covers everything from stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills.
- Host: GitHub
- URL: https://github.com/programmersiam/ps-brainwave
- Owner: ProgrammerSiam
- Created: 2024-05-07T19:20:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-10T00:49:55.000Z (about 2 years ago)
- Last Synced: 2024-05-10T21:38:08.244Z (about 2 years ago)
- Topics: react-dom, react-just-parallax, react-router-dom, reactjs, responsive, scroll-lock, tailwindcss
- Language: JavaScript
- Homepage: https://ps-brainwave.netlify.app/
- Size: 10.9 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 📚 [What I learned from this project](#learn)
5. 🚀 [Extra features added to this project](#add)
Brainwave - Modern UI/UX website, developed using React.js and Tailwind CSS, exemplifies modern UI/UX principles. Its sleek design, seamless animations, and overall user experience set a high standard, serving as a reference or inspiration for future modern applications or websites in general.
- Vite
- React.js
- Tailwind CSS
## 🔋 Features
👉 **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing, footer, and header.
👉 **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling
👉 **Complex UI Geometry**: Utilizes tailwindcss for intricate shapes like circular feature displays, grid lines, and side lines.
👉 **Latest UI Trends**: Incorporates modern design elements such as bento grids.
👉 **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc.
👉 **Responsive**: Ensures seamless functionality and aesthetics across all devices
and many more, including code architecture and reusability
## 📚 Learn
**Header**:
- Create an active link for navigation
- Use conditional statements to control the display of elements
- Implement dynamic classes to style elements based on conditions
- Explore new npm packages like scroll-lock
- Build a hamburger menu that toggles visibility of navigation items
- Implement click functionality to navigate to different sections of the website
**Hero Section**:
- Utilize the react-just-parallax npm package to create a parallax effect
- Explore features like curve and BackgroundCircles for visual enhancements
**Benefits Section**:
- Create a component to maintain consistency in titles
- Learn design concepts to improve the visual appeal of your project
**Collaboration Section**:
- Design circular images
- Apply design principles to enhance the layout
**Services Section**:
- Implement a Bento Box layout for effective content organization
**Pricing Section**:
- Design a visually appealing pricing table with a left/right orientation
**Roadmap Section**:
- Utilize advanced grid layouts for a structured design
**Footer Section**:
- Design a simple footer layout
**Route[/sign up]**:
- loading..
- loading..
**Route[/sign in]**:
- loading..
- loading..
## Connect with me!
[](https://www.facebook.com/ProgrammerSiam.xyz)
[](https://youtube.com/@programmersiam)
[](https://www.linkedin.com/in/programmersiam/)
[](https://www.instagram.com/programmersiam/)
[](https://twitter.com/ProgrammerSiam)
[](mailto:mehedihasansiam.com@gmail.com)
## License
This project is free to use and does not contains any license.
