301 lines
No EOL
11 KiB
JavaScript
301 lines
No EOL
11 KiB
JavaScript
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');
|
|
}); |