-
-
${m.avatar}
+ carousel.innerHTML = members.map((m, i) => {
+ const imgSrc = `assets/images/team/${m.id}.png`;
+ return `
+
+
+
+
+
${m.avatar}
+
+
+
${m.name}
+
${m.role}
+
${(m.bio || '').split('.').shift()}.
-
${m.name}
-
${m.role}
-
${(m.bio || '').split('.').shift()}.
-
- `).join('');
+ `;
+ }).join('');
- // Carousel logic
- const cardsContainer = carousel; // the track
- let cards = carousel.querySelectorAll('.team-card');
+ let cards = Array.from(carousel.querySelectorAll('.team-card'));
let currentIndex = 0;
let cardsPerView = 3;
let autoPlayInterval;
@@ -41,10 +243,11 @@ document.addEventListener('DOMContentLoaded', () => {
else cardsPerView = 3;
}
+ function getTotalDots() { return Math.max(1, cards.length - cardsPerView + 1); }
+
function createDots() {
dotsContainer.innerHTML = '';
- const totalDots = Math.max(1, Math.ceil(cards.length / cardsPerView));
- for (let i = 0; i < totalDots; i++) {
+ for (let i = 0; i < getTotalDots(); i++) {
const dot = document.createElement('div');
dot.classList.add('carousel-dot');
if (i === 0) dot.classList.add('active');
@@ -54,65 +257,49 @@ document.addEventListener('DOMContentLoaded', () => {
}
function updateCarousel() {
- cards = carousel.querySelectorAll('.team-card');
- if (cards.length === 0) return;
- const cardStyle = window.getComputedStyle(cards[0]);
- const gap = 32; // matches previous implementation
+ cards = Array.from(carousel.querySelectorAll('.team-card'));
+ if (!cards.length) return;
+ const gap = 32;
const cardWidth = cards[0].offsetWidth + gap;
carousel.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
-
- const dots = dotsContainer.querySelectorAll('.carousel-dot');
- const activeDotIndex = Math.floor(currentIndex / cardsPerView);
- dots.forEach((dot, i) => dot.classList.toggle('active', i === activeDotIndex));
+ Array.from(dotsContainer.querySelectorAll('.carousel-dot')).forEach((d, i) => d.classList.toggle('active', i === currentIndex));
}
- function goToSlide(dotIndex) {
- currentIndex = dotIndex * cardsPerView;
- if (currentIndex > cards.length - cardsPerView) currentIndex = Math.max(0, cards.length - cardsPerView);
- updateCarousel();
- resetAutoPlay();
+ function goToSlide(index) {
+ currentIndex = Math.min(index, Math.max(0, cards.length - cardsPerView));
+ updateCarousel(); resetAutoPlay();
}
function nextSlide() {
- currentIndex++;
- if (currentIndex > cards.length - cardsPerView) currentIndex = 0;
+ const max = Math.max(0, cards.length - cardsPerView);
+ currentIndex = currentIndex >= max ? 0 : currentIndex + 1;
updateCarousel();
}
function prevSlide() {
- currentIndex--;
- if (currentIndex < 0) currentIndex = Math.max(0, cards.length - cardsPerView);
+ const max = Math.max(0, cards.length - cardsPerView);
+ currentIndex = currentIndex <= 0 ? max : currentIndex - 1;
updateCarousel();
}
- function startAutoPlay() {
- clearInterval(autoPlayInterval);
- autoPlayInterval = setInterval(nextSlide, 4000);
- }
-
- function resetAutoPlay() {
- clearInterval(autoPlayInterval);
- startAutoPlay();
- }
+ function startAutoPlay() { clearInterval(autoPlayInterval); autoPlayInterval = setInterval(nextSlide, 4000); }
+ function resetAutoPlay() { clearInterval(autoPlayInterval); startAutoPlay(); }
prevBtn && prevBtn.addEventListener('click', () => { prevSlide(); resetAutoPlay(); });
nextBtn && nextBtn.addEventListener('click', () => { nextSlide(); resetAutoPlay(); });
-
carousel.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
carousel.addEventListener('mouseleave', startAutoPlay);
- updateCardsPerView();
- createDots();
- startAutoPlay();
-
- window.addEventListener('resize', () => {
- updateCardsPerView();
- createDots();
- currentIndex = 0;
- updateCarousel();
+ let resizeTimer;
+ const ro = new ResizeObserver(() => {
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(() => { updateCardsPerView(); currentIndex = 0; createDots(); updateCarousel(); }, 100);
});
+ ro.observe(carousel.parentElement || document.body);
- // Modal logic
+ updateCardsPerView(); createDots(); updateCarousel(); startAutoPlay();
+
+ // Modal
const modalOverlay = document.getElementById('team-modal-overlay');
const modalClose = document.getElementById('team-modal-close');
const modalAvatar = document.getElementById('modal-avatar');
@@ -124,29 +311,33 @@ document.addEventListener('DOMContentLoaded', () => {
const modalSocial = document.getElementById('modal-social');
function openMemberModal(index) {
- const member = members[index];
- if (!member) return;
- modalAvatar.textContent = member.avatar || member.name.charAt(0);
- modalName.textContent = member.name;
- modalRole.textContent = member.role;
- modalBio.textContent = member.bio;
-
- modalStats.innerHTML = (member.stats || []).map(stat => `
+ const m = members[index];
+ if (!m) return;
+ // Avatar avec image si dispo
+ const imgSrc = `assets/images/team/${m.id}.png`;
+ modalAvatar.innerHTML = `
+
+
${m.avatar || m.name.charAt(0)}
+ `;
+ modalName.textContent = m.name;
+ modalRole.textContent = m.role;
+ modalBio.textContent = m.bio;
+ modalStats.innerHTML = (m.stats || []).map(s => `
-
${stat.value}
-
${stat.label}
+
${s.value}
+
${s.label}
`).join('');
-
- modalSkills.innerHTML = (member.skills || []).map(s => `
${s} `).join('');
-
+ modalSkills.innerHTML = (m.skills || []).map(s => `
${s} `).join('');
modalSocial.innerHTML = `
-
-
+
+
+
+
`;
-
- if (window.feather && feather.replace) feather.replace();
-
modalOverlay.classList.add('active');
document.body.style.overflow = 'hidden';
}
@@ -156,16 +347,68 @@ document.addEventListener('DOMContentLoaded', () => {
document.body.style.overflow = '';
}
- // Attach click listeners to generated cards
carousel.querySelectorAll('.team-card').forEach(card => {
- card.addEventListener('click', () => {
- const idx = parseInt(card.dataset.member, 10);
- openMemberModal(idx);
- });
+ const openCard = () => { const idx = parseInt(card.dataset.member, 10); openMemberModal(idx); };
+ card.addEventListener('click', openCard);
+ card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openCard(); } });
});
modalClose && modalClose.addEventListener('click', closeMemberModal);
- modalOverlay && modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeMemberModal(); });
- document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modalOverlay.classList.contains('active')) closeMemberModal(); });
+ modalOverlay && modalOverlay.addEventListener('click', e => { if (e.target === modalOverlay) closeMemberModal(); });
+ document.addEventListener('keydown', e => { if (e.key === 'Escape' && modalOverlay && modalOverlay.classList.contains('active')) closeMemberModal(); });
}
-});
\ No newline at end of file
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// EASTER EGG — top-level (hors DOMContentLoaded pour garantir l'attachement)
+// ═══════════════════════════════════════════════════════════════════════════
+
+(function () {
+ var KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
+ var progress = 0;
+
+ // PC : Konami Code — capture:true pour passer avant tout autre listener
+ window.addEventListener('keydown', function(e) {
+ var key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+ if (key === KONAMI[progress]) {
+ progress++;
+ if (progress === KONAMI.length) {
+ progress = 0;
+ triggerEasterEgg();
+ }
+ } else {
+ progress = (key === KONAMI[0]) ? 1 : 0;
+ }
+ }, true); // capture phase — reçu avant tout stopPropagation
+
+ // Mobile : 10 taps sur le logo navbar OU logo footer
+ var tapCount = 0;
+ var tapTimer = null;
+
+ document.addEventListener('click', function(e) {
+ if (!e.target.closest('.logo') && !e.target.closest('.logo-mini') && !e.target.closest('.omega-symbol')) return;
+ if (!('ontouchstart' in window) && navigator.maxTouchPoints === 0) return;
+ tapCount++;
+ clearTimeout(tapTimer);
+ tapTimer = setTimeout(function() { tapCount = 0; }, 600);
+ if (tapCount >= 10) { tapCount = 0; triggerEasterEgg(); }
+ });
+
+ function triggerEasterEgg() {
+ if (document.getElementById('easter-egg-overlay')) return;
+ var egg = document.createElement('div');
+ egg.id = 'easter-egg-overlay';
+ egg.setAttribute('role', 'dialog');
+ egg.setAttribute('aria-modal', 'true');
+ egg.innerHTML = '
🎮
GG\u00a0! Tu as trouvé l\u2019easter egg\u00a0! La vraie question c\u2019est\u00a0: combien de temps tu as mis\u00a0?
Fermer ';
+ document.body.appendChild(egg);
+ var closeBtn = document.getElementById('easter-egg-close');
+ closeBtn && closeBtn.focus();
+ var remove = function() { egg.remove(); };
+ closeBtn && closeBtn.addEventListener('click', remove);
+ egg.addEventListener('click', function(e) { if (e.target === egg) remove(); });
+ window.addEventListener('keydown', function esc(e) {
+ if (e.key === 'Escape') { remove(); window.removeEventListener('keydown', esc); }
+ }, { once: true });
+ }
+})();
diff --git a/assets/js/main.js b/assets/js/main.js
index 9e7fe37..e34b113 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -86,6 +86,15 @@ document.addEventListener('DOMContentLoaded', async () => {
// wait for includes to be loaded so subsequent initialization can bind to elements inside them
await loadIncludes();
+ // Déclenche les reveals maintenant que tous les includes sont dans le DOM
+ setTimeout(() => {
+ document.querySelectorAll('.reveal:not(.active)').forEach(el => {
+ if (el.getBoundingClientRect().top < window.innerHeight - 50) {
+ el.classList.add('active');
+ }
+ });
+ }, 0);
+
const html = document.documentElement;
function getPreferredTheme() {
@@ -367,27 +376,27 @@ document.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('hashchange', wrappedSetActive);
window.addEventListener('popstate', wrappedSetActive);
- // Reveal on scroll
- const revealElements = document.querySelectorAll('.reveal');
+ // Reveal on scroll — re-query après chargement des includes
function revealOnScroll() {
- if (!revealElements.length) return;
- revealElements.forEach(el => {
- const elementTop = el.getBoundingClientRect().top;
- if (elementTop < window.innerHeight - 100) {
+ const els = document.querySelectorAll('.reveal:not(.active)');
+ els.forEach(el => {
+ if (el.getBoundingClientRect().top < window.innerHeight - 50) {
el.classList.add('active');
}
});
}
- window.addEventListener('scroll', revealOnScroll);
+ // Déclenche immédiatement après includes + au scroll + au load
+ revealOnScroll();
+ window.addEventListener('scroll', revealOnScroll, { passive: true });
window.addEventListener('load', revealOnScroll);
- // Contact form (if exists)
- const contactForm = document.getElementById('contact-form');
- if (contactForm) {
- contactForm.addEventListener('submit', function (e) {
- e.preventDefault();
- alert('Merci pour votre message ! Nous vous répondrons très bientôt.');
- this.reset();
- });
- }
+ // Contact form (if exists) c'est en double
+ // const contactForm = document.getElementById('contact-form');
+ // if (contactForm) {
+ // contactForm.addEventListener('submit', function (e) {
+ // e.preventDefault();
+ // alert('Merci pour votre message ! Nous vous répondrons très bientôt.');
+ // this.reset();
+ // });
+ // }
});
\ No newline at end of file
diff --git a/assets/js/pages/realisations.js b/assets/js/pages/realisations.js
index eb95d55..6904fb4 100644
--- a/assets/js/pages/realisations.js
+++ b/assets/js/pages/realisations.js
@@ -1,7 +1,9 @@
-// Page script for /pages/realisations.html
+// Page script for /pages/realisations.html et index.html
document.addEventListener('DOMContentLoaded', async () => {
- const dataUrl = '../assets/data/projects.json';
+ // Fonctionne depuis /pages/ et depuis / (index.html)
+ const isRoot = !window.location.pathname.includes('/pages/');
+ const dataUrl = isRoot ? 'assets/data/projects.json' : '../assets/data/projects.json';
let allProjects = [];
try {
@@ -133,35 +135,80 @@ document.addEventListener('DOMContentLoaded', async () => {
portfolioGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
+ // ── Modal tab switching ──────────────────────────────────────────────────────
+ const modalTabs = document.querySelectorAll('.project-modal-tab');
+ modalTabs.forEach(tab => {
+ tab.addEventListener('click', () => {
+ const tabId = tab.dataset.tab;
+ modalTabs.forEach(t => t.classList.remove('active'));
+ tab.classList.add('active');
+ document.querySelectorAll('.project-modal-tab-content').forEach(c => {
+ c.classList.toggle('active', c.id === 'tab-' + tabId);
+ });
+ });
+ });
+
+ function resetModalTabs() {
+ modalTabs.forEach((t, i) => t.classList.toggle('active', i === 0));
+ document.querySelectorAll('.project-modal-tab-content').forEach((c, i) => c.classList.toggle('active', i === 0));
+ }
+
function openProjectModal(projectId) {
const project = allProjects.find(p => p.id === Number(projectId));
if (!project) return;
+ resetModalTabs();
+
modalCategory.textContent = getCategoryLabel(project.category);
modalTitle.textContent = project.title;
modalDesc.textContent = project.desc;
- modalMeta.innerHTML = `
`;
+ modalMeta.innerHTML = `
${project.duration ? `
` : ''}`;
modalFeatures.innerHTML = project.features.map(f => `
${f}
`).join('');
- modalTech.innerHTML = project.tech.map(t => `
${t}
`).join('');
+
+ // Tech avec icônes (support ancien format string et nouveau format {name, icon})
+ modalTech.innerHTML = project.tech.map(t => {
+ const name = typeof t === 'object' ? t.name : t;
+ const icon = typeof t === 'object' ? (t.icon || 'code') : 'code';
+ return `
`;
+ }).join('');
+
+ // Stats en grille 2×2 avec icônes
modalStats.innerHTML = project.stats.map(s => `
`).join('');
- // gallery slides (use gradient as placeholder slides like original)
- gallerySlides.innerHTML = `
-
-
-
- `;
+ // Gallery : charger les images du dossier via convention de nommage
+ // images/projects/{slug}/1.png, 2.png... avec fallback gradient
+ const imgPath = project.images || '';
+ const imgExtensions = ['png', 'jpg', 'jpeg', 'webp'];
+
+ // On tente de charger jusqu'à 6 images numérotées depuis le dossier
+ const maxImages = 6;
+ let slidesHtml = '';
+
+ // Toujours créer au moins 1 slide gradient (fallback)
+ // Les images réelles se chargent avec onerror pour masquer si absentes
+ for (let i = 1; i <= maxImages; i++) {
+ slidesHtml += `
+
+
+
`;
+ }
+ gallerySlides.innerHTML = slidesHtml;
// reset gallery state
galleryIndex = 0;
updateGallery();
+ updateGalleryDots();
if (modalOverlay) modalOverlay.classList.add('active');
@@ -176,16 +223,60 @@ document.addEventListener('DOMContentLoaded', async () => {
// Gallery helpers
let galleryIndex = 0;
+ function getVisibleSlides() {
+ if (!gallerySlides) return [];
+ // Retourne uniquement les slides qui ont une image chargée OU qui sont la première (fallback gradient)
+ const all = Array.from(gallerySlides.children);
+ const withImg = all.filter(s => s.classList.contains('has-image'));
+ return withImg.length > 0 ? withImg : [all[0]].filter(Boolean);
+ }
+
function updateGallery() {
- const slides = gallerySlides ? Array.from(gallerySlides.children) : [];
- slides.forEach((s, i) => {
+ const visible = getVisibleSlides();
+ const all = gallerySlides ? Array.from(gallerySlides.children) : [];
+ // Cache toutes les slides non visibles
+ all.forEach(s => {
+ if (!visible.includes(s)) { s.style.display = 'none'; }
+ else { s.style.display = ''; }
+ });
+ // Positionne les slides visibles
+ visible.forEach((s, i) => {
s.style.transform = `translateX(${(i - galleryIndex) * 100}%)`;
s.classList.toggle('active', i === galleryIndex);
});
+ // Clamp index
+ if (galleryIndex >= visible.length) galleryIndex = Math.max(0, visible.length - 1);
}
- function prevSlide() { galleryIndex = Math.max(0, galleryIndex - 1); updateGallery(); }
- function nextSlide() { const slides = gallerySlides ? gallerySlides.children.length : 0; galleryIndex = Math.min(slides - 1, galleryIndex + 1); updateGallery(); }
+ function updateGalleryDots() {
+ const galleryDots = document.getElementById('gallery-dots');
+ if (!galleryDots) return;
+ // Attend que les images se chargent avant de créer les dots
+ setTimeout(() => {
+ const visible = getVisibleSlides();
+ galleryDots.innerHTML = visible.map((_, i) =>
+ `
`
+ ).join('');
+ galleryDots.querySelectorAll('.gallery-dot').forEach(dot => {
+ dot.addEventListener('click', () => {
+ galleryIndex = parseInt(dot.dataset.idx);
+ updateGallery();
+ galleryDots.querySelectorAll('.gallery-dot').forEach((d, i) => d.classList.toggle('active', i === galleryIndex));
+ });
+ });
+ }, 300);
+ }
+
+ function prevSlide() {
+ const visible = getVisibleSlides();
+ galleryIndex = galleryIndex <= 0 ? visible.length - 1 : galleryIndex - 1;
+ updateGallery();
+ }
+ function nextSlide() {
+ const visible = getVisibleSlides();
+ galleryIndex = galleryIndex >= visible.length - 1 ? 0 : galleryIndex + 1;
+ updateGallery();
+ }
// Event bindings
filterTabs.forEach(tab => tab.addEventListener('click', (e) => {
@@ -222,6 +313,60 @@ document.addEventListener('DOMContentLoaded', async () => {
window.openProjectModal = openProjectModal;
window.goToPage = goToPage;
+ // ── Projets phares (bento grid) — 3 premiers projets du JSON ───────────────
+ const featuredBento = document.getElementById('featured-bento-grid');
+ if (featuredBento) {
+ const featured = allProjects.slice(0, 3);
+ const categoryLabels = { bot: 'Bot Discord', map: 'Fortnite Map', graphisme: 'Graphisme' };
+
+ featuredBento.innerHTML = featured.map((p, i) => {
+ const isReverse = i % 2 === 1 ? ' reverse' : '';
+ const statsHtml = (p.stats || []).slice(0, 4).map((s) => `
+
+
+
${s.value}
+
${s.label}
+
+ `).join('');
+ const featuresHtml = (p.features || []).slice(0, 6).map(f => `
${f} `).join('');
+ const divider = i < featured.length - 1 ? '
' : '';
+
+ return `
+
+
+
+
${categoryLabels[p.category] || p.category}
+
${p.title}
+
${p.desc.substring(0, 100)}${p.desc.length > 100 ? '…' : ''}
+
+
+
${statsHtml}
+
+
Description
+
${p.desc}
+
${featuresHtml}
+
+
+ ${divider}
+ `;
+ }).join('');
+
+ // Replace feather icons
+ if (window.feather && feather.replace) { try { feather.replace(); } catch(e) {} }
+
+ // Click to open modal
+ featuredBento.querySelectorAll('.bento-project').forEach(el => {
+ const open = () => openProjectModal(el.getAttribute('data-project-id'));
+ el.addEventListener('click', open);
+ el.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } });
+ });
+
+ // Reveal animation
+ setTimeout(() => {
+ featuredBento.querySelectorAll('.reveal').forEach(el => el.classList.add('active'));
+ }, 80);
+ }
+
// Initial render
renderProjects();
renderPagination();
diff --git a/assets/js/pages/services.js b/assets/js/pages/services.js
index 577cc4c..cfb0c25 100644
--- a/assets/js/pages/services.js
+++ b/assets/js/pages/services.js
@@ -68,6 +68,11 @@
Des bots entièrement personnalisés pour animer et gérer vos serveurs RP.
+ Des bots entièrement personnalisés pour animer et gérer touts vos serveurs.
+ 
+