Création de Portfolio Personnel avec React et Bootstrap : Guide Complet du Template home-

【Lien de Téléchargement Gratuit】home- Le template de site web personnel/portfolio par Hashir Shoaib. Développé avec React et Bootstrap. Projet : https://gitcode.com/gh_mirrors/home57/home-

Dans l'ère numérique, disposer d'un site web de portfolio professionnel représente la meilleure approche pour mettre en valeur vos compétences et projets. home- (projet d'accélération GitHub) est un template de site web/portfolio basé sur React et Bootstrap, développé par Hashir Shoaib, offrant une solution rapide, esthétique et personnalisable aidant les développeurs et designers à créer une plateforme d'exposition de marque personnelle impressionnante.

Pourquoi choisir le template home- pour votre portfolio ?

Le template home- se distingue comme le choix idéal pour construire une marque personnelle, principalement grâce à ces avantages fondamentaux :

• Technologie de pointe : Construit avec React 18 et Bootstrap 5, garantissant un aspect moderne et une expérience utilisateur optimale
• Haute personnalisation : Personnalisation facile des informations personnelles, compétences et projets via des fichiers de configuraton simples
• Design responsive : Adaptation parfaite aux écrans de toutes tailles, des mobiles aux desktops
• Interface épurée : Composants UI soignés et animations subtiles pour une image professionnelle

Exemple d'interface d'accueil du template home-, avec un dégradé de fond et une disposition minimaliste mettant en avant l'image de marque personnelle

Démarrage rapide : 3 étapes pour créer votre portfolio

1. Récupérer le code du projet

Commencez par cloner le dépôt localement :

git clone https://gitcode.com/gh_mirrors/home57/home-
cd home-

2. Installer les dépendances et lancer le serveur de développement

Le projet utilise npm pour la gestion des paquets. Installez les dépendances et lancez le serveur :

npm install
npm start

Une fois lancé, accédez à http://localhost:3000 pour visualiser le site.

3. Personnalisation des informations

Le fichier de configuration principal se trouve dans src/editable-stuff/config.js. En modifiant ce fichier, vous pouvez facilement personnaliser vos informations personnelles :

• Informations de base (nom, poste, liens sociaux)
• Compétences (compétences techniques et comportementales)
• Projets (récupération automatique depuis GitHub ou spécification manuelle)
• Coordonnées de contact

Fonctionnalités principales et guide de personnalisation

Configuration des informations personnelles

Dans src/editable-stuff/config.js, vous pouvez définir vos informations personnelles :

const mainBody = {
  gradientColors: "#4484ce, #1ad7c0, #ff9b11, #9b59b6, #ff7f7f, #ecf0f1",
  firstName: "Hashir",
  lastName: "Shoaib",
  message: " Passionné par le changement du monde par la technologie. ",
  icons: [
    { image: "fa-github", url: "https://github.com/hashirshoaeb" },
    // Liens vers autres plateformes sociales...
  ],
};

Personnalisation des compétences

La section compétences permet une visualisation des compétences techniques et comportementales :

const competences = {
  afficher: true,
  titre: "Compétences",
  competencesTechniques: [
    { nom: "Python", valeur: 90 },
    { nom: "JavaScript", valeur: 90 },
    // Autres compétences...
  ],
  competencesComportementales: [
    { nom: "Collaboration", valeur: 90 },
    { nom: "Résolution de problèmes", valeur: 75 },
    // Autres compétences comportementales...
  ],
};

Configuration des projets

Vous pouvez choisir d'afficher automatiquement les projets récents depuis GitHub ou de spécifier manuellement certains projets :

const projets = {
  afficher: true,
  titre: "Projets Récents",
  gitHubUsername: "hashirshoaeb",
  nombreProjets: 4, // Afficher les 4 derniers projets
  projetsSpecifiques: [], // Laisser vide pour les derniers projets, ou spécifier un tableau de noms de projets
};

Dans la section "à propos", vous pouvez définir votre photo de profil, avec support pour les images locales ou les liens vers les avatars des réseaux sociaux

Analyse de la structure du projet

L'architecture du template home- est claire et facilite la compréhension et la personnalisation :

• public/ : Fichiers statiques, y compris le fichier d'entrée HTML et les images
• src/assets/ : Images et autres ressources
• src/components/ : Composants React, organisés par fonctionnalités
• home/ : Composants de la page d'accueil (ÀPropos, Expérience, Compétences, etc.)
• blog/ : Composants liés au blog
• src/editable-stuff/ : Contenu modifiable (fichiers de configuration, avatars, CV)
• src/scss/ : Fichiers de style, avec support pour thèmes personnalisés

Options de déploiement

Le template home- propose plusieurs méthodes de déploiement pour répondre à différents besoins :

1. Déploiement sur GitHub Pages

Un script de déploiement GitHub Pages est intégré. Modifiez simplement le champ homepage dans package.json, puis exécutez :

npm run deploy

2. Déploiement personnalisé

Des options de déploiement personnalisé sont également disponibles. Consultez le document README/docs/custom-deployment.md pour plus d'informations.

Astuces de personnalisation avancée

Modification des couleurs du thème

En modifiant le fichier src/scss/custom.scss, vous pouvez facilement changer les couleurs du thème :

// Couleurs du thème personnalisé
$couleur-primaire: #4484ce;
$couleur-secondaire: #1ad7c0;
// Autres variables de couleur...

Ajout de nouveaux composants de page

Pour ajouter de nouvelles pages, créez de nouveaux fichiers de composants dans le répertoire src/components/ et ajoutez les routes correspondantes dans la configuration du routage.

Conclusion

home- est un template de portfolio React+Bootstrap complet et facile à personnaliser, offrant aux développeurs une solution rapide pour construire un site web personnel professionnel. Que ce soit pour présenter des projets, des compétences ou une expérience personnelle, home- vous aide à créer une image de marque personnelle mémorable.

Grâce à une configuration simple et à une personnalisation aisée, vous pouvez rapidement disposer d'un portfolio web esthétique, responsive et fonctionnel. Commencez dès maintenant à utiliser le template home- pour présenter vos compétences et projets, et lancez votre voyage vers une marque personnelle réussie !

【Lien de Téléchargement Gratuit】home- Le template de site web personnel/portfolio par Hashir Shoaib. Développé avec React et Bootstrap. Projet : https://gitcode.com/gh_mirrors/home57/home-