diff --git a/src/components/PDF.tsx b/src/components/PDF.tsx index 85467b2..bd6584a 100644 --- a/src/components/PDF.tsx +++ b/src/components/PDF.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useState } from "react"; import "./PDF.css"; // Import the PDF file @@ -6,20 +6,41 @@ import CV_PDF from "./_PDF/Lars_Flem_CV_english.pdf"; // Define the PdfViewer component const PdfViewer: React.FC = () => { - const pdfRef = useRef(null); + const [isMobile, setIsMobile] = useState(false); useEffect(() => { - if (pdfRef.current) { - // Calculate the height dynamically based on the window height - const windowHeight = window.innerHeight; - pdfRef.current.style.height = `${windowHeight - 150}px`; // Subtract header/footer or any margin as needed - } + // Check if viewport width is less than or equal to 768px (common mobile width) + const handleResize = () => { + setIsMobile(window.innerWidth <= 768); + }; + + // Set the initial value + handleResize(); + + // Add event listener for window resize + window.addEventListener("resize", handleResize); + + // Cleanup listener on component unmount + return () => window.removeEventListener("resize", handleResize); }, []); + // If on a mobile device, display a message instead of the PDF + if (isMobile) { + return ( +
+

CV

+

+ PDF not displayed on mobile devices.{" "} + Download the PDF. +

+
+ ); + } + return (

CV

- +

PDF cannot be displayed. Download the PDF.