Commit Major Implementation now that gitea is setup

2025-12-30 16:58:18 -06:00
parent 23589efb3e
commit 0d7eb30ffd
19 changed files with 1953 additions and 31 deletions
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -0,0 +1,84 @@
+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. 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 CONTACT_LINKS = [
+    { label: "Email", url: "mailto:sasha.bayda@outlook.com" },
+    { label: "Phone", url: "tel:+13069217145" },
+    { label: "LinkedIn", url: "https://www.linkedin.com/in/sasha-bayda/" },
+    { label: "GitHub", url: "https://github.com/Bayda77" },
+    { label: "Portfolio", url: "https://portfolio.sashabayda.ca" },
+];
+
+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"
+                        initial={{ opacity: 0 }}
+                        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">
+                        <TypingText text="Sasha Bayda" msPerChar={ANIMATION_TIMINGS.nameSpeed} delayMs={ANIMATION_TIMINGS.nameDelay} textAlign="center" />
+                    </div>
+
+                    <div className="horizontalContentItem skills-list">
+                        {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 }}
+                                transition={{
+                                    duration: ANIMATION_TIMINGS.testItemAnimationDuration,
+                                    ease: "easeOut",
+                                    delay: ANIMATION_TIMINGS.testItemsStartDelay + (index * ANIMATION_TIMINGS.testItemStaggerDelay)
+                                }}
+                            >{link.label}</motion.a>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}