Commit Major Implementation now that gitea is setup

src/pages/About.tsx

@@ -0,0 +1,86 @@
+import { motion } from "framer-motion";
+import VisitedMap from "../components/VisitedMap";
+
+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 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>
+
+                    <div className="about-content">
+                        <motion.div
+                            className="about-image-container"
+                            initial={{ x: -30, opacity: 0 }}
+                            animate={{ x: 0, opacity: 1 }}
+                            transition={{ delay: 0.4, duration: 0.6 }}
+                        >
+                            <img
+                                src="/dapperSasha.jpg"
+                                alt="profile"
+                                className="about-image"
+                            />
+                        </motion.div>
+
+                        <motion.div
+                            className="about-text-container"
+                            initial={{ x: 30, opacity: 0 }}
+                            animate={{ x: 0, opacity: 1 }}
+                            transition={{ delay: 0.6, duration: 0.6 }}
+                        >
+                            <p className="about-text">
+                                {ABOUT_TEXT}
+                            </p>
+                        </motion.div>
+                    </div>
+
+                    <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)" }}>My Hot Chocolate Journey</h2>
+                        <p style={{ textAlign: "center", marginBottom: "20px", color: "rgba(255,255,255,0.7)", fontSize: "0.9rem" }}>
+                            Places across the world where I've enjoyed a hot chocolate ☕
+                        </p>
+                        <VisitedMap places={VISITED_CITIES} />
+                    </motion.div>
+                </div>
+            </motion.div>
+        </div>
+    );
+}