Merge branch 'HimanshuNarware:main' into main

frontend/src/Component/BackToTopButton.js

@@ -4,17 +4,22 @@ import { MdKeyboardDoubleArrowUp } from "react-icons/md";
 
 function BackToTopButton() {
     const [isVisible, setIsVisible] = useState(false);
+    const [scrollProgress, setScrollProgress] = useState(0);
 
     useEffect(() => {
         const handleScroll = () => {
             const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
             const scrollOffset = documentHeight * 0.5;
+            const scrollTop = window.scrollY;
+            const progress = (scrollTop / documentHeight) * 100;
 
-            if (window.scrollY > scrollOffset) {
+            if (scrollTop > scrollOffset) {
                 setIsVisible(true);
             } else {
                 setIsVisible(false);
             }
+
+            setScrollProgress(progress);
         };
 
         window.addEventListener('scroll', handleScroll);
@@ -37,15 +42,28 @@ function BackToTopButton() {
     };
 
     return (
-        <a href='#hero'>
-            <button
-                onClick={scrollToTop}
-                className={`back-to-top-button ${isVisible ? 'visible' : ''}`}
-            >
-                <MdKeyboardDoubleArrowUp style={iconStyle} />
-                <span className='tooltiptext'>Go top page</span>
-            </button>
-        </a>
+        <button
+            onClick={scrollToTop}
+            className={`back-to-top-button ${isVisible ? 'visible' : ''}`}
+            aria-label="Back to top"
+        >
+            <MdKeyboardDoubleArrowUp style={iconStyle} />
+            <div className="scroll-progress">
+                <svg className="progress-ring" width="60" height="60">
+                    <circle
+                        className="progress-ring__circle"
+                        stroke="#0658ea"
+                        strokeWidth="6"
+                        fill="transparent"
+                        r="26"
+                        cx="30"
+                        cy="30"
+                        style={{ strokeDasharray: 163.362, strokeDashoffset: 163.362 - (163.362 * scrollProgress) / 100 }}
+                    />
+                </svg>
+            </div>
+            <span className='tooltiptext'>Go top page</span>
+        </button>
     );
 }
 

frontend/src/DB/product.json

@@ -4072,5 +4072,12 @@
     "image": "https://yt3.googleusercontent.com/ytc/AIdro_l3GggKOWViCBpDs9APIsK6MHB2Mu-ECo5dUEU-Vay2gg=s900-c-k-c0x00ffffff-no-rj",
     "link": "https://www.khanacademy.org/",
     "description": "Khan Academy offers free online courses, lessons, and practice in a variety of subjects including math, science, computer programming, history, art history, economics, and more. Their mission is to provide a free, world-class education for anyone, anywhere."
+  }  ,
+  {
+    "productName": "CodingTrain",
+    "category": "coding",
+    "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXs38rG-jePlVDJT4Z2Debt26Xt5xzPYSURfsKQmFIdifki8x2",
+    "link": "https://thecodingtrain.com/",
+    "description": "It consists of Coding challenges and tutorials."
   }  
 ]

frontend/src/pages/FrontendTools.jsx

@@ -109,7 +109,14 @@ const tools = [
     description: "Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.",
     link: "https://backbonejs.org/",
     image: "https://cdn.hashnode.com/res/hashnode/image/upload/v1681040353717/f19b13d0-e85e-4527-8c4b-81a0b8d2034a.jpeg"
+  },
+  {
+    name: "Webpack",
+    description: "Webpack is a module bundler for modern JavaScript applications. It compiles small pieces of code, known as modules, into a cohesive bundle for use in the browser. Webpack enables developers to manage dependencies, perform code splitting, and implement hot module replacement to enhance development efficiency. It works with a wide variety of file types and seamlessly integrates with popular frameworks and libraries, supporting both ES6 and CommonJS module formats.",
+    link: "https://webpack.js.org/",
+    image: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwebpack.js.org%2Fconcepts%2F&psig=AOvVaw2QVMaU5NOZG8bV33cipQQc&ust=1721638369531000&source=images&cd=vfe&opi=89978449&ved=0CBEQjRxqFwoTCMi2_-3gt4cDFQAAAAAdAAAAABAE"
   }
+
 ];
 
 const FrontendTools = () => {

frontend/src/pages/RemoteJobs.jsx

@@ -22,6 +22,18 @@ const tools = [
     link: "https://gun.io/", 
     image: "gun-io.png" 
   },
+  {
+    name: "Upwork",
+    description: "Upwork is a global freelancing platform where businesses and independent professionals connect and collaborate remotely. Upwork offers a wide range of freelance jobs across various categories including tech, design, writing, and more. The platform provides tools for hiring, managing, and paying freelancers, making it easier for businesses to find the right talent and for freelancers to find rewarding projects.",
+    link: "https://www.upwork.com/",
+    image: "https://cdn.prod.website-files.com/5ec7dad2e6f6295a9e2a23dd/6090ec8cb8bec8d0738fc6bd_Upwork.png"
+  },
+  {
+    name: "Remote OK",
+    description: "Remote OK is a leading remote job board that helps job seekers find remote work opportunities across various industries, including tech, marketing, customer support, and more. The platform features job listings from companies around the world, making it easier for professionals to find jobs that allow them to work from anywhere. Remote OK also provides resources and tools to support remote work and job searching.",
+    link: "https://remoteok.io/",
+    image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQioHxiZp-CifKLWAH7yJGKCbpFKjFR45OZ-g&s"
+  }
 ];
 
 const CodingPlatform = () => {

frontend/src/style/BackToTopButton.css

@@ -6,53 +6,70 @@
     display: none;
     background-color: #00c68a;
     color: white;
-    border: 2px solid #93FFD8;
+    border: 2px solid #ffffff;
     border-radius: 50px;
     padding: 8px;
     box-shadow: 0 4px 6px rgba(14, 14, 14, 0.1);
-    cursor: none;
-    transition: background-color 0.3s, transform 0.3s;
-}
-@media only screen and (max-width: 425px)
-{
-    .back-to-top-button{
-        right:0px;
-        margin-right: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
+}
+
+@media only screen and (max-width: 425px) {
+    .back-to-top-button {
+        right: 10px;
     }
 }
+
 .back-to-top-button.visible {
     display: block;
     opacity: 1;
-    transform: translateY(0);
 }
 
 .back-to-top-button:not(.visible) {
     opacity: 0;
     transform: translateY(20px);
 }
-.back-to-top-button:hover{
+
+.back-to-top-button:hover {
     background-color: rgba(17, 99, 76, 0.856);
     transform: scale(1.1);
-    cursor: none;
 }
-.back-to-top-button:hover .tooltiptext{
 
+.back-to-top-button:hover .tooltiptext {
     top: -2.5em;
     left: -1em;
     visibility: visible;
     opacity: 1;
 }
-.tooltiptext{
+
+.tooltiptext {
     position: absolute;
     top: 0;
-    left: 2em;
-    transform: transLateX(-50%);
-    background-color:rgb(207, 238, 238);
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgb(207, 238, 238);
     color: rgb(197, 129, 129);
     white-space: nowrap;
     padding: 5px 10px;
     border-radius: 7px;
     visibility: hidden;
-    transition: opacity 0.5s ease;
+    opacity: 0;
+    transition: opacity 0.5s ease, top 0.3s ease;
 }
 
+.scroll-progress {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.progress-ring {
+    transform: rotate(-90deg);
+}
+
+.progress-ring__circle {
+    transition: stroke-dashoffset 0.35s;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+}

frontend/src/style/BookMark.css

@@ -21,12 +21,60 @@
   border: 2px solid rgba(79, 71, 125, 255);
   margin: 20px;
   padding: 7px 12px;
-  border-radius: 12px;
+  border-radius: 5px;
+  position: relative;
+  box-shadow: 0px 0px 20px violet;
+}
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
 }
+.bookmark__box::before,
+.bookmark__box::after {
+  content: "";
+  position: absolute;
+  inset: -0.3rem;
+  z-index: 2;
+  background: conic-gradient(
+    from var(--gradient-angle),
+    #672ba6,
+    #8b5cf6,
+    #cfbff7,
+    #c35cf6,
+    #6c2bb1
+  );
+
+  border-radius: inherit;
+  animation: moving 3s linear infinite;
 
+  mask: linear-gradient(
+      to right,
+      black 1%,
+      transparent 0%,
+      transparent 99%,
+      black 90%
+    ),
+    linear-gradient(
+      to bottom,
+      black 1%,
+      transparent 0%,
+      transparent 99%,
+      black 90%
+    );
+}
+
+@keyframes moving {
+  0% {
+    --gradient-angle: 0deg;
+  }
+  100% {
+    --gradient-angle: 360deg;
+  }
+}
 .bookmark__box:hover {
 transform: scale(1.1);
-box-shadow: 0px 0px 25px #8b5cf6;
+box-shadow: 0px 0px 15px #b85cf6e1;
 transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 

frontend/src/style/Home.css

@@ -154,19 +154,66 @@
   font-size: 3rem;
   font-weight: 500;
 }
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
 
 .content-box-home {
   max-width: 100vw;
+  position: relative;
   background-color: #101623;
-  border: 2px solid rgba(79, 71, 125, 255);
+  border: 10px;
   margin: 20px;
   padding: 7px 12px;
-  border-radius: 12px;
-  box-shadow: 2px 2px 8px rgba(79, 71, 125, 255);
+  border-radius: 6px;
+  box-shadow: 0px 0px 20px violet;
   transform-style: preserve-3d;
   transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
 }
-
+.content-box-home::before,
+.content-box-home::after {
+  content: "";
+  position: absolute;
+  inset: -0.3rem;
+  z-index: 2;
+  background: conic-gradient(
+    from var(--gradient-angle),
+    #672ba6,
+    #8b5cf6,
+    #cfbff7,
+    #c35cf6,
+    #6c2bb1
+  );
+
+  border-radius: inherit;
+  animation: moving 3s linear infinite;
+
+  mask: linear-gradient(
+      to right,
+      black 1%,
+      transparent 0%,
+      transparent 99%,
+      black 90%
+    ),
+    linear-gradient(
+      to bottom,
+      black 1%,
+      transparent 0%,
+      transparent 99%,
+      black 90%
+    );
+}
+
+@keyframes moving {
+  0% {
+    --gradient-angle: 0deg;
+  }
+  100% {
+    --gradient-angle: 360deg;
+  }
+}
 @media (max-width: 769px) {
   .hero-container {
     flex-direction: column;
@@ -315,7 +362,7 @@
 
 .content-box-home:hover {
   transform: scale(1.1) ;
-  box-shadow: 0px 0px 25px #8b5cf6;
+  box-shadow: 0px 0px 15px #b85cf6e1;
   z-index: 3;
 }