Skip to content

feat: add interactive project preview modal with dual tabs layout#121

Closed
aarushii25 wants to merge 4 commits into
Vaibhav-kesarwani:mainfrom
aarushii25:feat/project-preview-modal
Closed

feat: add interactive project preview modal with dual tabs layout#121
aarushii25 wants to merge 4 commits into
Vaibhav-kesarwani:mainfrom
aarushii25:feat/project-preview-modal

Conversation

@aarushii25

@aarushii25 aarushii25 commented May 21, 2026

Copy link
Copy Markdown
Screenshot 2026-05-21 074841

🚀 Purpose of this PR

Closes #105

Hi @Vaibhav-kesarwani! I have successfully implemented the interactive Project Preview Modal feature to enhance the user experience on the Projects tab.

🛠️ What I Did:

  • Created a Custom Preview Modal Component (ProjectPreviewModal.tsx): Built entirely using vanilla React state (useState) and framer-motion for buttery smooth backdrop and modal scale-up transitions.
  • Dual-Tab Informative Layout:
    • Overview Tab: Displays a clean project description along with a functional live embedded iframe view framework for instantaneous visual evaluation.
    • Tech Stack Highlights Tab: Categorically maps architecture tags and applied React hooks loops dynamically.
  • Integrated into Grid Structure: Configured hover states on project-grid.tsx cards to gracefully dispatch localized data mapping scopes directly onto the overlay.
  • No Extra State Dependencies: Clean structural implementation without onboarding external bulky stores (No Zustand or Redux dependencies added to keep the codebase lightweight).

🧪 Testing & Validation

  • Fully tested on the local setup (http://localhost:3000).
  • Checked across multiple responsive breakpoints and simulated interactions. All links (Source Code & Live Session) are working fine without any TypeScript errors or compilation warnings.

Looking forward to your review and feedback! Please merge this clean implementation. 😄🚀

@vercel

vercel Bot commented May 21, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the vaibhav's projects Team on Vercel.

A member of the Team first needs to authorize it.

@Vaibhav-kesarwani

Copy link
Copy Markdown
Owner

@aarushii25 Attach the video of its working

@Vaibhav-kesarwani Vaibhav-kesarwani left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

@aarushii25 in #121 and #122 pull request you have make the same changes.

@aarushii25

Copy link
Copy Markdown
Author
Screenshot 2026-05-21 091721 Screenshot 2026-05-21 091731 Screenshot 2026-05-21 091741
100.Reactjs.Projects._.Projects.-.Google.Chrome.2026-05-21.09-16-10.1.mp4

here is the video working

@Vaibhav-kesarwani

Copy link
Copy Markdown
Owner

@aarushii25 @vivekCS007 is already working something like this you wait for that PR to be merged and than create the required changs on that
PR -> #86

for that time i am closing you both PR when that issue is merged you can make the latest changes on that.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Implement Interactive Live Preview Modal Component for Project Cards

2 participants