UI/fix projects section mobile #1206

yashksaini-coder · 2025-11-15T08:20:27Z

Description

This pull request refactors and modernizes the OurProjects component and its mobile CSS to improve responsiveness, accessibility, and maintainability. The changes include a migration to a data-driven approach, removal of legacy props and types, significant UI/UX enhancements for mobile and tablet devices, and code simplification. The most important changes are grouped below.

These changes collectively make the OurProjects showcase more maintainable, performant, and user-friendly across all device sizes.

Fixes #937

Type of Change

New feature (e.g., new page, component, or functionality)
Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)
Performance optimization (e.g., code splitting, caching)
Documentation update (README, contribution guidelines, etc.)
Other (please specify):

Changes Made

Component Refactoring & Data Handling:

Migrated project data imports from legacy JSON/types to a new TypeScript config (src/database/projects/projects), removing deprecated props and interfaces for cleaner, more maintainable code. (src/components/ourProjects.tsx, [1] [2]
Simplified the main component signature and removed backward compatibility logic, now loading project data directly and streamlining data flow. (src/components/ourProjects.tsx, src/components/ourProjects.tsxL28-L97)

UI/UX & Accessibility Improvements:

Redesigned layout and styles for mobile and tablet devices, including more granular breakpoints, improved touch targets, smoother scrolling, and better readability on small screens. (src/components/ourProjects.mobile.css, [1] [2] [3]
Enhanced accessibility with ARIA labels, improved button focus states, and better semantic structure for headings and interactive elements. (src/components/ourProjects.tsx, [1] [2]

Visual & Responsive Enhancements:

Refined sizing, spacing, and responsiveness for cards, browser headers, and animated backgrounds, ensuring consistent appearance across devices and screen sizes. (src/components/ourProjects.tsx, [1] [2] [3] [4] [5]
Updated color gradients, shadows, and animation effects for a more polished and modern look, especially on mobile. (src/components/ourProjects.tsx, [1] [2]

Code Simplification & Cleanup:

Removed unused legacy code, props, and comments to focus on the new data-driven approach and reduce technical debt. (src/components/ourProjects.tsx, [1] [2]

Mobile CSS Optimization:

Added new breakpoints and styles for ultra-small devices, improved live indicator display, and optimized scroll behavior for better mobile usability. (src/components/ourProjects.mobile.css, [1] [2]

Dependencies

List any new dependencies or tools required for this change.
Mention any version updates or configurations that need to be considered.

Checklist

My code follows the style guidelines of this project.
I have tested my changes across major browsers and devices
My changes do not generate new console warnings or errors .
I ran npm run build and attached screenshot(s) in this PR.
This is already assigned Issue to me, not an unassigned issue.

@Adez017 @sanjay-kv Please review this and let me know

vercel · 2025-11-15T08:20:32Z

@yashksaini-coder is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-11-15T08:20:34Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

github-actions · 2025-11-15T08:20:38Z

✅ Synchronized metadata from Issue #937:

Labels: enhancement, level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

Adez017 · 2025-11-15T09:13:46Z

@yashksaini-coder

Adez017

kindly fix

…ng iframe support for live previews, and refining the UI with improved animations and styles.

github-actions · 2025-11-17T13:15:04Z

✅ Synchronized metadata from Issue #937:

Labels: enhancement, level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

Adez017

i can see the bug still exist for the two projects listed :

Adez017 · 2025-11-18T04:50:48Z

yashksaini-coder · 2025-11-18T05:01:25Z

i can see the bug still exist for the two projects listed :

@Adez017 could U drop a recording with bug description, Image is not properly highlighting it.

Adez017 · 2025-11-18T14:13:39Z

here is the clip : @yashksaini-coder

bug_yash.mp4

vercel · 2025-11-19T13:13:17Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Nov 19, 2025 1:14pm

Adez017 · 2025-11-19T13:50:08Z

@yashksaini-coder , any updates on this

github-actions · 2025-11-19T13:56:51Z

✅ Synchronized metadata from Issue #937:

Labels: enhancement, level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

yashksaini-coder · 2025-11-19T13:58:13Z

@yashksaini-coder , any updates on this

screen-capture.webm

I've checked the links, ML project link was outdated, updated that. It should be working now also the overlay UI bug is also fixed.

Adez017 · 2025-11-19T14:04:09Z

@yashksaini-coder , any updates on this

screen-capture.webm
I've checked the links, ML project link was outdated, updated that. It should be working now also the overlay UI bug is also fixed.

i think it looks good to go @yashksaini-coder @sanjay-kv :)

sanjay-kv · 2025-11-22T17:59:01Z

@Adez017 isnt the old ui better ?

yashksaini-coder · 2025-11-22T18:06:08Z

@Adez017 isnt the old ui better ?

There were some outdated links and an overlay area that was not acting properly on mobile breakpoints

Adez017 · 2025-11-24T16:43:58Z

@Adez017 isnt the old ui better ?

we can consider this one @sanjay-kv

yashksaini-coder added 3 commits November 15, 2025 13:44

Improve CSS media queries

948fa04

Refactored the component and fixed depreceated API

15694db

Review completed

acafb04

github-actions bot added recode this is label for leaderboard enhancement New feature or request hacktoberfest-accepted level 1 10 points labels Nov 15, 2025

github-actions bot added this to the recode:launch 3.0 milestone Nov 15, 2025

iitzIrFan self-requested a review November 15, 2025 08:47

iitzIrFan assigned yashksaini-coder Nov 15, 2025

iitzIrFan added the under review Review under the maintainers or the admins label Nov 15, 2025

iitzIrFan added this to @recode-web Nov 15, 2025

iitzIrFan moved this to In Progress in @recode-web Nov 15, 2025

Adez017 self-requested a review November 15, 2025 09:13

Adez017 suggested changes Nov 15, 2025

View reviewed changes

Enhance ourProjects component by adding new project links, implementi…

04614e0

…ng iframe support for live previews, and refining the UI with improved animations and styles.

yashksaini-coder requested a review from Adez017 November 17, 2025 14:23

Adez017 suggested changes Nov 18, 2025

View reviewed changes

sanjay-kv approved these changes Nov 19, 2025

View reviewed changes

vercel bot deployed to Preview November 19, 2025 13:14 View deployment

Update project link for Scrape ML Project in ourProjects component

cf8fa32

Adez017 approved these changes Nov 19, 2025

View reviewed changes

UI/fix projects section mobile #1206

Are you sure you want to change the base?

UI/fix projects section mobile #1206

Uh oh!

Conversation

yashksaini-coder commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Changes Made

Dependencies

Checklist

Uh oh!

vercel bot commented Nov 15, 2025

Uh oh!

github-actions bot commented Nov 15, 2025

Uh oh!

github-actions bot commented Nov 15, 2025

Uh oh!

Adez017 commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Adez017 left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 17, 2025

Uh oh!

Adez017 left a comment

Choose a reason for hiding this comment

Uh oh!

Adez017 commented Nov 18, 2025

Uh oh!

yashksaini-coder commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Adez017 commented Nov 18, 2025

Uh oh!

vercel bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Adez017 commented Nov 19, 2025

Uh oh!

github-actions bot commented Nov 19, 2025

Uh oh!

yashksaini-coder commented Nov 19, 2025

Uh oh!

Adez017 commented Nov 19, 2025

Uh oh!

sanjay-kv commented Nov 22, 2025

Uh oh!

yashksaini-coder commented Nov 22, 2025

Uh oh!

Adez017 commented Nov 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yashksaini-coder commented Nov 15, 2025 •

edited

Loading

Adez017 commented Nov 15, 2025 •

edited

Loading

yashksaini-coder commented Nov 18, 2025 •

edited

Loading

vercel bot commented Nov 19, 2025 •

edited

Loading