Cet élégant portfolio est à la portée de tous, même sans connaissance en programmation.
Il est développé avec Vite.js en utilisant un template React pour simplifier la mise en place. Le design est optimisé grâce à Tailwind CSS. Aucune compétence en codage n'est nécessaire pour une utilisation optimale. Toutes les données sont stockées dans des fichiers JSON, facilitant ainsi les mises à jour du contenu.
De plus, le formulaire de contact est directement connecté à Google Form, rendant son utilisation accessible à tous, quel que soit leur niveau de compétence en informatique.
- NodeJS doit être installé sur votre systeme
- Une metrise du format de données JSON est requise
- Un Google form est nécessaire
- Cloner le projet :
git clone https://github.com/Roy-Bivash/portfolio-model-1.git
cd portfolio-model-1
- Installation des paquets node :
npm install
- Démarrer le serveur node :
npm run dev
- Ouvrir
http://127.0.0.1:5173/
sur votre navigateur préféré
Pour la configuration et la personnalisation du Portfolio il n'est pas nécessaire de savoir coder.
Toutes modifications et personnalisation se feront depuis un dossier uniquement : ./src/data/
-
- Remplir avec vos informations.
- Le nom et prenom apparaîtront seulement sur l'onglet du navigateur.
- Les informations de contact tel que mail, github et linkedin sont obligatoire.
- Le
favicon
doit être sous format .ico - Les competences sont sous le format suivant (Vous pouvez en créer autant que nécessaire) :
{ "nom" : "", "img": "lien de l'image" }
-
- Mettre a la suite votre parcours, elles seront affichées à la suite sans être triées
- Les parcours sont sous le format suivant (Vous pouvez en créer autant que nécessaire) :
{ "date" : "le format de la date est à votre choix", "text": "" }
-
- Mettre a la suite vos projets, elles seront affichées à la suite sans être triées
- Les projets sont sous le format suivant (Vous pouvez en créer autant que nécessaire) :
{ "id" : "mettre un identifiant different a chaque fois", "name": "le apparaitra en premier", "titre1": "Sous description du projet", "description":"description complete", "technologie": "mettre les technologie utilisé", "thumbnail":"images qui apparaitra en temps qu'icone du projet", "images": ["listes des images d'illustration"] }
-
A. Créez un Google Form avec les spécifications suivant :
- Titre :
Nom Prenom
- Option :Réponse courte
- Titre :
Contact
- Option :Réponse courte
- Titre :
Message
- Option :Paragraphe
B. En haut à droite cliquez sur les 3 petit points puis sur
Obtenir le lien
C. Remplire EXACTEMENT comme indiqué ci-dssou : (Attention à ne pas mettre de majuscule)
nomprenom
dans le champ Nom Prenomcontact
dans le champ Contactmessage
dans le champ Message
D. Cliquez sur
obtenir le lien
puis surCOPIER LE LIEN
E. Une fois le lien obtenu coller le dans le fichier./src/data/googleForm.json
:{ "url" : "Collez votre lien ici", }
- Titre :
Pour deployer votre Portfolio il est nécessaire de compiler votre projet pour ensuite pouvoir deposer vos fichier dans votre serveur.
- Compiler le projet grâce à la commande :
npm run build
- Puis copiez les fichiers du dossier
/dist
dans votre serveur.
(Il est important de noter que certain serveur n'accepte pas le fichier.htaccess
fournie, il vous sera donc nécessaire de le modifier et de l'adapter à votre serveur)
-
Pour héberger vos images (jpeg, png, ico ...) utilisez un sous domaine que vous aurez créer (Un nombre de sous domaine est souvant offert avec votre nom de domaine)
-
Libre à vous de modifier le code source du Portfolio
MIT License
Feel free to customize and modify