Bayda77
efc68a4486
- Removed App.css and migrated styles to individual component and page-specific CSS files. - Created base styles in base.css for layout utilities and common elements. - Added component-specific styles in cards.css, header.css, and other relevant files. - Updated imports in App.tsx and other components to reflect new CSS structure. - Enhanced responsiveness and visual consistency across various components and pages.
91 lines
4.1 KiB
TypeScript
91 lines
4.1 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import VisitedMap from "../components/VisitedMap";
|
|
import BioSection from "../components/BioSection";
|
|
import "../styles/pages/about.css";
|
|
|
|
const ABOUT_TEXT = "Hi! I'm Sasha Bayda, a passionate developer focused on creating beautiful and functional web experiences. With a background in computer science and a keen eye for design, I strive to bridge the gap between technology and user-centric solutions. When I'm not coding, you can find me exploring the outdoors, experimenting with new recipes, or indulging in photography. Feel free to explore my projects and get in touch if you'd like to collaborate or learn more about my work!" + "\n\n" + "Thank you for visiting my digital resume site. I look forward to connecting with you!";
|
|
|
|
const JANE_TEXT = "Outside of work, I enjoy spending time with my girlfriend, family and friends. Doing things such as cooking, watching shows or movies, gaming, snowboarding, or just relaxing with a glass of something warm.";
|
|
|
|
const HOMELAB_TEXT = "I love hosting my own applications and learning new technologies. Right now I host my own gitea server to host my own git repositories and host my own 'runners', immich to host my own photo gallery, and a beszel to monitor all of my applications with a dashboards, graphs and webhook alerts."
|
|
|
|
|
|
const VISITED_CITIES = [
|
|
"Melfort",
|
|
"Star City",
|
|
"Saskatoon",
|
|
"Regina",
|
|
"Winnipeg",
|
|
"Vancouver",
|
|
"Edmonton",
|
|
"Calgary",
|
|
"Kyiv",
|
|
"Torhovytsy",
|
|
"Lviv",
|
|
"Puerto Vallarta",
|
|
"Havana",
|
|
"Cancun",
|
|
"Waikiki Beach"
|
|
];
|
|
|
|
export default function About() {
|
|
return (
|
|
<div className="mainContentBlock" style={{ minWidth: "66vw", display: "flex", justifyContent: "center" }}>
|
|
<motion.div
|
|
className="about-container"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<div style={{ width: "100%", maxWidth: "1200px" }}>
|
|
<motion.h1
|
|
className="about-title"
|
|
initial={{ y: -20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.2, duration: 0.6 }}
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
About Me
|
|
</motion.h1>
|
|
|
|
<BioSection
|
|
imageSrc="/dapperSasha.jpg"
|
|
imageAlt="profile"
|
|
text={ABOUT_TEXT}
|
|
/>
|
|
|
|
|
|
<motion.div
|
|
style={{ marginTop: "40px", width: "100%" }}
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.8, duration: 0.6 }}
|
|
>
|
|
<h2 style={{ textAlign: "center", fontSize: "1.5rem", marginBottom: "10px", color: "rgba(255,255,255,0.9)" }}>Places I've Visited</h2>
|
|
<p style={{ textAlign: "center", marginBottom: "20px", color: "rgba(255,255,255,0.7)", fontSize: "0.9rem" }}>
|
|
Some of the More Interesting Places I've visited, I hope to one day fill this map with more cool spots!
|
|
</p>
|
|
<VisitedMap places={VISITED_CITIES} />
|
|
</motion.div>
|
|
<div style={{ marginTop: "40px" }}>
|
|
<BioSection
|
|
imageSrc="/janepic.jpg, fampic.jpg, gangpic.jpg"
|
|
imageAlt="profile"
|
|
text={JANE_TEXT}
|
|
reversed={true}
|
|
/>
|
|
</div>
|
|
<div style={{ marginTop: "40px" }}>
|
|
<BioSection
|
|
imageSrc="/beszel.png"
|
|
imageAlt="profile"
|
|
text={HOMELAB_TEXT}
|
|
reversed={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|