Display your Resumé PDF on your Website

Rather than having a button or a link that displays your resumé in another tab, follow these steps to display it on your viewport.

Setup

I'm assuming you have your React app initialized already, but just in case you don't,

npx create-react-app <pdf-renderer>
npm i react-bootstrap react-pdf

• react-bootstrap is an easy-to-use styling framework that makes designing your website a breeze.

• react-pdf is what will display existing pdf's.

Imports

import React, { useState, useEffect } from "react";
import { Container, Row, Button } from "react-bootstrap";
import pdf from "../../assets/coding-resume.pdf";
import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/TextLayer.css";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

• react-bootstrap will take care of the design of your webpage and will create the button that will allow users to download your resumé.

• State hooks will be used to dynamically display your resumé on whatever screen people choose to view it on.

• import your "pdf" with the correct pathing to it.

• react-pdf provides us with three imports:

  • Document - class that retrieves our resumé by a link that we provide.

  • Page - class that allows you to choose how many pages you want to display and how to scale the image based on screen size.

  • pdfjs - we use this to retrieve the correct version number of the pdf reader from the cdnjs library.

Code

const resumeLink =
  "https://raw.githubusercontent.com/github-name/pdf-renderer/main/src/assets/resume.pdf";

  function Resume() {
  const [width, setWidth] = useState(1200);

  useEffect(() => {
// default width is 1200px, but this hook sets the width of the resume to be the inner width of whatever screen the user is using
    setWidth(window.innerWidth);
  }, []);

  return (
      <Container fluid className="resume-section">
          <Button
            variant="primary"
            href={pdf}
            target="_blank"
            style={{ maxWidth: "250px" }}
          >
            &nbsp;Download Resume
          </Button>
        <Row className="resume">
{*/ this component takes the link provided above and renders it on your page /*}
          <Document file={resumeLink} className="d-flex justify-content-center">
  {* /if width is greater than 786px, scale by 1.7x if not, 0.6x /*}
            <Page pageNumber={1} scale={width > 786 ? 1.7 : 0.6} />
          </Document>
        </Row>
      </Container>
  );
}

export default Resume;

• resumeLink - this is the link that you can retrieve by going into your repo and locating your resumé pdf.

  • If your URL is in this format,

    • github.com/github-name/pdf-renderer/blob/ma..

    • Replace github -> raw.githubusercontent and remove /blob.

Conclusion

That wraps it up! If you have any questions or if you want to view code that works on a live website, check out my portfolio. Feel free to message me with any questions!