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.05% JavaScript 18.13% CSS 41.82%

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

beautiify's Introduction

Hi, Everyone!!

About Me

🏢 I am an Associate Software Engineer at OpenText.
🏫 4^th year CSE Student at Lovely Professional University.
🧑‍💻 Love Coding in C++ and Java mostly.
🙂 4 PRs merged as a Contributor in Hacktoberfest'23.
🙂 Project Admin, Mentor, and Community Expert at GSSoC'23.
🙂 Open Source Contributor at GSSoC'22.
⭐ Secured 46^th Rank Globally & Received Letter of Recommendation in GSSoC'22.
⭐ 3^rd Milestone in GoogleCloudReady Facilitator Program'22.
🙂 Contributor & Project Admin at HSOC'22.
⭐ Secured 6^th Rank Globally in HSOC'22.
🙂 Contributor & Project Maintainer at Hacktoberfest'22.
⭐ 9 PRs merged in Hacktoberfest'22.
🤓 Always try to learn new things.

✨ Associate Software Engineer at
OpenText
(April'24 - Present)

💫 Software Engineering Intern at
OpenText
(October'23 - March'24)

🌟 Web Development Intern at
The Sparks Foundation
in October'22, Received LOR

🌟 Web Development Intern at
CodeClause
in December'22, Received LOR

🌟 Web Developer Intern at
LetsGrowMore
in December'22, Received LOR

Preferred Programming Languages and Tools

Coding Profiles

Open Source Contributions

S.No.	Open Source Programs	Duration	Role	Rewards
1.	Innogeeks Winter Of Code	11^th January - 11^th February 2024	Project Maintainer	Certificate
2.	JGEC Winter Of Code	15^th January - 25^th February 2024	Project Mentor	Certificate
3.	Social Winter Of Code	1^st January - 28^th February 2024	Project Admin	Certificate
4.	Semester Long Project 3.0	9^th October - 5^th December 2023	Project Mentor	Certificate
5.	Hacktoberfest	1^st October - 31^st October 2023	Contributor	Tree Planting Certificate Digital Reward Kit

Show More Contributions

S.No.	Open Source Programs	Duration	Role	Rewards
6.	GirlScript Summer Of Code	20^th May - 10^th August 2023	Project Admin Project Mentor Community Expert	Certificates
7.	QuestDB Open Source	1^st June - 30^th June 2023	Contributor	Certificate
8.	JGEC Winter Of Code	15^th February - 16^th March 2023	Project Mentor	Certificate
9.	Hacktoberfest	1^st October - 31^st October 2022	Project Admin Contributor	T-Shirt & Stickers
10.	Scaler 30 Days Open Source	1^st September - 30^th September 2022	Challenger	Swags
11.	Hack Club RAIT Summer Of Code	15^th July - 30^th August 2022	Contributor Project Maintainer	Certificates
12.	GirlScript Summer Of Code	1^st Mar - 31^st May 2022	Contributor	1. Certificate & LOR 2. Swags

Google Cloud and Qwiklabs Programs

S.No.	Google Cloud and Qwiklabs Programs	Duration	Rewards	Post Link
1.	Arcade Program	July - December 2023		View
1.	Arcade Program	January - June 2023	Google Cloud Cirrus Laptop Sleeve, Clever Pen, Lunch Cooler, Delegate Organizer, Blue Mug, Multi-Tool Car, Hello World T-shirt, and Google Cloud Backpack	View
2.	Google Cloud Career Practitioners Pathway Program	December 2022 - January 2023	Certificate Google Cloud T-Shirt, Portronics Mouse, and Google Cloud Mobile Holder Stand	View
3.	Arcade Program	July - December 2022	Google Cloud T-shirt, Pen, Zipper Organizers, Cap, Black Premium Teapot, and Delegate Organizer	View
4.	Learn to Earn Cloud Data Challenge	June - July 2022	Google Cloud Sipper, Badges and Stickers	View
5.	Google Cloud Ready Facilitator Program	March - June 2022	Google Cloud Bags, T-shirts, Travel Mugs, Pens, Stickers and Badges	View
6.	Learn to Earn Cloud Security Challenge	January 2022	Google Cloud Hoodie, Badge and Stickers	View

Connect With Me

My Github Stats

🔥 Streak Stats

💻 GitHub Profile Stats

Note: Top languages is only a metric of the languages my public code consists of and doesn't reflect experience or skill level.

Recent GitHub Activity

🗣 Commented on #1246 in Rakesh9100/CalcDiverse
🗣 Commented on #515 in Rakesh9100/CalcDiverse
🗣 Commented on #1246 in Rakesh9100/CalcDiverse
🗣 Commented on #1214 in Rakesh9100/CalcDiverse
🗣 Commented on #1063 in Rakesh9100/CalcDiverse

⚙️ Show Older Activity

🏆 GitHub Profile Trophies

✔️ Want to know more about me, Please visit 💯

Show some ❤️ by starring some of my repositories !!

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 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 12indranil

beautiify's Issues

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.

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.

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.

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 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 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 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 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

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.

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.

Add Glowing Text Animation

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 Glowing Text Animation to the website.

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 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.

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.

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.

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 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.

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 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 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 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 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 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.

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 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.

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 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.

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.

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.

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.

Add Neuromorphism Background

Add a neuromorphism background inside Backgrounds components.

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.

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.

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 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.

Code of Conduct

I follow Contributing Guidelines of this project.

Add Shooting Stars Background

Prerequisites

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

Description

Hello, I want to add an animated shooting star background, please assign it to me under SWOC'24

Screenshots

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 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 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.

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 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.

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 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 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.

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.

Add Spinning Loader

Add a spinning loader inside Loaders component.

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.

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 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.