import SingleProject from "./SingleProject.jsx";
import "../styles/Projects.css"
function Projects() {
    const codevProject = {
        title: "Codev",
        image: "codev",
        color: "orange",
        nbImage: 5,
        skills: ['HTML', 'CSS', 'PHP', 'JavaScript', 'SQL'],
        description: "A collaborative platform where developers can create, share, and grow coding projects. Built for solo makers or teams, it features real-time messaging and a centralized workspace."
    }
    const SAECProject = {
        title: "SAE C++",
        image: "SAE_C++",
        color: "purple",
        nbImage: 3,
        skills: ['C++', 'Git'],
        description: "A C++ program developed for creating and managing treasure hunt records, with a web interface that allows browsing and consulting the entries."
    }
    const proxmoxProject = {
        title: "Proxmox",
        image: "proxmox",
        color: "green",
        nbImage: 5,
        skills: [],
        description: "A Proxmox-based infrastructure that consolidates my personal cloud, home automation, code hosting, media services and web hosting into a single, self-hosted environment."
    }


    return (
        <section id="projects-section">
            <h1>Projects</h1>
            <div className="projects-section-list">
                <SingleProject image={codevProject.image} title={codevProject.title} description={codevProject.description} skills={codevProject.skills} color={codevProject.color} nbImage={codevProject.nbImage}/>
                <SingleProject image={SAECProject.image} title={SAECProject.title} description={SAECProject.description} skills={SAECProject.skills} color={SAECProject.color} nbImage={SAECProject.nbImage}/>
                <SingleProject image={proxmoxProject.image} title={proxmoxProject.title} description={proxmoxProject.description} skills={proxmoxProject.skills} color={proxmoxProject.color} nbImage={proxmoxProject.nbImage}/>
            </div>
            <div className="show-more-container">
                <p className="show-more-link">
                    Show more
                </p>
            </div>
        </section>
    )
}


export default Projects