Merge pull request #37 from UjjwalSaini07/Patch-Branch32

Biggest Commits
UjjwalSaini07 · Sep 12, 2024 · ae7a599 · ae7a599
2 parents 4aac65d + ba4715b
commit ae7a599
Show file tree

Hide file tree

Showing 32 changed files with 1,161 additions and 421 deletions.
diff --git a/public/CubeBg.png b/public/CubeBg.png
diff --git a/public/index.html b/public/index.html
@@ -16,11 +16,12 @@
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div 
 
-    class="bg-gradient-to-t from-[#050101] to-[#010217] min-h-[100vh] text-gray-800 overflow-y-auto"
+    <div
+      class="bg-[url('./CubeBg.png')] bg-cover bg-no-repeat bg-center min-h-[100vh] text-gray-800 overflow-y-auto"
+      id="root"
+    ></div>
 
-    id="root"></div>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <!-- font-awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js"> <!-- react -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.25.1/react-router-dom.production.min.js"> <!-- react-router-dom -->
@@ -29,6 +30,13 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/css-layout/1.1.1/css-layout.min.js"> <!-- css-layout -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.10.4/react-bootstrap.min.js"> <!-- react-bootstrap -->
     <!-- Preload Spline Load in index.html so reduce the loading time in Hero -->
-    <link rel="preload" href="https://prod.spline.design/q1ibVol4H9yif8LF/scene.splinecode" as="fetch" crossorigin="anonymous" /> 
+    <link rel="preload" href="https://prod.spline.design/q1ibVol4H9yif8LF/scene.splinecode" as="fetch" crossorigin="anonymous" /> <!-- spline model of Hero--> 
+    <link rel="preload" href="https://prod.spline.design/rBcaq3Xa97MnC3a4/scene.splinecode" as="fetch" crossorigin="anonymous" /> <!-- Red PC backlight Model--> 
+    <link rel="preload" href="https://prod.spline.design/tQH4xs3CwWIS7EtM/scene.splinecode" as="fetch" crossorigin="anonymous" /> <!-- Red MOBI backlight Model--> 
+    <link rel="preload" href="https://prod.spline.design/z6sedxN3BKPCAM0N/scene.splinecode" as="fetch" crossorigin="anonymous" /> <!-- Blue Backlight --> 
   </body>
 </html>
+
+
+<!-- use this bg template if required -->
+<!-- Purple Shade BG: class="bg-gradient-to-t from-[#050101] to-[#010217] min-h-[100vh] text-gray-800 overflow-y-auto" -->
diff --git a/src/Pages/CompoPage/AboutCard/About.jsx b/src/Pages/CompoPage/AboutCard/About.jsx
@@ -20,22 +20,24 @@ export default function About() {
     },
     laptopStyle: {
       display: 'flex',
-      justifyContent: 'left',
-      alignItems: 'left',
+      top: "50%", 
+      left: "50%",   
+      transform: "translate(-50%, -50%)", 
       position: 'absolute',
       margin: 'auto',
       width: '100%',
-      maxWidth: '110rem',
+      maxWidth: '120rem',
       overflow: 'hidden',
+      zIndex: 10,
     },
     laptopScreenStyle: {
       display: 'flex',
       position: 'relative',
-      zIndex: 1,
-      padding: '10px',
-      minHeight: '80vh',
+      zIndex: 10,
+      padding: '12px',
+      minHeight: '78vh',
       width: '100vw',
-      marginTop: '94px',
+      marginTop: '50px',
       borderRadius: '2rem',
       background: 'transparent',
       boxShadow: '0 0.1rem 0 #cfcfcf',
@@ -46,7 +48,7 @@ export default function About() {
       right: '-10%',
       bottom: '-2.5rem',
       left: '-10%',
-      zIndex: 0,
+      zIndex: 10,
       height: '2rem',
       background: 'radial-gradient(ellipse closest-side,#000,transparent)',
       opacity: 0.5,

diff --git a/src/Pages/CompoPage/Certificate/BaseCertificate.jsx b/src/Pages/CompoPage/Certificate/BaseCertificate.jsx
@@ -25,7 +25,8 @@ export default function Certificate({ certification, index }) {
         transition: 'transform 0.3s ease',
         opacity: inView1 ? 1 : 0, 
         transform: inView1 ? 'translateY(0)' : 'translateY(-50px)', 
-        transition: 'opacity 1.25s ease-out ${1.7 + index}s, transform 1.25s ease-out ${1.7 + index}s'
+        transition: 'opacity 1.25s ease-out ${1.7 + index}s, transform 1.25s ease-out ${1.7 + index}s',
+        pointerEvents: "auto",
       }}
     >
       <div

diff --git a/src/Pages/CompoPage/Certificate/Certifications.jsx b/src/Pages/CompoPage/Certificate/Certifications.jsx
@@ -1,8 +1,11 @@
-import React,{useEffect} from "react";
+import React,{ useEffect, useState } from "react";
 import { useInView } from 'react-intersection-observer';
 import { motion } from "framer-motion";
 import Certificate from "./BaseCertificate";
+import { useMediaQuery } from 'react-responsive';
+import Spline from '@splinetool/react-spline';
 
+import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png'
 import gssoc24 from "../../../components/Assest_Used/Certifications/Ujjwal_GSSoC2024.png";
 import postman from "../../../components/Assest_Used/Certifications/PostMan Certificate.png";
 import tatacyber from "../../../components/Assest_Used/Certifications/Ujjwal_CyberSuraksha.jpg";
@@ -18,6 +21,22 @@ import skillbuildaifd from "../../../components/Assest_Used/Certifications/Artif
 
 const isMobile = window.innerWidth < 798;
 
+const spline_model = { 
+  position: "fixed",
+  top: "0",
+  left: "0",
+  width: "100%",
+  height: "100%",
+  zIndex: "1",
+};
+const mainContSplinebg = {
+  zIndex: '1',
+  backgroundImage: `url(${bgref})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  position: 'relative', 
+};
+
 const spaceboardsFont = `
   @font-face {
     font-family: 'Spaceboards';
@@ -142,6 +161,11 @@ export default function Certifications() {
     threshold: 0.1, 
   });
 
+  const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
+  const [isHovered, setIsHovered] = useState(false);
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
+
   useEffect(() => {
     const styleElement = document.createElement('style');
     styleElement.innerHTML = spaceboardsFont + CertifiStyle;
@@ -155,50 +179,64 @@ export default function Certifications() {
   }, []);
 
   return (
-    <div
-      style={{
-        backgroundColor: 'transaprent',
-        padding: '12px',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '20px',
-        maxWidth: isMobile ? '800px' : '1800px',
-        height: 'auto',
-        margin: 'auto',
-        color: 'white',
-        overflow: 'hidden',
-        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
-      }}
-    >
-      <motion.div variants={textVariant(1)} initial="hidden" animate="show" >
-      <div className="cert cert-PC" style={{ textAlign: 'center', fontWeight: 'bold', marginTop: '6.4rem' }}>
-        My Achievements & Certifications
-      </div>
-      </motion.div>
-      <motion.div variants={textVariant(1)} initial="hidden" animate="show" >
-      <div className="cert cert-Mobile" style={{ textAlign: 'center', fontWeight: 'bold', marginTop: '6.4rem' }}>
-        My Certifications
-      </div>
-      </motion.div>
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '15px',
-          marginTop: '20px',
-          justifyContent: 'center',
-        }}
-      >
-        {certifications.content.map((certification, index) => (
-          <motion.div
-            variants={textVariant(6.8)}
-            initial="hidden"
-            animate="show"
-            variants={fadeIn("", "", index * 0.5, 1.8)}
-          >
-            <Certificate key={index} index={index} certification={certification} />
+    <div style={mainContSplinebg}>
+      {!isMobile ? (
+        <Spline 
+          style={spline_model} 
+          scene="https://prod.spline.design/z6sedxN3BKPCAM0N/scene.splinecode"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />
+      ) : (
+        'none'
+      )}
+      <div className="mt-1" style={{ zIndex: '20', position: 'relative', pointerEvents: "none", }}>
+        <div
+          style={{
+            backgroundColor: 'transaprent',
+            padding: '12px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '20px',
+            maxWidth: isMobile ? '800px' : '1800px',
+            height: 'auto',
+            margin: 'auto',
+            color: 'white',
+            overflow: 'hidden',
+            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
+          }}
+        >
+          <motion.div variants={textVariant(1)} initial="hidden" animate="show" >
+          <div className="cert cert-PC" style={{ textAlign: 'center', fontWeight: 'bold', marginTop: '6.4rem' }}>
+            My Achievements & Certifications
+          </div>
+          </motion.div>
+          <motion.div variants={textVariant(1)} initial="hidden" animate="show" >
+          <div className="cert cert-Mobile" style={{ textAlign: 'center', fontWeight: 'bold', marginTop: '6.4rem' }}>
+            My Certifications
+          </div>
           </motion.div>
-        ))}
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '15px',
+              marginTop: '20px',
+              justifyContent: 'center',
+            }}
+          >
+            {certifications.content.map((certification, index) => (
+              <motion.div
+                variants={textVariant(6.8)}
+                initial="hidden"
+                animate="show"
+                variants={fadeIn("", "", index * 0.5, 1.8)}
+              >
+                <Certificate key={index} index={index} certification={certification} />
+              </motion.div>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/Pages/CompoPage/ExtraComponents/Marquee.js b/src/Pages/CompoPage/ExtraComponents/Marquee.js
@@ -5,6 +5,7 @@ import { useInView } from 'react-intersection-observer';
 import Shade1 from '../../../components/Assest_Used/textures/Gradients/Shade1.png';
 import Shade2 from '../../../components/Assest_Used/textures/Gradients/Shade2.png';
 import Shade3 from '../../../components/Assest_Used/textures/Gradients/Shade3.png';
+import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png';
 
 const reviews = [
   {
@@ -137,9 +138,9 @@ const ReviewCard = ({ img, name, username, body }) => {
 
   const cardStyle = {
     position: 'relative',
-    width: '35rem', // Increase card width
-    height: '8rem', // Increase card width
-    margin: '0.2px 0.5rem 1.2rem', // Adjust margins
+    width: '35rem',
+    height: '8rem', 
+    margin: '0.2px 0.5rem 1.2rem',
     cursor: 'pointer',
     overflow: 'hidden',
     borderRadius: '1rem',
@@ -174,7 +175,7 @@ const ReviewCard = ({ img, name, username, body }) => {
           </p>
         </div>
       </div>
-      <blockquote style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'white' }}>{body}</blockquote>
+      <blockquote style={{ marginTop: '0.5rem', fontSize: '0.9rem', color: 'white' }}>{body}</blockquote>
     </figure>
   );
 };
@@ -213,8 +214,11 @@ export function MarqueeDemo() {
     width: '100%',
     overflow: 'hidden',
     borderRadius: '0.75rem',
-    border: '1px solid rgba(0, 0, 0, 0.1)',
-    backgroundColor: '#020214',
+    // border: '1px solid rgba(0, 0, 0, 0.1)',
+    // backgroundColor: '#020214',
+    backgroundImage: `url(${bgref})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
     color: 'white',
   };
 
@@ -224,15 +228,15 @@ export function MarqueeDemo() {
     top: 0,
     bottom: 0,
     left: 0,
-    width: '15%', // Adjust the gradient width
-    background: 'linear-gradient(to right, #020214, rgba(2, 2, 20, 0))',
+    width: '18%', // Adjust the gradient width
+    // background: 'linear-gradient(to right, #020214, rgba(2, 2, 20, 0))',
   };
 
   const gradientReverseStyle = {
     ...gradientStyle,
     left: 'auto',
     right: 0,
-    background: 'linear-gradient(to left, #020214, rgba(2, 2, 20, 0))',
+    // background: 'linear-gradient(to left, #020214, rgba(2, 2, 20, 0))',
   };
 
   const { ref: ref0, inView: inView0 } = useInView({
@@ -243,7 +247,7 @@ export function MarqueeDemo() {
   return (
     <div style={containerStyle}>
       <div className="Test" ref={ref0} style={{ textAlign: 'center', marginBottom: '2.5rem', marginTop: '1rem',  opacity: inView0 ? 1 : 0, transform: inView0 ? 'translateY(0)' : 'translateY(50px)', transition: `opacity 1.25s ease-out 4.2s, transform 1.25s ease-out 4.2s`}}>
-        Testinomails
+        Testimonials
       </div>
       <Marquee pauseOnHover className="[--duration:20s]">
         {firstRow.map((review) => (
@@ -262,5 +266,3 @@ export function MarqueeDemo() {
 }
 
 export default MarqueeDemo;
-
-
diff --git a/src/Pages/CompoPage/ExtraComponents/NumberTicker.js b/src/Pages/CompoPage/ExtraComponents/NumberTicker.js
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
 
+import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png';
+
 const NumberTicker = () => {
   const [projectCount, setProjectCount] = useState(0);
   const [happyClientCount, setHappyClientCount] = useState(0);
@@ -77,7 +79,10 @@ const NumberTicker = () => {
     flexDirection: 'column',
     alignItems: 'center',
     padding: '20px',
-    backgroundColor: '#020214',
+    // backgroundColor: '#020214',
+    backgroundImage: `url(${bgref})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
     color: '#fff',
     minHeight: '100vh',
     overflow: 'hidden',
@@ -99,7 +104,7 @@ const NumberTicker = () => {
     margin: '10px',
     padding: '15px',
     borderRadius: '8px',
-    backgroundColor: 'rgba(255, 255, 255, 0)', // Fully transparent background
+    backgroundColor: 'rgba(255, 255, 255, 0)',
     color: '#fff',
     boxShadow: '0 6px 12px rgba(0, 0, 0, 0)', 
     width: '160px',

diff --git a/src/Pages/CompoPage/HomeSec/HomeHero.js b/src/Pages/CompoPage/HomeSec/HomeHero.js
@@ -6,6 +6,7 @@ import { motion } from "framer-motion";
 import { Flipper, Flipped } from 'react-flip-toolkit';
 import useSound from 'use-sound';
 
+import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png';
 import soundeffect1 from '../../../components/Assest_Used/Sounds/base.mp3';
 import soundeffect2 from '../../../components/Assest_Used/Sounds/select-click.wav';
 import HireMESvg from '../ExtraComponents/HireMe';
@@ -25,6 +26,10 @@ const HomePcContainer = {
   height: "100vh",
   overflow: "hidden",
   zindex: "1",
+  backgroundColor: "#000000",
+  backgroundImage: `url(${bgref})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
 };
 
 const spline_model = {

diff --git a/src/Pages/CompoPage/HomeSec/HomeP2.js b/src/Pages/CompoPage/HomeSec/HomeP2.js
@@ -5,6 +5,7 @@ import useSound from 'use-sound';
 import { useInView } from 'react-intersection-observer';
 
 import soundeffect from '../../../components/Assest_Used/Sounds/base.mp3';
+import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png';
 
 const spaceboardsFont = `
   @font-face {
@@ -68,7 +69,9 @@ const HomePcContainer = styled.div`
   overflow: hidden;
   display: flex;
   justify-content: flex-end;
-  background: #020215;
+  // background: #020215;
+  background-Image: url(${bgref});
+  background-size: cover;
   z-index: 1;
 `;
 
@@ -166,9 +169,10 @@ function HomeP2() {
 
   return (
     <HomePcContainer>
-      <Spline ref={ref1} style={{...spline_model, opacity: inView1 ? 1 : 0, transform: inView1 ? 'translateY(0)' : 'translateY(-50px)', transition: 'opacity 1.25s ease-out 0.7s, transform 1.25s ease-out 0.7s'}} scene="https://prod.spline.design/rnK7SZJPgrRw-DL9/scene.splinecode" />
-      <div className="Test" style={{ textAlign: 'center', zIndex: '2', marginRight: '8rem', marginTop: '10rem', marginBottom: '2rem',  opacity: inView1 ? 1 : 0, transform: inView1 ? 'translateY(0)' : 'translateY(-50px)', transition: `opacity 1.25s ease-out 1s, transform 1.25s ease-out 1s`}}>
-        Project Overview
+      <Spline ref={ref1} style={{...spline_model, opacity: inView1 ? 1 : 0, transform: inView1 ? 'translateY(0)' : 'translateY(-50px)', transition: 'opacity 1.25s ease-out 0.7s, transform 1.25s ease-out 0.7s'}} scene="https://prod.spline.design/vyBJML2ZgR2CVUbJ/scene.splinecode" />
+      {/* <Spline ref={ref1} style={{...spline_model, opacity: inView1 ? 1 : 0, transform: inView1 ? 'translateY(0)' : 'translateY(-50px)', transition: 'opacity 1.25s ease-out 0.7s, transform 1.25s ease-out 0.7s'}} scene="https://prod.spline.design/rnK7SZJPgrRw-DL9/scene.splinecode" /> */}
+      <div className="Test" style={{ textAlign: 'center', zIndex: '2', marginRight: '3rem', marginTop: '10rem', marginBottom: '2rem',  opacity: inView1 ? 1 : 0, transform: inView1 ? 'translateY(0)' : 'translateY(-50px)', transition: `opacity 1.25s ease-out 1s, transform 1.25s ease-out 1s`}}>
+        Portfolio Overview
       </div>
       <CardsContainer ref={ref1}>