Liste du Personnel de l'École
body {
font-family: 'Roboto', sans-serif;
background-color: #f0f0f0;
color: #333;
}
h2 {
text-align: center;
margin-top: 20px;
font-weight: bold;
color: #C61429;
}
.filter-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.filter {
margin-bottom: 10px;
}
.filter label {
font-weight: bold;
}
.filter select {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
outline: none;
}
.filter button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #C61429;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.filter button:hover {
background-color: #C61429;
}
#liste_personnel {
margin-top: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.person {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.person img {
width: 100px;
height: auto;
margin-right: 10px;
cursor: pointer;
}
.person p {
margin: 0;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
position: relative;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#modalImage {
width: 100%;
height: auto;
}
#modalDescription {
text-align: center;
padding: 20px;
color: white;
}
Page Contact
Tous
Formateur
Personnel administratif
Tous
Grafipolis
IEQT
Tous
Sérigraphie
Signalétique
Pré-presse
Web Design
Imprimerie
Façonnage
Gestion de projet
IEQT
Général
Administratif
Tous
CAP SI
CAP SDG
BMA
BAC PG
BAC PI
BAC FPIR
BTS ERPC PP
BTS ERPC PI
BAC+3 WEB
BAC+3 QSE
BAC+5 M QSE
×
var personnel = [
{ nom: "
Roxane ARLÉO / Formatrice en Arts appliqués et culture artistiques", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,bacfpir", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/arleo-1.png" },
{ nom: "
Laure BACHELIER / Chargé de relation candidats-entreprise", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bachellier.png" },
{ nom: "
Amandine BALLON / Formatrice en Production plurimédia (signalétique)", role: "formateur", campus: "grafipolis", domaine: "pao", classe: "bma", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/ballon-1.png" },
{ nom: "
Charlotte BECK / Assistante pédagogique", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/beck.png" },
{ nom: "
Valérie BÉHAL / Formatrice en Mathématiques", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,bma,bacfpir,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/behal.png" },
{ nom: "
Ahmed BERRADA / Formateur en Mathématiques et Sciences physiques et chimiques ", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsi,bacpg,pabcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/berradaa.png" },
{ nom: "
Laila BERRADA / Formatrice", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,bma,bacfpir,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/berradal.png" },
{ nom: "
Elisabeth BOUGANT / Formatrice en Sciences physiques et chimiques", role: "formateur", campus: "ieqt", domaine: "gdp,ieqt_f", classe: "erpc pp,erpcpi,web+3,qse+3,mqse+5", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bougant.jpeg" },
{ nom: "
Sophie BOURGEOIS / Assistante de direction", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bourgeois.png" },
{ nom: "
David BOUVIER / Coordinateur pédagogique", role: "persoadm", campus: "grafipolis,ieqt", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/bouvier.png" },
{ nom: "
Célimène CHALAIN / Formatrice en Français et Prévention, santé et environnement", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsi,capsdg,bma,bacfpir,bacpg,bacpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/chalain-1.png" },
{ nom: "
Jean CHARPENTIER / Formateur en Marketing et Gestion", role: "formateur", campus: "grafipolis", domaine: "general", classe: "erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/charpentier.png" },
{ nom: "
Stéphanie CORIC / Ingénierie de la formation professionnelle continue", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "" },
{ nom: "
Pascal COHEN / Formateur en Sérigraphie et Production et plurimédia", role: "formateur", campus: "grafipolis", domaine: "sérigraphie", classe: "capsi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/cohen-1.png" },
{ nom: "
Camille CUIF / Formatrice en Sérigraphie", role: "formateur", campus: "grafipolis", domaine: "sérigraphie", classe: "capsi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/cuif.png" },
{ nom: "
Yannis CURET / Web Designer", role: "persoadm", campus: "grafipolis", domaine: "web,administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/curet.png" },
{ nom: "
Thierry DELORME / Formateur en Signalétique et décors graphiques", role: "formateur", campus: "grafipolis", domaine: "signalétique", classe: "bma", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/delorme.png" },
{ nom: "
Thomas DENIS / Responsable comptabilité-RH", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/denis-1.png" },
{ nom: "
Valérie GENEZEAU / Formatrice en PAO et Design graphique", role: "formateur", campus: "grafipolis", domaine: "pao", classe: "bacpg, erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/genezeau.png" },
{ nom: "
Sandrine GUIBERT / Assistante de la vie sociale et professionnelle", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/guibert.png" },
{ nom: "
Romain GUIET / Formateur en Éducation physique et sportive", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,capsi,bacpg,bacpi,bacfpir,bma", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/guiet-1.png" },
{ nom: "
Céline HAMON / Assistante de la vie sociale et professionnelle", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/hamon.png" },
{ nom: "
Philippe HÉlION / Responsable du département post-bac", role: "formateur", campus: "grafipolis,ieqt", domaine: "pao,gdp", classe: "erpcpp,erpcpi,web+3", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/helion.png" },
{ nom: "
Charline HERBRETEAU / Formatrice en Signalétique et PAO", role: "formateur", campus: "grafipolis", domaine: "signalétique", classe: "capsdg", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/herbreteau.png" },
{ nom: "
Gaëlle KÉRVEVANT / Chargé de communication", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/kervevant-1.png" },
{ nom: "
Daniel LEGRIER / Responsable développement Apprentissage et Formation continue", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/legrier.png" },
{ nom: "
Patrick MACHICOT / Formateur en Production plurimédia et Web", role: "formateur", campus: "grafipolis", domaine: "pao,web", classe: "bacpg", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/machicot.png" },
{ nom: "
Adrien MARRET / Formateur Gestion de projet, Impression et Façonnage", role: "formateur", campus: "grafipolis", domaine: "imprimerie,façonnage,gdp", classe: "bacfpir,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/maret.png" },
{ nom: "
Pascale MARTIN / Formatrice en Français et Histoire-Géographie", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,capsi,bma,bacpg,bacpi,bacfpir", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/martin.png" },
{ nom: "
Sarah MÉNARD / Formatrice en Anglais", role: "formateur", campus: "grafipolis", domaine: "general", classe: "bma,bacfpir,erpcpp,erpcpi,qse+3,mqse+5", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/menard.png" },
{ nom: "
Valérie MINLOT / Assistante de gestion", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/minlot.png" },
{ nom: "
Mickaël PAGEAU / Responsable département infra-bac", role: "formateur", campus: "grafipolis", domaine: "imprimerie,façonnage", classe: "bacpi,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/pageau.png" },
{ nom: "
John PODLESNIK / Directeur", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/podlesnik.png" },
{ nom: "
Anne RENON / Formatrice en Économie gestion et management", role: "formateur", campus: "grafipolis", domaine: "general", classe: "bma,bacfpir,bacpg,bacpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/renon.png" },
{ nom: "
Valérie RIGNAULT / Chargé de relation candidats-entreprise", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/rignault.png" },
{ nom: "
Lucas ROUBAUD / Formateur en Expression et culture française", role: "formateur", campus: "grafipolis", domaine: "general", classe: "erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/roubaud.png" },
{ nom: "
Pierre RUIZ / Gestion de projet et PAO", role: "formateur", campus: "grafipolis", domaine: "pao,gdp", classe: "erpcpp,erpcpi,web+3", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/ruiz.png" },
{ nom: "
Philippe TANGUY / Impression et Gestion de projet", role: "formateur", campus: "grafipolis", domaine: "imprimerie,façonnage", classe: "bacpi,erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/tanguy.png" },
{ nom: "
Adeline TUDEAU / Psychologue et Référente handicap", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/tudeau.png" },
{ nom: "
Marine VAILLANT / Assistante pédagogique", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vaillant-1.png" },
{ nom: "
Maïté VANHAESBROUCK / Formatrice en Anglais et en Prévention, santé et environnement", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsi,capsdg,bacpg", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vanhaesbrouck.png" },
{ nom: "
Didier VERDON / Formateur en Français et Histoire-Géographie", role: "formateur", campus: "grafipolis", domaine: "general", classe: "capsdg,capsi,bma,bacpg,bacpi,bacfpir", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/verdon-1.png" },
{ nom: "
Jacques VIGNERON / Directeur de l'École", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vigneron.png" },
{ nom: "
Sabine VILLIER / Formatrice en Gestion de projet et Gestion", role: "formateur", campus: "grafipolis", domaine: "general", classe: "erpcpp,erpcpi", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/villier.png" },
{ nom: "
Agnès VINEAU / Assistante pédagogique", role: "persoadm", campus: "grafipolis", domaine: "administratif", classe: "autre", photo: "https://grafipolis.fr/wp-content/uploads/2024/05/vineau.png" }
];
// Function to display personnel
function displayPersonnel(personnelList) {
var personnelContainer = document.getElementById('liste_personnel');
personnelContainer.innerHTML = '';
personnelList.forEach(function (person) {
var personDiv = document.createElement('div');
personDiv.classList.add('person');
var personPhoto = person.photo ? person.photo : 'https://grafipolis.fr/wp-content/uploads/2024/05/default-user-image.png';
personDiv.innerHTML = '
![' + person.nom + '](' + personPhoto + ')
' + '
' + person.nom + '
';
personDiv.addEventListener('click', function () {
showModal(person);
});
personnelContainer.appendChild(personDiv);
});
}
// Function to filter personnel based on selected criteria
function filterPersonnel() {
var role = document.getElementById('role').value;
var campus = document.getElementById('campus').value;
var domaine = document.getElementById('domaine').value;
var classe = document.getElementById('classe').value;
var filteredPersonnel = personnel.filter(function (person) {
return (role === 'tous' || person.role === role) &&
(campus === 'tous' || person.campus === campus) &&
(domaine === 'tous' || person.domaine.includes(domaine)) &&
(classe === 'tous' || person.classe.includes(classe));
});
displayPersonnel(filteredPersonnel);
}
// Function to show modal with person's details
function showModal(person) {
var modal = document.getElementById('modal');
var modalImage = document.getElementById('modalImage');
var modalDescription = document.getElementById('modalDescription');
modalImage.src = person.photo ? person.photo : 'https://grafipolis.fr/wp-content/uploads/2024/05/default-user-image.png';
modalDescription.innerHTML = person.nom;
modal.style.display = 'block';
var closeBtn = document.getElementsByClassName('close')[0];
closeBtn.onclick = function () {
modal.style.display = 'none';
};
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = 'none';
}
};
}
// Initial display of all personnel
displayPersonnel(personnel);
// Event listeners for filter
document.getElementById('role').addEventListener('change', filterPersonnel);
document.getElementById('campus').addEventListener('change', filterPersonnel);
document.getElementById('domaine').addEventListener('change', filterPersonnel);
document.getElementById('classe').addEventListener('change', filterPersonnel);