Skip to content

Conversation

ananyaguptacodes
Copy link

πŸš€ [GSSoC'25] Responsive Navigation & Animations Overhaul

πŸ“Œ Linked Issue

Closes #26 - "Make site responsive and add animations"

✨ Key Improvements

Feature Implementation Details
Responsive Navbar Fixed alignment issues, prevented wrapping, optimized for touch
Hamburger Menu Added smooth toggle animation (bars ↔ X) with proper ARIA labels
Mobile Layout Tested on 3 breakpoints (Desktop/Tablet/Mobile)
UI Animations Added entrance animations for projects and page elements

πŸ§ͺ Testing Performed

  • Devices:
    • Desktop (β‰₯1024px)
    • Tablet (768px)
    • Mobile (≀425px)
  • Browsers: Chrome

πŸ›  Technical Highlights

/* Added these key animations */
@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0 }
  to { transform: translateX(0); opacity: 1 }
}

/* Responsive hamburger solution */
@media (max-width: 768px) {
  .header-content {
    flex-wrap: nowrap; /* Prevents wrapping */
  }
}

 ### πŸ“Έ Visual Proof
Before:
<img width="847" height="795" alt="Screenshot 2025-07-31 165657" src="https://github.com/user-attachments/assets/6b36161d-7e9a-4c21-b660-8e91ff4ab7b3" />
After:
<img width="811" height="771" alt="Screenshot 2025-07-31 165717" src="https://github.com/user-attachments/assets/3d6cd381-a862-451d-a03e-7f03b74962d4" />
<img width="809" height="769" alt="Screenshot 2025-07-31 165750" src="https://github.com/user-attachments/assets/1fa1f974-58c8-4ec7-ab44-b7722fbf5e83" />

Copy link

netlify bot commented Jul 31, 2025

βœ… Deploy Preview for code-canvas-dev ready!

Name Link
πŸ”¨ Latest commit 16f8143
πŸ” Latest deploy log https://app.netlify.com/projects/code-canvas-dev/deploys/68b153bb63765500087028e6
😎 Deploy Preview https://deploy-preview-35--code-canvas-dev.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 project configuration.

Copy link
Owner

@Varshitha713 Varshitha713 left a comment

Choose a reason for hiding this comment

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

@ananyaguptacodes resolve the merge conflicts!!

@Varshitha713 Varshitha713 added the merge-conflicts must be resolved to merge label Aug 1, 2025
@ananyaguptacodes
Copy link
Author

Merge conflicts resolved! please let me know if you'd like me to handle any other GSSoC issues!

@ananyaguptacodes
Copy link
Author

hey can u help me in this, its again and again having merge conflicts idk why

@Varshitha713
Copy link
Owner

@ananyaguptacodes please DM me on discord or linkedin!!

@Varshitha713
Copy link
Owner

@ananyaguptacodes please resolve merge conflicts by tomorrow if not i'll assign the issue to other contributors!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
merge-conflicts must be resolved to merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the website responsive and add basic animations
2 participants