diff --git a/public/beszel.png b/public/beszel.png new file mode 100644 index 0000000..02a43d7 Binary files /dev/null and b/public/beszel.png differ diff --git a/public/fampic.jpg b/public/fampic.jpg new file mode 100644 index 0000000..198e57c Binary files /dev/null and b/public/fampic.jpg differ diff --git a/public/gangpic.jpg b/public/gangpic.jpg new file mode 100644 index 0000000..b785361 Binary files /dev/null and b/public/gangpic.jpg differ diff --git a/public/janepic.jpg b/public/janepic.jpg new file mode 100644 index 0000000..a6e4d9c Binary files /dev/null and b/public/janepic.jpg differ diff --git a/src/App.css b/src/App.css index 9ab18dd..17127ce 100644 --- a/src/App.css +++ b/src/App.css @@ -357,26 +357,31 @@ p { } .project-card { - background: rgba(255, 255, 255, 0.07); - backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 16px; + background: rgba(255, 255, 255, 0.08); + /* Slightly lighter base */ + backdrop-filter: blur(16px); + /* Increased blur */ + border: 1px solid rgba(255, 255, 255, 0.2); + /* Softer border */ + border-radius: 24px; + /* More rounded */ padding: 25px; display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); - /* Bouncy feel */ height: 100%; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + /* Softer shadow */ position: relative; overflow: hidden; } .project-card:hover { - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.15); transform: translateY(-8px) scale(1.02); - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); - border-color: rgba(255, 255, 255, 0.3); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + /* Deeper but soft shadow */ + border-color: rgba(255, 255, 255, 0.4); } .project-card::before { diff --git a/src/App.tsx b/src/App.tsx index a756f1c..03f99b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import Home from './pages/Home'; import About from './pages/About'; import WorkExperience from './pages/WorkExperience'; import Projects from './pages/Projects'; +import Skills from './pages/Skills'; import Contact from './pages/Contact'; function ScrollToTop() { @@ -39,6 +40,7 @@ function App() { } /> } /> } /> + } /> } />
diff --git a/src/components/BioSection.tsx b/src/components/BioSection.tsx new file mode 100644 index 0000000..64c66b3 --- /dev/null +++ b/src/components/BioSection.tsx @@ -0,0 +1,100 @@ +import { motion, AnimatePresence } from "framer-motion"; +import { useState, useEffect } from "react"; + +interface BioSectionProps { + imageSrc: string; + imageAlt: string; + text: string; + reversed?: boolean; +} + +export default function BioSection({ imageSrc, imageAlt, text, reversed = false }: BioSectionProps) { + const images = imageSrc.split(',').map(src => src.trim()).filter(src => src.length > 0); + const [currentIndex, setCurrentIndex] = useState(0); + const [prevIndex, setPrevIndex] = useState(0); + const [direction, setDirection] = useState(1); // 1 for right, -1 for left (though we always slide right here) + + useEffect(() => { + if (images.length <= 1) return; + + const interval = setInterval(() => { + setPrevIndex(currentIndex); + setCurrentIndex((prev) => (prev + 1) % images.length); + }, 6000); + + return () => clearInterval(interval); + }, [images.length, currentIndex]); + + const slideVariants = { + enter: { + x: "-100%", + opacity: 1 + }, + center: { + x: 0, + opacity: 1 + }, + exit: { + x: "100%", + opacity: 1 + } + }; + + return ( +
+ + + + + + + +

+ {text} +

+ +
+ ); +} diff --git a/src/components/ParticlesBackground.tsx b/src/components/ParticlesBackground.tsx index 2e423d3..b5e2da6 100644 --- a/src/components/ParticlesBackground.tsx +++ b/src/components/ParticlesBackground.tsx @@ -35,31 +35,6 @@ const ParticlesBackground: React.FC = () => { this.x += this.speedX; this.y += this.speedY; - // update speedX - let speedXRng = Math.random(); - if (speedXRng > 0.75) { - this.speedX += Math.random() * 0.1; - } else if (speedXRng < 0.25) { - this.speedX -= Math.random() * 0.1; - } - if (this.speedX > 1) { - this.speedX = 1; - } else if (this.speedX < -1) { - this.speedX = -1; - } - - // update speedY - let speedYRng = Math.random(); - if (speedYRng > 0.75) { - this.speedY += Math.random() * 0.1; - } else if (speedYRng < 0.25) { - this.speedY -= Math.random() * 0.1; - } - if (this.speedY > 1) { - this.speedY = 1; - } else if (this.speedY < -1) { - this.speedY = -1; - } //size let sizeRng = Math.random(); diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx new file mode 100644 index 0000000..ca8f926 --- /dev/null +++ b/src/components/ProjectCard.tsx @@ -0,0 +1,62 @@ +import { motion, Variants } from "framer-motion"; + +export interface Project { + id: number; + title: string; + description: string; + techStack: string[]; + image: string; + links: { + demo?: string; + repo?: string; + }; +} + +interface ProjectCardProps { + project: Project; + variants: Variants; +} + +export default function ProjectCard({ project, variants }: ProjectCardProps) { + return ( + +
+ {project.title} +
+
+

{project.title}

+
+ +
+ {project.techStack.map(tech => ( + {tech} + ))} +
+ +

+ {project.description} +

+ +
+ {project.links.demo && ( + + Live Demo → + + )} + {project.links.repo && ( + + GitHub ↗ + + )} +
+ + ); +} diff --git a/src/components/floatingHeader.tsx b/src/components/floatingHeader.tsx index 60f5eed..131654a 100644 --- a/src/components/floatingHeader.tsx +++ b/src/components/floatingHeader.tsx @@ -6,32 +6,38 @@ export default function FloatingHeader() { return (
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 8f22df2..e165aa6 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -20,7 +20,11 @@ const ANIMATION_TIMINGS = { 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 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" }, diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx index 2dfbd47..cf1feac 100644 --- a/src/pages/Projects.tsx +++ b/src/pages/Projects.tsx @@ -1,19 +1,8 @@ import { motion, Variants } from "framer-motion"; import FullPageImage from "../components/fullPageImage"; +import ProjectCard, { Project } from "../components/ProjectCard"; -interface Project { - id: number; - title: string; - description: string; - techStack: string[]; - image: string; // Ensure these images exist in public/ or use placeholders - links: { - demo?: string; - repo?: string; - }; -} - -const PROJECTS: Project[] = [ +const FEATURED_PROJECTS: Project[] = [ { id: 1, title: "Digital Resume", @@ -27,6 +16,29 @@ const PROJECTS: Project[] = [ }, ]; +const SIDEQUESTS: Project[] = [ + { + id: 101, // Different ID range for sidequests + title: "Experimental Shader", + description: "A WebGL shader experiment creating procedural textures and animations. Exploring noise functions and light interactions.", + techStack: ["WebGL", "GLSL", "React Three Fiber"], + image: "https://placehold.co/600x400/1a1a1a/cccccc?text=Shader+Experiment", // Placeholder image + links: { + repo: "https://github.com/Bayda77/sidequests", // Placeholder link + } + }, + { + id: 102, + title: "CLI Tool", + description: "A command-line utility for automating daily workflows and file management tasks.", + techStack: ["Rust", "Clap"], + image: "https://placehold.co/600x400/2a2a2a/dddddd?text=CLI+Tool", // Placeholder + links: { + repo: "https://github.com/Bayda77/cli-tools" + } + } +]; + const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { @@ -55,63 +67,50 @@ export default function Projects() {
- - Featured Projects - - + {/* Featured Projects Section */} - {PROJECTS.map((project) => ( - -
- {project.title} -
-
-

{project.title}

-
+ + Featured Projects + -
- {project.techStack.map(tech => ( - {tech} - ))} -
+
+ {FEATURED_PROJECTS.map((project) => ( + + ))} +
+ -

- {project.description} -

-
- {project.links.demo && ( - - Live Demo → - - )} - {project.links.repo && ( - - GitHub ↗ - - )} -
- - ))} + {/* Sidequests Section */} + + + Sidequests + + +
+ {SIDEQUESTS.map((project) => ( + + ))} +
diff --git a/src/pages/Skills.tsx b/src/pages/Skills.tsx new file mode 100644 index 0000000..4cc5b94 --- /dev/null +++ b/src/pages/Skills.tsx @@ -0,0 +1,197 @@ +import { motion, Variants } from "framer-motion"; + +interface SkillCategory { + category: string; + skills: string[]; +} + +interface ProfessionalSkill { + skill: string; + description: string; +} + +const TECHNICAL_SKILLS: SkillCategory[] = [ + { + category: "Languages", + skills: ["JavaScript (ES6+)", "TypeScript", "Python", "Java", "C", "C++", "Lua", "HTML", "CSS", "SQL"] + }, + { + category: "Frameworks/Libraries", + skills: ["React", "Express.js", "Django REST Framework", "AWS Lambda"] + }, + { + category: "Databases", + skills: ["PostgreSQL (SQL Based)", "CouchDB (No-SQL Based)"] + }, + { + category: "DevOps & Tools", + skills: ["Docker", "CircleCI", "Git (CLI)", "Postman", "AWS CDK", "Linux CLI"] + }, + { + category: "AWS Technologies", + skills: ["S3", "Cloudfront", "Route 53", "API Gateway", "Lambda", "RDS", "VPC", "ECS", "SQS"] + }, + { + category: "Concepts", + skills: ["RESTful APIs", "Agile/Scrum", "MVC Architecture", "Cloud Deployment", "Responsive Design"] + } +]; + +const PROFESSIONAL_SKILLS: ProfessionalSkill[] = [ + { + skill: "Customer Service & Sales", + description: "Clear communication and coordination with customers and clients" + }, + { + skill: "Technical Support", + description: "Diagnosing and resolving hardware/software issues across all major devices." + }, + { + skill: "Web Development", + description: "WordPress plugin development, front-end design, and site optimization." + }, + { + skill: "Scripting & Programming", + description: "JavaScript, Python, HTML/CSS, Git, and NPM package management." + }, + { + skill: "Collaboration & Problem-Solving", + description: "Working effectively with diverse teams to meet deadlines and ensure quality results." + }, + { + skill: "Adaptability", + description: "Quickly learning new tools, technologies, and processes in dynamic work environments." + } +]; + +const containerVariants: Variants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2 + } + } +}; + +const itemVariants: Variants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { type: "spring", stiffness: 100 } + } +}; + +export default function Skills() { + return ( +
+
+ +
+ + Skills + + + My technical toolkit and professional competencies. + +
+ + +

+ Technical Skills +

+
+ {TECHNICAL_SKILLS.map((category) => ( + +

{category.category}

+
+ {category.skills.map((skill) => ( + + {skill} + + ))} +
+ + ))} +
+ + + +

+ Professional Skills +

+
+ {PROFESSIONAL_SKILLS.map((skill) => ( + +

{skill.skill}

+

+ {skill.description} +

+ + ))} +
+ + +
+ ); +}