127 lines
4.8 KiB
TypeScript
127 lines
4.8 KiB
TypeScript
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>
|
|
);
|
|
}
|