diff --git a/frontend/index.html b/frontend/index.html index ad288851..eb18fd5d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,8 @@ - Madhurendra's Tech Odyssey + + 👋 | Madhurendra's Tech Odyssey
diff --git a/frontend/public/jpeg/About-Image.jpg b/frontend/public/jpeg/About-Image.jpg new file mode 100644 index 00000000..b9b54839 Binary files /dev/null and b/frontend/public/jpeg/About-Image.jpg differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 735bb5cf..bde685cd 100644 --- 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 ( + ); }; diff --git a/frontend/src/components/atoms/Chip/index.test.tsx b/frontend/src/components/atoms/Chip/index.test.tsx new file mode 100644 index 00000000..c3da4357 --- /dev/null +++ b/frontend/src/components/atoms/Chip/index.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import MyChip from '.'; +import "@testing-library/jest-dom" +import { IChipProp } from '../../../interfaces/types'; + +const mockProps: IChipProp = { + size: 'small', + label: 'Test Label', + variant: 'outlined', + onClick: jest.fn(), + color: 'primary', + style: {}, +}; + + +describe('MyChip Component', () => { + it('renders MyChip component with given props', () => { + render(); + + const chipElement = screen.getByTestId('mui-chip'); + expect(chipElement).toBeInTheDocument(); + expect(chipElement).toHaveTextContent('Test Label'); + expect(chipElement).toHaveClass('MuiChip-outlined'); + expect(chipElement).toHaveClass('MuiChip-sizeSmall'); + }); + + it('calls onClick when chip is clicked', () => { + const mockFunction = jest.fn() + render(); + const chipElement = screen.getByTestId('mui-chip'); + chipElement.click() + expect(mockFunction).toHaveBeenCalledTimes(1); + }); +}); diff --git a/frontend/src/components/atoms/Chip/index.tsx b/frontend/src/components/atoms/Chip/index.tsx new file mode 100644 index 00000000..0f0ab577 --- /dev/null +++ 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) => + + +export default MyChip; diff --git a/frontend/src/components/molecules/AnimatedName/index.test.tsx b/frontend/src/components/molecules/AnimatedName/index.test.tsx new file mode 100644 index 00000000..5e9836f0 --- /dev/null +++ b/frontend/src/components/molecules/AnimatedName/index.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import AnimatedName from '.'; +import "@testing-library/jest-dom" +import { NAME_ANIMATION } from '../../../utils/constants'; + +test('renders the AnimatedName component', () => { + const { getByText, getAllByTestId } = render(); + + const imText = getByText("I'm"); + expect(imText).toBeInTheDocument(); + + const nameLetters = getAllByTestId(NAME_ANIMATION); + expect(nameLetters.length).toBeGreaterThan(0); + +}); diff --git a/frontend/src/components/molecules/AnimatedName/index.tsx b/frontend/src/components/molecules/AnimatedName/index.tsx new file mode 100644 index 00000000..95383790 --- /dev/null +++ b/frontend/src/components/molecules/AnimatedName/index.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { myname } from '../../../services/mocks/mocks' +import { FlexDiv } from '../../../utils/styled' +import { NAME_ANIMATION } from '../../../utils/constants' +import './style.css' + + +const AnimatedName = () => { + return ( + +
I'm
+
+ < + {myname.split('').map((ch, index) => + + {ch} + + )} + {'/'} + > +
+ + ) +} + +export default AnimatedName \ No newline at end of file diff --git a/frontend/src/components/molecules/AnimatedName/style.css b/frontend/src/components/molecules/AnimatedName/style.css new file mode 100644 index 00000000..41dba991 --- /dev/null +++ b/frontend/src/components/molecules/AnimatedName/style.css @@ -0,0 +1,152 @@ +@keyframes gelatine { + from, to { transform: scale(1, 1); } + 25% { transform: scale(0.9, 1.1); } + 50% { transform: scale(1.1, 0.9); } + 75% { transform: scale(0.95, 1.05); } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} + 40% {transform: translateY(-20px);} + 60% {transform: translateY(-15px);} +} +@keyframes flip { + 0% { + transform: perspective(400px) rotateY(0); + animation-timing-function: ease-out; + } + 40% { + transform: perspective(400px) translateZ(150px) rotateY(170deg); + animation-timing-function: ease-out; + } + 50% { + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + animation-timing-function: ease-in; + } + 80% { + transform: perspective(400px) rotateY(360deg) scale(.95); + animation-timing-function: ease-in; + } + 100% { + transform: perspective(400px) scale(1); + animation-timing-function: ease-in; + } +} + +@keyframes swing { + 20% { transform: rotate(15deg); } + 40% { transform: rotate(-10deg); } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } +} + +@keyframes wobble { + 0% { transform: translateX(0%); } + 15% { transform: translateX(-25%) rotate(-5deg); } + 30% { transform: translateX(20%) rotate(3deg); } + 45% { transform: translateX(-15%) rotate(-3deg); } + 60% { transform: translateX(10%) rotate(2deg); } + 75% { transform: translateX(-5%) rotate(-1deg); } + 100% { transform: translateX(0%); } +} + +@keyframes bounce-in-right { + 0% { + opacity: 0; + transform: translateX(2000px); + } + 60% { + opacity: 1; + transform: translateX(-30px); + } + 80% { transform: translateX(10px); } + 100% { transform: translateX(0); } +} + +@keyframes hinge { + 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } + 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } + 100% { transform: translateY(700px); opacity: 0; } +} + +@keyframes rotate-in-up-left { + 0% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotate-in-down-left { + 0% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +@keyframes hithere { + 30% { transform: scale(1.2); } + 40%, 60% { transform: rotate(-20deg) scale(1.2); } + 50% { transform: rotate(20deg) scale(1.2); } + 70% { transform: rotate(0deg) scale(1.2); } + 100% { transform: scale(1); } +} + +.name { + color: #f4b039; +} + +.name-0 { + display: inline-block; + animation: hinge 1.5s infinite 0.1s; +} +.name-1 { + display: inline-block; + animation: bounce 1.5s infinite 0.1s; +} +.name-2, .name-10 { + display: inline-block; + animation: flip 1.5s infinite 0.1s; +} + +.name-3 { + display: inline-block; + animation: swing 1.5s infinite 0.1s; +} + +.name-4, .name-8 { + display: inline-block; + animation: wobble 1.5s infinite 0.1s; +} +.name-5 { + display: inline-block; + animation: gelatine 1.5s infinite 0.1s; +} +.name-9 { + display: inline-block; + animation: rotate-in-up-left 1.5s infinite 0.1s; +} + +.name-7 { + display: inline-block; + animation: rotate-in-down-left 1.5s infinite 0.1s; +} + +.name-6 { + display: inline-block; + animation: hithere 1.5s infinite 0.1s; +} \ No newline at end of file diff --git a/frontend/src/components/molecules/IconList/index.tsx b/frontend/src/components/molecules/IconList/index.tsx index 3122c55c..bb9bd8f5 100644 --- 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 = () => { - + diff --git a/frontend/src/components/molecules/SocialMediaIcons/index.tsx b/frontend/src/components/molecules/SocialMediaIcons/index.tsx index 728e01e8..0567d66d 100644 --- a/frontend/src/components/molecules/SocialMediaIcons/index.tsx +++ b/frontend/src/components/molecules/SocialMediaIcons/index.tsx @@ -9,7 +9,7 @@ const SocialMediaIcons = () => { {socialMediaData.map(({ platform, icon, color, link }) => ( - + ))} diff --git a/frontend/src/interfaces/types.ts b/frontend/src/interfaces/types.ts index 1908dfe4..efce280d 100644 --- 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; } \ No newline at end of file diff --git a/frontend/src/pages/About/index.test.tsx b/frontend/src/pages/About/index.test.tsx new file mode 100644 index 00000000..f6441b22 --- /dev/null +++ b/frontend/src/pages/About/index.test.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import About from '.'; +import { render, screen, cleanup } from '@testing-library/react'; +import "@testing-library/jest-dom" +import { ABOUT_COMPONENT, ABOUT_DESC, ABOUT_SUB_DESC, ABOUT_SUB_FOOTER_DESC, ICON_ABOUT_ALT } from '../../utils/constants'; + +describe('About Component', () => { + beforeEach(() => { + render(); + }); + + afterEach(cleanup); + + it('renders the About component', () => { + const aboutElement = screen.getByTestId(ABOUT_COMPONENT); + expect(aboutElement).toBeInTheDocument(); + }); + + it('renders the image', () => { + const imageElement = screen.getByAltText(ICON_ABOUT_ALT); + expect(imageElement).toBeInTheDocument(); + }); + + it('renders the chip with label Software Engineer', () => { + const chipElement = screen.getByText(''); + expect(chipElement).toBeInTheDocument(); + }); + + it('renders the description', () => { + const descriptionElement = screen.getByText(ABOUT_DESC); + expect(descriptionElement).toBeInTheDocument(); + }); + + it('renders the sub-description', () => { + const subDescriptionElement = screen.getByText(ABOUT_SUB_DESC); + expect(subDescriptionElement).toBeInTheDocument(); + }); + + it('renders the skills', () => { + const skillElement = screen.getByText('🌐 Frontend Development'); + expect(skillElement).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/pages/About/index.tsx b/frontend/src/pages/About/index.tsx new file mode 100644 index 00000000..3c412f97 --- /dev/null +++ b/frontend/src/pages/About/index.tsx @@ -0,0 +1,57 @@ +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_COMPONENT, ABOUT_DESC, ABOUT_SUB_DESC, ABOUT_SUB_FOOTER_DESC, ICON_ABOUT_ALT } 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 ( + + + {ICON_ABOUT_ALT} + + +

{''}

+
+

+ +
+

{ABOUT_DESC}

+

{ABOUT_SUB_DESC}

+ + {skillsData.map((skill, index) => ( + + ))} + +
+ + + + {ABOUT_SUB_FOOTER_DESC} +
+ + + ) +} + +export default About \ No newline at end of file diff --git a/frontend/src/pages/Home/index.test.tsx b/frontend/src/pages/Home/index.test.tsx index fed79a05..a9402485 100644 --- a/frontend/src/pages/Home/index.test.tsx +++ b/frontend/src/pages/Home/index.test.tsx @@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react'; import "@testing-library/jest-dom" import HomeSection from '.'; import { DarkModeProvider } from '../../services/context/DarkMode'; +import { NAME_ANIMATION } from '../../utils/constants'; describe('HomeSection', () => { it('renders without crashing', () => { @@ -19,8 +20,8 @@ describe('HomeSection', () => { it('renders the name', () => { render() - const nameElement = screen.getByText(''); - expect(nameElement).toBeInTheDocument(); + const nameElement = screen.getAllByTestId(NAME_ANIMATION); + expect(nameElement.length).toBeGreaterThan(0); }); it('renders the "Resume" button', () => { diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx index 90e9b2f1..2985fa19 100644 --- a/frontend/src/pages/Home/index.tsx +++ b/frontend/src/pages/Home/index.tsx @@ -5,10 +5,11 @@ 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' +import AnimatedName from '../../components/molecules/AnimatedName'; const HomeSection = () => { @@ -31,7 +32,7 @@ const HomeSection = () => {

👋

-

I'm <Madhurendra>

+

diff --git a/frontend/src/pages/Home/style.css b/frontend/src/pages/Home/style.css index 2fcc163f..6b3f237b 100644 --- a/frontend/src/pages/Home/style.css +++ b/frontend/src/pages/Home/style.css @@ -16,6 +16,4 @@ 60% { transform: rotate( 0.0deg) } /* Reset for the last half to pause */ 100% { transform: rotate( 0.0deg) } } -.name { - color: #f4b039; -} \ No newline at end of file + diff --git a/frontend/src/services/functions/functions.ts b/frontend/src/services/functions/functions.ts index e69de29b..184cc7fc 100644 --- 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; +}; \ No newline at end of file diff --git a/frontend/src/services/mocks/mocks.ts b/frontend/src/services/mocks/mocks.ts index 57561c51..9bf6acaf 100644 --- 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,12 @@ 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'}, +]; +export const myname = "MADHURENDRA" \ No newline at end of file diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts index 32e886e5..b61932fb 100644 --- a/frontend/src/utils/constants.ts +++ b/frontend/src/utils/constants.ts @@ -4,4 +4,12 @@ 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" \ No newline at end of file +export const SOCIAL_MEDIA_COMPONENT = "social-medial-icons" +export const MUI_CHIP = "mui-chip" +export const FULL_STACK_DEV = "Full-Stack Developer" +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! 🌟;" +export const ABOUT_COMPONENT = "about-component" +export const ICON_ABOUT_ALT = "about-image" +export const NAME_ANIMATION = "name-animation-test-id" \ No newline at end of file diff --git a/frontend/src/utils/styled.ts b/frontend/src/utils/styled.ts index e265ec6c..3b8e6e63 100644 --- a/frontend/src/utils/styled.ts +++ b/frontend/src/utils/styled.ts @@ -20,6 +20,7 @@ const slideInAnimation = () => ({ animation: 'slideIn 1s ease-in', }); + export const IconContainer = styled('div')({ height: "100vh", position: "fixed", @@ -34,6 +35,7 @@ export const IconContainer = styled('div')({ '@media (max-width:468px)': { display: "none", }, + zIndex:1, },slideInAnimation) export const LeftDiv = styled('div')({ @@ -112,7 +114,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 +125,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 +137,8 @@ export const LeftHomeDiv = styled('div')({ fontSize: "1.875rem", '@media (max-width:468px)': { width: "100vw", - } + }, + zIndex:1 }) const floatAnimation = keyframes` 0%, 100% { @@ -192,13 +193,15 @@ export const GreetHomeDiv = styled('div')({ } }) + export const CapsuleButton = styled(MuiButton)({ borderRadius: '50px', textTransform: 'none', width: "11.375rem", height: "3.125rem", - fontSize: "1.375rem" + fontSize: "1.375rem", }) + export const ButtonHomeDiv = styled('div')({ display: "flex", justifyContent: "flex-start", @@ -227,26 +230,16 @@ export const TypedHomeDiv = styled('div')({ }) export const IntroDiv = styled('div')({ width: "60%", + display: "flex", '@media (max-width: 900px)': { - '& h2': { - fontSize: "40px", - }, display: "flex", justifyContent: "flex-start", alignItems:"center", width:"60vw" }, '@media (max-width:468px)': { - '& h2': { - width: "100%", - justifyContent: "flex-start", - fontSize: "35px", - }, width: "80vw", }, - '@media (max-width:1280px)': { - fontSize:"1.3125rem" - } }) export const socialMediaColors = { github: '#333', @@ -274,4 +267,95 @@ 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", + '@media (max-width: 768px)': { + flexDirection: "column-reverse", + height: "100%", + gap:"1.25rem", + marginTop:"6.25rem" + }, + '@media (max-width: 480px)': { + flexDirection: "column-reverse", + height: "100%", + gap:"1.25rem", + marginTop:"6.25rem" + }, +}) + +export const LeftAboutDiv = styled('div')({ + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + '& img': { + width: "90%", + height: "90%", + borderRadius: "10%", + }, + width: "50%", + '@media (max-width: 768px)': { + width:"100%" + }, + '@media (max-width: 480px)': { + width:"100%" + }, +}) +export const RightAboutDiv = styled('div')({ + display: "flex", + justifyContent: "center", + flexDirection:"column", + width:"50%", + gap: "1.25rem", + '@media (max-width: 768px)': { + width: "90%", + alignItems:"center" + }, + '@media (max-width: 480px)': { + width: "90%", + alignItems:"center" + }, +}) +export const SkillAboutDiv = styled('div')({ + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + rowGap: '0.625rem', + columnGap: '0.625rem', + '@media (max-width: 768px)': { + gridTemplateColumns: 'repeat(2, 1fr)', + }, + '@media (max-width: 480px)': { + gridTemplateColumns: 'repeat(1, 1fr)', + }, +}); + +export const FlexDiv = styled('div')({ + display: "flex", + gap: "10px", + fontWeight: "bold", + '& div': { + fontSize:"3.1125rem", + }, + '@media (max-width: 900px)': { + '& div': { + fontSize:"1.8125rem !important", + }, + }, + '@media (max-width: 468px)': { + '& div': { + fontSize:"1.85rem !important", + }, + }, + '@media (max-width: 1280px)': { + '& div': { + fontSize:"2.5rem", + }, + }, }) \ No newline at end of file