Merge pull request #11 from RedBoardDev/github

GitHub

src/components/ProjectCardSection.js

@@ -1,54 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from '@mui/material/Button';
 import './ProjectCardSection.css';
 import ProjectCard from '../components/ProjectCard';
 
-import project1Img from '../assets/projects/project1.png';
-import project2Img from '../assets/projects/project2.png';
-import project3Img from '../assets/projects/project3.png';
-import project4Img from '../assets/projects/project4.png';
-import project5Img from '../assets/projects/project5.png';
-import project6Img from '../assets/projects/project6.png';
-
 function ProjectCardSection({ number }) {
-    const projects = [
-        {
-            projectName: "Projet 1",
-            projectDesc: "Description du projet 1",
-            projectImg: project1Img,
-            projectLink: "google.com"
-        },
-        {
-            projectName: "Projet 2",
-            projectDesc: "Description du projet 2",
-            projectImg: project2Img,
-            projectLink: "google.com"
-        },
-        {
-            projectName: "Projet 3",
-            projectDesc: "Description du projet 3",
-            projectImg: project3Img,
-            projectLink: "google.com"
-        },
-        {
-            projectName: "Projet 4",
-            projectDesc: "Description du projet 4",
-            projectImg: project4Img,
-            projectLink: "google.com"
-        },
-        {
-            projectName: "Projet 5",
-            projectDesc: "Description du projet 5",
-            projectImg: project5Img,
-            projectLink: "google.com"
-        },
-        {
-            projectName: "Projet 6",
-            projectDesc: "Description du projet 6",
-            projectImg: project6Img,
-            projectLink: "google.com"
-        }
-    ];
+    const [projects, setProjects] = useState([]);
+
+    useEffect(() => {
+
+        const fetchGitHubProjects = async () => {
+            try {
+                const response = await fetch('https://api.github.com/users/redboarddev/repos?sort=pushed&direction=desc');
+                if (!response.ok) {
+                    throw new Error('Error while retrieving GitHub data');
+                }
+
+                const data = await response.json();
+
+                const filteredProjects = data.filter((project) => project.description);
+
+                const slicedProjects = filteredProjects.slice(0, 6);
+
+                const mappedProjects = slicedProjects.map((project) => ({
+                    projectName: project.name,
+                    projectDesc: project.description,
+                    projectImg: project.owner.avatar_url,
+                    projectLink: project.html_url,
+                }));
+
+                setProjects(mappedProjects);
+            } catch (error) {
+                console.error('Erreur:', error);
+            }
+        };
+
+        fetchGitHubProjects();
+    }, []);
 
     return (
         <div className="project-cards-section">

src/pages/Home.js

@@ -11,32 +11,27 @@ import ProjectCardSection from '../components/ProjectCardSection';
 
 function Home() {
     const data = [
-        // { text: "Développement de sites web", value: 42, description: "Création et maintenance de sites web." },
-        // { text: "Développement back-end", value: 40, description: "Création de la logique serveur pour les applications web." },
-        // { text: "Gestion de bases de données", value: 45, description: "Conception et manipulation de bases de données." },
-        // { text: "Automatisation de processus", value: 40, description: "Automatisation des tâches répétitives." },
-        // { text: "Développement d'applications mobiles", value: 30, description: "Création d'applications pour les appareils mobiles." },
-        { text: "1JavaScript", value: 35, description: "Langage de programmation pour le développement web." },
-        { text: "2Python", value: 45, description: "Langage de programmation polyvalent et puissant." },
-        { text: "3React", value: 40, description: "Bibliothèque JavaScript pour la création d'interfaces utilisateur." },
-        { text: "4Node.js", value: 35, description: "Plateforme de développement côté serveur en JavaScript." },
-        { text: "5HTML/CSS", value: 50, description: "Langages de base pour la création de pages web." },
-        { text: "6Git", value: 45, description: "Système de contrôle de version pour le suivi des modifications de code." },
-        { text: "7Docker", value: 30, description: "Plateforme de conteneurisation pour l'exécution d'applications." },
-        { text: "8SQL", value: 40, description: "Langage de requête pour interagir avec les bases de données relationnelles." },
-        { text: "9C++", value: 20, description: "Langage de programmation pour le développement système et les applications." },
-        { text: "10Java", value: 30, description: "Langage de programmation polyvalent pour les applications." },
-        { text: "11TypeScript", value: 35, description: "Langage de programmation typé pour le développement JavaScript." },
-        { text: "12Ruby", value: 25, description: "Cadre d'application web basé sur Ruby." },
-        { text: "13PHP", value: 25, description: "Langage de script pour le développement web côté serveur." },
-        { text: "14DevOps", value: 35, description: "Méthodologie de développement logiciel centrée sur la collaboration entre équipes de développement et opérations." },
-        { text: "15Ansible", value: 30, description: "Outil d'automatisation pour la gestion de configuration et le déploiement d'applications." },
-        { text: "16Vue.js", value: 20, description: "Framework JavaScript progressif pour la création d'interfaces utilisateur." },
-        { text: "17Angular", value: 30, description: "Plateforme de développement d'applications web côté client." },
-        { text: "18API REST", value: 40, description: "Architecture d'API pour les services web." },
-        { text: "19Express.js", value: 30, description: "Cadre d'application web pour Node.js." },
-        { text: "20GraphQL", value: 25, description: "Langage de requête pour les API et les services web." },
-        { text: "21GraphQL", value: 25, description: "Langage de requête pour les API et les services web." },
+        { text: "JavaScript", value: 35, description: "Langage de programmation pour le développement web." },
+        { text: "Python", value: 45, description: "Langage de programmation polyvalent et puissant." },
+        { text: "React", value: 40, description: "Bibliothèque JavaScript pour la création d'interfaces utilisateur." },
+        { text: "Node.js", value: 35, description: "Plateforme de développement côté serveur en JavaScript." },
+        { text: "HTML/CSS", value: 50, description: "Langages de base pour la création de pages web." },
+        { text: "Git", value: 45, description: "Système de contrôle de version pour le suivi des modifications de code." },
+        { text: "Docker", value: 30, description: "Plateforme de conteneurisation pour l'exécution d'applications." },
+        { text: "SQL", value: 40, description: "Langage de requête pour interagir avec les bases de données relationnelles." },
+        { text: "C++", value: 20, description: "Langage de programmation pour le développement système et les applications." },
+        { text: "Java", value: 30, description: "Langage de programmation polyvalent pour les applications." },
+        { text: "TypeScript", value: 35, description: "Langage de programmation typé pour le développement JavaScript." },
+        { text: "Ruby", value: 25, description: "Cadre d'application web basé sur Ruby." },
+        { text: "PHP", value: 25, description: "Langage de script pour le développement web côté serveur." },
+        { text: "DevOps", value: 35, description: "Méthodologie de développement logiciel centrée sur la collaboration entre équipes de développement et opérations." },
+        { text: "Ansible", value: 30, description: "Outil d'automatisation pour la gestion de configuration et le déploiement d'applications." },
+        { text: "Vue.js", value: 20, description: "Framework JavaScript progressif pour la création d'interfaces utilisateur." },
+        { text: "Angular", value: 30, description: "Plateforme de développement d'applications web côté client." },
+        { text: "API REST", value: 40, description: "Architecture d'API pour les services web." },
+        { text: "Express.js", value: 30, description: "Cadre d'application web pour Node.js." },
+        { text: "GraphQL", value: 25, description: "Langage de requête pour les API et les services web." },
+        { text: "GraphQL", value: 25, description: "Langage de requête pour les API et les services web." },
 
     ];