Commit Basics

2025-12-30 16:57:21 -06:00
parent 23589efb3e
commit 207df341f1
19 changed files with 1953 additions and 31 deletions
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -0,0 +1,126 @@
+import { motion, Variants } from "framer-motion";
+import FullPageImage from "../components/fullPageImage";
+
+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[] = [
+    {
+        id: 1,
+        title: "Digital Resume",
+        description: "A fully responsive, glassmorphic portfolio site built to showcase my skills and experience. Features animated page transitions, typing effects, and a dynamic map component.",
+        techStack: ["React", "TypeScript", "Framer Motion", "Vite"],
+        image: "/digitCode.jpg",
+        links: {
+            repo: "https://github.com/Bayda77/resume-site",
+            demo: "https://portfolio.sashabayda.ca"
+        }
+    },
+];
+
+const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.15
+        }
+    }
+};
+
+const cardVariants: Variants = {
+    hidden: { y: 50, opacity: 0 },
+    visible: {
+        y: 0,
+        opacity: 1,
+        transition: {
+            type: "spring",
+            stiffness: 100,
+            damping: 12
+        }
+    }
+};
+
+export default function Projects() {
+    return (
+        <div style={{ position: "relative", width: "100%", minHeight: "100vh" }}>
+            <div className="mainContentBlock" style={{ width: "100%", minWidth: "100vw", maxWidth: "100vw", paddingTop: "20px", paddingBottom: "10px", boxSizing: "border-box", display: "flex", justifyContent: "center", position: "relative", zIndex: 1 }}>
+                <div className="projects-container">
+                    <motion.h1
+                        className="projects-title"
+                        initial={{ y: -30, opacity: 0 }}
+                        animate={{ y: 0, opacity: 1 }}
+                        transition={{ duration: 0.8, ease: "easeOut" }}
+                    >
+                        Featured Projects
+                    </motion.h1>
+
+                    <motion.div
+                        className="projects-grid"
+                        variants={containerVariants}
+                        initial="hidden"
+                        animate="visible"
+                    >
+                        {PROJECTS.map((project) => (
+                            <motion.div
+                                key={project.id}
+                                className="project-card"
+                                variants={cardVariants}
+                                whileHover={{ y: -10, transition: { duration: 0.2 } }}
+                            >
+                                <div className="project-image-container">
+                                    <img
+                                        src={project.image}
+                                        alt={project.title}
+                                        className="project-image"
+                                    />
+                                </div>
+                                <div className="project-header">
+                                    <h2 className="project-name">{project.title}</h2>
+                                </div>
+
+                                <div className="project-tech-stack">
+                                    {project.techStack.map(tech => (
+                                        <span key={tech} className="tech-chip">{tech}</span>
+                                    ))}
+                                </div>
+
+                                <p className="project-description">
+                                    {project.description}
+                                </p>
+
+                                <div className="project-links">
+                                    {project.links.demo && (
+                                        <a href={project.links.demo} className="project-link" target="_blank" rel="noopener noreferrer">
+                                            Live Demo <span>→</span>
+                                        </a>
+                                    )}
+                                    {project.links.repo && (
+                                        <a href={project.links.repo} className="project-link" target="_blank" rel="noopener noreferrer">
+                                            GitHub <span>↗</span>
+                                        </a>
+                                    )}
+                                </div>
+                            </motion.div>
+                        ))}
+                    </motion.div>
+                </div>
+            </div>
+            <FullPageImage
+                src="/20251111_224823.jpg"
+                alt="projects background"
+                credit="Sasha Bayda"
+                isFixed={true}
+            />
+        </div>
+    );
+}