Ce projet est un portfolio interactif et moderne développé avec HTML, CSS (via TailwindCSS), et Font Awesome pour les icônes. Le design met en avant des études de cas et une section d'éducation avec des animations et transitions fluides.
- Responsive Design : S'adapte à différentes tailles d'écran.
- Transitions Animées : Les boutons, images et éléments ont des animations au survol.
- Sections Interactives : Études de cas, éducation et un appel à l'action ("Let's get started").
- Intégration d'Icônes : Via Font Awesome.
/
├── src/
│ ├── assets/
│ │ ├── images/
│ │ │ ├── firstProjet.svg
│ │ │ ├── SecondProject.svg
│ │ │ ├── ThirdProject.svg
│ │ │ ├── LET'SGO.svg
│ │ │ ├── iai.jpeg
│ │ │ ├── worketyamo.png
│ ├── styles/
│ │ ├── output.css
├── index.html
├── README.md
- HTML5 : Structure de la page.
- TailwindCSS : Framework CSS pour une mise en page rapide et efficace.
- Font Awesome : Icônes utilisées pour les réseaux sociaux.
- JavaScript : Optionnel pour ajouter des fonctionnalités interactives si besoin (non utilisé ici).
- Header : Menu de navigation avec liens vers les différentes sections.
- Hero Section : Présentation avec une image et un bouton interactif.
- Trois études de cas avec descriptions, boutons animés, et transitions d'image.
- Présente les établissements ou institutions associés avec des logos interactifs.
- Clonez ce dépôt :
git clone https://github.com/Worketyamo-Students/PORTOFOLIO_TAILWIND.git
- Accédez au dossier du projet :
cd PORTOFOLIO_TAILWIND
- Ouvrez le fichier
index.html
dans votre navigateur :- Double-cliquez sur le fichier
index.html
ou utilisez une extension comme Live Server dans VS Code.
- Double-cliquez sur le fichier
- Images :
- Remplacez les fichiers dans
./src/assets/images/
avec vos propres images.
- Remplacez les fichiers dans
- Couleurs :
- Modifiez les classes Tailwind CSS pour ajuster les couleurs et les styles dans
index.html
.
- Modifiez les classes Tailwind CSS pour ajuster les couleurs et les styles dans
- Styles Additionnels :
- Ajoutez des styles personnalisés dans le fichier
output.css
(généré par Tailwind).
- Ajoutez des styles personnalisés dans le fichier
Le projet utilise Tailwind via un CDN. Si vous préférez une configuration locale, installez Tailwind CSS :
npm install tailwindcss
Les icônes sont chargées via CDN :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- KWINKWA KETCHASSO Rostand
- ketchDev-stack
- Retrouvez-moi sur :