removed the contact page and reworked the home page, along with shuffling the header around

src/App.css

@@ -113,6 +113,7 @@ p {
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.9);
     max-width: 600px;
+    min-height: 160px;
 }
 
 .hero-socials {
@@ -608,102 +609,3 @@ p {
     background: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
 }
-
-/* Contact Page Styles */
-.contact-wrapper {
-    position: relative;
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-}
-
-.contact-background-placeholder {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    z-index: -1;
-}
-
-.contact-main-block {
-    min-width: 66vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.contact-card {
-    width: 100%;
-    max-width: 600px;
-    /* Reduced from 800px to be tighter */
-    padding: 40px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    background-color: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(5px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.contact-title {
-    font-size: clamp(40px, 5vw, 60px);
-    font-family: roboto, sans-serif;
-    color: white;
-    text-align: center;
-    margin-bottom: 40px;
-    margin-top: 0;
-}
-
-.contact-content {
-    font-size: 1.1rem;
-    font-family: roboto, sans-serif;
-    color: rgba(255, 255, 255, 0.9);
-    text-align: center;
-    width: 100%;
-}
-
-.contact-intro {
-    margin-bottom: 40px;
-}
-
-.contact-links-container {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-    width: 100%;
-}
-
-.contact-link-item {
-    padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 15px;
-    width: 100%;
-    max-width: 500px;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    cursor: pointer;
-}
-
-.contact-link-text {
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.contact-label {
-    opacity: 0.7;
-    margin-right: 10px;
-}
-
-.contact-value {
-    color: white;
-    text-decoration: none;
-    font-weight: 500;
-}

src/App.tsx

@@ -8,7 +8,7 @@ import About from './pages/About';
 import WorkExperience from './pages/WorkExperience';
 import Projects from './pages/Projects';
 import Skills from './pages/Skills';
-import Contact from './pages/Contact';
+
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -41,7 +41,7 @@ function App() {
             <Route path="/work-experience" element={<WorkExperience />} />
             <Route path="/projects" element={<Projects />} />
             <Route path="/skills" element={<Skills />} />
-            <Route path="/contact" element={<Contact />} />
+
           </Routes>
           <div>
             <div style={{ height: "20px" }}></div>

src/components/floatingHeader.tsx

@@ -12,12 +12,6 @@ export default function FloatingHeader() {
                 >
                     Home
                 </Link>
-                <Link
-                    to="/work-experience"
-                    className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
-                >
-                    Work Experience
-                </Link>
                 <Link
                     to="/skills"
                     className={`nav-link ${location.pathname === "/skills" ? "active" : ""}`}
@@ -25,10 +19,10 @@ export default function FloatingHeader() {
                     Skills
                 </Link>
                 <Link
-                    to="/about"
+                    to="/work-experience"
-                    className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
+                    className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
                 >
-                    About Me
+                    Work Experience
                 </Link>
                 <Link
                     to="/projects"
@@ -37,11 +31,12 @@ export default function FloatingHeader() {
                     Projects and Sidequests
                 </Link>
                 <Link
-                    to="/contact"
+                    to="/about"
-                    className={`nav-link ${location.pathname === "/contact" ? "active" : ""}`}
+                    className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
                 >
-                    Contact
+                    About Me
                 </Link>
+
             </nav>
         </header>
     );

src/pages/Contact.tsx

@@ -1,75 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function Contact() {
-    return (
-        <div className="contact-wrapper">
-
-            <div className="mainContentBlock contact-main-block">
-                <motion.div
-                    className="contact-card"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.8 }}
-                >
-                    <motion.h1
-                        className="contact-title"
-                        initial={{ y: -20, opacity: 0 }}
-                        animate={{ y: 0, opacity: 1 }}
-                        transition={{ delay: 0.2, duration: 0.6 }}
-                    >
-                        Contact Me
-                    </motion.h1>
-
-                    <motion.div
-                        className="contact-content"
-                        initial={{ y: 20, opacity: 0 }}
-                        animate={{ y: 0, opacity: 1 }}
-                        transition={{ delay: 0.4, duration: 0.6 }}
-                    >
-                        <div className="contact-intro">
-                            <p>
-                                I would love to hear from you! Feel free to reach out through any of these channels:
-                            </p>
-                        </div>
-
-                        <div className="contact-links-container">
-                            <motion.div
-                                className="contact-link-item"
-                                whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.15)" }}
-                            >
-                                <p className="contact-link-text">
-                                    <span className="contact-label">Email:</span>
-                                    <a href="mailto:sasha.bayda@outlook.com" className="contact-value">
-                                        sasha.bayda@outlook.com
-                                    </a>
-                                </p>
-                            </motion.div>
-
-                            <motion.div
-                                className="contact-link-item"
-                                whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.15)" }}
-                            >
-                                <p className="contact-link-text">
-                                    <span className="contact-label">Phone:</span>
-                                    <span className="contact-value">(306) 921-7145</span>
-                                </p>
-                            </motion.div>
-
-                            <motion.div
-                                className="contact-link-item"
-                                whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.15)" }}
-                            >
-                                <p className="contact-link-text">
-                                    <span className="contact-label">LinkedIn:</span>
-                                    <a href="https://www.linkedin.com/in/sasha-bayda/" target="_blank" rel="noopener noreferrer" className="contact-value">
-                                        linkedin.com/in/sasha-bayda
-                                    </a>
-                                </p>
-                            </motion.div>
-                        </div>
-                    </motion.div>
-                </motion.div>
-            </div>
-        </div>
-    );
-}

src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 import TypingText from "../components/animatedTyping";
+import { useState } from "react";
 
 const welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!
 
@@ -7,6 +8,14 @@ Here you will find some of my projects, skills, contact information and any info
 
 Feel free to explore and learn more about me and if something isn't answered, don't hesitate to reach out via the contact page!`;
 
+const HOVER_TEXTS: { [key: string]: string } = {
+    "Email": "Drop me a line! I'm always open to new opportunities and interesting conversations.",
+    "Phone": "Prefer a mix of voice? Give me a call or text.",
+    "LinkedIn": "Let's connect professionally. View my full experience and network.",
+    "GitHub": "Dive into my code. See what I'm building and how I solve problems.",
+    "Portfolio": "See more of my work in action on my portfolio site."
+};
+
 const CONTACT_LINKS = [
     { label: "Email", url: "mailto:sasha.bayda@outlook.com" },
     { label: "Phone", url: "tel:+13069217145" },
@@ -16,6 +25,8 @@ const CONTACT_LINKS = [
 ];
 
 export default function Home() {
+    const [displayedText, setDisplayedText] = useState(welcomeText);
+
     return (
         <div className="mainContentBlock">
             <div className="home-container">
@@ -48,7 +59,7 @@ export default function Home() {
                         animate={{ opacity: 1 }}
                         transition={{ duration: 1, delay: 2.0 }}
                     >
-                        {welcomeText}
+                        {displayedText}
                     </motion.p>
 
                     <div className="hero-socials">
@@ -64,6 +75,8 @@ export default function Home() {
                                     delay: 2.5 + (index * 0.1),
                                     ease: "easeOut"
                                 }}
+                                onMouseEnter={() => setDisplayedText(HOVER_TEXTS[link.label] || welcomeText)}
+                                onMouseLeave={() => setDisplayedText(welcomeText)}
                             >
                                 {link.label}
                             </motion.a>