Add QR code sharing feature to Profile component; update dependencies

codeaashu · codeaashu · commit c6660f8828f6 · 2025-09-11T02:06:15.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-fast-marquee": "^1.6.5",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.5.0",
+    "react-qr-code": "^2.0.18",
     "react-router-dom": "^7.8.1",
     "react-scripts": "5.0.1",
     "react-vertical-timeline-component": "^3.5.3",
diff --git a/public/TempMail/events.html b/public/TempMail/events.html
@@ -134,55 +134,147 @@ <h1 style="color: #ffffff; font-size: 24px; margin: 0 0 15px">
   </body>
 </html>
 
-
-
-
-<div id="editbody1" style="font-size: 10pt; font-family: Verdana,Geneva,sans-serif;">
-<div id="v1editbody1" style="font-size: 10pt; font-family: Verdana,Geneva,sans-serif;">
-<div id="v1v1editbody1" style="font-size: 10pt; font-family: Verdana,Geneva,sans-serif;">
-<table style="background-color: #0d1b2a;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
-<tbody>
-<tr>
-<td align="center">
-<table style="background-color: #091224; border-radius: 10px; overflow: hidden;" border="0" width="600" cellspacing="0" cellpadding="0">
-<tbody>
-<tr>
-<td style="padding: 20px;" align="center"><img style="display: block;" src="https://cdn.jsdelivr.net/gh/codeaashu/DevDisplay@main/public/DDColorLOGO.png" alt="DevDisplay Logo" width="180" /></td>
-</tr>
-<tr>
-<td align="center"><img style="max-width: 600px; display: block;" src="https://cdn.jsdelivr.net/gh/codeaashu/DevDisplay@main/public/Events.png" alt="Global Spotlight" width="100%" /></td>
-</tr>
-<tr>
-<td style="padding: 30px; text-align: center;">
-<h1 style="color: #ffffff; font-size: 24px; margin: 0 0 15px;">Dear DevFest Gurugram Team! 💌</h1>
-<p style="color: #cccccc; font-size: 15px; line-height: 1.6; margin: 0 0 20px;">Your event <strong style="color: #3bbeff;">has been featured</strong> on <strong style="color: #ffffff;">DevDisplay</strong>'s Global Events Spotlight. 🎉</p>
-<p style="color: #cccccc; font-size: 15px; line-height: 1.6; margin: 0 0 25px;">Now developers from around the world can discover and join your events. Get ready for global innovation, networking, and impact!</p>
-<a style="background-color: #3bbeff; color: #ffffff; text-decoration: none; padding: 12px 25px; border-radius: 30px; font-weight: bold; font-size: 15px; display: inline-block;" href="https://www.devdisplay.org/events#devfestgurugram" target="_blank" rel="noopener noreferrer"> View Featured Events</a></td>
-</tr>
-<tr>
-<td style="padding: 20px; background-color: #0a192f;" align="center">
-<p style="color: #999; font-size: 14px; margin-bottom: 10px;">Thank you for empowering the global developer community!</p>
-<table cellspacing="0" cellpadding="0">
-<tbody>
-<tr>
-<td style="padding: 0 6px;"><a href="https://discord.com/invite/chyt2UgTv5" target="_blank" rel="noopener noreferrer"> <img src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png" alt="Discord" width="26" /> </a></td>
-<td style="padding: 0 6px;"><a href="https://www.linkedin.com/company/devdisplay/" target="_blank" rel="noopener noreferrer"> <img src="https://cdn-icons-png.flaticon.com/512/145/145807.png" alt="LinkedIn" width="26" /> </a></td>
-<td style="padding: 0 6px;"><a href="https://www.instagram.com/devdisplay/" target="_blank" rel="noopener noreferrer"> <img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" alt="Instagram" width="26" /> </a></td>
-<td style="padding: 0 6px;"><a href="https://x.com/devdisplay_" target="_blank" rel="noopener noreferrer"> <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="X" width="26" /> </a></td>
-<td style="padding: 0 6px;"><a href="https://github.com/devdisplay" target="_blank" rel="noopener noreferrer"> <img src="https://cdn-icons-png.flaticon.com/512/733/733553.png" alt="GitHub" width="26" /> </a></td>
-</tr>
-</tbody>
-</table>
-<p style="font-size: 13px; color: #3bbeff; margin: 10px 0 4px;"><a style="color: #3bbeff; text-decoration: underline;" href="https://www.devdisplay.org" target="_blank" rel="noopener noreferrer">www.devdisplay.org</a></p>
-<p style="color: #666; font-size: 12px; margin: 0;">DevDisplay &copy; 2025 &mdash; Paradise for Developers</p>
-</td>
-</tr>
-</tbody>
-</table>
-</td>
-</tr>
-</tbody>
-</table>
-</div>
+<div id="editbody1" style="font-size: 10pt; font-family: Verdana, Geneva, sans-serif">
+  <div id="v1editbody1" style="font-size: 10pt; font-family: Verdana, Geneva, sans-serif">
+    <div id="v1v1editbody1" style="font-size: 10pt; font-family: Verdana, Geneva, sans-serif">
+      <table style="background-color: #0d1b2a" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
+        <tbody>
+          <tr>
+            <td align="center">
+              <table
+                style="background-color: #091224; border-radius: 10px; overflow: hidden"
+                border="0"
+                width="600"
+                cellspacing="0"
+                cellpadding="0"
+              >
+                <tbody>
+                  <tr>
+                    <td style="padding: 20px" align="center">
+                      <img
+                        style="display: block"
+                        src="https://cdn.jsdelivr.net/gh/codeaashu/DevDisplay@main/public/DDColorLOGO.png"
+                        alt="DevDisplay Logo"
+                        width="180"
+                      />
+                    </td>
+                  </tr>
+                  <tr>
+                    <td align="center">
+                      <img
+                        style="max-width: 600px; display: block"
+                        src="https://cdn.jsdelivr.net/gh/codeaashu/DevDisplay@main/public/Events.png"
+                        alt="Global Spotlight"
+                        width="100%"
+                      />
+                    </td>
+                  </tr>
+                  <tr>
+                    <td style="padding: 30px; text-align: center">
+                      <h1 style="color: #ffffff; font-size: 24px; margin: 0 0 15px">Dear DevFest Gurugram Team! 💌</h1>
+                      <p style="color: #cccccc; font-size: 15px; line-height: 1.6; margin: 0 0 20px">
+                        Your event <strong style="color: #3bbeff">has been featured</strong> on
+                        <strong style="color: #ffffff">DevDisplay</strong>'s Global Events Spotlight. 🎉
+                      </p>
+                      <p style="color: #cccccc; font-size: 15px; line-height: 1.6; margin: 0 0 25px">
+                        Now developers from around the world can discover and join your events. Get ready for global
+                        innovation, networking, and impact!
+                      </p>
+                      <a
+                        style="
+                          background-color: #3bbeff;
+                          color: #ffffff;
+                          text-decoration: none;
+                          padding: 12px 25px;
+                          border-radius: 30px;
+                          font-weight: bold;
+                          font-size: 15px;
+                          display: inline-block;
+                        "
+                        href="https://www.devdisplay.org/events#devfestgurugram"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        View Featured Events</a
+                      >
+                    </td>
+                  </tr>
+                  <tr>
+                    <td style="padding: 20px; background-color: #0a192f" align="center">
+                      <p style="color: #999; font-size: 14px; margin-bottom: 10px">
+                        Thank you for empowering the global developer community!
+                      </p>
+                      <table cellspacing="0" cellpadding="0">
+                        <tbody>
+                          <tr>
+                            <td style="padding: 0 6px">
+                              <a href="https://discord.com/invite/chyt2UgTv5" target="_blank" rel="noopener noreferrer">
+                                <img
+                                  src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png"
+                                  alt="Discord"
+                                  width="26"
+                                />
+                              </a>
+                            </td>
+                            <td style="padding: 0 6px">
+                              <a
+                                href="https://www.linkedin.com/company/devdisplay/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                <img
+                                  src="https://cdn-icons-png.flaticon.com/512/145/145807.png"
+                                  alt="LinkedIn"
+                                  width="26"
+                                />
+                              </a>
+                            </td>
+                            <td style="padding: 0 6px">
+                              <a href="https://www.instagram.com/devdisplay/" target="_blank" rel="noopener noreferrer">
+                                <img
+                                  src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png"
+                                  alt="Instagram"
+                                  width="26"
+                                />
+                              </a>
+                            </td>
+                            <td style="padding: 0 6px">
+                              <a href="https://x.com/devdisplay_" target="_blank" rel="noopener noreferrer">
+                                <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="X" width="26" />
+                              </a>
+                            </td>
+                            <td style="padding: 0 6px">
+                              <a href="https://github.com/devdisplay" target="_blank" rel="noopener noreferrer">
+                                <img
+                                  src="https://cdn-icons-png.flaticon.com/512/733/733553.png"
+                                  alt="GitHub"
+                                  width="26"
+                                />
+                              </a>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      <p style="font-size: 13px; color: #3bbeff; margin: 10px 0 4px">
+                        <a
+                          style="color: #3bbeff; text-decoration: underline"
+                          href="https://www.devdisplay.org"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          >www.devdisplay.org</a
+                        >
+                      </p>
+                      <p style="color: #666; font-size: 12px; margin: 0">
+                        DevDisplay &copy; 2025 &mdash; Paradise for Developers
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>
-</div>
diff --git a/public/data/KWIZERA-CALEB.json b/public/data/KWIZERA-CALEB.json
@@ -31,4 +31,4 @@
     "Medium": "https://medium.com/@kwizeracaleb91",
     "Reddit": "https://www.reddit.com/user/Caleb-Kwizera/"
   }
-}
+}
diff --git a/public/data/farazmirzax.json b/public/data/farazmirzax.json
@@ -4,31 +4,31 @@
   "bio": "Software dev by day, ML tinkerer by obsession, deploying in the cloud and contributing to open source on the side.",
   "avatar": "https://github.com/farazmirzax.png",
   "portfolio": "farazmirza.vercel.app",
- "skills": [
-  "Python",
-  "Machine Learning",
-  "Deep Learning",
-  "Data Analysis & Visualization",
-  "NumPy & Pandas",
-  "Scikit-learn",
-  "TensorFlow & PyTorch",
-  "JavaScript & TypeScript",
-  "React & Next.js",
-  "SvelteKit",
-  "REST APIs",
-  "SQL & NoSQL",
-  "Git & GitHub",
-  "Docker & Containerization",
-  "CI/CD Pipelines",
-  "AWS Cloud",
-  "Cloud Deployment & Hosting",
-  "Problem Solving & DSA",
-  "Critical Thinking",
-  "Team Collaboration",
-  "Effective Communication",
-  "Adaptability",
-  "Time Management"
-],
+  "skills": [
+    "Python",
+    "Machine Learning",
+    "Deep Learning",
+    "Data Analysis & Visualization",
+    "NumPy & Pandas",
+    "Scikit-learn",
+    "TensorFlow & PyTorch",
+    "JavaScript & TypeScript",
+    "React & Next.js",
+    "SvelteKit",
+    "REST APIs",
+    "SQL & NoSQL",
+    "Git & GitHub",
+    "Docker & Containerization",
+    "CI/CD Pipelines",
+    "AWS Cloud",
+    "Cloud Deployment & Hosting",
+    "Problem Solving & DSA",
+    "Critical Thinking",
+    "Team Collaboration",
+    "Effective Communication",
+    "Adaptability",
+    "Time Management"
+  ],
   "social": {
     "GitHub": "https://github.com/farazmirzax",
     "Twitter": "https://x.com/FarazMirza68904",
diff --git a/src/Page/OpportunitiesHub/EventsList.jsx b/src/Page/OpportunitiesHub/EventsList.jsx
@@ -67,10 +67,11 @@ const techevents = [
     location: 'GNDEC, Ludhiana, India',
     date: 'Oct 11',
     domains: ['Technology', 'Developer', 'GDG', 'DevFest', 'Networking'],
-    applyLink: 'https://gdg.community.dev/events/details/google-gdg-ludhiana-presents-devfest-ludhiana-2025-train-the-trainer-edition/',
+    applyLink:
+      'https://gdg.community.dev/events/details/google-gdg-ludhiana-presents-devfest-ludhiana-2025-train-the-trainer-edition/',
     poster: '/assets/Events/DevFest Ludhiana 2025.png',
     shareLink: '#devfestludhiana',
-  }
+  },
 ];
 
 const StyledtecheventsCard = styled.div`
@@ -149,7 +150,6 @@ const StyledtecheventsCard = styled.div`
   }
 `;
 
-
 const TecheventsCardComponent = React.forwardRef(
   ({ organizer, title, location, date, domains, applyLink, poster, shareLink }, ref) => {
     return (
@@ -174,7 +174,7 @@ const TecheventsCardComponent = React.forwardRef(
           <div className="absolute bottom-3 right-3 z-10">
             <button
               onClick={() => shareContent(window.location.href.split('#')[0] + shareLink)}
-              className="bg-gray-700 hover:bg-slate-1000 flex items-center justify-center gap-2 rounded-xl border border-[#00a6fb] bg-opacity-50 px-2 py-1 text-xs text-white backdrop-blur-md transition-colors"
+              className="hover:bg-slate-1000 flex items-center justify-center gap-2 rounded-xl border border-[#00a6fb] bg-gray-700 bg-opacity-50 px-2 py-1 text-xs text-white backdrop-blur-md transition-colors"
             >
               <FontAwesomeIcon icon={faShareAlt} />
               Share
@@ -204,14 +204,17 @@ const TecheventsCardComponent = React.forwardRef(
 
         <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
           {domains.map((domain, idx) => (
-            <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
+            <span
+              key={idx}
+              className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300"
+            >
               {domain}
             </span>
           ))}
         </div>
       </StyledtecheventsCard>
     );
-  }
+  },
 );
 
 <style>
diff --git a/src/Page/ResoucesHub/Courseslist.jsx b/src/Page/ResoucesHub/Courseslist.jsx
@@ -387,7 +387,8 @@ const courses = [
     level: 'Intermediate',
     domain: ['Web Development', 'Animation', 'Frontend', 'Paid'],
     poster: '/assets/Courses/FrontEndDomination.jpg',
-    courseLink: 'https://www.sheryians.com/courses/courses-details/Front-End%20Domination:%20Create%20Anything%20with%20Code',
+    courseLink:
+      'https://www.sheryians.com/courses/courses-details/Front-End%20Domination:%20Create%20Anything%20with%20Code',
     shareLink: '#sheryians-frontend',
   },
   {
@@ -398,9 +399,10 @@ const courses = [
     level: 'Intermediate',
     domain: ['Web Development', 'DSA', 'Aptitude', 'Frontend', 'Gen AI', 'MERN', 'Reasoning', 'Paid'],
     poster: '/assets/Courses/Job Ready.jpg',
-    courseLink: 'http://sheryians.com/courses/courses-details/2.0%20Job%20Ready%20AI%20Powered%20Cohort:%20Web%20+%20DSA%20+%20Aptitude',
+    courseLink:
+      'http://sheryians.com/courses/courses-details/2.0%20Job%20Ready%20AI%20Powered%20Cohort:%20Web%20+%20DSA%20+%20Aptitude',
     shareLink: '#job-ready',
-  }
+  },
 ];
 
 const StyledCoursesCard = styled.div`
diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
diff --git a/src/components/Profile/ProfileShareTooltip.css b/src/components/Profile/ProfileShareTooltip.css

Original file line number	Diff line number	Diff line change
`@@ -31,4 +31,4 @@`
`31`	`31`	`"Medium": "https://medium.com/@kwizeracaleb91",`
`32`	`32`	`"Reddit": "https://www.reddit.com/user/Caleb-Kwizera/"`
`33`	`33`	`}`
`34`		`-}`
	`34`	`+}`