From 4fea41af288fc70a9f0f07ba2665d54d00b5ca4a Mon Sep 17 00:00:00 2001
From: Bayda77 <sasha.bayda@outlook.com>
Date: Wed, 7 Jan 2026 16:21:48 -0600
Subject: [PATCH] refined the home page, not sure if I like it yet

---
 src/App.css        | 101 +++++++++++++++++++++++++++++++++++++++++++++
 src/pages/Home.tsx |  93 ++++++++++++++++++-----------------------
 2 files changed, 141 insertions(+), 53 deletions(-)

diff --git a/src/App.css b/src/App.css
index 17127ce..fa0b6da 100644
--- a/src/App.css
+++ b/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 */
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index e165aa6..f9a11f0 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,25 +1,5 @@
-import TypingText from "../components/animatedTyping";
-import FullPageImage from "../components/fullPageImage";
-import { delay, motion } from "framer-motion";
+import { 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 +17,55 @@ const CONTACT_LINKS = [
 export default function Home() {
     return (
         <div className="mainContentBlock">
-            <div style={{ height: "30px" }}></div>
-            <div className="hero-card">
-                <div className="horizontalContentItem" style={{ maxHeight: "100vh", justifyContent: "center" }}>
-                    <motion.div
-                        className="flexContainer"
+            <div className="home-container">
+                <motion.div
+                    className="hero-profile-container"
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
+                >
+                    <img
+                        src="/1647091917916.png"
+                        alt="Sasha Bayda"
+                        className="hero-profile-img"
+                    />
+                </motion.div>
+
+                <div className="hero-content">
+                    <motion.h1
+                        className="hero-name"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
+                    >
+                        Sasha Bayda
+                    </motion.h1>
+
+                    <motion.p
+                        className="hero-bio"
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
-                        transition={{ duration: ANIMATION_TIMINGS.elementIn, ease: "easeOut" }}
+                        transition={{ duration: 1, delay: 0.6 }}
                     >
-                        <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">
-                        <TypingText text="Sasha Bayda" msPerChar={ANIMATION_TIMINGS.nameSpeed} delayMs={ANIMATION_TIMINGS.nameDelay} textAlign="center" />
-                    </div>
+                        {welcomeText}
+                    </motion.p>
 
-                    <div className="horizontalContentItem skills-list">
+                    <div className="hero-socials">
                         {CONTACT_LINKS.map((link, index) => (
                             <motion.a
                                 key={index}
                                 href={link.url}
-                                className="contact-link"
-                                initial={{ y: 50, opacity: 0 }}
-                                animate={{ y: 0, opacity: 1 }}
+                                className="hero-social-link"
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
                                 transition={{
-                                    duration: ANIMATION_TIMINGS.testItemAnimationDuration,
-                                    ease: "easeOut",
-                                    delay: ANIMATION_TIMINGS.testItemsStartDelay + (index * ANIMATION_TIMINGS.testItemStaggerDelay)
+                                    duration: 0.5,
+                                    delay: 1.0 + (index * 0.1),
+                                    ease: "easeOut"
                                 }}
-                            >{link.label}</motion.a>
+                            >
+                                {link.label}
+                            </motion.a>
                         ))}
                     </div>
                 </div>