chore: push all workspace changes

Author: Gupta-02

package-lock.json

@@ -28,7 +28,6 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.1",
-    "react-scripts": "5.0.1",
     "react-vertical-timeline-component": "^3.5.3",
     "sitemap": "^8.0.0",
     "styled-components": "^6.1.15",
@@ -72,6 +71,7 @@
     "json-loader": "^0.5.7",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "react-scripts": "^5.0.1",
     "tailwindcss": "^3.4.16"
   }
 }

package.json

@@ -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>

public/TempMail/events.html

@@ -31,4 +31,4 @@
     "Medium": "https://medium.com/@kwizeracaleb91",
     "Reddit": "https://www.reddit.com/user/Caleb-Kwizera/"
   }
-}
+}

public/data/KWIZERA-CALEB.json

@@ -1,4 +1,5 @@
 import React from 'react';
+import WellnessProductivityDashboard from './WellnessProductivityDashboard';
 import { motion } from 'framer-motion';
 import Navbar from '../components/Navbar';
 import { Footer } from '../components/Footer/Footer';
@@ -602,20 +603,23 @@ export default function About() {
           </button>
         </section>
       </div>
+      <WellnessProductivityDashboard />
       <Footer />
     </div>
   );
 }
 
-        <section className="container mx-auto mt-12 p-8 text-center">
-          <div className="mt-8 p-6 rounded-lg bg-green-900">
-            <h2 className="text-2xl font-bold mb-4 text-green-300">Wellness & Productivity Dashboard (Coming Soon)</h2>
-            <p className="mb-4">Maintain a healthy work-life balance while coding with wellness tips, focus timers, and productivity analytics.</p>
-            <div className="mb-4">
-              <label className="block mb-2 font-semibold">Upload Wellness Screenshot</label>
-              <input type="file" accept="image/*" className="mb-2" onChange={e => alert('Screenshot upload coming soon!')} />
-              <div className="mt-2 text-sm text-gray-300">Screenshots will appear here after upload.</div>
-            </div>
-            <div className="mt-4 text-sm text-green-200">Wellness tips, timers, and analytics coming soon.</div>
-          </div>
-        </section>
+<section className="container mx-auto mt-12 p-8 text-center">
+  <div className="mt-8 rounded-lg bg-green-900 p-6">
+    <h2 className="mb-4 text-2xl font-bold text-green-300">Wellness & Productivity Dashboard (Coming Soon)</h2>
+    <p className="mb-4">
+      Maintain a healthy work-life balance while coding with wellness tips, focus timers, and productivity analytics.
+    </p>
+    <div className="mb-4">
+      <label className="mb-2 block font-semibold">Upload Wellness Screenshot</label>
+      <input type="file" accept="image/*" className="mb-2" onChange={(e) => alert('Screenshot upload coming soon!')} />
+      <div className="mt-2 text-sm text-gray-300">Screenshots will appear here after upload.</div>
+    </div>
+    <div className="mt-4 text-sm text-green-200">Wellness tips, timers, and analytics coming soon.</div>
+  </div>
+</section>;

src/Page/About.jsx

@@ -0,0 +1,95 @@
+import React, { useState, useRef } from 'react';
+
+const availableWidgets = [
+  { id: 'bio', label: 'Bio', content: 'Add a short bio about yourself.' },
+  { id: 'projects', label: 'Projects', content: 'Showcase your best projects.' },
+  { id: 'skills', label: 'Skills', content: 'Highlight your top skills.' },
+  { id: 'contact', label: 'Contact', content: 'Share your contact info.' },
+];
+
+function DynamicPortfolioGenerator() {
+  const [widgets, setWidgets] = useState([]);
+  const [draggedWidget, setDraggedWidget] = useState(null);
+  const [screenshot, setScreenshot] = useState(null);
+  const fileInputRef = useRef();
+
+  const handleDragStart = (widget) => setDraggedWidget(widget);
+  const handleDrop = () => {
+    if (draggedWidget && !widgets.find((w) => w.id === draggedWidget.id)) {
+      setWidgets([...widgets, draggedWidget]);
+    }
+    setDraggedWidget(null);
+  };
+  const handleRemoveWidget = (id) => setWidgets(widgets.filter((w) => w.id !== id));
+  const handleScreenshotUpload = (e) => {
+    if (e.target.files && e.target.files[0]) setScreenshot(e.target.files[0]);
+  };
+
+  return (
+    <div className="mt-8 rounded-lg bg-gray-800 p-6">
+      <h2 className="mb-4 text-2xl font-bold">Dynamic Portfolio Generator</h2>
+      <p className="mb-4">
+        Build and customize your interactive portfolio with drag-and-drop widgets, live project demos, and real-time
+        analytics.
+      </p>
+      <div className="mb-4">
+        <label className="mb-2 block font-semibold">Upload Portfolio Screenshot</label>
+        <input type="file" accept="image/*" className="mb-2" ref={fileInputRef} onChange={handleScreenshotUpload} />
+        {screenshot && (
+          <div className="mt-2 text-sm text-gray-300">
+            <img
+              src={URL.createObjectURL(screenshot)}
+              alt="Portfolio Screenshot"
+              style={{ maxWidth: 200, maxHeight: 120, borderRadius: 4, border: '1px solid #ccc' }}
+            />
+            <div>{screenshot.name}</div>
+          </div>
+        )}
+      </div>
+      <div className="mt-8 flex flex-col gap-8 md:flex-row">
+        <div className="flex-1">
+          <h3 className="mb-2 font-bold">Available Widgets</h3>
+          <ul>
+            {availableWidgets.map((widget) => (
+              <li
+                key={widget.id}
+                draggable
+                onDragStart={() => handleDragStart(widget)}
+                className="mb-2 cursor-move rounded bg-gray-700 p-2 hover:bg-gray-600"
+                style={{ opacity: widgets.find((w) => w.id === widget.id) ? 0.5 : 1 }}
+              >
+                {widget.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div
+          className="min-h-[200px] flex-1 rounded border border-gray-700 bg-gray-900 p-4"
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={handleDrop}
+        >
+          <h3 className="mb-2 font-bold">Your Portfolio Layout</h3>
+          {widgets.length === 0 && <div className="text-gray-500">Drag widgets here to build your portfolio.</div>}
+          <ul>
+            {widgets.map((widget) => (
+              <li key={widget.id} className="relative mb-4 rounded bg-gray-700 p-3">
+                <button
+                  onClick={() => handleRemoveWidget(widget.id)}
+                  className="absolute right-2 top-1 text-red-400 hover:text-red-600"
+                  title="Remove"
+                >
+                  &times;
+                </button>
+                <strong>{widget.label}</strong>
+                <div className="mt-1 text-sm">{widget.content}</div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="mt-6 text-sm text-gray-400">Analytics and live project demos coming soon.</div>
+    </div>
+  );
+}
+
+export default DynamicPortfolioGenerator;