rakesh9100 / beautiify Goto Github PK

Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.

Home Page: https://beautiify.netlify.app

License: Apache License 2.0

HTML 40.07% JavaScript 18.24% CSS 41.69%

components web-development iwoc2024 jwoc2k24 open-source open-source-development open-source-project swoc2024

beautiify's Introduction

✨Beautiify✨

Introduction📌

Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.

Technology Used🚀

(back to top)

Overview⭐

Live Project -- (https://beautiify.netlify.app/)

Home/Main Page :-

Components Page :-

Contact Page :-

(back to top)

Getting Started💥

Fork this Repository.
Clone the forked repository in your local system.

git clone https://github.com/<your-github-username>/Beautiify.git

Open index.html in your browser.
View the Live Project here.
Raise an issue if you find a bug or add a feature.
Wait for the issue to be assigned and proceed only after the issue is assigned to you.
Navigate to the project directory.

cd Beautiify

Create a new branch for your feature.

git checkout -b <your_branch_name>

Perfom your desired changes to the code base.
Track and stage your changes.

# Track the changes
git status

# Add changes to Index
git add .

Commit your changes.

git commit -m "your_commit_message"

Push your committed changes to the remote repo.

git push origin <your_branch_name>

Go to your forked repository on GitHub and click on Compare & pull request.
Add an appropriate title and description to your pull request explaining your changes and efforts done.
Click on Create pull request.
Congrats! 🥳 You've made your first pull request to this project repo.
Wait for your pull request to be reviewed and if required suggestions would be provided to improve it.
Celebrate 🥳 your success after your pull request is merged successfully.

(back to top)

Contributing Guidelines📑

Read our Contributing Guidelines to learn about our development process, how to propose bugfixes and improvements, and how to build to Click-The-Edible-Game.

Code Of Conduct📑

This project and everyone participating in it is governed by the Code of Conduct. By participating, you are expected to uphold this code.

This repo has been part of the following Open Source Programs🥳

_{IWOC 2k24}

_{JWOC 2k24}

_{SWOC 2k24}

(back to top)

Project Admin⚡

_{Rakesh Roshan}

Project Contributors🫂

Contributing is fun🧡

Contributions of any kind from anyone are always welcome🌟!!

Give it a 🌟 if you ❤ this project. Happy Coding👨‍💻

(back to top)

beautiify's People

Contributors

Stargazers

Watchers

Forkers

rajanarahul93 nikmangt codebyrajeev yatin12527 pankhuri92 kanishka-parmar vishal0316 sinha-sanchay raghav1482 kapileswar-moharana jasleengujral01 dhruvdy bhavya-anand19 saurav2208 akshatverma01 avdhesh-varshney kshitigambhir zahidgul107 ananyasiingh akashsri3bi pritish212121 rishicds ghoshaditi cryptocat8 komal73 muskan42 anshulkansal04 daseeker67 sanketshinde3001 iamsudhir-kumar divyansh2375 manoj-14 pb0126 vikranthraosb sulagnakundu aftabmankapure dhruviktank rajlakshmi18704 prithwi32 chaudharyaryanpanwar praptisharma28 saikatdey61 babunshil soumyadevsaha chanda-04 naveenchandraadhikari abhineshjha tushargupta1504 manya975 irfanshaikh-7 paarisha1 syed0206 vrun1208 tholkappiar sksinha2410 shubhdevv ashutosh104 ajayraj004 shipraa18 anoushka-aggarwal avanimehta11 betty29 prince-kushwaha-2004 learnersurajsingh parth4git debrajrout sakshamjain98 tarnibalgoher5 nemesis-as vishapraj vishalkr10 psykat1116 branihat abidsyed25 student-aditipaliwal sanjana787 jiyagupta-cs ishita928 thatguywhocode shivam101203 thesri anirbanmajumder0 prutha-upadhyay rajpootjyoti700 shubhra-narang tanushreeborase gauravsingh1281 eaglearcher bera474 abhishek-8081 sohanrc ayushk101 abhay-hack mschandana16 arushi-kapkoti zul132 dhairya1gupta ayusharyann devanshu53 gauranshgoel123

beautiify's Issues

Add Gradient Button

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I want to add one more button (Gradient button) in button section.

Screenshots

Document.and.5.more.pages.-.Personal.-.Microsoft_.Edge.2024-01-01.23-11-40.mp4

Code of Conduct

I follow Contributing Guidelines of this project.

Add Favicon Icon To The Website

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I Would Like To Add The Favicon Icon to the Website To Look Better...

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add navigation on each component page

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

As we click on components its opening in new tab and if we want to return to home again there is no option other than clicking the previous tab. So according to me we can add either the back button or the navigation bar itself to each component page to make website more interactive from user end.
I would like to contribute this under SWOC 2024

Screenshots

beautify_navigation.mp4

Code of Conduct

I follow Contributing Guidelines of this project.

Add Jelly Button

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Right now there are only two types of buttons.
I can add a jelly button.

Please assign it to me under SWOC'24

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Change the hover effect of components

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I think the hover effect for component cards should be changed to float or something more professional.

Reproduce the bug

Go to homepage
Click on "Get components"
Hover over all the cards

Screenrecording

2023-12-30.13-54-50.mp4

Expected Behavior
Float effect with smooth transition or some other appropirate effect would be better.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Enhance the navbar UI

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

i can make the navbar look better by adding material UI and better hover effects

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Color combination can be improved

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I think the color combination is very dull and it can be improved

Screenshots

I can work with different combination and try to improve the color and background. I will try to work on a darker theme to give the site a very aesthetic look

Code of Conduct

I follow Contributing Guidelines of this project.

Add Cup Loader

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

@Rakesh9100 Can i please work on this issue?

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Distortion Text Animation

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Under the text animation component, I want to add a text distorted animation.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Open Graph Protocols and twitter tags

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I want to add Open Graph Protocols and twitter tags to the website for efficient social media sharing. Please assign this issue to me @Rakesh9100

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Dynamic Year in Copyright Notice

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

The current copyright notice in the project's footer contains a static year (2023). To ensure it remains up-to-date, it would be beneficial to make the year dynamic, automatically updating to the current year. This helps maintain accuracy without manual intervention. Please assign this isssue to me under SWOC 24. Thank you

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Box Loader

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Wanted to add a new loader in component as it has only 2 loading component and i wanna add one more to it .
I have attached the image of loader.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Suitable background color needs to be added on each card

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

As we scroll down to components and open each component we get plain white background which obviously can be changed with more suitable background color.

Feature requested

Background would look much better with different background color

screenrecording

2023-12-31.12-09-09.mp4

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add logo to Header and fix title logo

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Hello @Rakesh9100 , I want to add a logo to the Header and fix the title logo to make it consistent, details you can check on the screenshot below. Thank you

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Animated Login Form

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I want to add an animated Login form.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Parallax Background

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Inside the background component, I want to add more examples by adding a parallax background.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add UI to blank backgrounds of the components

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Some of the components are with blank backgrounds.
I wish to add UI to these pages or enhance the existing ones.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Footer

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Please allow me to add interactive footer.
social medial links , contact us and Site logo or name

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Enhance the UI of the each of the components page

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

The design of components page do not match with that of the home page. Also there is no footer section and logo on these pages. I would like to enhance the components page.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Hover effect on all boxes

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Currently there is hover effect only in index page which is tilt animation . Instead i'll add zoom in effect which looks better.
Also adding to inside boxes too.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Breadcrumbs Category and a Component

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

In the current website, there is no breadcrumbs menu that helps users to understand on which page they are on and easily get back to the previous pages. I want to add one to enhance the UI of the website in order to make it more interactive.

Screenshots

Beautiify.-.Google.Chrome.2024-01-05.14-57-47.mp4

Code of Conduct

I follow Contributing Guidelines of this project.

Add Back to top button

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I would like to create a back to top arrow button for the website.
Responsive for any type of devices.
Hovering with neon light effect.
Best user experience with smooth scroll functioning.
Helpful for the user to reach out to the top of the website in one click.

Screenshots

No back to top button.

Code of Conduct

I follow Contributing Guidelines of this project.

Add Spinning Loader

Add a spinning loader inside Loaders component.

Add contact page

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I added contact page according to UI and Color Palettes.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Dynamic Gradient Background

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Implement a visually appealing background enhancement - a seamless, moving gradient effect. This feature aims to introduce a dynamic touch to website backgrounds without requiring customization. The gradient will smoothly transition across the background, contributing to an engaging user experience.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Neomorphic Card

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I want to add neumorphism card for it..
here is example -

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Make Website Responsive

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I'll make this website responsive which can improve its UI for both PC and Mobile User.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Enhance 3D UI Home Page by manipulating Shadows and depths

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

GIve it 3D UI Home Page by manipulating Shadows and depths .
->Manipulating shadows with minute border and dark background will make it look professional and 3D.

Kindly assign me this issue under SWOC24 @Rakesh9100

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Toggle Button

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Want to add a toggle button in buttons component.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Neuromorphism Background

Add a neuromorphism background inside Backgrounds components.

Add Accordions Category and a Component

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

As this website contains a list many useful website components, I want to add an Accordion component in the list along with an example accordion inside it.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add On Scroll Sliced Text Animation

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Under the text animation component, I would like to add a sliced text animation

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add an about us section

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

to add a about us page for providing better info about the website and its uses

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Hover effect on Logo in Landing page

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

When someone hover over the logo image "B" it will slightly rotate sideways and appear little bit bigger in size giving enhanced UI effect.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Slider

Description

I would like to add a slider. @Rakesh9100 I want to work on this issue can you please assign it to me.

Screenshots

Add Liquid Button

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I want to add a liquid button, please assign it to me under SWOC'24

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add Swirl Animation Background

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I want to add an animated background under the background component.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Simple Carousel right button Incorrectly working

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Simple Carousel right button is not working correctly. There is something wrong with the button

Screenshots

When you click a little towards left from the center of the button then only it works.

Code of Conduct

I follow Contributing Guidelines of this project.

Enhance UI and Center the Contact Form

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

the Contact Form was not exactly in center of the page.
now have adjusted this for smaller screens as well.
added shadows in the Contact Form to Improve the UI for this page

Screenshots and screen recordings are provided below

Screenshots

Screenshots

before

after

Screen Recording (After)

After-Screen-Rec.mp4

Code of Conduct

I follow Contributing Guidelines of this project.

Implement some changes for mobile navigation menu

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Changes needed

The navigation bar for mobile devices has a background color of pink, I would like to change it to an appropriate color which would be more suitable according to the color scheme of website.
I want to make the background (outside of nav menu) blurred once the nav icon is expanded.

Kindly assign this issue to me under SWOC .

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Fix overlapping of navbar text

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

When scrolling the home page, there is an undesirable overlap between the page headings and the content within the navbar.

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Add contributors section

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Enlist all the contributors on the main website
Showcase them into a hexagonal grid structure of all the contributors

Screenshots

Solution steps

Using Javascript, fetching all the data of the contributors
using css, maintain their styling and giving them a hexagonal grid structure of all the profiles

Code of Conduct

I follow Contributing Guidelines of this project.

Create a Responsive Footer Including All types Of Necessary Content

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Here Are Below Some of the Preview Of The Responsive Footer With All Hover Effect

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Make navbar Responsive with better Hover Property and Suitable Color

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

I would Like To Modify The Footer To Look More Responsive and Better Hover Property also I Will Work On the Font And Background Color.

Screenshots

No response

Code of Conduct

I follow Contributing Guidelines of this project.

Add Glow Button

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Right now there are only two types of buttons.
I can add a glow button.

Please assign it to me under SWOC'24

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Get Components Button Overlapping with Background div

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

In the homepage of the Beautiify Website the Get "Components button" gets overlapped by the "Background" div,

Browser Brave, OS windows 11

Screenshots

Code of Conduct

I follow Contributing Guidelines of this project.

Enhance the UI design

Prerequisites

I am an Open Source Contributor
I checked to make sure that this issue has not already been filed

Description

Hi @Rakesh9100, I would like to suggest certain changes for the UI of the website:

Eye catchy background
Enhanced navbar
Use of better fonts and highlights
A more subtle color code for the website
Compact footer

I have done the designing part for most of the projects I have worked in. And I am also skilled in Figma apart from front-end technologies. I would be glad to work for this project!

Kindly assign me the issue.