feat(): Adding the contact feature

ar1603 · ar1603 · commit 69a4399e0ad5 · 2025-01-30T09:26:23.000+05:30
diff --git a/src/assets/icons/Common/GetInTouch.tsx b/src/assets/icons/Common/GetInTouch.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+
+const GetInTouch = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="550"
+    height="550"
+    fill="currentColor"
+    viewBox="0 0 550 550"
+    {...props}
+  >
+    <path
+      fill="#FFF"
+      d="M341.392 8.956q5.145.723 10.294 1.429l6.646.924 3.056.423c4.572.645 9.117 1.344 13.653 2.204 8.279 1.538 16.629 2.62 24.967 3.779l5.557.777q5.817.813 11.635 1.621 7.34 1.021 14.68 2.05a16375 16375 0 0 0 17.055 2.38c11.768 1.635 23.535 3.223 35.356 4.436 16.873 1.844 31.808 6.532 43.147 19.689C532.467 55.565 532.787 63.802 532 72c-2.638 12.813-12.021 24.558-19.687 34.852-3.092 4.209-6.075 8.49-9.063 12.773l-3.668 5.25-1.826 2.613a2578 2578 0 0 1-25.115 35.246q-4.074 5.63-8.141 11.266l-3.25 4.5-1.625 2.25-4.875 6.75-1.627 2.253q-1.614 2.235-3.23 4.466c-2.83 3.91-5.64 7.831-8.424 11.773l-1.76 2.477a753 753 0 0 0-3.309 4.695c-3.222 4.522-6.325 8.298-11.4 10.836-4.853.582-9.826 1.111-14.277-1.164-3.33-2.745-5.918-5.507-6.723-9.836.47-7.92 2.564-15.123 4.875-22.688l.596-1.962C419.848 154.252 434.017 121.832 450 90c-6.826.549-12.715 2.394-19.125 4.75l-3.283 1.199c-31.665 11.776-62.772 26.363-91.898 43.471a990 990 0 0 1-8.155 4.717c-45.14 26.067-86.155 58.496-123.039 95.238l-2.536 2.521A269 269 0 0 0 188 257q-1.387 1.572-2.781 3.14C150.397 299.772 125.515 346.005 112 397l-.632 2.353c-2.874 10.85-4.551 21.785-6.005 32.906a843 843 0 0 1-1.144 8.264c-1.266 8.94-2.389 17.861-3.219 26.852-1.902 19.697-5.974 38.402-18 54.625l-1.387 1.937C74.337 533.277 63.7 538.544 53 543l-2.605 1.14c-3.818 1.37-7.397 1.466-11.395.86a250 250 0 0 1-6-4c-2.213-.386-2.213-.386-4.562-.5-4.249-.294-6.405-1.373-9.438-4.5-4.707-9.413-.747-27.032.645-37.318.404-3.053.767-6.11 1.132-9.166C30.376 411.968 62.262 336.446 109 274q1.265-1.71 2.527-3.422a478 478 0 0 1 33.77-40.629c2.033-2.193 3.992-4.44 5.941-6.707 4.193-4.81 8.679-9.305 13.2-13.805l2.447-2.458c4.319-4.313 8.712-8.47 13.34-12.448 2.413-2.08 4.747-4.244 7.088-6.406 5.404-4.917 10.964-9.586 16.687-14.125l1.965-1.563C216.72 163.909 227.681 155.763 239 148l2.09-1.443C289.608 113.161 344.935 85.412 402 70a722 722 0 0 0-19.625-6.313l-2.617-.818c-6.735-2.065-13.525-3.87-20.344-5.63a1600 1600 0 0 1-35.981-9.77 1129 1129 0 0 0-6.952-1.937 1239 1239 0 0 1-10.231-2.876l-3.119-.843c-7.087-2.057-12.53-4.802-16.631-11.126-.986-5.302-.31-9.927 1.938-14.812 14.41-16.167 33.79-9.616 52.954-6.919"
+    ></path>
+  </svg>
+);
+
+export default GetInTouch;
diff --git a/src/assets/icons/Common/index.ts b/src/assets/icons/Common/index.ts
@@ -5,6 +5,7 @@ export { default as ArrowIcon } from './ArrowIcon';
 export { default as RobotIcon } from './Robot';
 export { default as LinkedInIcon } from './LinkedInIcon';
 export { default as GithubIcon } from './GithubIcon';
+export { default as GetInTouch } from './GetInTouch';
 export { default as MediumIcon } from './MediumIcon';
 export { default as InstagramIcon } from './InstagramIcon';
 export { default as StarIcon } from './Star';
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -102,6 +102,7 @@ const Chip = ({ type, size = 'md' }: ChipProps) => {
       borderRadius="lg"
       border={`1px solid`}
       color="white"
+      zIndex={10}
     >
       <Text fontSize="sm">{ChipMap[type].title}</Text>
       {ChipMap[type].Icon({})}
diff --git a/src/components/DotPattern/DotPattern.tsx b/src/components/DotPattern/DotPattern.tsx
@@ -29,8 +29,7 @@ export function DotPattern({
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
       className={
-        'pointer-events-none relative inset-0 w-full fill-neutral-400/80 ' +
-        className
+        'pointer-events-none inset-0 w-full fill-neutral-400/80 ' + className
       }
       {...props}
     >
diff --git a/src/components/animateModal/AnimatedModal.tsx b/src/components/animateModal/AnimatedModal.tsx
@@ -100,7 +100,7 @@ export const ModalBody = ({
           <motion.div
             ref={modalRef}
             className={
-              'min-h-[50%] max-h-[90%] md:max-w-[47%] bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-10 flex flex-col flex-1 overflow-hidden'
+              'min-h-[50%] max-h-[90%] base:max-w-[60%] md:max-w-[47%] lg:max-w-[35%] bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-10 flex flex-col flex-1 overflow-hidden'
             }
             initial={{
               opacity: 0,
diff --git a/src/components/animateModal/Modal.tsx b/src/components/animateModal/Modal.tsx
@@ -6,7 +6,7 @@ import {
   ModalFooter,
   ModalTrigger,
 } from './AnimatedModal';
-import { Box, Button, Heading, Text } from '@chakra-ui/react';
+import { Box, Button, Heading } from '@chakra-ui/react';
 
 const AnimatedModal = ({
   triggerText,
@@ -23,17 +23,17 @@ const AnimatedModal = ({
     <Box height={10} className="flex items-center justify-center">
       <Modal>
         <ModalTrigger className="bg-white flex justify-center group/modal-btn">
-          <Text
-            height={10}
-            border={'1px solid gray'}
+          <Button
+            variant="outline"
+            colorScheme="white"
             boxShadow={'0 0 10px 2px #ffffff5a'}
             style={{
               padding: '0.5rem 1rem',
               borderRadius: '0.5rem',
             }}
           >
             {triggerText}
-          </Text>
+          </Button>
         </ModalTrigger>
         <ModalBody>
           <ModalContent>
diff --git a/src/data/contact.ts b/src/data/contact.ts
@@ -0,0 +1,7 @@
+export const CONTACT = {
+  email: 'raikwar.amit.1603@gmail.com',
+  github: 'https://github.com/onemanfighter',
+  linkedIn: 'https://www.linkedin.com/in/amitrai1603/',
+  medium: 'https://amitraikwar.medium.com/',
+  instagram: 'https://www.instagram.com/',
+};
diff --git a/src/data/index.ts b/src/data/index.ts
@@ -1,3 +1,4 @@
 export { PROJECT_DATA } from './Projects';
 export { WORK_DATA } from './Work';
+export { CONTACT } from './contact';
 export * from './types';
diff --git a/src/localization/locales/en/main.json b/src/localization/locales/en/main.json
@@ -28,7 +28,9 @@
     "title": "Skills"
   },
   "contact": {
-    "title": "Contact"
+    "title": "Contact",
+    "description": "Get in touch, I'd love to hear from you! Whether you have a question, feedback, or just want to connect, feel free to reach out. You can contact me through the email below or use out LinkedIn, Instagram to message directly.",
+    "getInTouch": "Get in Touch"
   },
   "articles": {
     "title": "Articles"
diff --git a/src/screens/mainFlow/components/SocialNavigation.tsx b/src/screens/mainFlow/components/SocialNavigation.tsx
@@ -18,6 +18,7 @@ import {
 import { useCursor } from '@components';
 import { RefObject, useRef } from 'react';
 import { CharacterType } from '../scene';
+import { CONTACT } from '@data';
 
 const IconProps = {
   variant: 'ghost',
@@ -27,6 +28,9 @@ const IconProps = {
   _hover: {
     transform: 'scale(2.2)',
   },
+  _active: {
+    bg: 'transparent',
+  },
 };
 
 const SocialNavigation = ({
@@ -54,6 +58,7 @@ const SocialNavigation = ({
   const onMouseLeave = () => {
     setCursorInsets(undefined);
   };
+
   return (
     <VStack position={'fixed'} bottom={20} right={14} rowGap={10} zIndex={1}>
       <Box
@@ -109,10 +114,38 @@ const SocialNavigation = ({
         backdropFilter={'blur(20px)'}
         transition={'background-color 0.3s'}
       >
-        <IconButton aria-label="" icon={<GithubIcon />} {...IconProps} />
-        <IconButton icon={<LinkedInIcon />} aria-label="" {...IconProps} />
-        <IconButton icon={<MediumIcon />} aria-label="" {...IconProps} />
-        <IconButton icon={<InstagramIcon />} aria-label="" {...IconProps} />
+        <IconButton
+          icon={<GithubIcon />}
+          aria-label="github icon"
+          as={'a'}
+          href={CONTACT.github}
+          target={'_blank'}
+          {...IconProps}
+        />
+        <IconButton
+          icon={<LinkedInIcon />}
+          aria-label="linkedin icon"
+          as={'a'}
+          href={CONTACT.linkedIn}
+          target={'_blank'}
+          {...IconProps}
+        />
+        <IconButton
+          icon={<MediumIcon />}
+          aria-label="medium icon"
+          as={'a'}
+          href={CONTACT.medium}
+          target={'_blank'}
+          {...IconProps}
+        />
+        <IconButton
+          icon={<InstagramIcon />}
+          aria-label="instagram icon"
+          as={'a'}
+          href={CONTACT.instagram}
+          target={'_blank'}
+          {...IconProps}
+        />
       </VStack>
     </VStack>
   );
diff --git a/src/screens/mainFlow/contents/Contact.tsx b/src/screens/mainFlow/contents/Contact.tsx
@@ -1,9 +1,17 @@
-import { Box, Heading, HStack } from '@chakra-ui/react';
+import { Box, Button, Heading, Text, VStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { DotPattern } from '@components';
+import { EmailIcon, GetInTouch } from '@assets';
+import { CONTACT } from '@data';
+import { useRef } from 'react';
+import { useIsIntersecting } from '@hooks';
+import { AnimatePresence, motion } from 'framer-motion';
 
 const Contact = () => {
   const { t } = useTranslation();
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const isContactContainerIntersecting = useIsIntersecting(ref);
   return (
     <Box minH={'100vh'} width={'99vw'} id="contact">
       <Heading
@@ -14,13 +22,58 @@ const Contact = () => {
       >
         {t('contact.title')}
       </Heading>
-      <HStack top={'10vh'} position={'sticky'} zIndex={10}>
+      <VStack top={'10vh'} position={'sticky'}>
         <DotPattern
           className={
-            '[mask-image:radial-gradient(350px_circle_at_center,white,transparent)] h-[90vh]'
+            '[mask-image:radial-gradient(350px_circle_at_center,white,transparent)] h-[90vh] absolute z-0'
           }
         />
-      </HStack>
+      </VStack>
+      <VStack w={'100%'} marginTop={'30vh'} align={'start'} spacing={8} px={32}>
+        <Text fontSize={'3xl'} width={'50%'}>
+          {t('contact.description')}
+        </Text>
+        <Button
+          leftIcon={<EmailIcon />}
+          as="a"
+          href={`mailto:${CONTACT.email}`}
+          variant={'outline'}
+          colorScheme={'violet'}
+          size={'lg'}
+          px={2}
+          ref={ref}
+        >
+          {CONTACT.email}
+        </Button>
+        <AnimatePresence initial={false}>
+          {isContactContainerIntersecting && (
+            <motion.div
+              initial="collapsed"
+              animate="open"
+              exit="collapsed"
+              variants={{
+                open: { opacity: 1, height: 'auto' },
+                collapsed: { opacity: 0, height: 0 },
+              }}
+              transition={{
+                duration: 0.5,
+                ease: [0.04, 0.62, 0.23, 0.98],
+              }}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'fixed',
+                bottom: 180,
+                right: 150,
+                alignItems: 'end',
+              }}
+            >
+              <GetInTouch width={56} height={56} />
+              <Text>{t('contact.getInTouch')}</Text>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </VStack>
     </Box>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -102,6 +102,7 @@ const Chip = ({ type, size = 'md' }: ChipProps) => {`
`102`	`102`	`borderRadius="lg"`
`103`	`103`	border={`1px solid`}
`104`	`104`	`color="white"`
	`105`	`+ zIndex={10}`
`105`	`106`	`>`
`106`	`107`	`<Text fontSize="sm">{ChipMap[type].title}</Text>`
`107`	`108`	`{ChipMap[type].Icon({})}`
Original file line number	Diff line number	Diff line change
`@@ -29,8 +29,7 @@ export function DotPattern({`
`29`	`29`	`xmlns="http://www.w3.org/2000/svg"`
`30`	`30`	`aria-hidden="true"`
`31`	`31`	`className={`
`32`		`- 'pointer-events-none relative inset-0 w-full fill-neutral-400/80 ' +`
`33`		`- className`
	`32`	`+ 'pointer-events-none inset-0 w-full fill-neutral-400/80 ' + className`
`34`	`33`	`}`
`35`	`34`	`{...props}`
`36`	`35`	`>`
Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ export const ModalBody = ({`
`100`	`100`	`<motion.div`
`101`	`101`	`ref={modalRef}`
`102`	`102`	`className={`
`103`		`- 'min-h-[50%] max-h-[90%] md:max-w-[47%] bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-10 flex flex-col flex-1 overflow-hidden'`
	`103`	`+ 'min-h-[50%] max-h-[90%] base:max-w-[60%] md:max-w-[47%] lg:max-w-[35%] bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-10 flex flex-col flex-1 overflow-hidden'`
`104`	`104`	`}`
`105`	`105`	`initial={{`
`106`	`106`	`opacity: 0,`