add download resume button

src/components/About.js

@@ -7,7 +7,7 @@ const About = () => {
   return (
     <>
       <section
-        id='about'
+        id="about"
         className="h-fit min-h-screen  w-full px-12 lg:px-48 flex 
           flex-col xl:flex-row  xl:gap-52
            border-black border-y items-center 
@@ -18,11 +18,13 @@ const About = () => {
             justify-between my-8"
         >
           <AboutMeText />
-          <Button
-            text="Download CV"
-            scrollToId=""
-            className="md:ml-5 md:mt-4 scale-75 md:scale-100"
-          />
+          <a href="/resume.pdf" download>
+            <Button
+              text="Download resume"
+              scrollToId=""
+              className="md:ml-5 md:mt-4 scale-75 md:scale-100"
+            />
+          </a>
         </div>
         <Skills />
 

src/components/HeroText.js

@@ -13,25 +13,46 @@ const HeroText = () => {
       </h1>
       {/* <h2 className="font-abril text-xl py-2 uppercase text-black/60 
       absolute bottom-24 right-0">Frontend Developer</h2> */}
-      <div className="relative w-[80%] flex flex-row items-center justify-between gap-4
-       py-2 md:py-8">
+      <div
+        className="relative w-[80%] flex flex-row items-center justify-between gap-4
+       py-2 md:py-8"
+      >
         <div className=" h-[1px] md:h-[2px] w-full opacity-30 absolute my-6 bg-slate-400"></div>
         <div className="ml-[42%]">
           <SocialIcons />
         </div>
       </div>
 
-      <p className="font-poppins md:text-base/6 lg:text-sm 
-      w-2/3 min-w-[300px] pb-8 opacity-90">
-        A creative frontend developer, based in Hawaii.
-        Checkout my projects section and let's get in touch.
+      <p
+        className="font-poppins md:text-base/6 lg:text-sm 
+      w-2/3 min-w-[300px] pb-8 opacity-90"
+      >
+        A creative frontend developer, based in Hawaii. Checkout my projects
+        section and let's get in touch.
         {/* <br />I believe that digital marvels start with a strong team! */}
       </p>
-      <Button
-        text="Contact me"
-        scrollToId="contact"
-        className=" -ml-3 md:ml-0 md:mt-8 scale-75 md:scale-100  md:hover:scale-100"
-      />
+      <div className="flex flex-row items-center 
+      justify-start md:mt-8 gap-1 md:gap-4">
+        <Button
+          text="Contact me"
+          scrollToId="contact"
+          className=" -ml-3 md:ml-0  scale-75 md:scale-100  
+          md:hover:scale-100"
+        />
+        <a
+        title='download resume'
+          href="/resume.pdf"
+          download
+          className="scale-75 md:scale-100 hover:scale-[103%] 
+          hover:-translate-y-1 transition-all ease-in-out"
+        >
+          <img
+            src="resumeIcon.png"
+            alt="resume"
+            style={{ minWidth: "40px", maxWidth: "46px", height: "auto" }}
+          />
+        </a>
+      </div>
     </div>
   );
 };

src/components/NavBar.js

@@ -68,6 +68,7 @@ const NavBar = () => {
             className="ml-4 bg-underlinedText3 bg-bottom bg-underlinedBg bg-no-repeat"
             title="Contact"
           />
+
         </nav>
       </div>
 

src/components/SocialIcons.js

@@ -42,6 +42,8 @@ const SocialIcons = () => {
           style={{ minWidth: "36px", maxWidth: "46px", height: "auto" }}
         />{" "}
       </div>
+
+
       <a
         href="https://github.com/Alexandra-Haynes"
         target="_blank"