📸 Aperçu

Page en direct, interactive : tu peux cliquer et faire défiler dedans. Affichée comme sur un écran 1920 × 1080.

✕

Page blanche ? Le site refuse peut-être d’être intégré : ouvre-le dans un onglet.

📖 Sommaire

• Fonctionnalités
• Démarrage rapide
• Personnalisation
• Personnalisation avancée
• Structure du projet
• Technologies
• Déploiement
• Contribution
• Licence
• Support

✨ Fonctionnalités

🚀 Démarrage rapide

Prérequis

• Node.js v14 ou plus récent
• npm ou yarn

Installation

# 1. Cloner le dépôt
git clone https://github.com/Luxinenglish/pink_portfolio_template.git

# 2. Entrer dans le dossier
cd pink_portfolio_template

# 3. Installer les dépendances
npm install

# 4. Lancer le serveur de développement
npm start

Le portfolio s'ouvre sur http://localhost:3000 et se recharge automatiquement à chaque modification.

📝 Personnalisation

astuce

Tout se passe au même endroit. L'objet config, en haut de src/components/Portfolio.jsx, contient l'intégralité du contenu. Modifiez ses valeurs et votre portfolio est prêt : aucune autre ligne de code à toucher.

Chaque texte affiché existe en deux versions, fr et en. Le visiteur change de langue depuis le site, le contenu suit.

const config = {
  name: "Votre Nom",
  title: {
    fr: "Votre Titre Professionnel",
    en: "Your Professional Title"
  },
  description: {
    fr: "Une description accrocheuse...",
    en: "A catchy description..."
  },
  photoUrl: "https://your-image-url.com/photo.jpg"
};

about: {
  fr: [
    "Premier paragraphe...",
    "Deuxième paragraphe...",
    "Troisième paragraphe...",
    "Quatrième paragraphe..."
  ],
  en: [ /* ... */ ]
}

projects: [
  {
    title:       { fr: "Projet 1", en: "Project 1" },
    description: { fr: "...", en: "..." },
    skills:      ["Compétence A", "Compétence B"],
    imageUrl:    "https://..."
  },
  // Ajoutez d'autres projets ici
]

models: [
  {
    title:       { fr: "Création 1", en: "Creation 1" },
    description: { fr: "...", en: "..." },
    details: {
      fr: ["Matériaux : ...", "Échelle : ..."],
      en: ["Materials: ...", "Scale: ..."]
    },
    imageUrl: "https://..."
  }
]

education: [
  {
    school: "Nom de l'école",
    degree: { fr: "Diplôme", en: "Degree" },
    period: { fr: "2024 - Présent", en: "2024 - Present" },
    level:  { fr: "Niveau", en: "Level" }
  }
]

experiences: [
  {
    title:       { fr: "Titre du stage", en: "Internship title" },
    period:      { fr: "Durée", en: "Duration" },
    company:     "Nom de l'entreprise",
    description: { fr: "...", en: "..." }
  }
]

contact: {
  email:     "votre.email@exemple.com",
  linkedin:  "https://linkedin.com/in/...",
  github:    "https://github.com/...",     // optionnel
  twitter:   "https://twitter.com/...",    // optionnel
  instagram: "https://instagram.com/..."   // optionnel
}

footerCredit: {
  name: "Votre Nom",
  url:  "https://votre-site.com"  // optionnel
}

🎨 Personnalisation avancée

🖌️ Changer les couleurs

Le template utilise une palette rose / rouge via les classes Tailwind. Pour l'adapter, faites un rechercher-remplacer dans le composant :

🧱 Ajouter ou retirer des sections

La navigation est générée à partir du tableau sections :

const sections = [
  { id: 'accueil', label: t.nav.home },
  { id: 'apropos', label: t.nav.about },
  // Ajoutez vos sections ici
];

note

Pensez à ajouter la traduction du libellé dans t.nav pour les deux langues, et un élément portant le même id dans le JSX.

🌊 Régler le parallaxe

Chaque effet de parallaxe dépend d'un multiplicateur appliqué au défilement :

style={{ transform: `translateY(${scrollY * 0.05}px)` }}
//                                       ^^^^ plus grand = plus rapide

📦 Structure du projet

pink_portfolio_template/
├── public/
│   └── images/                # Vos images
├── readme_ressources/         # Captures utilisées dans ce README
├── src/
│   ├── components/
│   │   └── Portfolio.jsx      # Composant principal + objet config
│   ├── App.js
│   └── index.js
├── package.json
└── README.md

🛠️ Technologies

📱 Responsive

🌐 Déploiement

Commencez par générer la version de production :

npm run build

npm i -g vercel
vercel

🤝 Contribution

Les contributions sont les bienvenues !

1. Forkez le projet
2. Créez une branche : git checkout -b feature/MaSuperIdee
3. Commitez : git commit -m "Ajout de MaSuperIdee"
4. Poussez : git push origin feature/MaSuperIdee
5. Ouvrez une Pull Request 🎉

📄 Licence

Distribué sous licence MIT : vous êtes libre de l'utiliser, de le modifier et de le redistribuer.

📞 Support

Une question, un bug, une idée ?

• 📧 Email : j.brochard@aplosn.fr
• 🐛 Issues : signaler un problème
• 💬 Discussions : échanger avec la communauté