Merge pull request #19 from RileyManda/f/contact

Added contact floating button

src/App.css

@@ -407,3 +407,28 @@
 .experience-icons {
   font-size: 30px;
 }
+
+.contact-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.fab-button {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  font-size: 16px;
+  background-color: var(--social-icons-color);
+  opacity: 0.9;
+}
+
+.fab-button:hover {
+  background-color: var(--brand);
+}

src/components/Contact.jsx

@@ -1,9 +1,14 @@
+import ContactButton from './ContactButton';
 import Footer from './Footer';
 const Contact = () => {
     return (
-        <div className="footer-container">
-            <Footer />
+        <div>
+        <ContactButton />
+            <div className="footer-container">
+                <Footer />
+            </div>
         </div>
+
     );
 };
 

src/components/ContactButton.jsx

@@ -0,0 +1,18 @@
+import Button from 'react-bootstrap/Button'
+import { MdEmail } from "react-icons/md";
+const ContactButton = () => {
+    const emailAddress = '[email protected]';
+    const handleClick = () => {
+        window.open(`mailto:${emailAddress}`, '_blank');
+    };
+    return (
+        <div className="contact-button">
+            <Button variant="primary" className="fab-button" onClick={handleClick}>
+                <MdEmail style={{ width: '50px', height: '50px' }} />
+            </Button>
+        </div>
+    );
+}
+
+
+export default ContactButton;