Implemented: Resume page with precise responsiveness (#422)

* Fixed: horizontal overflow of experienceCard after expanding

* Added: required modules for PDF rendering

1. React-pdf/renderer

2. pdjs-dist

3. react-pdf

* Added: pdf resume of Mr. Hathidara

* Implemented: Resume page with proper styling and responsiveness

* Redirecting user to "/resume" route from "See My Resume" button in "Contact" page

* Added: "/resume" route

* Removed: react-pdf/renderer and fix dependencies conflict

* "See My Resume" will not create a new tab

* .resume-page is set as block for making previous-next buttion display below it

* handling states+supporting multiple pages

* Reanamed: resume

* Removed: unaffected justify and align center

* Major changes done as per copilot suggestion

1. Renamed: resume file.

2. Added: TopButton below <Footer/>

3. Added: aria-label to components

4. passing onToggle prop to footer

Author: saksham-joshi

package-lock.json

@@ -17,12 +17,14 @@
     "chart.js": "^2.9.3",
     "gh-pages": "^2.1.1",
     "node-fetch": "^2.6.0",
+    "pdfjs-dist": "^2.12.313",
     "prettier-package-json": "^2.1.3",
     "react": "^16.10.2",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.10.2",
     "react-helmet": "^6.1.0",
+    "react-pdf": "^5.7.1",
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",

package.json

@@ -9,6 +9,7 @@ import Contact from "../pages/contact/ContactComponent";
 import Projects from "../pages/projects/Projects";
 import { settings } from "../portfolio.js";
 import Error404 from "../pages/errors/error404/Error";
+import ResumePage from "../pages/resume/Resume.js";
 
 export default class Main extends Component {
   render() {
@@ -65,6 +66,10 @@ export default class Main extends Component {
             path="/projects"
             render={(props) => <Projects {...props} theme={this.props.theme} />}
           />
+          <Route
+            path="/resume"
+            render={(props) => <ResumePage {...props} theme={this.props.theme} />}
+          />
           <Route
             path="*"
             render={(props) => <Error404 {...props} theme={this.props.theme} />}

src/assets/docs/Ashutosh_Hathidara_Resume_ML.pdf

@@ -8,7 +8,7 @@ import BlogsImg from "./BlogsImg";
 import AddressImg from "./AddressImg";
 import { Fade } from "react-reveal";
 import "./ContactComponent.css";
-import { greeting, contactPageData } from "../../portfolio.js";
+import { contactPageData } from "../../portfolio.js";
 
 const ContactData = contactPageData.contactSection;
 const blogSection = contactPageData.blogSection;
@@ -47,8 +47,7 @@ class Contact extends Component {
                 <div className="resume-btn-div">
                   <Button
                     text="See My Resume"
-                    newTab={true}
-                    href={greeting.resumeLink}
+                    href="/resume"
                     theme={theme}
                   />
                 </div>