toine/mon-site-perso
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
mrtoine 2025-09-12 10:57:48 +02:00
commit b216a187bd
34 changed files with 4829 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

135
Static/js/admin.js Normal file
View file

@ -0,0 +1,135 @@
import { readJson } from './readJson.js';
document.addEventListener('DOMContentLoaded', async function() {
const loadProjects = async () => {
try {
const data = await readJson('../data/projects.json');
return data;
} catch (error) {
console.error('Erreur lors du chargement des projets :', error);
return [];
}
}
// ===* ACTIONS SUR LA PAGE *===
const section = document.querySelector('section');
const divProjectsGrid = document.querySelector('.projects-grid');
const createProjectButton = document.querySelector('[data-id="creation-project-btn"]');
const divCreateProject = document.querySelector('.form-project');
const sectionProjects = document.querySelector('[data-id="projects"]');
if (divProjectsGrid) {
const data = await loadProjects();
if (data) {
const projects = Object.values(data);
console.log('Projets :', projects);
projects.forEach(project => {
let state = 'Actif';
if (!project.active) {
state = 'Inactif';
} else {
state = 'Actif';
}
const projectDiv = document.createElement('div');
projectDiv.className = 'card-projects';
projectDiv.innerHTML = `
<div class="card-title">
<h3>${project.type}</h3>
</div>
<div class="action-btn">
<button class="btn-small btn-danger" data-id="delete-project" data-project-id="${project.id}">Supprimer</button>
<button class="btn-small btn-warning" data-id="edit-project" data-project-id="${project.id}">Modifier</button>
</div>
<p>Etat : ${state}</p>
<h3>${project.name}</h3>
<p>${project.description}</p>
${project.technologies && project.technologies.length > 0 ? `
<div class="card-tags">
${project.technologies.map(tech => `<span class="tag">${tech}</span>`).join('')}
</div>` : ''}
${project.link ? `<center><a href="${project.link}" target="_blank" class="btn-primary">Voir le projet</a></center>` : ''}
`;
divProjectsGrid.appendChild(projectDiv);
const deleteButton = projectDiv.querySelector('[data-id="delete-project"]');
const editButton = projectDiv.querySelector('[data-id="edit-project"]');
deleteButton.addEventListener('click', async () => {
const confirmDelete = confirm(`Êtes-vous sûr de vouloir supprimer le projet "${project.name}" ?`);
if (confirmDelete) {
try {
window.location.href = `./?page=delete-project&id=${project.id}`;
} catch (error) {
console.error('Erreur lors de la suppression du projet :', error);
}
}
});
editButton.addEventListener('click', () => {
const projectId = editButton.getAttribute('data-project-id');
const projectToEdit = projects.find(p => p.id === projectId);
if (projectToEdit) {
// Remplir le formulaire avec les données du projet à modifier
document.getElementById('project-type').value = projectToEdit.type || '';
document.getElementById('project-name').value = projectToEdit.name || '';
document.getElementById('project-description').value = projectToEdit.description || '';
document.getElementById('project-image').value = projectToEdit.image || '';
document.getElementById('project-start-date').value = projectToEdit.start_date || '';
document.getElementById('project-end-date').value = projectToEdit.end_date || '';
// Pré-sélectionner les technologies si disponibles
if (projectToEdit.technologies && window.technologiesManager) {
window.technologiesManager.preselectTechnologies(projectToEdit.technologies);
}
// Afficher le formulaire et faire défiler vers celui-ci
divCreateProject.classList.remove('hidden');
createProjectButton.textContent = 'Fermer le formulaire';
createProjectButton.classList.remove('btn-success');
createProjectButton.classList.add('btn-danger');
// Scroll vers le formulaire
divCreateProject.scrollIntoView({ behavior: 'smooth' });
}
});
});
}
}
if(createProjectButton) {
console.log("Create project button found");
createProjectButton.addEventListener('click', () => {
divCreateProject.classList.toggle('hidden');
if( divCreateProject.classList.contains('hidden')) {
createProjectButton.textContent = 'Ajouter projet';
createProjectButton.classList.remove('btn-danger');
createProjectButton.classList.add('btn-success');
// Réinitialiser le formulaire
const form = divCreateProject.querySelector('form');
if (form) {
form.reset();
// Réinitialiser aussi les technologies
if (window.technologiesManager) {
window.technologiesManager.clearAllSelections();
}
}
}
else {
createProjectButton.textContent = 'Fermer le formulaire';
createProjectButton.classList.remove('btn-success');
createProjectButton.classList.add('btn-danger');
// Scroll vers le formulaire
divCreateProject.scrollIntoView({ behavior: 'smooth' });
}
})
}
});

301
Static/js/main.js Normal file
View file

@ -0,0 +1,301 @@
import { readJson } from './readJson.js';
document.addEventListener('DOMContentLoaded', async function() {
const navbar = document.querySelector("nav");
const header = document.querySelector("header");
let pagePath = "";
const linkInterceptor = () => {
const a = document.querySelectorAll('a');
a.forEach(function(link) {
if( link.getAttribute('data-page') != "externe") {
link.addEventListener('click', function(event) {
event.preventDefault();
const href = link.getAttribute('data-page');
const id = link.getAttribute('id');
if (!href) {
console.warn('Attribut data-page introuvable sur la balise:', link);
return;
}
if(id != "admin") {
loadPage(`./Views/${href}.html`);
} else {
window.location.href = href;
}
});
}
});
}
const loadPage = async (page) => {
const mainContent = document.querySelector('.main-content');
const loadProjects = async () => {
try {
const data = await readJson('./data/projects.json');
return data;
} catch (error) {
console.error('Erreur lors du chargement des projets :', error);
return [];
}
}
const loadDataContacts = async () => {
try {
const data = await readJson('./data/contacts.json');
return data;
} catch (error) {
console.error('Erreur lors du chargement des projets :', error);
return [];
}
}
if (!mainContent) {
console.error('Élément .main-content introuvable dans le document.');
return;
}
if(mainContent) {
fetch(page)
.then(response => {
if(!response.ok) {
throw new Error(`Erreur lors du chargement de la page : ${response.statusText}`);
}
pagePath = page;
return response.text();
})
.then(async (html) => {
mainContent.innerHTML = html;
linkInterceptor();
const divProjectsGrid = document.querySelector('.projects-grid');
if (divProjectsGrid) {
console.log("Projects grid found, loading projects...");
const data = await loadProjects();
if (data) {
const projects = Object.values(data);
console.log('Projets :', projects);
projects.forEach(project => {
if (project.active) {
const projectDiv = document.createElement('div');
projectDiv.className = 'project-card';
projectDiv.innerHTML = `
<div class="project-card-header">
<h3>${project.type}</h3>
</div>
<div class="project-card-content">
<h4>${project.name}</h4>
<p>${project.description}</p>
${project.link ? `<center><a href="${project.link}" target="_blank" class="btn">Voir le projet</a></center>` : ''}
<p></p>
<div class="project-tags">
${project.technologies && project.technologies.length > 0 ?
project.technologies.map(tech => `<span class="tag">${tech}</span>`).join('') : ''}
</div>
</div>
`;
divProjectsGrid.appendChild(projectDiv);
}
});
}
}
const contactPage = document.querySelector('.contact-page');
if (contactPage) {
console.log("Contact page found, loading contact data...");
const data = await loadDataContacts();
if (data) {
const email = document.querySelector('[data-id="email"]');
const phone = document.querySelector('[data-id="phone"]');
const github = document.querySelector('[data-id="github"]');
const linkedin = document.querySelector('[data-id="linkedin"]');
const twitter = document.querySelector('[data-id="twitter"]');
email.textContent = data.email;
email.href = `mailto:${data.email}`;
phone.textContent = data.gsm;
phone.href = `tel:${data.gsm}`;
github.href = data.github;
linkedin.href = data.linkedin;
twitter.href = data.twitter;
}
}
});
}
}
// Animation pour l'en-tête au défilement
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Ajout de la détection du mode sombre
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if (prefersDarkScheme.matches) {
document.body.classList.add("dark-theme");
}
// Gestion des formulaires
document.addEventListener('submit', (e) => {
const form = e.target.closest('form');
if (form) {
e.preventDefault();
// Simuler l'envoi du formulaire
const submitBtn = form.querySelector('button[type="submit"]');
if (submitBtn) {
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Envoi en cours...';
submitBtn.disabled = true;
setTimeout(() => {
form.innerHTML = `<div style="text-align: center; padding: 2rem;">
<h3 style="color: var(--success-color);">Message envoyé avec succès!</h3>
<p>Merci pour votre message. Je vous répondrai dans les plus brefs délais.</p>
</div>`;
}, 1500);
}
}
});
// Animation des particules dans le header
const createParticles = () => {
const particlesContainer = document.getElementById('particles');
if (!particlesContainer) return;
// Nombre de particules
const particleCount = 30;
// Supprimer les particules existantes
particlesContainer.innerHTML = '';
// Créer de nouvelles particules
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('span');
particle.classList.add('particle');
// Attributs aléatoires pour chaque particule
const size = Math.random() * 15 + 5;
const posX = Math.random() * 100;
const posY = Math.random() * 100;
const delay = Math.random() * 5;
const duration = Math.random() * 5 + 5;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${posX}%`;
particle.style.top = `${posY}%`;
particle.style.animation = `float ${duration}s infinite ${delay}s`;
particle.style.opacity = Math.random() * 0.5 + 0.3;
particlesContainer.appendChild(particle);
}
};
// Effet d'écriture au clavier
const initTypeWriter = () => {
const textElement = document.getElementById('typing-text');
if (!textElement) return;
const phrases = [
"Développeur Web & Applications",
"Développeur Python",
"Développeur JavaScript",
"Développeur C# & Unity",
"Développeur EmberJS",
"Développeur Typescript",
"Développeur Angular",
];
let phraseIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typingSpeed = 100;
let isWaiting = false;
function typeWriter() {
if (isWaiting) {
setTimeout(typeWriter, typingSpeed);
isWaiting = false;
return;
}
const currentPhrase = phrases[phraseIndex];
if (isDeleting) {
// Effacer le texte
textElement.textContent = currentPhrase.substring(0, charIndex - 1);
charIndex--;
typingSpeed = 30; // Plus rapide pour effacer
} else {
// Écrire le texte
textElement.textContent = currentPhrase.substring(0, charIndex + 1);
charIndex++;
// Variation aléatoire de la vitesse pour un effet plus naturel
typingSpeed = Math.random() * 50 + 80;
}
// Si toute la phrase est écrite
if (!isDeleting && charIndex === currentPhrase.length) {
// Pause avant d'effacer
isDeleting = true;
typingSpeed = 2000; // Pause plus longue
isWaiting = true;
}
// Si la phrase est effacée
if (isDeleting && charIndex === 0) {
isDeleting = false;
phraseIndex = (phraseIndex + 1) % phrases.length;
typingSpeed = 700; // Pause avant la prochaine phrase
isWaiting = true;
}
setTimeout(typeWriter, typingSpeed);
}
typeWriter();
// Effet d'apparition du curseur
const cursor = document.querySelector('.cursor');
if (cursor) {
cursor.style.animation = 'blink 1s step-end infinite';
}
};
// Effet de défilement doux lorsqu'on clique sur le header
if (header) {
header.addEventListener('click', () => {
// Défilement vers la section suivante
const nextSection = document.querySelector('nav');
if (nextSection) {
window.scrollTo({
top: nextSection.offsetTop,
behavior: 'smooth'
});
}
});
// Effet visuel au survol pour indiquer que le header est cliquable
header.style.cursor = 'pointer';
header.addEventListener('mouseenter', () => {
header.style.transform = 'scale(1.01)';
});
header.addEventListener('mouseleave', () => {
header.style.transform = 'scale(1)';
});
}
// Initialiser les particules et l'effet d'écriture
createParticles();
initTypeWriter();
loadPage('Views/home.html');
});

11
Static/js/readJson.js Normal file
View file

@ -0,0 +1,11 @@
const readJson = (filePath) => {
return fetch(filePath)
.then(response => {
if(!response.ok) {
throw new Error(`Erreur lors du chargement du fichier JSON : ${response.statusText}`);
}
return response.json();
})
};
export { readJson };

315
Static/js/technologies.js Normal file
View file

@ -0,0 +1,315 @@
// Gestionnaire des technologies pour les projets
class TechnologiesManager {
constructor() {
this.technologies = {
'frontend': {
label: 'Frontend Web',
items: [
'HTML', 'CSS', 'JavaScript', 'TypeScript', 'React', 'Vue.js',
'Angular', 'Svelte', 'Next.js', 'Nuxt.js', 'Sass', 'Tailwind CSS', 'Bootstrap'
]
},
'backend': {
label: 'Backend Web',
items: [
'PHP', 'Laravel', 'Symfony', 'Node.js', 'Express.js', 'Python',
'Django', 'Flask', 'FastAPI', 'Ruby', 'Ruby on Rails', 'Go', 'Rust'
]
},
'languages': {
label: 'Langages de Programmation',
items: [
'Java', 'Spring', 'C#', '.NET', 'C++', 'C', 'Kotlin', 'Swift',
'Dart', 'Scala', 'R', 'MATLAB'
]
},
'databases': {
label: 'Bases de Données',
items: [
'MySQL', 'PostgreSQL', 'MongoDB', 'Redis', 'SQLite', 'Elasticsearch',
'MariaDB', 'Oracle', 'Firebase', 'Supabase'
]
},
'mobile': {
label: 'Développement Mobile',
items: [
'React Native', 'Flutter', 'Ionic', 'Xamarin', 'Apache Cordova', 'Android', 'iOS'
]
},
'games': {
label: 'Développement de Jeux',
items: [
'Unity', 'Unreal Engine', 'Godot', 'Phaser', 'Three.js', 'Babylon.js',
'PixiJS', 'Construct 3', 'GameMaker Studio', 'RPG Maker'
]
},
'devops': {
label: 'DevOps & Cloud',
items: [
'Docker', 'Kubernetes', 'AWS', 'Azure', 'Google Cloud', 'Heroku',
'Vercel', 'Netlify', 'Jenkins', 'GitLab CI', 'GitHub Actions', 'Terraform'
]
},
'tools': {
label: 'Outils & Frameworks',
items: [
'Git', 'GitHub', 'Webpack', 'Vite', 'Babel', 'ESLint', 'Prettier',
'Jest', 'Cypress', 'Storybook'
]
},
'design': {
label: 'Design & Création',
items: [
'Figma', 'Sketch', 'Adobe XD', 'Photoshop', 'Illustrator', 'Canva',
'Blender', 'Maya', '3ds Max'
]
}
};
this.selectedTechs = new Set();
this.init();
}
init() {
this.render();
this.attachEvents();
this.addSearchFunctionality();
this.addQuickActions();
}
generateId(tech) {
return 'tag-' + tech.toLowerCase().replace(/[^a-z0-9]/g, '-');
}
render() {
const container = document.querySelector('.technologies-grid');
if (!container) return;
let html = `
<div class="tech-controls">
<div class="tech-search">
<input type="text" id="tech-search" placeholder="Rechercher une technologie...">
<span class="search-icon">🔍</span>
</div>
<div class="tech-quick-actions">
<button type="button" class="btn-quick" id="select-all">Tout sélectionner</button>
<button type="button" class="btn-quick" id="deselect-all">Tout désélectionner</button>
<button type="button" class="btn-quick" id="toggle-categories">Replier/Déplier</button>
</div>
<div class="selected-count">
<span id="count-display">0 technologie(s) sélectionnée(s)</span>
</div>
</div>
<div class="tech-categories">
`;
for (const [categoryKey, category] of Object.entries(this.technologies)) {
html += `
<div class="tech-category" data-category="${categoryKey}">
<div class="category-header" data-toggle="${categoryKey}">
<h4>${category.label}</h4>
<span class="category-toggle">▼</span>
<span class="category-count">(${category.items.length})</span>
</div>
<div class="category-items" id="category-${categoryKey}">
`;
category.items.forEach(tech => {
const id = this.generateId(tech);
html += `
<div class="tech-item">
<input type="checkbox" id="${id}" name="tags[]" value="${tech}" class="tech-checkbox">
<label for="${id}" class="tech-label">${tech}</label>
</div>
`;
});
html += `
</div>
</div>
`;
}
html += '</div>';
container.innerHTML = html;
}
attachEvents() {
// Événements pour les checkboxes
document.querySelectorAll('.tech-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', (e) => {
if (e.target.checked) {
this.selectedTechs.add(e.target.value);
} else {
this.selectedTechs.delete(e.target.value);
}
this.updateSelectedCount();
this.updateHiddenField();
});
});
// Événements pour replier/déplier les catégories
document.querySelectorAll('.category-header').forEach(header => {
header.addEventListener('click', (e) => {
const categoryKey = e.currentTarget.dataset.toggle;
const categoryItems = document.getElementById(`category-${categoryKey}`);
const toggle = e.currentTarget.querySelector('.category-toggle');
if (categoryItems.style.display === 'none') {
categoryItems.style.display = 'grid';
toggle.textContent = '▼';
} else {
categoryItems.style.display = 'none';
toggle.textContent = '▶';
}
});
});
}
addSearchFunctionality() {
const searchInput = document.getElementById('tech-search');
if (!searchInput) return;
searchInput.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
const techItems = document.querySelectorAll('.tech-item');
techItems.forEach(item => {
const label = item.querySelector('.tech-label').textContent.toLowerCase();
if (label.includes(query)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
// Masquer les catégories vides
document.querySelectorAll('.tech-category').forEach(category => {
const visibleItems = category.querySelectorAll('.tech-item[style*="flex"]');
if (query && visibleItems.length === 0) {
category.style.display = 'none';
} else {
category.style.display = 'block';
}
});
});
}
addQuickActions() {
const selectAllBtn = document.getElementById('select-all');
const deselectAllBtn = document.getElementById('deselect-all');
const toggleCategoriesBtn = document.getElementById('toggle-categories');
if (selectAllBtn) {
selectAllBtn.addEventListener('click', () => {
document.querySelectorAll('.tech-checkbox').forEach(checkbox => {
checkbox.checked = true;
this.selectedTechs.add(checkbox.value);
});
this.updateSelectedCount();
this.updateHiddenField();
});
}
if (deselectAllBtn) {
deselectAllBtn.addEventListener('click', () => {
document.querySelectorAll('.tech-checkbox').forEach(checkbox => {
checkbox.checked = false;
});
this.selectedTechs.clear();
this.updateSelectedCount();
this.updateHiddenField();
});
}
if (toggleCategoriesBtn) {
toggleCategoriesBtn.addEventListener('click', () => {
const allCategories = document.querySelectorAll('.category-items');
const allToggles = document.querySelectorAll('.category-toggle');
const firstCategory = allCategories[0];
const isCollapsed = firstCategory.style.display === 'none';
allCategories.forEach(category => {
category.style.display = isCollapsed ? 'grid' : 'none';
});
allToggles.forEach(toggle => {
toggle.textContent = isCollapsed ? '▼' : '▶';
});
});
}
}
updateSelectedCount() {
const countDisplay = document.getElementById('count-display');
if (countDisplay) {
const count = this.selectedTechs.size;
countDisplay.textContent = `${count} technologie(s) sélectionnée(s)`;
// Changer la couleur selon le nombre
if (count === 0) {
countDisplay.className = 'count-empty';
} else if (count <= 3) {
countDisplay.className = 'count-low';
} else if (count <= 6) {
countDisplay.className = 'count-medium';
} else {
countDisplay.className = 'count-high';
}
}
}
// Méthode pour pré-sélectionner des technologies (utile pour l'édition)
selectTechnologies(techArray) {
this.selectedTechs.clear();
techArray.forEach(tech => {
this.selectedTechs.add(tech);
const checkbox = document.querySelector(`input[value="${tech}"]`);
if (checkbox) {
checkbox.checked = true;
}
});
this.updateSelectedCount();
this.updateHiddenField();
}
// Alias pour la compatibilité
preselectTechnologies(techArray) {
this.selectTechnologies(techArray);
}
// Méthode pour effacer toutes les sélections
clearAllSelections() {
document.querySelectorAll('.tech-checkbox').forEach(checkbox => {
checkbox.checked = false;
});
this.selectedTechs.clear();
this.updateSelectedCount();
this.updateHiddenField();
}
// Méthode pour mettre à jour le champ caché
updateHiddenField() {
const hiddenField = document.getElementById('selected-technologies');
if (hiddenField) {
hiddenField.value = Array.from(this.selectedTechs).join(',');
}
}
// Méthode pour obtenir les technologies sélectionnées
getSelectedTechnologies() {
return Array.from(this.selectedTechs);
}
}
// Initialiser le gestionnaire au chargement de la page
document.addEventListener('DOMContentLoaded', () => {
window.techManager = new TechnologiesManager();
});
// Export pour utilisation dans d'autres fichiers
if (typeof module !== 'undefined' && module.exports) {
module.exports = TechnologiesManager;
}