From efd91adbfa390fc16beee7a1207b7af5378d9843 Mon Sep 17 00:00:00 2001
From: Amit Raikwar <raikwar.amit.git@gmail.com>
Date: Wed, 5 Aug 2026 04:26:29 +0530
Subject: [PATCH] feat(resume): add resume modal section with audio walkthrough
 and pdf preview (AR-23)

---
 jest.js                                       |   8 +
 .../Button/LinkButton/LinkButton.tsx          |   5 +-
 src/components/Button/LinkButton/types.ts     |   3 +-
 src/components/Cursor/FollowCursor.tsx        |  31 ++-
 .../ResumeAudioPlayer/ResumeAudioPlayer.tsx   |  43 ++++
 .../__tests__/ResumeAudioPlayer.test.tsx      |  34 ++++
 src/components/ResumeAudioPlayer/index.ts     |   2 +
 src/components/animateModal/AnimatedModal.tsx |  10 +-
 src/components/animateModal/Modal.tsx         |  18 +-
 src/components/index.ts                       |   2 +
 src/data/index.ts                             |   2 +
 src/data/resume.ts                            |  22 +++
 src/index.css                                 |   6 +
 src/localization/locales/en/main.json         |  10 +
 src/screens/common/NavigationBar.tsx          |  26 ++-
 src/screens/common/SocialNavigation.tsx       |   4 +-
 src/screens/mainFlow/contents/Contents.tsx    |   2 +
 src/screens/mainFlow/contents/Resume.tsx      | 184 ++++++++++++++++++
 .../contents/__tests__/Resume.test.tsx        |  56 ++++++
 src/screens/mainFlow/contents/index.ts        |   2 +
 src/setupTests.ts                             |   2 +
 21 files changed, 449 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ResumeAudioPlayer/ResumeAudioPlayer.tsx
 create mode 100644 src/components/ResumeAudioPlayer/__tests__/ResumeAudioPlayer.test.tsx
 create mode 100644 src/components/ResumeAudioPlayer/index.ts
 create mode 100644 src/data/resume.ts
 create mode 100644 src/screens/mainFlow/contents/Resume.tsx
 create mode 100644 src/screens/mainFlow/contents/__tests__/Resume.test.tsx

diff --git a/jest.js b/jest.js
index b60c3b6..4a3647c 100644
--- a/jest.js
+++ b/jest.js
@@ -46,3 +46,11 @@ jest.mock('ogl', () => ({
   Triangle: jest.fn(),
   Mesh: jest.fn(),
 }));
+
+global.ResizeObserver = class ResizeObserver {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+};
+
+
diff --git a/src/components/Button/LinkButton/LinkButton.tsx b/src/components/Button/LinkButton/LinkButton.tsx
index 106a39c..1363ee7 100644
--- a/src/components/Button/LinkButton/LinkButton.tsx
+++ b/src/components/Button/LinkButton/LinkButton.tsx
@@ -6,12 +6,11 @@ import { useRef } from 'react';
 
 const LinkButton = ({
   text,
-  href,
-  animationOnHover,
   withUnderline,
   withArrow,
   fontSize,
   onClick,
+  href = undefined,
 }: LinkButtonProps) => {
   const ref = useRef<HTMLButtonElement>(null);
   const { setCursorInsets } = useCursor();
@@ -52,7 +51,7 @@ const LinkButton = ({
       rightIcon={withArrow ? <ArrowIcon /> : undefined}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      onClick={() => onClick?.(href)}
+      onClick={() => href && onClick?.(href)}
       justifyItems={'end'}
       rowGap={2}
       {...(!onClick ? { as: 'a', href } : {})}
diff --git a/src/components/Button/LinkButton/types.ts b/src/components/Button/LinkButton/types.ts
index dfd9e96..45c3182 100644
--- a/src/components/Button/LinkButton/types.ts
+++ b/src/components/Button/LinkButton/types.ts
@@ -1,11 +1,10 @@
 import { BoxProps } from '@chakra-ui/react';
 
 export type LinkButtonProps = {
-  href: string;
   text: string;
   withUnderline?: boolean;
   withArrow?: boolean;
-  animationOnHover?: boolean;
+  href?: string;
   fontSize?: BoxProps['fontSize'];
   onClick?: (target: string) => void;
 };
diff --git a/src/components/Cursor/FollowCursor.tsx b/src/components/Cursor/FollowCursor.tsx
index 4fe988b..0d7d1e1 100644
--- a/src/components/Cursor/FollowCursor.tsx
+++ b/src/components/Cursor/FollowCursor.tsx
@@ -39,15 +39,40 @@ const FollowCursor = () => {
   const shouldHide = hasInsets && (insets.width === 0 || insets.height === 0);
 
   useEffect(() => {
+    let mouseTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const enableIframePointerEvents = () => {
+      document.body.classList.remove('disable-iframe-pointer-events');
+    };
+
+    const disableIframePointerEvents = () => {
+      document.body.classList.add('disable-iframe-pointer-events');
+      if (mouseTimeout) clearTimeout(mouseTimeout);
+      mouseTimeout = setTimeout(enableIframePointerEvents, 150);
+    };
+
     const handleMouseMove = (e: MouseEvent) => {
       dotTargetX.set(e.clientX);
       dotTargetY.set(e.clientY);
       ringTargetX.set(e.clientX);
       ringTargetY.set(e.clientY);
+
+      disableIframePointerEvents();
+    };
+
+    const handleMouseDown = () => {
+      enableIframePointerEvents();
     };
 
     window.addEventListener('mousemove', handleMouseMove, { passive: true });
-    return () => window.removeEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mousedown', handleMouseDown, { passive: true });
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mousedown', handleMouseDown);
+      if (mouseTimeout) clearTimeout(mouseTimeout);
+      enableIframePointerEvents();
+    };
   }, [dotTargetX, dotTargetY, ringTargetX, ringTargetY]);
 
   const ringSize = shouldHide ? 0 : isHovering ? 48 : 36;
@@ -72,7 +97,7 @@ const FollowCursor = () => {
           borderRadius: '50%',
           backgroundColor: '#ffffff',
           mixBlendMode: 'difference',
-          zIndex: 99999,
+          zIndex: 2147483647,
           pointerEvents: 'none',
           x: dotX,
           y: dotY,
@@ -105,7 +130,7 @@ const FollowCursor = () => {
           position: 'fixed',
           left: 0,
           top: 0,
-          zIndex: 99998,
+          zIndex: 2147483646,
           pointerEvents: 'none',
           x: ringX,
           y: ringY,
diff --git a/src/components/ResumeAudioPlayer/ResumeAudioPlayer.tsx b/src/components/ResumeAudioPlayer/ResumeAudioPlayer.tsx
new file mode 100644
index 0000000..d372ca2
--- /dev/null
+++ b/src/components/ResumeAudioPlayer/ResumeAudioPlayer.tsx
@@ -0,0 +1,43 @@
+import { Box } from '@chakra-ui/react';
+
+export interface ResumeAudioPlayerProps {
+  audioUrl: string;
+  title?: string;
+  subtitle?: string;
+  fallbackDuration?: string;
+}
+
+const ResumeAudioPlayer = ({
+  audioUrl,
+  title = 'Audio Walkthrough',
+}: ResumeAudioPlayerProps) => {
+  const isGDrive = audioUrl.includes('drive.google.com');
+  const embedSrc = isGDrive
+    ? audioUrl.replace(/\/view.*/, '/preview')
+    : audioUrl;
+
+  return (
+    <Box
+      width="100%"
+      borderRadius="8px"
+      border="1px solid rgba(255, 255, 255, 0.12)"
+      boxShadow="0 4px 20px 0 rgba(0, 0, 0, 0.4)"
+      bg="rgba(18, 18, 22, 0.85)"
+      height={'50px'}
+      overflow="hidden"
+    >
+      <iframe
+        src={embedSrc}
+        title={title}
+        style={{
+          width: '100%',
+          transform: 'scaleY(0.5)',
+          transformOrigin: 'top left',
+          zIndex: 1,
+        }}
+      />
+    </Box>
+  );
+};
+
+export default ResumeAudioPlayer;
diff --git a/src/components/ResumeAudioPlayer/__tests__/ResumeAudioPlayer.test.tsx b/src/components/ResumeAudioPlayer/__tests__/ResumeAudioPlayer.test.tsx
new file mode 100644
index 0000000..f8faada
--- /dev/null
+++ b/src/components/ResumeAudioPlayer/__tests__/ResumeAudioPlayer.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ResumeAudioPlayer from '../ResumeAudioPlayer';
+
+describe('ResumeAudioPlayer', () => {
+  it('should render audio iframe with title attribute for direct audio link', () => {
+    render(
+      <ResumeAudioPlayer
+        audioUrl="/audio/test.mp3"
+        title="Test Title"
+      />,
+    );
+
+    const iframe = screen.getByTitle('Test Title');
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute('src', '/audio/test.mp3');
+  });
+
+  it('should render Google Drive iframe with preview URL when audioUrl is a GDrive link', () => {
+    render(
+      <ResumeAudioPlayer
+        audioUrl="https://drive.google.com/file/d/1C3Vq5pMbjbdHHq56d8gWpblUjv9RYln-/view?usp=drive_link"
+        title="GDrive Audio"
+      />,
+    );
+
+    const iframe = screen.getByTitle('GDrive Audio');
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute(
+      'src',
+      'https://drive.google.com/file/d/1C3Vq5pMbjbdHHq56d8gWpblUjv9RYln-/preview',
+    );
+  });
+});
diff --git a/src/components/ResumeAudioPlayer/index.ts b/src/components/ResumeAudioPlayer/index.ts
new file mode 100644
index 0000000..cb1ffbd
--- /dev/null
+++ b/src/components/ResumeAudioPlayer/index.ts
@@ -0,0 +1,2 @@
+export { default as ResumeAudioPlayer } from './ResumeAudioPlayer';
+export type { ResumeAudioPlayerProps } from './ResumeAudioPlayer';
diff --git a/src/components/animateModal/AnimatedModal.tsx b/src/components/animateModal/AnimatedModal.tsx
index 6b97459..e76a3c0 100644
--- a/src/components/animateModal/AnimatedModal.tsx
+++ b/src/components/animateModal/AnimatedModal.tsx
@@ -97,16 +97,16 @@ export const ModalBody = ({
             backdropFilter: 'blur(0px)',
           }}
           className={
-            'fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full flex items-center justify-center z-100 ' +
+            'fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full flex items-center justify-center z-[9000] ' +
             className
           }
         >
           <Overlay />
           <motion.div
             ref={modalRef}
-            className={
-              'min-h-[50%] max-h-[90%] max-w-[60%]  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'
-            }
+            className={`min-h-[50%] max-h-[95%] ${
+              className ? className : 'max-w-[60%]'
+            } bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-[9001] flex flex-col flex-1 overflow-hidden`}
             initial={{
               opacity: 0,
               scale: 0.5,
@@ -176,7 +176,7 @@ const Overlay = ({ className }: { className?: string }) => {
         opacity: 0,
         backdropFilter: 'blur(0px)',
       }}
-      className={`fixed inset-0 h-full w-full bg-black bg-opacity-50 z-100 ${className}`}
+      className={`fixed inset-0 h-full w-full bg-black bg-opacity-50 z-[9001] ${className}`}
     ></motion.div>
   );
 };
diff --git a/src/components/animateModal/Modal.tsx b/src/components/animateModal/Modal.tsx
index 4ff753a..d39b390 100644
--- a/src/components/animateModal/Modal.tsx
+++ b/src/components/animateModal/Modal.tsx
@@ -12,11 +12,13 @@ const AnimatedModal = ({
   triggerComponent,
   children,
   footer,
+  containerClassName,
 }: {
   title: string;
   triggerComponent: React.ReactNode;
   children: React.ReactNode;
   footer: React.ReactNode;
+  containerClassName?: string;
 }) => {
   return (
     <Box className="flex items-center justify-center">
@@ -26,13 +28,15 @@ const AnimatedModal = ({
         </ModalTrigger>
         <ModalBody>
           <ModalContent>
-            <Heading
-              fontSize="xl"
-              className="text-center text-white"
-              marginBottom={'4'}
-            >
-              {title}
-            </Heading>
+            {title && (
+              <Heading
+                fontSize="xl"
+                className="text-center text-white"
+                marginBottom={'4'}
+              >
+                {title}
+              </Heading>
+            )}
             {children}
           </ModalContent>
           <ModalFooter>{footer}</ModalFooter>
diff --git a/src/components/index.ts b/src/components/index.ts
index 1c86322..61cb850 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -20,3 +20,5 @@ export * from './GlassBox';
 export * from './BorderGlow';
 export * from './Orb';
 export * from './WebsiteLoader';
+export * from './ResumeAudioPlayer';
+
diff --git a/src/data/index.ts b/src/data/index.ts
index 24919a1..a4f2b7f 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -1,4 +1,6 @@
 export { PROJECT_DATA } from './Projects';
 export { WORK_DATA } from './Work';
 export { CONTACT } from './contact';
+export { RESUME_DATA } from './resume';
 export * from './types';
+
diff --git a/src/data/resume.ts b/src/data/resume.ts
new file mode 100644
index 0000000..3db9c92
--- /dev/null
+++ b/src/data/resume.ts
@@ -0,0 +1,22 @@
+export interface ResumeData {
+  gdriveViewUrl: string;
+  gdriveDownloadUrl: string;
+  audioUrl: string;
+  audioDuration: string;
+  highlights: string[];
+}
+
+export const RESUME_DATA: ResumeData = {
+  gdriveViewUrl:
+    'https://drive.google.com/file/d/1wSTgBKD-me8VoJEKuQ71INGCiCrZK_pY/preview',
+  gdriveDownloadUrl:
+    'https://drive.google.com/uc?export=download&id=1BojE5ecoNn8y6zFyJphQ5Td59OISDljm',
+  audioUrl:
+    'https://drive.google.com/file/d/1C3Vq5pMbjbdHHq56d8gWpblUjv9RYln-/preview',
+  audioDuration: '9:31',
+  highlights: [
+    '5+ years of experience in Full-Stack & Mobile Development (React, React Native, TypeScript)',
+    'Key achievements at Raja Software Labs',
+    'Specialized in Performance Optimization, Custom UI Components, and State Architecture',
+  ],
+};
diff --git a/src/index.css b/src/index.css
index d74a125..32492c3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,3 +89,9 @@ body,
   background-color: rgba(193, 129, 193, 0.576);
   color: black; /* Optional: set text color within selection */
 }
+
+/* Allow custom cursor to track smoothly over iframes without getting stuck at boundaries */
+body.disable-iframe-pointer-events iframe {
+  pointer-events: none !important;
+}
+
diff --git a/src/localization/locales/en/main.json b/src/localization/locales/en/main.json
index 6a302d9..9c9f35a 100644
--- a/src/localization/locales/en/main.json
+++ b/src/localization/locales/en/main.json
@@ -11,9 +11,19 @@
     "work": "Work",
     "projects": "Projects",
     "skills": "Skills",
+    "resume": "Resume",
     "articles": "Articles",
     "contact": "Contact"
   },
+  "resume": {
+    "title": "Resume",
+    "subtitle": "Interactive Resume & Audio Walkthrough",
+    "audioTitle": "Audio Walkthrough",
+    "audioSubtitle": "Listen to a quick audio summary of my professional journey",
+    "pdfTitle": "Resume Document",
+    "openInDrive": "View in Google Drive",
+    "downloadPdf": "Download PDF"
+  },
   "about": {
     "quoteHeading": "Crafting digital experiences that inspire",
     "quoteSubheading": "Let your imagination run wild.",
diff --git a/src/screens/common/NavigationBar.tsx b/src/screens/common/NavigationBar.tsx
index 754dab6..e91da51 100644
--- a/src/screens/common/NavigationBar.tsx
+++ b/src/screens/common/NavigationBar.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, HStack, Img } from '@chakra-ui/react';
+import { Box, Button, HStack, Img, Text } from '@chakra-ui/react';
 import { AnimatedModal, LinkButton, useCursor, GlassBox } from '@components';
 import AmitRaikwarLogo from '@assets/images/AmitRaikwarLogo.png';
 import { SearchIcon } from '@assets';
@@ -8,6 +8,7 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useMoveToTop } from '@hooks';
 import { BASE_URL_ROUTE } from '@router';
 import PingTest from './PingTest';
+import Resume from '../mainFlow/contents/Resume';
 
 const NavigationLink = [
   {
@@ -240,6 +241,29 @@ const NavigationBar = () => {
                 {t(ArticleLink.name)}
               </Button>
             </Box>
+            <Text
+              color={'white'}
+              fontSize={{ base: 'xs', sm: 'sm', md: 'lg' }}
+              display={{
+                base: 'none',
+                md: 'block',
+              }}
+            >
+              {'|'}
+            </Text>
+            <AnimatedModal
+              triggerComponent={
+                <LinkButton
+                  text={t('navigation.resume')}
+                  fontSize={{ base: 'xs', sm: 'sm', md: 'lg' }}
+                />
+              }
+              title={t('resume.title')}
+              containerClassName="w-[92vw] max-w-[1100px]"
+              footer={<Box></Box>}
+            >
+              <Resume />
+            </AnimatedModal>
           </HStack>
         )}
 
diff --git a/src/screens/common/SocialNavigation.tsx b/src/screens/common/SocialNavigation.tsx
index e18020b..103bd0c 100644
--- a/src/screens/common/SocialNavigation.tsx
+++ b/src/screens/common/SocialNavigation.tsx
@@ -91,7 +91,7 @@ const SocialNavigation = () => {
         transform="translateY(-50%)"
         right={14}
         rowGap={6}
-        zIndex={1000}
+        zIndex={500}
         display={{ base: 'none', lg: 'flex' }}
       >
         <VStack
@@ -166,7 +166,7 @@ const SocialNavigation = () => {
         position="fixed"
         bottom={{ base: '20px', md: '30px' }}
         right={{ base: '20px', md: '30px' }}
-        zIndex={1100}
+        zIndex={500}
         display={{ base: 'block', lg: 'none' }}
       >
         <IconButton
diff --git a/src/screens/mainFlow/contents/Contents.tsx b/src/screens/mainFlow/contents/Contents.tsx
index 0f37b0f..7308afc 100644
--- a/src/screens/mainFlow/contents/Contents.tsx
+++ b/src/screens/mainFlow/contents/Contents.tsx
@@ -24,4 +24,6 @@ const Contents = () => {
   );
 };
 
+
+
 export default Contents;
diff --git a/src/screens/mainFlow/contents/Resume.tsx b/src/screens/mainFlow/contents/Resume.tsx
new file mode 100644
index 0000000..9fc9bf5
--- /dev/null
+++ b/src/screens/mainFlow/contents/Resume.tsx
@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Icon,
+  Spinner,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { GlassBox, ResumeAudioPlayer } from '@components';
+import { RESUME_DATA } from '@data';
+import { useTranslation } from 'react-i18next';
+
+const ExternalLinkIcon = () => (
+  <Icon viewBox="0 0 24 24" boxSize={4} fill="currentColor">
+    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+  </Icon>
+);
+
+const DownloadIcon = () => (
+  <Icon viewBox="0 0 24 24" boxSize={4} fill="currentColor">
+    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+  </Icon>
+);
+
+const Resume = () => {
+  const { t } = useTranslation();
+  const [iframeLoading, setIframeLoading] = useState(true);
+
+  return (
+    <VStack
+      width="100%"
+      spacing={5}
+      padding={{ base: 2, md: 4 }}
+      align="stretch"
+      maxH="80vh"
+      overflowY="auto"
+      css={{
+        '&::-webkit-scrollbar': {
+          width: '6px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'rgba(0,0,0,0.2)',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'rgba(255,255,255,0.2)',
+          borderRadius: '3px',
+        },
+      }}
+    >
+      {/* Audio Walkthrough Header & Player */}
+      <VStack align="start" spacing={2} width="100%">
+        <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="bold" color="white">
+          {t('resume.audioTitle')}
+        </Text>
+        <Box width="100%">
+          <ResumeAudioPlayer
+            audioUrl={RESUME_DATA.audioUrl}
+            title={t('resume.audioTitle')}
+            subtitle={t('resume.audioSubtitle')}
+            fallbackDuration={RESUME_DATA.audioDuration}
+          />
+        </Box>
+      </VStack>
+
+      {/* PDF View Header & Actions */}
+      <Flex
+        direction={{ base: 'column', sm: 'row' }}
+        justify="space-between"
+        align={{ base: 'start', sm: 'center' }}
+        gap={3}
+        width="100%"
+        pt={1}
+      >
+        <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="bold" color="white">
+          {t('resume.pdfTitle')}
+        </Text>
+
+        <HStack spacing={3} wrap="wrap">
+          <Button
+            as="a"
+            href={RESUME_DATA.gdriveViewUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            rightIcon={<ExternalLinkIcon />}
+            variant="outline"
+            borderColor="rgba(255, 255, 255, 0.2)"
+            color="white"
+            size="xs"
+            _hover={{
+              bg: 'rgba(255, 255, 255, 0.1)',
+              borderColor: 'brand.500',
+              transform: 'translateY(-2px)',
+            }}
+            transition="all 0.2s"
+          >
+            {t('resume.openInDrive')}
+          </Button>
+
+          <Button
+            as="a"
+            href={RESUME_DATA.gdriveDownloadUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            rightIcon={<DownloadIcon />}
+            colorScheme="violet"
+            bg="brand.500"
+            color="white"
+            size="xs"
+            _hover={{
+              bg: 'violet.600',
+              transform: 'translateY(-2px)',
+            }}
+            transition="all 0.2s"
+          >
+            {t('resume.downloadPdf')}
+          </Button>
+        </HStack>
+      </Flex>
+
+      {/* Google Drive PDF Embedded Frame */}
+      <Box
+        position="relative"
+        width="100%"
+        height={{ base: '520px', md: '680px', lg: '740px' }}
+        borderRadius="16px"
+        border="1px solid rgba(255, 255, 255, 0.12)"
+        boxShadow="0 8px 32px 0 rgba(0, 0, 0, 0.5)"
+        overflow="hidden"
+        bg="rgba(10, 10, 12, 0.9)"
+      >
+        <GlassBox
+          width="100%"
+          height="100%"
+          borderRadius={16}
+          borderWidth={0.15}
+          blur={4}
+          displace={1.2}
+          distortionScale={40}
+          yChannel="B"
+          backgroundOpacity={0.005}
+          saturation={1}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            zIndex: 0,
+            pointerEvents: 'none',
+          }}
+        />
+
+        {iframeLoading && (
+          <Flex
+            position="absolute"
+            inset={0}
+            zIndex={1}
+            align="center"
+            justify="center"
+            bg="rgba(0, 0, 0, 0.8)"
+            direction="column"
+            gap={3}
+          >
+            <Spinner size="lg" color="brand.500" thickness="3px" />
+            <Text fontSize="xs" color="gray.400">
+              Loading Resume PDF...
+            </Text>
+          </Flex>
+        )}
+
+        <iframe
+          src={RESUME_DATA.gdriveViewUrl}
+          title="Google Drive Resume Viewer"
+          width="100%"
+          height="100%"
+          style={{ border: 'none', position: 'relative', zIndex: 2 }}
+          onLoad={() => setIframeLoading(false)}
+        />
+      </Box>
+    </VStack>
+  );
+};
+
+export default Resume;
diff --git a/src/screens/mainFlow/contents/__tests__/Resume.test.tsx b/src/screens/mainFlow/contents/__tests__/Resume.test.tsx
new file mode 100644
index 0000000..fc11c7d
--- /dev/null
+++ b/src/screens/mainFlow/contents/__tests__/Resume.test.tsx
@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import LocalizationProvider from '../../../../providers/localizationProvider/LocalizationProvider';
+import Resume from '../Resume';
+
+describe('Resume Screen Component', () => {
+  beforeEach(() => {
+    window.HTMLMediaElement.prototype.play = jest.fn().mockImplementation(() => Promise.resolve());
+    window.HTMLMediaElement.prototype.pause = jest.fn();
+  });
+
+  it('should render the resume section heading and interactive components', () => {
+    render(
+      <LocalizationProvider>
+        <Resume />
+      </LocalizationProvider>,
+    );
+
+    // Content header
+    expect(screen.getByText('Resume Document')).toBeInTheDocument();
+
+
+
+    // Audio player iframe / component
+    expect(screen.getByTitle('Audio Walkthrough')).toBeInTheDocument();
+
+
+    // External action links
+    const driveLink = screen.getByRole('link', { name: /view in google drive/i });
+    expect(driveLink).toBeInTheDocument();
+    expect(driveLink).toHaveAttribute('target', '_blank');
+
+    const downloadLink = screen.getByRole('link', { name: /download pdf/i });
+    expect(downloadLink).toBeInTheDocument();
+    expect(downloadLink).toHaveAttribute('target', '_blank');
+
+    // Google Drive Iframe
+    const iframe = screen.getByTitle('Google Drive Resume Viewer');
+    expect(iframe).toBeInTheDocument();
+  });
+
+  it('should hide loading spinner when iframe loads', () => {
+    render(
+      <LocalizationProvider>
+        <Resume />
+      </LocalizationProvider>,
+    );
+
+    expect(screen.getByText('Loading Resume PDF...')).toBeInTheDocument();
+
+    const iframe = screen.getByTitle('Google Drive Resume Viewer');
+    fireEvent.load(iframe);
+
+    expect(screen.queryByText('Loading Resume PDF...')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/screens/mainFlow/contents/index.ts b/src/screens/mainFlow/contents/index.ts
index 419d211..123fc44 100644
--- a/src/screens/mainFlow/contents/index.ts
+++ b/src/screens/mainFlow/contents/index.ts
@@ -1 +1,3 @@
 export { default as Contents } from './Contents';
+export { default as Resume } from './Resume';
+
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 8f2609b..1d6005f 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -3,3 +3,5 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+