💄 feat : update styling of home page

frontend/package.json

@@ -23,6 +23,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/material": "^5.15.1",
+    "@tsparticles/engine": "^3.5.0",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.5.0",
+    "@types/styled-components": "^5.1.34",
     "axios": "^1.6.3",
     "bootstrap": "^5.3.2",
     "json-server": "^0.17.4",
@@ -34,6 +38,7 @@
     "react-scroll": "^1.9.0",
     "react-tabs": "^6.0.2",
     "react-toggle-dark-mode": "^1.1.1",
+    "styled-components": "^6.1.13",
     "typed.js": "^2.1.0"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -12,7 +12,6 @@ import ContactMeSection from "./pages/ContactMe";
 import Footer from "./components/organisms/Footer";
 import "./App.css";
 import PortfolioSkeletonLoader from "./components/molecules/SkeletonLoader";
-import { useScrollReveal } from "./hook/useScrollReveal";
 
 const AppContent: React.FC = () => {
   const { isDark } = useDarkMode();
@@ -28,8 +27,9 @@ const AppContent: React.FC = () => {
   useEffect(() => {
     document.body.style.color = isDark ? "#fff" : "#000";
     document.body.style.fontWeight = isDark ? "500" : "inherit";
-    document.body.style.backgroundColor = isDark ? "#1f1d27" : "#fff";
+    document.body.style.backgroundColor = isDark ? "#3A506C" : "#fff"; // Softer dark color
   }, [isDark]);
+
 
   return (
     <>

frontend/src/components/atoms/TiltedHeroImage/App.css

@@ -0,0 +1,8 @@
+.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 */
+}

frontend/src/components/atoms/TiltedHeroImage/index.tsx

@@ -0,0 +1,41 @@
+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';
+
+const TiltedHeroImage = () => {
+  const [tilt, setTilt] = useState({ x: 0, y: 0 });
+
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
+    const { clientX, clientY, currentTarget } = e;
+    const { width, height, left, top } = currentTarget.getBoundingClientRect();
+
+
+    const x = (clientX - left) / width;
+    const y = (clientY - top) / height;
+
+
+    const tiltX = (x - 0.5) * 30;
+    const tiltY = (y - 0.5) * 30;
+
+    setTilt({ x: tiltX, y: tiltY });
+  };
+
+  return (
+    <div
+      className="tilt-container"
+      onMouseMove={handleMouseMove}
+      onMouseLeave={() => setTilt({ x: 0, y: 0 })} 
+    >
+      <img
+        src={HeroSectionImage}
+        alt={HERO_SECTION_IMAGE}
+        style={tiltedImageStyle(tilt.x, tilt.y)}
+      />
+    </div>
+  );
+};
+
+export default TiltedHeroImage;

frontend/src/components/molecules/AnimatedName/style.css

@@ -106,47 +106,56 @@
   100% { transform: scale(1); }
 }
 
-.name {
-  color: #f4b039;
-}
-
 .name-0 {
   display: inline-block;
   animation: hinge 1.5s infinite 0.1s;
+  color: #015871; /* Dark teal */
 }
+
 .name-1 {
   display: inline-block;
   animation: bounce 1.5s infinite 0.1s;
+  color: #7C0158; /* Dark pink */
 }
+
 .name-2, .name-10 {
   display: inline-block;
   animation: flip 1.5s infinite 0.1s;
+  color: #FF9671; /* Light orange */
 }
 
 .name-3 {
   display: inline-block;
   animation: swing 1.5s infinite 0.1s;
+  color: #FF6F91; /* Light pink */
 }
 
 .name-4, .name-8 {
   display: inline-block;
   animation: wobble 1.5s infinite 0.1s;
+  color: #f4b039; /* Gold */
 }
+
 .name-5 {
   display: inline-block;
   animation: gelatine 1.5s infinite 0.1s;
+  color: #015871; /* Dark teal */
 }
+
 .name-9 {
   display: inline-block;
   animation: rotate-in-up-left 1.5s infinite 0.1s;
+  color: #7C0158; /* Dark pink */
 }
 
 .name-7 {
   display: inline-block;
   animation: rotate-in-down-left 1.5s infinite 0.1s;
+  color: #FF9671; /* Light orange */
 }
 
 .name-6 {
   display: inline-block;
   animation: hithere 1.5s infinite 0.1s;
-}
+  color: #FF6F91; /* Light pink */
+}

frontend/src/components/molecules/IconList/index.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRightToBracket } from '@fortawesome/free-solid-svg-icons';
 import DarkModeToggle from '../../atoms/Toggle';
-import { IconContainer, LeftDiv, MiddleDiv, RightDiv, StyledNavIcon } from '../../../utils/styled';
+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 { Link } from 'react-scroll';
 import { navLinks } from '../../../services/mocks/mocks';
 
+
 const HomeIconsList = () => {
   const { isDark, toggleMode } = useDarkMode();
 
@@ -20,9 +20,9 @@ const HomeIconsList = () => {
       </LeftDiv>
       <MiddleDiv>
         {navLinks.map((link, index) => (
-          <Link key={index} to={link.to} spy smooth duration={500}>
-            <FontAwesomeIcon icon={link.icon} />
-          </Link>
+          <StyledNavLink key={index} to={link.to} spy smooth duration={500}>
+            <FontAwesomeIcon icon={link.icon} className={`fwi-${index}`} />
+          </StyledNavLink>
         ))}
       </MiddleDiv>
       <RightDiv>

frontend/src/components/molecules/SocialMediaIcons/index.tsx

@@ -1,16 +1,74 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconDiv } from '../../../utils/styled';
-import { socialMediaData } from '../../../services/mocks/mocks';
+import { IconDiv, Popup } from '../../../utils/styled';
+import { socialMediaData, userData } from '../../../services/mocks/mocks';
 import { SOCIAL_MEDIA_COMPONENT } from '../../../utils/constants';
 
 const SocialMediaIcons = () => {
+  const [popupVisible, setPopupVisible] = useState<string | null>(null);
+  const popupRef = useRef<HTMLDivElement | null>(null);
+
+  const handleClick = (platform: string) => {
+    if (popupVisible === platform) {
+      setPopupVisible(null);
+    } else {
+      setPopupVisible(platform);
+    }
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+        setPopupVisible(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
+
   return (
-    <IconDiv data-testid = {SOCIAL_MEDIA_COMPONENT}>
+    <IconDiv data-testid={SOCIAL_MEDIA_COMPONENT}>
       {socialMediaData.map(({ platform, icon, color, link }) => (
-        <a key={platform} href={link} target="_blank" rel="noopener noreferrer">
-          <FontAwesomeIcon icon={icon} style={{ color }} className='wave' />
-        </a>
+        <div
+          key={platform}
+          style={{ position: 'relative', display: 'inline-block' }}
+          ref={popupVisible === platform ? popupRef : null}
+        >
+          <a
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => {
+              e.preventDefault();
+              if (['github', 'instagram', 'twitter'].includes(platform)) {
+                handleClick(platform);
+              } else {
+                window.open(link, '_blank');
+              }
+            }}
+          >
+            <FontAwesomeIcon icon={icon} style={{ color }} className="wave" />
+          </a>
+          {popupVisible === platform && (
+            <Popup>
+              <p>
+                <strong>Personal:</strong>{' '}
+                <a href={userData[platform]?.personalLink} target="_blank" rel="noopener noreferrer">
+                  <FontAwesomeIcon icon={userData[platform]?.icon} className='wave' />
+                </a>
+              </p>
+              <p>
+                <strong>Organization:</strong>{' '}
+                <a href={userData[platform]?.orgLink} target="_blank" rel="noopener noreferrer">
+                <FontAwesomeIcon icon={userData[platform]?.icon} className='wave' />
+                </a>
+              </p>
+            </Popup>
+          )}
+        </div>
       ))}
     </IconDiv>
   );

frontend/src/components/organisms/Footer/index.tsx

@@ -5,6 +5,7 @@ import StyledSeparator from "../../atoms/StyledSeparator";
 import { Link } from "react-scroll";
 import {
     BLANK,
+    DEFAULT_QUOTES,
     DEVLOPER_NAME,
     HOME,
     MADHURENDRA_NATH_TIWARI,
@@ -31,6 +32,7 @@ const Footer = () => {
   const [quotes,setQuotes] = useState("")
   useEffect(() => {
       getQuotes().then((res) => {
+        console.log(res.data[0]?.content)
         setQuotes(res.data[0]?.content)
       }).catch((err) => {
         throw new Error("Error while fetching quotes " + err)    
@@ -82,7 +84,7 @@ const Footer = () => {
       </FoorterWrapper>
       <StyledHorizontalLine />
       <div>
-        <h3>{quotes}</h3>
+        <h3>{quotes ?? DEFAULT_QUOTES}</h3>
       </div>
     </FooterContainer>
   );

frontend/src/interfaces/types.ts

@@ -1,3 +1,4 @@
+import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
 import { ButtonProps, ButtonPropsVariantOverrides, SxProps, TypographyProps } from "@mui/material";
 import React, { CSSProperties, ReactElement } from "react";
 
@@ -102,4 +103,13 @@ export interface IFormErrors {
   email?: string;
   subject?: string;
   message?: string;
-}
+
+}
+
+export interface SocialMediaUserData {
+  personal: string;
+  organization: string;
+  personalLink: string;
+  orgLink: string;
+  icon: IconDefinition;
+}

frontend/src/pages/About/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import Typed from 'typed.js';
 import AboutImage from "../../../public/jpeg/About-Image.jpg"
 import MyChip from '../../components/atoms/Chip'
-import { skillsData, socialMediaData, typeNameAttributes } from '../../services/mocks/mocks'
+import { nameType, skillsData, socialMediaData, typeAttributes,  } from '../../services/mocks/mocks'
 import { ABOUT_COMPONENT, ABOUT_DESC, ABOUT_SUB_DESC, ABOUT_SUB_FOOTER_DESC, ICON_ABOUT_ALT } from '../../utils/constants';
 import { AboutDiv, LeftAboutDiv, MuiChipAboutStyled, RightAboutDiv, SkillAboutDiv } from '../../utils/styled';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -14,7 +14,7 @@ const About = () => {
   const el = React.useRef(null);
   useScrollReveal();
   useEffect(() => {
-    const typed = new Typed(el.current, typeNameAttributes);
+    const typed = new Typed(el.current, typeAttributes(nameType));
 
     return () => {
       typed.destroy();
@@ -59,4 +59,4 @@ const About = () => {
   )
 }
 
-export default About
+export default About