restored the typing text on the home page

src/App.css

@@ -55,7 +55,99 @@ p {
 }
 
 /* Home page specific styles */
+.home-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+    /* Takes up most of the viewport */
+    text-align: center;
+    gap: 30px;
+    padding: 20px;
+}
+
+.hero-profile-container {
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    /* Subtle backing */
+    border-radius: 50%;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.hero-profile-img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+    /* Circle */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    display: block;
+}
+
+.hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    color: white;
+    max-width: 700px;
+}
+
+.hero-name {
+    font-size: clamp(40px, 6vw, 80px);
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    color: white;
+    margin: 0;
+    letter-spacing: -0.5px;
+    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.hero-bio {
+    font-size: clamp(16px, 1.5vw, 20px);
+    /* font-family: 'Roboto', sans-serif;  - inherent*/
+    font-weight: 300;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 600px;
+}
+
+.hero-socials {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.hero-social-link {
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 16px;
+    font-weight: 500;
+    padding: 10px 24px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 50px;
+    /* Pill shape */
+    background: rgba(255, 255, 255, 0.05);
+    transition: all 0.3s ease;
+    backdrop-filter: blur(5px);
+}
+
+.hero-social-link:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* Legacy Home styles (keep if referenced elsewhere, otherwise minimal) */
 .hero-card {
+    /* Kept for backward compat if needed, but redesigned home won't use it */
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.1);
@@ -318,6 +410,10 @@ p {
         width: 100%;
         padding: 20px;
     }
+
+    .home-container {
+        padding-top: 50px;
+    }
 }
 
 @media (max-width: 768px) {
@@ -329,6 +425,11 @@ p {
     .about-title {
         margin-bottom: 20px;
     }
+
+    .home-container {
+        min-height: 70vh;
+        gap: 20px;
+    }
 }
 
 /* Projects Page Styles */

src/pages/Home.tsx

@@ -1,25 +1,6 @@
+import { motion } from "framer-motion";
 import TypingText from "../components/animatedTyping";
-import FullPageImage from "../components/fullPageImage";
-import { delay, motion } from "framer-motion";
 
-// Animation and typing timing configuration
-const ANIMATION_TIMINGS = {
-    // Animation delays (in seconds)
-    elementIn: 2.0, // When elements fade in
-
-    // Typing speeds (in milliseconds per character)
-    welcomeTextSpeed: 45,
-    nameSpeed: 120,
-
-    // Typing delays (in milliseconds) - time before text starts typing
-    welcomeTextDelay: 2000,
-    nameDelay: 2000,
-
-    // Test items animation (slides in from bottom)
-    testItemsStartDelay: 3.5, // When to start the first test item animation (in seconds)
-    testItemStaggerDelay: 0.2, // Delay between each test item (in seconds)
-    testItemAnimationDuration: 0.5, // Duration of each item's slide-in animation
-};
 const welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!
 
 Here you will find some of my projects, skills, contact information and any information I couldn't fit into my resume.
@@ -37,48 +18,55 @@ const CONTACT_LINKS = [
 export default function Home() {
     return (
         <div className="mainContentBlock">
-            <div style={{ height: "30px" }}></div>
+            <div className="home-container">
-            <div className="hero-card">
+                <motion.div
-                <div className="horizontalContentItem" style={{ maxHeight: "100vh", justifyContent: "center" }}>
+                    className="hero-profile-container"
-                    <motion.div
+                    initial={{ opacity: 0, scale: 0.8 }}
-                        className="flexContainer"
+                    animate={{ opacity: 1, scale: 1 }}
-                        initial={{ opacity: 0 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
-                        animate={{ opacity: 1 }}
-                        transition={{ duration: ANIMATION_TIMINGS.elementIn, ease: "easeOut" }}
-                    >
-                        <img
-                            src="/1647091917916.png"
-                            alt="portfolio"
-                            className="portrait-img"
-                        />
-                    </motion.div>
-                    <div
-                        className="welcome-text flexContainer"
-                    >
-                        <TypingText text={welcomeText} msPerChar={ANIMATION_TIMINGS.welcomeTextSpeed} delayMs={ANIMATION_TIMINGS.welcomeTextDelay} />
-                    </div>
-                </div>
-                <div
-                    className="verticalContentItem"
                 >
-                    <div className="name-text flexContainer">
+                    <img
-                        <TypingText text="Sasha Bayda" msPerChar={ANIMATION_TIMINGS.nameSpeed} delayMs={ANIMATION_TIMINGS.nameDelay} textAlign="center" />
+                        src="/1647091917916.png"
+                        alt="Sasha Bayda"
+                        className="hero-profile-img"
+                    />
+                </motion.div>
+
+                <div className="hero-content">
+                    <div className="hero-name">
+                        <TypingText
+                            text="Sasha Bayda"
+                            msPerChar={120}
+                            delayMs={100}
+                            textAlign="center"
+                        />
                     </div>
 
-                    <div className="horizontalContentItem skills-list">
+                    <motion.p
+                        className="hero-bio"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 1, delay: 2.0 }}
+                    >
+                        {welcomeText}
+                    </motion.p>
+
+                    <div className="hero-socials">
                         {CONTACT_LINKS.map((link, index) => (
                             <motion.a
                                 key={index}
                                 href={link.url}
-                                className="contact-link"
+                                className="hero-social-link"
-                                initial={{ y: 50, opacity: 0 }}
+                                initial={{ opacity: 0, y: 20 }}
-                                animate={{ y: 0, opacity: 1 }}
+                                animate={{ opacity: 1, y: 0 }}
                                 transition={{
-                                    duration: ANIMATION_TIMINGS.testItemAnimationDuration,
+                                    duration: 0.5,
-                                    ease: "easeOut",
+                                    delay: 2.5 + (index * 0.1),
-                                    delay: ANIMATION_TIMINGS.testItemsStartDelay + (index * ANIMATION_TIMINGS.testItemStaggerDelay)
+                                    ease: "easeOut"
                                 }}
-                            >{link.label}</motion.a>
+                            >
+                                {link.label}
+                            </motion.a>
                         ))}
                     </div>
                 </div>