lyxsdw123123/react-bits-portfolio

Que fait react-bits-portfolio ?

Un modèle de portfolio/CV dynamique basé sur la bibliothèque d'animations React Bits.

Ce projet vous permet de créer un site web monopage (SPA) moderne et animé, prêt à l'emploi, alimenté par React Bits et ses 130+ composants d'animations. Il suffit de modifier les fichiers de données pour personnaliser votre contenu (projets, expériences, compétences, etc.) sans aucune configuration complexe.

Fonctionnalités

• 130+ composants animés : Textes, images, arrière-plans, transitions et micro-interactions.
• Personnalisation simplifiée : Modifiez uniquement les fichiers de données (data.json ou similaires).
• Prêt pour les agents IA : Intégration avec Claude Code, Cursor, Codex, etc.
• Composants pré-encapsulés : Le dossier .claude/skills/react-bits contient des composants React Bits prêts à l'emploi, facilitant leur réutilisation dans vos projets.

Démarrage rapide

# Cloner le dépôt
git clone https://github.com/lyxsdw123123/react-bits-portfolio.git
cd react-bits-portfolio

# Installer les dépendances
npm install

# Lancer le serveur de développement
npm run dev

Structure du projet

.
├── public/
├── src/
│   ├── components/       # Composants React réutilisables
│   ├── data/             # Fichiers de configuration (contenu du portfolio)
│   ├── App.tsx
│   └── index.tsx
├── .claude/
│   └── skills/
│       └── react-bits/   # Composants React Bits pré-encapsulés
├── package.json
├── README.md
└── SKILL.md

Comment utiliser ce skill

1. Avec un agent IA (Claude Code, Cursor, Codex) :

   • Invoquez le skill via l'agent après avoir configuré votre projet.
   • L'agent pourra vous guider dans la personnalisation des données, l'ajout de nouveaux composants animés ou la modification du thème.

2. Manuellement :

   • Modifiez les fichiers dans src/data/ pour mettre à jour vos informations personnelles.
   • Ajoutez ou supprimez des sections dans src/components/ si nécessaire.
   • Utilisez les composants React Bits dans .claude/skills/react-bits/ pour enrichir votre site.

Exemple de personnalisation

// src/data/profile.js
export const profile = {
  name: "Votre Nom",
  title: "Développeur Full Stack",
  bio: "Passionné par les technologies web modernes et les animations...",
  skills: ["React", "TypeScript", "Node.js"],
  projects: [
    { title: "Mon Projet", description: "Une application web animée..." }
  ]
};

Ressources

• React Bits Documentation
• Dépôt GitHub

---

Skill pour agents IA - lyxsdw123123/react-bits-portfolio