🚧 Working on About Section

dev-madhurendra · Dec 27, 2023 · 789289d · 789289d
1 parent 9cbfe19
commit 789289d
Show file tree

Hide file tree

Showing 13 changed files with 173 additions and 14 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Madhurendra's Tech Odyssey</title>
+    <link rel="shortcut icon" href="public/gif/Logo.gif" type="image/x-icon">
+    <title>👋 | Madhurendra's Tech Odyssey</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/jpeg/About-Image.jpg b/frontend/public/jpeg/About-Image.jpg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import HomeSection from './pages/Home';
 import './App.css';
 import { DarkModeProvider } from './services/context/DarkMode';
 import { useDarkMode } from './services/customhook/useDarkMode';
+import About from './pages/About';
 
 function App() {
   return (
@@ -18,13 +19,15 @@ const AppContent: React.FC = () => {
   const { isDark } = useDarkMode();
 
   const AppContainer = styled('div')({
-    color:isDark ? '#fff' : 'inherit',
+    color: isDark ? '#fff' : '#000',
+    backgroundColor: isDark ? "#1f1d27" : "inherit"
   });
 
   return (
     <AppContainer>
       <Navbar />
       <HomeSection />
+      <About />
     </AppContainer>
   );
 };

diff --git a/frontend/src/components/atoms/Chip/index.tsx b/frontend/src/components/atoms/Chip/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Chip } from '@mui/material';
+import { MUI_CHIP } from '../../../utils/constants';
+import { IChipProp } from '../../../interfaces/types';
+import { getRandomLightColor } from '../../../services/functions/functions';
+
+
+
+const MyChip = (props: IChipProp) => 
+    <Chip
+        size={props.size}
+        label={props.label}
+        variant={props.variant}
+        onClick={props.onClick}
+        color={props.color}
+        style={{ ...props.style, backgroundColor: getRandomLightColor() }}
+        data-testid={MUI_CHIP}
+    />
+
+export default MyChip;
diff --git a/frontend/src/components/molecules/IconList/index.tsx b/frontend/src/components/molecules/IconList/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBriefcase, faCode, faEnvelope, faHouse, faLaptopCode, faRightToBracket, faUserGraduate } from '@fortawesome/free-solid-svg-icons';
+import { faBriefcase, faCode, faEnvelope, faHouse, faInfo, faLaptopCode, faRightToBracket, faUserGraduate } from '@fortawesome/free-solid-svg-icons';
 import DarkModeToggle from '../../atoms/Toggle';
-import { IconContainer, LeftDiv, MiddleDiv, RightDiv, StyledAboutIcon, StyledNavIcon } from '../../../utils/styled';
+import { IconContainer, LeftDiv, MiddleDiv, RightDiv, StyledNavIcon } from '../../../utils/styled';
 import Icon from '../../atoms/Icon';
 import LogoGif from '../../../../public/gif/Logo.gif';
-import About from '../../../../public/svg/About.svg';
 import { useDarkMode } from '../../../services/customhook/useDarkMode';
 import { ICON_COMPONENT_HOME } from '../../../utils/constants';
 
@@ -19,7 +18,7 @@ const HomeIconsList = () => {
       </LeftDiv>
       <MiddleDiv>
         <FontAwesomeIcon icon={faHouse} />
-        <Icon src={About} sx={StyledAboutIcon} />
+        <FontAwesomeIcon icon={faInfo} />
         <FontAwesomeIcon icon={faUserGraduate} />
         <FontAwesomeIcon icon={faCode} />
         <FontAwesomeIcon icon={faLaptopCode} />

diff --git a/frontend/src/components/molecules/SocialMediaIcons/index.tsx b/frontend/src/components/molecules/SocialMediaIcons/index.tsx
@@ -9,7 +9,7 @@ const SocialMediaIcons = () => {
     <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 }} />
+          <FontAwesomeIcon icon={icon} style={{ color }} className='wave' />
         </a>
       ))}
     </IconDiv>

diff --git a/frontend/src/interfaces/types.ts b/frontend/src/interfaces/types.ts
@@ -1,5 +1,5 @@
 import { ButtonProps, TypographyProps } from "@mui/material";
-import { CSSProperties } from "react";
+import { CSSProperties, ReactElement } from "react";
 
 export interface IButtonProps extends ButtonProps {}
 export interface ITypgraphyProps extends TypographyProps {
@@ -21,4 +21,15 @@ export interface IDarkModeToggle {
 export interface DarkModeContextProps {
   isDark: boolean;
   toggleMode: () => void;
+}
+export interface IChipProp {
+    label?: string
+    variant?: 'filled' | 'outlined',
+    size?: 'medium' | 'small',
+    color?: 'primary'| 'secondary'| 'warning'| 'error'| 'info'| 'default'| 'success',
+    text?: string
+    src?: string
+    avatar?: ReactElement
+    onClick?:() => void
+    style?:React.CSSProperties;
 }
diff --git a/frontend/src/pages/About/index.tsx b/frontend/src/pages/About/index.tsx
@@ -0,0 +1,58 @@
+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 { ABOUT_DESC, ABOUT_SUB_DESC, ABOUT_SUB_FOOTER_DESC } from '../../utils/constants';
+import { AboutDiv, LeftAboutDiv, RightAboutDiv, SkillAboutDiv } from '../../utils/styled';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+
+
+const About = () => {
+  const el = React.useRef(null);
+
+  useEffect(() => {
+    const typed = new Typed(el.current, typeNameAttributes);
+
+    return () => {
+      typed.destroy();
+    };
+  }, []);
+
+
+  return (
+    <AboutDiv>
+        <LeftAboutDiv>
+            <img src={AboutImage} />      
+        </LeftAboutDiv>        
+        <RightAboutDiv>
+            <h1>{'<About />'}</h1>
+            <div>
+            <h2 ref={el}></h2>
+            <MyChip label='<Software Engineer />' size='small' style={{fontSize:"15px"}} />      
+            </div>
+            <div><h3>{ABOUT_DESC}</h3></div>
+            <div><h3>{ABOUT_SUB_DESC}</h3></div>
+            <SkillAboutDiv>
+                {skillsData.map((skill, index) => (
+                    <MyChip
+                        key={index}
+                        label={skill.label}
+                        size='medium'
+                        style={{ fontSize: "15px" }}
+                    />
+                ))}
+            </SkillAboutDiv>
+            <div>
+                <a href={`${socialMediaData[0].link}`} target='_blank'>
+                    <FontAwesomeIcon icon={faExternalLink} style={{cursor:"pointer"}} />      
+                </a>
+                {ABOUT_SUB_FOOTER_DESC}
+            </div>
+        </RightAboutDiv>
+    </AboutDiv>
+  )
+}
+
+export default About
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
@@ -5,10 +5,10 @@ import { HERO_SECTION_IMAGE, RESUME_LINK } from '../../utils/constants';
 import { ButtonHomeDiv, CapsuleButton, DarkRotatedBackground, GreetHomeDiv, HomeDiv, IntroDiv, LeftHomeDiv, RightHomeDiv, RotatedBackground, TypedHomeDiv } from '../../utils/styled';
 import SocialMediaIcons from '../../components/molecules/SocialMediaIcons';
 import HeroSectionImage from '../../../public/gif/Video-Call.gif'
-import './style.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faDownload, faUser } from '@fortawesome/free-solid-svg-icons';
 import { useDarkMode } from '../../services/customhook/useDarkMode';
+import './style.css'
 
 
 const HomeSection = () => {
@@ -31,7 +31,7 @@ const HomeSection = () => {
                 <h1 className='wave'>👋</h1>  
             </GreetHomeDiv>
             <IntroDiv>
-              <h2>I'm <span className='name'>&lt;Madhurendra&gt;</span></h2>
+              <h2>I'm <span className='name'>&lt;Madhurendra{'/'}&gt;</span></h2>
             </IntroDiv>  
             <TypedHomeDiv>
                 <h4 ref={el}></h4>      

diff --git a/frontend/src/services/functions/functions.ts b/frontend/src/services/functions/functions.ts
@@ -0,0 +1,7 @@
+export const getRandomLightColor = () => {
+    const letters = 'ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) 
+        color += letters[Math.floor(Math.random() * 6)];
+    return color;
+};
diff --git a/frontend/src/services/mocks/mocks.ts b/frontend/src/services/mocks/mocks.ts
@@ -13,6 +13,12 @@ export const greets = [
   'Full Stack Developer',
   'Code Architect'
 ]
+export const nameType = [
+  `console.log('👋 Madhurendra');`,
+  `print('Madhurendra 👋')`,
+  `puts 'Madhur👋endra'`,
+];
+
 export const typeAttributes = {
     strings: greets,
     typeSpeed: 80,
@@ -22,6 +28,12 @@ export const typeAttributes = {
     shuffle: true,
     smartBackspace:true
 }
+export const typeNameAttributes = {
+    strings: nameType,
+    typeSpeed: 100,
+    showCursor: false,
+    loop:true
+}
 export const socialMediaData = [
   { platform: 'github', icon: faGithubSquare, color: '#333', link: 'https://github.com/dev-madhurendra' },
   { platform: 'instagram', icon: faInstagram, color: '#e4405f', link: 'https://www.instagram.com/dev.madhurendra/' },
@@ -33,3 +45,11 @@ export const socialMediaData = [
   { platform: 'codepen', icon: faCodepen, color: '#000000', link: 'https://codepen.io/devMadhurendra' },
   { platform: 'snapchat', icon: faSnapchat, color: '#fffc00', link: 'https://www.snapchat.com/add/dev-madhurendra' },
 ];
+export const skillsData = [
+    { label: '🌐 Frontend Development'},
+    { label: '🛠️ Backend Development'},
+    { label: '📡 API Development'},
+    { label: '📊 Databases'},
+    { label: '📚 Cyber Security'},
+    { label: '📚 Continuous Learning'},
+];
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -4,4 +4,9 @@ export const DARK_MODE_TOGGLE_COMPONENT = "dark-mode-toggle"
 export const HERO_SECTION_IMAGE = 'Hero-Section-Image'
 export const RESUME_LINK = 'https://drive.google.com/file/d/1G7OMYFQx80a4HBkAHwR8GohB-tVkTJ-q/view?usp=sharing'
 export const ICON_COMPONENT_HOME = "icon-component-home"
-export const SOCIAL_MEDIA_COMPONENT = "social-medial-icons"
+export const SOCIAL_MEDIA_COMPONENT = "social-medial-icons"
+export const MUI_CHIP = "mui-chip"
+export const FULL_STACK_DEV = "<b>Full-Stack Developer</b>"
+export const ABOUT_DESC =  `🚀 I am a ${FULL_STACK_DEV} with hands-on experience in building robust and scalable web applications.I am always open to collaboration and creating amazing digital experiences; Let's connect and explore the possibilities together;`
+export const ABOUT_SUB_DESC = "Passionate software engineer working at a dynamic startup, with expertise in a variety of cutting-edge technologies and tools; My skills include;"
+export const ABOUT_SUB_FOOTER_DESC = " Let's connect, collaborate, and work together! 🌟;"
diff --git a/frontend/src/utils/styled.ts b/frontend/src/utils/styled.ts
@@ -34,6 +34,7 @@ export const IconContainer = styled('div')({
   '@media (max-width:468px)': {
     display: "none",
   },
+  zIndex:1,
 },slideInAnimation)
 
 export const LeftDiv = styled('div')({
@@ -112,7 +113,6 @@ export const RotatedBackground = styled('div')({
   backgroundRepeat: 'no-repeat',
   backgroundSize: '100% 100%',
   transform: 'rotate(0deg)',
-  zIndex:-1
 });
 export const DarkRotatedBackground = styled('div')({
   position: 'absolute',
@@ -124,7 +124,6 @@ export const DarkRotatedBackground = styled('div')({
   backgroundRepeat: 'no-repeat',
   backgroundSize: '100% 100%',
   transform: 'rotate(0deg)',
-  zIndex:-1
 });
 export const LeftHomeDiv = styled('div')({
     display: "flex",
@@ -137,7 +136,8 @@ export const LeftHomeDiv = styled('div')({
     fontSize: "1.875rem",
     '@media (max-width:468px)': {
       width: "100vw",
-    }
+  },
+  zIndex:1
 })
 const floatAnimation = keyframes`
   0%, 100% {
@@ -274,4 +274,39 @@ export const IconDiv = styled('div')({
       fontSize: "1.125rem",
     },
 
+})
+
+export const AboutDiv = styled('div')({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "90vw",
+    height: "100vh",
+    marginLeft: "8vw",
+    textAlign:"justify"
+})
+
+export const LeftAboutDiv = styled('div')({
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    '& img': {
+        width: "600px",
+        height: "600px",
+        borderRadius: "50%",
+    },
+    width: "50%",
+})
+export const RightAboutDiv = styled('div')({
+    display: "flex",
+    justifyContent: "center",
+    flexDirection:"column",
+    width:"40%",
+    gap: "1.25rem",
+})
+export const SkillAboutDiv = styled('div')({
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    rowGap: "0.625rem",
+    columnGap:"0.625rem"
 })