91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import TypingText from "../components/animatedTyping";
|
|
import { useState } from "react";
|
|
import "../styles/pages/home.css";
|
|
|
|
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 links found below!`;
|
|
|
|
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" },
|
|
{ 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() {
|
|
const [displayedText, setDisplayedText] = useState(welcomeText);
|
|
|
|
return (
|
|
<div className="mainContentBlock">
|
|
<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">
|
|
<div className="hero-name">
|
|
<TypingText
|
|
text="Sasha Bayda"
|
|
msPerChar={120}
|
|
delayMs={100}
|
|
textAlign="center"
|
|
/>
|
|
</div>
|
|
|
|
<motion.p
|
|
className="hero-bio"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 2.0 }}
|
|
>
|
|
{displayedText}
|
|
</motion.p>
|
|
|
|
<div className="hero-socials">
|
|
{CONTACT_LINKS.map((link, index) => (
|
|
<motion.a
|
|
key={index}
|
|
href={link.url}
|
|
className="hero-social-link"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: 2.5 + (index * 0.1),
|
|
ease: "easeOut"
|
|
}}
|
|
onMouseEnter={() => setDisplayedText(HOVER_TEXTS[link.label] || welcomeText)}
|
|
onMouseLeave={() => setDisplayedText(welcomeText)}
|
|
>
|
|
{link.label}
|
|
</motion.a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|