💄 feat : improvide home section ui

dev-madhurendra · Sep 20, 2024 · 8787300 · 8787300
1 parent b6d03ba
commit 8787300
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 103 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -27,9 +27,8 @@ const AppContent: React.FC = () => {
   useEffect(() => {
     document.body.style.color = isDark ? "#fff" : "#000";
     document.body.style.fontWeight = isDark ? "500" : "inherit";
-    document.body.style.backgroundColor = isDark ? "#3A506C" : "#fff"; // Softer dark color
+    document.body.style.backgroundColor = isDark ? "whitesmoke" : "#fff";
   }, [isDark]);
-
 
   return (
     <>

diff --git a/frontend/src/components/atoms/TiltedHeroImage/App.css b/frontend/src/components/atoms/TiltedHeroImage/App.css
@@ -1,8 +0,0 @@
-.tilt-container {
-  perspective: 1000px; /* Add perspective to enhance the 3D effect */
-}
-
-img {
-  width: 100%; /* Adjust size as needed */
-  transform-style: preserve-3d; /* Enables 3D transformations */
-}

diff --git a/frontend/src/components/atoms/TiltedHeroImage/index.tsx b/frontend/src/components/atoms/TiltedHeroImage/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import HeroSectionImage from '../../../../public/png/profile-pic.png'
-import './App.css'; 
 import { HERO_SECTION_IMAGE } from '../../../utils/constants';
 import { tiltedImageStyle } from '../../../services/mocks/mocks';
 
@@ -25,7 +24,6 @@ const TiltedHeroImage = () => {
 
   return (
     <div
-      className="tilt-container"
       onMouseMove={handleMouseMove}
       onMouseLeave={() => setTilt({ x: 0, y: 0 })} 
     >

diff --git a/frontend/src/components/molecules/IconList/index.tsx b/frontend/src/components/molecules/IconList/index.tsx
@@ -1,24 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faRightToBracket } from '@fortawesome/free-solid-svg-icons';
+import { faBars, faRightToBracket, faX } from '@fortawesome/free-solid-svg-icons';
 import DarkModeToggle from '../../atoms/Toggle';
 import { IconContainer, LeftDiv, MiddleDiv, RightDiv, StyledNavIcon, StyledNavLink } from '../../../utils/styled';
 import Icon from '../../atoms/Icon';
 import LogoGif from '../../../../public/gif/Logo.gif';
 import { useDarkMode } from '../../../services/customhook/useDarkMode';
 import { ICON_COMPONENT_HOME } from '../../../utils/constants';
 import { navLinks } from '../../../services/mocks/mocks';
+import { handleOpenNav } from '../../../services/functions/functions';
 
 
 const HomeIconsList = () => {
   const { isDark, toggleMode } = useDarkMode();
+  const [display, setDisplay] = useState("none")
 
   return (
     <IconContainer data-testid={ICON_COMPONENT_HOME}>
       <LeftDiv>
         <Icon src={LogoGif} sx={StyledNavIcon} />
       </LeftDiv>
-      <MiddleDiv>
+      <MiddleDiv mediaDisplay={display}>
         {navLinks.map((link, index) => (
           <StyledNavLink key={index} to={link.to} spy smooth duration={500}>
             <FontAwesomeIcon icon={link.icon} className={`fwi-${index}`} />
@@ -28,6 +30,10 @@ const HomeIconsList = () => {
       <RightDiv>
         <DarkModeToggle checked={isDark} onChange={toggleMode} />
         <FontAwesomeIcon icon={faRightToBracket} />
+        <FontAwesomeIcon 
+          icon={display==='none' ? faBars : faX} 
+          onClick={() => handleOpenNav(display, setDisplay)} 
+        />
       </RightDiv>
     </IconContainer>
   );

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -2,4 +2,4 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-}
+}
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
@@ -28,8 +28,8 @@ const HomeSection = () => {
   return (      
       <HomeDiv id={'home'}>
         <div className="ocean">
-          <div className="wave"></div>
-          <div className="wave"></div>
+          <div className="ocean-wave"></div>
+          <div className="ocean-wave"></div>
         </div>
         <LeftHomeDiv>
           <GreetHomeDiv>

diff --git a/frontend/src/pages/Home/style.css b/frontend/src/pages/Home/style.css
@@ -34,40 +34,26 @@
   transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
   display: inline-block;
 }
-/* .home-section {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-} */
-
-.particles-canvas {
-  position: absolute;
-  width: 100vw;
-  height: 800px;
-  top: 0;
-}
-
 
 .ocean { 
   width: 100%;
   position: absolute;
-  top: 0;
+  top: 0; /* Default for larger screens */
   left: 0;
   background: #015871;
   transform: rotate(180deg); /* Rotate the wave */
 }
 
-.ocean .wave {
+.ocean-wave {
   background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
   position: absolute;
   top: -190px; /* Adjust this based on your wave height */
-  width: 6400px;
+  width: 200%; /* Default width for larger screens */
   height: 198px;
   animation: ocean-wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
 }
 
-.ocean .wave:nth-of-type(2) {
+.ocean-wave:nth-of-type(2) {
   top: -165px; /* Adjust the second wave position */
   animation: ocean-wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
   opacity: 1;
@@ -78,7 +64,7 @@
     margin-left: 0;
   }
   100% {
-    margin-left: -1600px;
+    margin-left: -100%; /* Adjust for smoother animation */
   }
 }
 
@@ -90,3 +76,10 @@
     transform: translate3d(0, 5px, 0);
   }
 }
+
+/* Media queries for mobile responsiveness */
+@media (max-width: 768px) {
+  .ocean { 
+    display: none;
+  }
+}
diff --git a/frontend/src/services/functions/functions.ts b/frontend/src/services/functions/functions.ts
@@ -77,3 +77,13 @@ export const updateIndices =
     return { newStartIndex: startIndex, newEndIndex: endIndex };
 };
 
+export const handleOpenNav = (
+    display: string, 
+    setDisplay: React.Dispatch<React.SetStateAction<string>>
+  ) => {
+    if (display === 'none') {
+      setDisplay("flex");
+    } else {
+      setDisplay("none");
+    }
+  };
diff --git a/frontend/src/services/mocks/mocks.ts b/frontend/src/services/mocks/mocks.ts
@@ -6,9 +6,7 @@ import { IFormField, SocialMediaUserData } from '../../interfaces/types';
 export const greetingsHello = [
   "Hola ", 
   "Bonjour",
-  "Hello ", 
-  "नमस्ते ",  // Hindi greeting
-  "नमस्कार "   // Another Hindi greeting
+  "Hello ",
 ];
 export const greets = [
   'Software Engineer',
@@ -32,10 +30,8 @@ export const nameType = [
   `System.out.println('👋 Madhurendra');`,  // Java
   `printf("👋 Madhurendra\\n");`,     // C
   `fmt.Println("👋 Madhurendra")`,    // Go
-  `Write-Host '👋 Madhurendra'`,      // PowerShell
   `Console.WriteLine("👋 Madhurendra");`, // C#
   `echo '👋 Madhurendra'`,            // Bash
-  `document.write('👋 Madhurendra');`, // HTML/JS
   `IO.puts "👋 Madhurendra"`,         // Elixir
   `say "👋 Madhurendra"`,             // Swift
   `echo '👋 Madhurendra!'`,           // Shell script

diff --git a/frontend/src/utils/styled.ts b/frontend/src/utils/styled.ts
@@ -50,14 +50,15 @@ export const IconContainer = styled('div')({
   fontSize: '1.5rem',
   marginLeft: '1.25rem',
   zIndex: '1111',
-  '@media (max-width: 468px)': {
+  '@media (max-width: 768px)': {
     display: 'flex', 
     flexDirection: 'row', 
     alignItems: 'center', 
     position: 'fixed', 
-    top: '0', 
-    left: '0', 
-    width: '80%', 
+    justifyContent: 'space-between',
+    top: '0',
+    width: '90vw', 
+    margin: 'none',
     height: 'auto', 
   },
 }, slideInAnimation);
@@ -70,49 +71,50 @@ export const LeftDiv = styled('div')({
   boxShadow: "rgba(0, 0, 0, 0.35) 0px 0.3125rem 0.9375rem",
   cursor: "pointer",
   borderRadius: "50%",
-  '@media (max-width: 468px)': {
-    display:"none"
-  },
-
 })
-export const MiddleDiv = styled('div')({
+export const MiddleDiv = styled('div')<{mediaDisplay: string}>(({ mediaDisplay }) => ({
   display: "flex",
   justifyContent: "center",
-  flexDirection:"column",
+  flexDirection: "column",
   alignItems: "center",
-  gap:"0.625rem",
-  // boxShadow: "rgba(0, 0, 0, 0.35) 0rem 0.3125rem 0.9375rem",
+  gap: "0.625rem",
   padding: "1.25rem",
   cursor: "pointer",
-  // borderRadius: "3.125rem",
-  // backgroundColor: "rgba(255,255,255,0.1)",
-  // backdropFilter: "blur(0.0625rem)",
-  '@media (max-width: 468px)': {
-    flexDirection: 'row', 
-    position: 'fixed', 
-    overflow:"hidden",
-    top: '0', 
-    left: '0',
-    gap:"1.25rem",
-    width: '65%', 
-    height: 'auto', 
-    marginLeft: '0', 
-    marginTop: '0.3125rem', 
+  '@media (max-width: 768px)': {
+    position: 'absolute',
+    overflow: "hidden",
+    top: '30px',
+    left: '65%',
+    gap: "1.25rem",
+    width: '65%',
+    height: 'auto',
+    marginLeft: '0',
+    marginTop: '0.3125rem',
     padding: "1.25rem",
+    display: mediaDisplay, 
   },
-})
+}));
+
+
 export const RightDiv = styled('div')({
   display: "flex",
   justifyContent: "center",
-  flexDirection:"column",
+  flexDirection: "column",
   alignItems: "center",
   cursor: "pointer",
   gap: "1.25rem",
-  '@media (max-width: 468px)': {
-    marginLeft: "70%",
+  '& svg:nth-of-type(3)': {
+    display: 'none', 
+  },
+  '@media (max-width: 768px)': {
     marginTop: '0.3125rem', 
+    flexDirection: "row",
+    '& svg:nth-of-type(3)': {
+      display: 'flex', 
+    }
   },
-})
+});
+
 export const StyledNavIcon = {
   width: "4rem",
   height: "4rem",
@@ -135,7 +137,7 @@ export const HomeDiv = styled('div')<{ id: string }>({
     height: "100vh",
     width: "90vw",
     '@media (max-width: 900px)': {
-      flexDirection: 'column',
+      flexDirection: 'column-reverse',
       width: "100vw",
     },
     '@media (max-width:468px)': {
@@ -151,18 +153,6 @@ export const HomeDiv = styled('div')<{ id: string }>({
     },
 })
 
-// export const RotatedBackground = styled('div')({
-//   position: 'absolute',
-//   top: 0,
-//   left: 0,
-//   width: '100%',
-//   height: '100%',
-//   background: `url(${WaveUrl})`,
-//   backgroundRepeat: 'no-repeat',
-//   backgroundSize: '100% 100%',
-//   transform: 'rotate(0deg)',
-// });
-
 export const RotatedBackground = styled('div')({
   position: 'absolute',
   top: 0,
@@ -215,18 +205,6 @@ export const RotatedBackground = styled('div')({
   },
 });
 
-export const DarkRotatedBackground = styled('div')({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  background: `url(${DarkModeWaveUrl})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '100% 100%',
-  transform: 'rotate(0deg)',
-});
-
 export const LeftHomeDiv = styled('div')({
     display: "flex",
     justifyContent: "center",
@@ -284,26 +262,37 @@ const tiltAnimation = keyframes`
   }
 `
 
-
-
 export const RightHomeDiv = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  '& img': {
-    animation: `${floatAnimation} 3s ease-in-out infinite, ${slideInFromRight} 3s ease-in-out, ${tiltAnimation} 5s infinite ease-in-out; `,
+  transformStyle: 'preserve-3d',
+  '& div': {
+    perspective: '1000px',
+  },
+  '& div > img': {
+    animation: `${floatAnimation} 3s ease-in-out infinite, 
+                ${slideInFromRight} 3s ease-in-out, 
+                ${tiltAnimation} 5s infinite ease-in-out; `,
     width: "31.25rem",
     height:"31.25rem",
     cursor: "pointer"
   },
   '@media (max-width: 900px)': {
-    '& img': {
+    '& div > img': {
       width: "20rem",
       height: "20rem",
       marginTop: "-4.5rem",
       marginLeft:"-7.5rem"
     }
   },
+  '@media (max-width: 768px)': {
+    '& div > img': {
+      width: "17rem",
+      height: "17rem",
+      marginLeft: "-0.75rem"
+    }
+  },
   '@media (max-width: 468px)': {
     '& img': {
       width: "25rem",
@@ -312,6 +301,8 @@ export const RightHomeDiv = styled('div')({
     }
   },
 });
+
+
 export const GreetHomeDiv = styled('div')({
     display: "flex",
     justifyContent: "flex-start",