Skip to content

Worketyamo-Students/PORTOFOLIO_TAILWIND

Repository files navigation

Rostand Portfolio

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.


🚀 Fonctionnalités

  • 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.

📂 Structure du Projet

/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── firstProjet.svg
│   │   │   ├── SecondProject.svg
│   │   │   ├── ThirdProject.svg
│   │   │   ├── LET'SGO.svg
│   │   │   ├── iai.jpeg
│   │   │   ├── worketyamo.png
│   ├── styles/
│   │   ├── output.css
├── index.html
├── README.md

🛠️ Technologies Utilisées

  • 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).

🖼️ Aperçu

Section Principale

  • Header : Menu de navigation avec liens vers les différentes sections.
  • Hero Section : Présentation avec une image et un bouton interactif.

Section Études de Cas

  • Trois études de cas avec descriptions, boutons animés, et transitions d'image.

Section Éducation

  • Présente les établissements ou institutions associés avec des logos interactifs.

🚀 Installation

  1. Clonez ce dépôt :
    git clone https://github.com/Worketyamo-Students/PORTOFOLIO_TAILWIND.git
  2. Accédez au dossier du projet :
    cd PORTOFOLIO_TAILWIND
  3. 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.

🎨 Personnalisation

  1. Images :
    • Remplacez les fichiers dans ./src/assets/images/ avec vos propres images.
  2. Couleurs :
    • Modifiez les classes Tailwind CSS pour ajuster les couleurs et les styles dans index.html.
  3. Styles Additionnels :
    • Ajoutez des styles personnalisés dans le fichier output.css (généré par Tailwind).

🛡️ Dépendances Externes

TailwindCSS

Le projet utilise Tailwind via un CDN. Si vous préférez une configuration locale, installez Tailwind CSS :

npm install tailwindcss

Font Awesome

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">

📖 Références


🖋️ Auteur


About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published