Feature-Resume display and download (#698)

* Create ResumeDownloadButton.js * Updated github pages Updated github pages * Resume feature 1st version Missing adding feature to top bar * Style ran npm run format * Fixed UI to match the webpage Resume can now be accessed by the toolbar above and by the button in the greeting page. Fixed the title and subtitle arrangement. * Fixed format Fixed format * Update README.md with resume instructions * Updated resume feature Downloads resume after clicking button, Deleted resume container in website * Changed underlined font of bottun * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Updated style to pass lint * Directly Download button --------- Co-authored-by: NMCBU1 <[email protected]> Co-authored-by: NMCBU1 <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
saadpasta · Apr 28, 2024 · 1b69fbd · 1b69fbd
1 parent f16db7c
commit 1b69fbd
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -189,6 +189,8 @@ const contactInfo = { .... }
 const twitterDetails = { ... }
 
 ```
+#### Resume upload
+To upload your own resume, simply upload a pdf to `src/containers/resume` and rename the pdf to `resume.pdf`. 
 
 #### Using Emojis
 

diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -10,7 +10,8 @@ import {
   openSource,
   blogSection,
   talkSection,
-  achievementSection
+  achievementSection,
+  resumeSection
 } from "../../portfolio";
 
 function Header() {
@@ -21,6 +22,7 @@ function Header() {
   const viewAchievement = achievementSection.display;
   const viewBlog = blogSection.display;
   const viewTalks = talkSection.display;
+  const viewResume = resumeSection.display;
 
   return (
     <Headroom>
@@ -69,6 +71,11 @@ function Header() {
               <a href="#talks">Talks</a>
             </li>
           )}
+          {viewResume && (
+            <li>
+              <a href="#resume">Resume</a>
+            </li>
+          )}
           <li>
             <a href="#contact">Contact Me</a>
           </li>

diff --git a/src/containers/greeting/Greeting.js b/src/containers/greeting/Greeting.js
@@ -6,7 +6,6 @@ import landingPerson from "../../assets/lottie/landingPerson";
 import DisplayLottie from "../../components/displayLottie/DisplayLottie";
 import SocialMedia from "../../components/socialMedia/SocialMedia";
 import Button from "../../components/button/Button";
-
 import {illustration, greeting} from "../../portfolio";
 import StyleContext from "../../contexts/StyleContext";
 
@@ -41,11 +40,13 @@ export default function Greeting() {
               <div className="button-greeting-div">
                 <Button text="Contact me" href="#contact" />
                 {greeting.resumeLink && (
-                  <Button
-                    text="See my resume"
-                    newTab={true}
-                    href={greeting.resumeLink}
-                  />
+                  <a
+                    href={require("./resume.pdf")}
+                    download="Resume.pdf"
+                    className="download-link-button"
+                  >
+                    <Button text="Download my resume" />
+                  </a>
                 )}
               </div>
             </div>

diff --git a/src/containers/greeting/Greeting.scss b/src/containers/greeting/Greeting.scss
@@ -33,6 +33,9 @@
   display: flex;
   margin-top: 20px;
 }
+.download-link-button {
+  text-decoration: none;
+}
 
 .greeting-text {
   font-size: 70px;

diff --git a/src/containers/greeting/resume.pdf b/src/containers/greeting/resume.pdf
diff --git a/src/portfolio.js b/src/portfolio.js
@@ -359,6 +359,15 @@ const podcastSection = {
   display: true // Set false to hide this section, defaults to true
 };
 
+// Resume Section
+const resumeSection = {
+  title: "Resume",
+  subtitle: "Feel free to download my resume",
+
+  // Please Provide with Your Podcast embeded Link
+  display: true // Set false to hide this section, defaults to true
+};
+
 const contactInfo = {
   title: emoji("Contact Me ☎️"),
   subtitle:
@@ -393,5 +402,6 @@ export {
   podcastSection,
   contactInfo,
   twitterDetails,
-  isHireable
+  isHireable,
+  resumeSection
 };