+
+
+
+ Statistiques GitHub
+
+
+ Mon activité open source et contributions
+
+
+
+ {stats && (
+
+ {/* Stats principales */}
+
+
+
+
{stats.totalRepos}
+
Repositories
+
+
+
+
+
{stats.totalStars}
+
Stars
+
+
+
+
+
{stats.totalForks}
+
Forks
+
+
+
+
+
{stats.totalCommits}
+
Commits
+
+
+
+ {/* Langages les plus utilisés */}
+
+
+ Langages les plus utilisés
+
+
+ {topLanguages.map(([language, percentage], index) => (
+
+
+ {language}
+ {percentage}%
+
+
+
+ ))}
+
+
+
+ {/* GitHub Graph simulé */}
+
+
+ Activité des 12 derniers mois
+
+
+ {Array.from({ length: 365 }, (_, i) => (
+
0.7
+ ? 'bg-green-500'
+ : Math.random() > 0.5
+ ? 'bg-green-300'
+ : Math.random() > 0.3
+ ? 'bg-green-200'
+ : 'bg-gray-200 dark:bg-gray-700'
+ } animate-fadeInUp`}
+ style={{ animationDelay: `${i * 2}ms` }}
+ title={`Jour ${i + 1}`}
+ />
+ ))}
+
+
+
+ Plus sombre = Plus d'activité
+
+
+
+
+ )}
+
+ );
+};
+
+export default GitHubStatsSection;
diff --git a/src/components/HomelabSection.tsx b/src/components/HomelabSection.tsx
new file mode 100644
index 0000000..5a3267e
--- /dev/null
+++ b/src/components/HomelabSection.tsx
@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import { FaServer, FaDocker, FaLinux, FaNetworkWired, FaHdd, FaMicrochip } from 'react-icons/fa';
+import { useTranslation } from 'react-i18next';
+
+interface ServerSpec {
+ name: string;
+ model: string;
+ cpu: string;
+ ram: string;
+ storage: string;
+ os: string;
+ services: string[];
+ status: 'online' | 'offline' | 'maintenance';
+}
+
+const HomelabSection: React.FC = () => {
+ const { t } = useTranslation();
+ const [activeTab, setActiveTab] = useState<'overview' | 'servers' | 'services'>('overview');
+
+ const servers: ServerSpec[] = [
+ {
+ name: "DELL T320",
+ model: "PowerEdge T320",
+ cpu: "Intel Xeon E5-2400 series",
+ ram: "32GB DDR3",
+ storage: "4x 1TB HDD RAID 10",
+ os: "Proxmox VE",
+ services: ["Proxmox", "Docker", "VM Management", "Backup Server"],
+ status: 'online'
+ },
+ {
+ name: "DELL T330",
+ model: "PowerEdge T330",
+ cpu: "Intel Xeon E3-1200 series",
+ ram: "64GB DDR4",
+ storage: "6x 2TB HDD + 2x 500GB SSD",
+ os: "Proxmox VE",
+ services: ["Media Server", "Development Environment", "CI/CD", "Monitoring"],
+ status: 'online'
+ }
+ ];
+
+ const services = [
+ { name: "Proxmox Cluster", icon:
, description: "Virtualisation et orchestration" },
+ { name: "Docker Swarm", icon:
, description: "Conteneurisation des services" },
+ { name: "Monitoring Stack", icon:
, description: "Grafana + Prometheus + Alertmanager" },
+ { name: "Backup Solution", icon:
, description: "Sauvegarde automatisée 3-2-1" },
+ { name: "Development Lab", icon:
, description: "Environnements de développement isolés" },
+ { name: "Media Center", icon:
, description: "Streaming et gestion multimédia" }
+ ];
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'online': return 'bg-green-500';
+ case 'offline': return 'bg-red-500';
+ case 'maintenance': return 'bg-yellow-500';
+ default: return 'bg-gray-500';
+ }
+ };
+
+ const getStatusText = (status: string) => {
+ switch (status) {
+ case 'online': return 'En ligne';
+ case 'offline': return 'Hors ligne';
+ case 'maintenance': return 'Maintenance';
+ default: return 'Inconnu';
+ }
+ };
+
+ return (
+
+
+
+ 🏠 Mon Homelab
+
+
+ Infrastructure personnelle et laboratoire de développement
+
+
+
+ {/* Navigation tabs */}
+
+
+ {['overview', 'servers', 'services'].map((tab) => (
+
+ ))}
+
+
+
+ {/* Content based on active tab */}
+
+ {activeTab === 'overview' && (
+
+ )}
+
+ {activeTab === 'servers' && (
+
+ {servers.map((server, index) => (
+
+
+
+
+
+
+
{server.name}
+
{server.model}
+
+
+
+
+
+ {getStatusText(server.status)}
+
+
+
+
+
+
+
+
+
Stockage
+
{server.storage}
+
+
+
+
+
Services
+
+ {server.services.map((service, idx) => (
+
+ {service}
+
+ ))}
+
+
+
+
+ ))}
+
+ )}
+
+ {activeTab === 'services' && (
+
+ {services.map((service, index) => (
+
+
+
{service.icon}
+
{service.name}
+
+
{service.description}
+
+ ))}
+
+ )}
+
+
+ );
+};
+
+export default HomelabSection;
diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx
new file mode 100644
index 0000000..066de3b
--- /dev/null
+++ b/src/components/LoadingScreen.tsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+
+interface LoadingScreenProps {
+ onLoadingComplete: () => void;
+}
+
+const LoadingScreen: React.FC
= ({ onLoadingComplete }) => {
+ const [displayText, setDisplayText] = useState('');
+ const [showCursor, setShowCursor] = useState(true);
+ const fullText = "Félix MARQUET";
+ const [isComplete, setIsComplete] = useState(false);
+
+ useEffect(() => {
+ let currentIndex = 0;
+ const typingInterval = setInterval(() => {
+ if (currentIndex <= fullText.length) {
+ setDisplayText(fullText.substring(0, currentIndex));
+ currentIndex++;
+ } else {
+ clearInterval(typingInterval);
+ setIsComplete(true);
+ setTimeout(() => {
+ onLoadingComplete();
+ }, 1000);
+ }
+ }, 150);
+
+ return () => clearInterval(typingInterval);
+ }, [fullText, onLoadingComplete]);
+
+ useEffect(() => {
+ const cursorInterval = setInterval(() => {
+ setShowCursor(prev => !prev);
+ }, 500);
+
+ return () => clearInterval(cursorInterval);
+ }, []);
+
+ return (
+
+
+
+ {displayText}
+ {showCursor && !isComplete && |}
+
+
+
Chargement du portfolio...
+
+