Démo en direct | Déploiement | À propos | Caractéristiques | Contribution
Une application Web prête à être déployée pour présenter votre portefeuille de codage.
Codefolio est une application Web de portefeuille Jamstack pour les programmeurs. Il est construit à l'aide de Nuxt.js et exploite le module @nuxt/content pour utiliser les données utilisateur placées dans le répertoire /content
et générer des actifs statiques prêts pour la production.
L'intégralité du code est écrite en gardant à l'esprit les modules et la réutilisabilité.
La principale caractéristique de cette application est qu'elle prend en charge le déploiement statique. Le codage des portefeuilles ne nécessite pas beaucoup de changements, donc un site statique est un meilleur choix qu'un SPA normal ou une application Full-Stack.
L'interface utilisateur de Codefolio est conçue en gardant à l'esprit la convivialité. Il est entièrement réactif et utilise une approche axée sur le mobile.
La conception est basée sur le modèle 7-1 Sass et exploite Bootstrap 5 partiellement chargé pour la mise en page et les utilitaires.
Le répertoire assets/aprite/svg contient des fichiers d'icônes svg individuels. Vous pouvez utiliser ces icônes (ou placer vos propres icônes svg dans ce répertoire) pour référencer le nom de l'icône dans le composant <icon>
vue.
Codefolio prend en charge les données utilisateur personnalisées. Outre les informations personnelles, les utilisateurs peuvent également personnaliser d'autres éléments intéressants tels que des liens externes et l'URL du bouton de reprise dans la barre de navigation supérieure.
Les générateurs de sites statiques utilisent les données utilisateur brutes (généralement au format markdown ou JSON) pour générer du HTML prêt pour la production. Vous aurez donc besoin de ce guide comme référence lors de l'ajout de votre contenu à Codefolio.
Voici à quoi ressemble la structure du dossier de contenu.
content
| navbar.json
| about.md
| social-icons.json
| user.json
|
└───projects
project1.json
project2.json
project3.json
/* so on... */
Voyons à quoi sert chaque fichier ou dossier.
Ce fichier est utilisé pour les données facultatives liées à la barre de navigation supérieure.
Propriété | Taper | Description |
---|---|---|
URL de reprise | string | URL du fichier de reprise pour le bouton de reprise de la barre de navigation. |
Liens externes | array | Un tableau contenant des objets pour générer des liens externes dans la barre de navigation supérieure. Chaque objet de lien externe doit avoir des propriétés text et de chaîne url pour fonctionner correctement. |
Ce fichier de démarque est utilisé pour la page À propos.
Ce fichier est utilisé pour générer des icônes sociales dans la page À propos.
Propriété | Taper | Description |
---|---|---|
icônes | array | Un tableau contenant des objets pour générer des icônes sociales dans la page de contact. Chaque objet doit avoir des propriétés name et url (chaînes). La propriété name doit avoir un fichier svg correspondant dans le répertoire /assets/sprite/svg/ . La plupart des icônes sociales sont déjà disponibles, mais n'hésitez pas à ajouter vos icônes svg personnalisées. En mode développement, vous pouvez visiter la route /_icons pour lister toutes les icônes disponibles. |
Ce fichier est utilisé pour les détails utilisateur requis pour la page d'accueil.
Propriété | Taper | Description |
---|---|---|
nom et prénom | string | Nom d'utilisateur. |
à propos | string | Un peu sur l'utilisateur. |
image | string | Une URL d'image valide commençant par http ou un nom (y compris l'extension) d'une image placée dans le répertoire assets/images . Veuillez recadrer l'image à 500x500 pour de meilleurs résultats. |
titre | string | Position ou rôle de l'utilisateur. |
Ce fichier est utilisé pour générer la page de contact.
Propriété | Taper | Description |
---|---|---|
formulaireAction | string | Action de formulaire personnalisée pour le formulaire de contact. Vérifiez formpree.io. |
emplacement | string | Chaîne d'emplacement de l'utilisateur. |
string | Adresse e-mail de l'utilisateur. | |
téléphone | string | Numéro de téléphone de l'utilisateur. |
Ce dossier contient tous les projets sous forme de fichiers individuels au format json . Chaque fichier de ce dossier représentera un projet différent.
Le tableau suivant contient le format de chaque fichier dans le dossier des projets.
Propriété | Taper | Description |
---|---|---|
identifiant | integer | Un identifiant unique pour la commande. |
titre | string | Nom du projet. |
description | string | Détails sur le projet. |
image | string | Une URL d'image valide commençant par http ou un nom (y compris l'extension) d'une image placée dans le répertoire assets/images . |
links | object | Un objet qui contient des liens externes du projet. Il peut avoir des propriétés facultatives liveDemo , videoDemo et sourceCode pour les URL. |
technologies | array | Un tableau contenant toutes les technologies (chaînes) utilisées dans le projet. |
Remarque : Créez de nouveaux fichiers pour ajouter d'autres projets et nommez-les comme nom de projet.
Consultez les fichiers factices existants dans le dossier de contenu pour référence.
Nuxt.js fournit des moyens efficaces d'optimiser votre site pour les moteurs de recherche. Veuillez vous référer au guide SEO Nuxt.js pour plus de détails.
Ce projet utilise @nuxtjs/sitemap pour générer automatiquement le fichier sitemap.xml. Veuillez vous référer à leur guide de configuration si vous avez besoin de plus d'informations.
Après avoir personnalisé le contenu en fonction de vos besoins, vous devez déployer l'application en production.
Voyons comment générer des fichiers de build.
Commencez par cloner le référentiel sur votre machine locale à l'aide de git (ou téléchargez-le manuellement)
git clone https://github.com/0xaliraza/codefolio
Ensuite, accédez au répertoire racine du référentiel et installez les dépendances
npm install
Générer des fichiers de build
npm run generate
À ce stade, vous disposerez d'un dossier ./build
contenant tous les fichiers prêts pour la production pour le déploiement. Vous pouvez déployer ces fichiers sur un serveur d'hébergement ou un CDN.
Si vous souhaitez voir l'application exécutée localement
npm run dev
Vous avez besoin d'une expérience préalable en github/codage pour déployer cela à l'aide d'actions github ou d'une autre plate-forme CI/CD.
Il s'agit d'un référentiel de modèles, vous pouvez donc simplement cliquer sur le bouton "Utiliser ce modèle" en haut à droite pour cloner ce référentiel. Personnalisez les fichiers de contenu en fonction de vos besoins et accédez à l'onglet Actions pour ajouter les flux de travail requis. Vous pouvez réutiliser les fichiers ci.yml et cd.yml existants.
Voir les actions github pour en savoir plus.
N'hésitez pas à créer une pull-request ou un problème si vous avez besoin de modifier ou de corriger quelque chose. Ou vous pouvez simplement me contacter directement en utilisant les liens ci-dessous.
N'hésitez pas à me contacter pour tout type d'aide ou d'information. Restons connectés ! :)
Site web
GitHub
Gazouillement
Moyen
Consultez le fichier LICENSE pour connaître les droits et limitations de licence (MIT).