Increased Responsiveness for Resume

Kevin-Kwan · Dec 21, 2023 · 672c286 · 672c286
1 parent ed522cf
commit 672c286
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 14 deletions.
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -33,15 +33,7 @@ const Navbar = ({ isMenuOpen, toggleMenu }: NavbarProps) => {
         </Link>
       </div>
       <div className="hidden md:flex items-center justify-center flex-1">
-        <div className="flex justify-center">
-          {/* <Link legacyBehavior href="/">
-            <a className="mx-4 hover:text-gray-500 text-center">Home</a>
-          </Link> */}
-          {/* <Link legacyBehavior href="/about">
-            <a className="text-white mx-4 text-lg hover:text-2xl transition-fontSize duration-200 hover:text-blue-500 text-center">
-              About Me
-            </a>
-          </Link> */}
+        <div className="flex justify-end">
           <Link legacyBehavior href="/resume">
             <a className="text-white mx-4 text-lg hover:text-2xl transition-fontSize duration-200 hover:text-blue-500 text-center">
               My Résumé

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.2",
     "react-icons": "^4.10.1",
+    "react-responsive": "^9.0.2",
     "react-scroll": "^1.9.0",
     "react-scroll-parallax": "^3.4.5",
     "sass": "^1.69.5",

diff --git a/pages/resume.tsx b/pages/resume.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import Head from 'next/head';
 import Layout from '../components/RootLayout';
+import { useMediaQuery } from 'react-responsive';
+
 declare global {
   interface Window {
     AdobeDC: any;
@@ -10,6 +12,7 @@ declare global {
 }
 
 export default function Resume() {
+  const isMobile = useMediaQuery({ query: '(max-width: 846px)' });
   useEffect(() => {
     function initializeAdobeDCView() {
       var adobeDCView = new window.AdobeDC.View({
@@ -27,7 +30,7 @@ export default function Resume() {
         },
         {
           embedMode: 'FULL_WINDOW',
-          defaultViewMode: 'FIT_WIDTH',
+          defaultViewMode: 'FIT_PAGE',
           showFullScreen: true,
           showAnnotationTools: false,
           showZoomControl: true,
@@ -65,20 +68,25 @@ export default function Resume() {
       <Head>
         <title>Kevin Kwan | Résumé</title>
       </Head>
-      <main className="flex-1 p-4 pb-20 " style={{ height: '100vh' }}>
+      <main
+        className="flex-1 p-4 pb-20 flex flex-col items-center justify-center"
+        style={{ height: '100vh' }}
+      >
         <p className="text-white text-lg font-bold mb-4 text-center">
-          If you have troubles viewing the PDF, you can{' '}
+          {isMobile
+            ? 'It seems like you are on a mobile device! For a better experience, we recommend that you please '
+            : 'If you have troubles viewing the PDF, you can '}
           <a
             href={process.env.NEXT_PUBLIC_RESUME_LINK}
             target="_blank"
             rel="noopener noreferrer"
             className="text-blue-400 underline"
           >
-            click here to download it
+            click here to view/download it
           </a>
           .
         </p>
-        <div id="adobe-dc-view" />
+        {!isMobile && <div id="adobe-dc-view" className="max-w-5xl mx-auto" />}
       </main>
     </Layout>
   );