diff --git a/frontend/src/Component/BackToTopButton.js b/frontend/src/Component/BackToTopButton.js index 788e55e5..3b7d9c40 100644 --- a/frontend/src/Component/BackToTopButton.js +++ b/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 ( - - - + ); } diff --git a/frontend/src/DB/product.json b/frontend/src/DB/product.json index 0cf2206b..fc4c025a 100644 --- a/frontend/src/DB/product.json +++ b/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." } ] diff --git a/frontend/src/pages/FrontendTools.jsx b/frontend/src/pages/FrontendTools.jsx index 58889009..93803936 100644 --- a/frontend/src/pages/FrontendTools.jsx +++ b/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 = () => { diff --git a/frontend/src/pages/RemoteJobs.jsx b/frontend/src/pages/RemoteJobs.jsx index e9273e65..9eb16f31 100644 --- a/frontend/src/pages/RemoteJobs.jsx +++ b/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 = () => { diff --git a/frontend/src/style/BackToTopButton.css b/frontend/src/style/BackToTopButton.css index fbc7a1e9..20968d04 100644 --- a/frontend/src/style/BackToTopButton.css +++ b/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%; +} diff --git a/frontend/src/style/BookMark.css b/frontend/src/style/BookMark.css index 5e78bfab..9f7a1902 100644 --- a/frontend/src/style/BookMark.css +++ b/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: ""; + 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; } diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css index 53186a64..62dce8e2 100644 --- a/frontend/src/style/Home.css +++ b/frontend/src/style/Home.css @@ -154,19 +154,66 @@ font-size: 3rem; font-weight: 500; } +@property --gradient-angle { + syntax: ""; + 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; } diff --git a/frontend/src/style/OpenSource.css b/frontend/src/style/OpenSource.css index a2a62eb8..57cf1ce2 100644 --- a/frontend/src/style/OpenSource.css +++ b/frontend/src/style/OpenSource.css @@ -11,21 +11,66 @@ .open-source__main-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 20px; + gap: 30px; } .open-source__content-box-home { + position: relative; width: 100%; padding: 12px; - border: 1px solid #ccc; - border-radius: 8px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); + border-radius: 5px;box-shadow: 0px 0px 8px violet; transition: transform 0.2s, box-shadow 0.2s; } - +@property --gradient-angle { + syntax: ""; + initial-value: 0deg; + inherits: false; + } + .open-source__content-box-home::before, + .open-source__content-box-home::after { + content: ""; + position: absolute; + inset: -0.1rem; + 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 0.4%, + transparent 0%, + transparent 99.5%, + black 90% + ), + linear-gradient( + to bottom, + black 0.4%, + transparent 0%, + transparent 99.5%, + black 90% + ); + } + + @keyframes moving { + 0% { + --gradient-angle: 0deg; + } + 100% { + --gradient-angle: 360deg; + } + } .open-source__content-box-home:hover { transform: scale(0.9); - box-shadow: 0px 0px 25px #8b5cf6; + box-shadow: 0px 0px 15px #b85cf6e1; } .open-source__content-box-home h2 {