Bayda77/digital-resume-FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Skills page, BioSection, ProjectCard, and new image assets, while refactoring the deployment workflow to build Docker images directly on my remote server.

Browse Source
This commit is contained in:
Bayda77
2026-01-07 16:36:24 -06:00
parent 563787c8cb
commit c2a8aa39f9
15 changed files with 604 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/Home.tsx
View File

@@ -1,26 +1,11 @@
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
const welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!
// Typing speeds (in milliseconds per character)
welcomeTextSpeed: 45,
nameSpeed: 120,
Here you will find some of my projects, skills, contact information and any information I couldn't fit into my resume.
// 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!";
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" },
@@ -33,48 +18,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"
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="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" }}
>
<div className="name-text flexContainer">
<TypingText text="Sasha Bayda" msPerChar={ANIMATION_TIMINGS.nameSpeed} delayMs={ANIMATION_TIMINGS.nameDelay} textAlign="center" />
<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>
<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"
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: 2.5 + (index * 0.1),
ease: "easeOut"
}}
>{link.label}</motion.a>
>
{link.label}
</motion.a>
))}
</div>
</div>