{"id":26237180,"url":"https://github.com/programmersiam/ps-brainwave","last_synced_at":"2026-04-29T21:33:25.612Z","repository":{"id":238738906,"uuid":"797410410","full_name":"ProgrammerSiam/ps-brainwave","owner":"ProgrammerSiam","description":"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.","archived":false,"fork":false,"pushed_at":"2024-05-10T00:49:55.000Z","size":11393,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-10T21:38:08.244Z","etag":null,"topics":["react-dom","react-just-parallax","react-router-dom","reactjs","responsive","scroll-lock","tailwindcss"],"latest_commit_sha":null,"homepage":"https://ps-brainwave.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProgrammerSiam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-07T19:20:59.000Z","updated_at":"2024-05-10T00:49:58.000Z","dependencies_parsed_at":"2024-05-12T06:15:34.127Z","dependency_job_id":null,"html_url":"https://github.com/ProgrammerSiam/ps-brainwave","commit_stats":null,"previous_names":["programmersiam/brainwave","programmersiam/ps-brainwave"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-brainwave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-brainwave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-brainwave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-brainwave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProgrammerSiam","download_url":"https://codeload.github.com/ProgrammerSiam/ps-brainwave/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243340158,"owners_count":20275822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-dom","react-just-parallax","react-router-dom","reactjs","responsive","scroll-lock","tailwindcss"],"created_at":"2025-03-13T04:28:36.368Z","updated_at":"2025-12-28T01:30:07.208Z","avatar_url":"https://github.com/ProgrammerSiam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"#\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://i.ibb.co/55g7xRb/Post.jpg\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Vite-black?style=for-the-badge\u0026logoColor=white\u0026logo=vite\u0026color=646CFF\" alt=\"vite\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-React_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=61DAFB\" alt=\"react.js\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eModern UI/UX website\u003c/h3\u003e\n\n   \u003cdiv align=\"center\"\u003e\n     Build this project step by step in \u003ca href=\"https://www.youtube.com/@javascriptmastery/videos\" target=\"_blank\"\u003e\u003cb\u003eJavaScript Mastery\u003c/b\u003e\u003c/a\u003e YouTube Channel.\n    \u003c/div\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 📚 [What I learned from this project](#learn)\n5. 🚀 [Extra features added to this project](#add)\n\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nBrainwave - 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.\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Vite\n- React.js\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing, footer, and header.\n\n👉 **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling\n\n👉 **Complex UI Geometry**: Utilizes tailwindcss for intricate shapes like circular feature displays, grid lines, and side lines.\n\n👉 **Latest UI Trends**: Incorporates modern design elements such as bento grids.\n\n👉 **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc.\n\n👉 **Responsive**: Ensures seamless functionality and aesthetics across all devices\n\nand many more, including code architecture and reusability\n\n\n## \u003ca name=\"learn\"\u003e📚 Learn\u003c/a\u003e\n\n\n  **Header**:\n-  Create an active link for navigation\n-  Use conditional statements to control the display of elements\n-  Implement dynamic classes to style elements based on conditions\n-  Explore new npm packages like scroll-lock\n-  Build a hamburger menu that toggles visibility of navigation items\n-  Implement click functionality to navigate to different sections of the website\n\n\n  **Hero Section**:\n-  Utilize the react-just-parallax npm package to create a parallax effect\n-  Explore features like curve and BackgroundCircles for visual enhancements  \n\n  **Benefits Section**:\n-  Create a component to maintain consistency in titles\n-  Learn design concepts to improve the visual appeal of your project\n\n  **Collaboration Section**:\n-  Design circular images\n-  Apply design principles to enhance the layout\n\n  **Services Section**:\n-  Implement a Bento Box layout for effective content organization\n\n  **Pricing Section**:\n-  Design a visually appealing pricing table with a left/right orientation  \n\n  **Roadmap Section**:\n-  Utilize advanced grid layouts for a structured design\n\n  **Footer Section**:\n-  Design a simple footer layout\n\n\n\n\n\n## \u003ca name=\"add\"\u003e🚀 Extra features added\u003c/a\u003e\n\n\n  **Route[/sign up]**:\n-  loading..\n-  loading..\n\n  **Route[/sign in]**:\n- loading..\n- loading..\n\n\n\n\n## Connect with me!\n  \n[![Facebook Badge](https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge\u0026logo=facebook\u0026logoColor=white)](https://www.facebook.com/ProgrammerSiam.xyz) \n[![Youtube Badge](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white)](https://youtube.com/@programmersiam) \n[![Linkedin Badge](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/programmersiam/) \n[![Instagram Badge](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge\u0026logo=instagram\u0026logoColor=white)](https://www.instagram.com/programmersiam/) \n[![Twitter Badge](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white)](https://twitter.com/ProgrammerSiam) \n[![Mail Badge](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:mehedihasansiam.com@gmail.com)\n\n\n\n## License\nThis project is \u003cstrong\u003efree to use\u003c/strong\u003e  and does not contains any license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammersiam%2Fps-brainwave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogrammersiam%2Fps-brainwave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammersiam%2Fps-brainwave/lists"}