Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Made Abstract Particle Swarm Background component responsive #1415

Merged
merged 3 commits into from
Dec 23, 2024
Merged

Made Abstract Particle Swarm Background component responsive #1415

merged 3 commits into from
Dec 23, 2024

Conversation

ThePhoenix08
Copy link
Contributor

@ThePhoenix08 ThePhoenix08 commented Dec 23, 2024 •
edited by Rakesh9100
Loading

Fixes Issue🛠️

Closes #1411

Description👨‍💻

Changes made in styles

  • Body is flex, with internal elements vertically and horizontally centered
  • Canvas width height is 100 of viewport

Changes made in script

  • Fetched getBoundingClientRect of the canvas
  • Assigned height and width vars to the returned dynamic value
  • New event listener on window resize, refetches the getBoundingClientRect of the canvas and assigns width height vars to the new width height of the canvas

Type of Change📄

  • Style (non-breaking change which improves website style or formatting)
  • Responsiveness (non-breaking change which improves UI/UX on different screen sizes)

Checklist✅

  • I am an Open Source contributor
  • I have performed a self-review of my code
  • My code follows the style guidelines of this project

Screenshots/GIF📷

Mobile View Desktop View
Mobile view screenshot of the component Desktop view screenshot of the component

@netlify Netlify
Copy link

netlify bot commented Dec 23, 2024 •
edited
Loading

✅ Deploy Preview for beautiify ready!

Name Link
🔨 Latest commit 7c29c62
🔍 Latest deploy log https://app.netlify.com/sites/beautiify/deploys/6768d83761205400085830e9
😎 Deploy Preview https://deploy-preview-1415--beautiify.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions[bot]
github-actions bot reviewed Dec 23, 2024
View reviewed changes
Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @ThePhoenix08, Welcome to the project Beautiify! 🎊
Thanks for your contribution! Your effort makes this project better. Keep it up! 🙌
Please wait for the PR to be reviewed. Happy Coding!! ✨

@ThePhoenix08 ThePhoenix08 changed the title Abstract bg particles respo Made Abstract Particles Background Component Responsive Dec 23, 2024
@Rakesh9100 Rakesh9100 changed the title Made Abstract Particles Background Component Responsive Made Abstract Particle Swarm Background component responsive Dec 23, 2024
@Rakesh9100 Rakesh9100 merged commit 1429e6e into Rakesh9100:main Dec 23, 2024
5 checks passed
@github-actions GitHub Actions
Copy link

Congrats, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to my project 🚀 Keep Contributing!! ✨ @ThePhoenix08

@Rakesh9100 Rakesh9100 added Easy Low effort straightforward task Completed 🥳 PR successfully merged and issue resolved on completion KWOC KWOC Open Source Program Medium Moderate level implementation task and removed Easy Low effort straightforward task labels Dec 23, 2024
@ThePhoenix08 ThePhoenix08 deleted the abstract-bg-particles-respo branch December 23, 2024 05:08
@ThePhoenix08
Copy link
Contributor Author

Thanks for reviewing and merging my PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

Assignees

@ThePhoenix08 ThePhoenix08

Labels
Completed 🥳 PR successfully merged and issue resolved on completion KWOC KWOC Open Source Program Medium Moderate level implementation task
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Style] Make Abstract Particle Swarm Background component responsive
2 participants
@ThePhoenix08 @Rakesh9100