Skip to content

ValMtp3/Bento-Grid-Portfolio

Repository files navigation

🌟 Bento Grid Portfolio

Bienvenue sur le repository de mon portfolio ! Ce projet utilise Vue.js pour la structure, Tailwind CSS pour le style, et Bento-Grid pour la mise en page.

🚀 Aperçu

Ce portfolio a été conçu pour mettre en avant mes compétences, mes projets et mon parcours professionnel. L'objectif est de fournir une interface utilisateur agréable et réactive, tout en restant simple et élégante.

🎨 Fonctionnalités

  • Vue.js : Framework JavaScript progressif pour la construction d'interfaces utilisateur.
  • Tailwind CSS : Framework CSS utilitaire pour un design rapide et réactif.
  • Bento-Grid : Système de grille flexible pour une disposition cohérente des éléments.
  • Composants réutilisables : Facilite l'ajout de nouveaux projets et sections.
  • Design réactif : Optimisé pour tous les appareils, des mobiles aux écrans larges.
  • Animations fluides : Pour une expérience utilisateur agréable et engageante.

🛠️ Recommended IDE Setup

WebStorm

📚 Technologies Utilisées

  • Vue.js
  • Tailwind CSS
  • Vite
  • JavaScript
  • HTML5
  • CSS3

⚙️ Customize Configuration

See Vite Configuration Reference.

📦 Project Setup

npm install

🔄 Compile and Hot-Reload for Development

npm run dev

📦 Compile and Minify for Production

npm run build

🛠️ Installation

  1. Clone le repository :

    git clone https://github.com/ValMtp3/portfolio-vue-bento-tailwind.git
    cd portfolio-vue-bento-tailwind
  2. Installe les dépendances :

    npm install
  3. Lance l'application :

    npm run serve

🌐 Utilisation

Après avoir démarré le serveur de développement, tu peux accéder à l'application via http://localhost:8080. Modifie les fichiers dans le dossier src pour personnaliser les sections de ton portfolio.

🗂️ Structure du Projet

portfolio-vue-bento-tailwind
├── public
│   ├── assets_index
│   ├── Font
│   ├── JS
│   ├── output.css
├── src
│   ├── data
│   ├── components
│   ├── router
│   ├── views
│   ├── App.vue
│   ├── main.js
├── index.html
├── tailwind.config.js
├── tailwind.css
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md
  • public/assets_index : Contient les images, icônes et autres ressources statiques.
  • public/Font : Contient les polices utilisées.
  • public/JS : Contient le fichier JS principal.
  • public/output.css : Fichier CSS de Tailwind.
  • src/components : Composants Vue.js réutilisables.
  • src/views : Différentes pages de l'application.
  • src/router : Différentes routes de l'application.
  • App.vue : Composant racine.
  • main.js : Point d'entrée de l'application.

🎨 Personnalisation

Pour personnaliser les styles, modifie le fichier tailwind.config.js et ajoute tes propres classes utilitaires. Tu peux également ajuster les composants et les vues pour répondre à tes besoins spécifiques.

🤝 Contribuer

Les contributions sont les bienvenues ! Si tu souhaites ajouter des fonctionnalités ou corriger des bugs, n'hésite pas à créer une pull request.

✍️ Auteurs

  • Valentin Fiess - Développeur principal - ValMtp3
  • Voici mon portfolio : Portfolio

💖 Remerciements

Merci d'avoir jeté un œil à mon portfolio ! J'espère qu'il te plaira autant que j'ai pris plaisir à le créer.