feat: CV & GitHub link buttons

package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "react-simple-typewriter": "^5.0.1",
+    "react-toastify": "^10.0.5",
     "react-typical": "^0.1.3",
     "typescript": "^5.5.3",
     "web-vitals": "^2.1.4"

src/Components/About/About.scss

@@ -41,6 +41,7 @@ $tools-item-tint: darken($list-item-color, 40%);
   color: $secondary-color;
   background-color: rgba(darken($background-color, 10%), 0.25);
   border-radius: $border-radius;
+  box-shadow: 0px 2px 16px 2px rgba(darken($background-color, 20%), 0.3);
 }
 
 .AboutText {
@@ -105,6 +106,7 @@ $tools-item-tint: darken($list-item-color, 40%);
 
 .AboutImageContainer {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -113,11 +115,81 @@ $tools-item-tint: darken($list-item-color, 40%);
 
 .AboutImage {
   border-radius: $border-radius;
+  box-shadow: 0px 2px 16px 2px rgba(darken($background-color, 20%), 0.3);
+}
+
+.DownloadCVButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 12px 24px;
+  background: darken(#2bd4a0, 30%);
+  color: $text-color;
+  border: none;
+  border-radius: $border-radius;
+  cursor: pointer;
+  font-size: 1.1em;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
   box-shadow: $box-shadow;
+  transition: background 0.3s ease, transform 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
+.DownloadIcon {
+  margin-right: 10px;
+  margin-top: -3px;
+  font-size: 1.2em;
 }
 
 @media screen and (max-width: 768px) {
   .AboutImage {
     width: 100%;
   }
 }
+
+.ButtonContainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.GitHubButton {
+  background-color: #161a1f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 12px 24px;
+  color: $text-color;
+  border: none;
+  border-radius: $border-radius;
+  cursor: pointer;
+  font-size: 1.1em;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  box-shadow: $box-shadow;
+  transition: background 0.3s ease, transform 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
+.GitHubIcon {
+  margin-left: 10px;
+  margin-top: -3px;
+  font-size: 1.2em;
+}
+
+.StarIcon {
+  margin-right: 10px;
+  margin-top: -3px;
+  font-size: 1.2em;
+}
+

src/Components/About/About.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
 import { motion, useInView } from 'framer-motion';
+import { FaFilePdf, FaStar, FaGithub } from 'react-icons/fa'; 
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import './About.scss';
 
 const About: React.FC = () => {
   const ref = React.useRef(null);
   const isInView = useInView(ref, { once: true });
 
+  const handleDownloadClick = () => {
+    toast.success("Resume downloaded successfully!", {
+      position: "bottom-right",
+    });
+  };
+
   return (
     <motion.div
       className="AboutContainer"
@@ -88,8 +97,41 @@ const About: React.FC = () => {
             src={`${process.env.PUBLIC_URL}/aboutImage.webp`}
             alt="At JACHacks"
           />
+          <div className="ButtonContainer">
+            <a 
+              href={`${process.env.PUBLIC_URL}/CarsonSpriggs_CV.pdf`} 
+              download 
+              onClick={handleDownloadClick}
+            >
+              <button className="DownloadCVButton">
+                <FaFilePdf className="DownloadIcon" />
+                Resume
+              </button>
+            </a>
+            <a 
+              href="https://github.com/carsonSgit/carsonsgit.github.io" 
+              target="_blank" 
+              rel="noreferrer"
+            >
+              <button className="GitHubButton">
+                <FaStar className="StarIcon" /> 
+                this on
+                <FaGithub className="GitHubIcon" />
+              </button>
+            </a>
+          </div>
         </div>
       </div>
+      <ToastContainer
+        position="bottom-right"
+        autoClose={2000}
+        hideProgressBar={true}
+        closeOnClick
+        rtl={false}
+        draggable
+        theme={'dark'}
+        toastStyle={{ backgroundColor: '#1b211e' }}
+      />
     </motion.div>
   );
 };

src/Components/Footer/Footer.scss

@@ -11,7 +11,7 @@ $icon-color: $text-color;
 
 .Footer {
   background-color: rgba(darken($footer-background-color, 70%), 0.2);
-  box-shadow: 1px 1px 2px 2px rgba($footer-background-color, 0.5);
+  box-shadow: 0px 2px 4px 1px rgba(darken($background-color, 20%), 0.4);
   padding: 20px;
   margin-bottom: 30px;
   margin-top: 30px;