Votre portfolio : l’outil de vente le plus puissant
En tant que développeur, designer, photographe ou créatif au Sénégal, votre portfolio est votre meilleur commercial. Les clients veulent voir ce que vous avez fait avant de vous engager — pas un CV de 3 pages, mais des projets concrets avec des résultats. WordPress vous permet de créer un portfolio professionnel qui se démarque et convertit les visiteurs en clients.
Structure d’un portfolio efficace
Page d’accueil — Votre pitch en 5 secondes
- Titre d’accroche : Pas votre nom, mais ce que vous faites. « Développeur WordPress spécialisé e-commerce » est mieux que « Portfolio de Moussa »
- Sous-titre : Votre proposition de valeur unique : « Je crée des sites qui vendent — pour les entreprises sénégalaises qui veulent passer au digital »
- 3-4 projets vedettes : Vos meilleurs travaux en grille visuelle
- CTA clair : « Voir mes projets » ou « Me contacter »
Page Projets — La grille de travaux
Créez un Custom Post Type « Projet » pour gérer vos travaux indépendamment des articles :
function itsc_register_portfolio_cpt() {
register_post_type('projet', array(
'labels' => array(
'name' => 'Projets',
'singular_name' => 'Projet',
'add_new_item' => 'Ajouter un projet',
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'projets'),
'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
'menu_icon' => 'dashicons-portfolio',
'show_in_rest' => true,
));
register_taxonomy('type_projet', 'projet', array(
'labels' => array('name' => 'Types de projet'),
'hierarchical' => true,
'rewrite' => array('slug' => 'type-projet'),
'show_in_rest' => true,
));
}
add_action('init', 'itsc_register_portfolio_cpt');
Champs personnalisés pour chaque projet (ACF)
- Client : Nom de l’entreprise
- URL du projet : Lien vers le site en ligne
- Technologies : WordPress, React, Figma, PHP, etc.
- Année : Date de réalisation
- Durée : « 3 semaines », « 2 mois »
- Galerie : Captures d’écran du projet
- Témoignage client : Citation du client satisfait
Grille de projets avec filtres
CSS pour la grille
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 24px;
padding: 40px 0;
}
.portfolio-item {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16/10;
cursor: pointer;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.portfolio-item:hover img {
transform: scale(1.05);
}
.portfolio-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-overlay h3 {
color: white;
font-size: 1.25rem;
margin-bottom: 4px;
}
.portfolio-overlay p {
color: rgba(255,255,255,0.8);
font-size: 0.875rem;
}
.portfolio-tags {
display: flex;
gap: 6px;
margin-top: 8px;
}
.portfolio-tag {
padding: 3px 10px;
background: rgba(255,255,255,0.15);
color: white;
border-radius: 4px;
font-size: 0.75rem;
backdrop-filter: blur(4px);
}
/* Filtres */
.portfolio-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 32px;
}
.filter-btn {
padding: 8px 20px;
border: 1px solid #E5E7EB;
border-radius: 20px;
background: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #4B5563;
transition: all 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
background: #2563EB;
color: white;
border-color: #2563EB;
}
@media (max-width: 768px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-overlay {
opacity: 1;
}
}
Filtres JavaScript
<div class="portfolio-filters">
<button class="filter-btn active" data-filter="all">Tous</button>
<button class="filter-btn" data-filter="site-web">Sites Web</button>
<button class="filter-btn" data-filter="ecommerce">E-commerce</button>
<button class="filter-btn" data-filter="design">Design</button>
<button class="filter-btn" data-filter="mobile">Mobile</button>
</div>
<script>
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const filter = this.dataset.filter;
// Active state
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
// Filtrage
document.querySelectorAll('.portfolio-item').forEach(item => {
if (filter === 'all' || item.dataset.category === filter) {
item.style.display = '';
item.style.animation = 'fadeIn 0.3s ease';
} else {
item.style.display = 'none';
}
});
});
});
</script>
Page de projet individuelle — L’étude de cas
Chaque projet mérite une page détaillée. C’est ce qui vous différencie des portfolios basiques qui montrent juste une image :
Structure de l’étude de cas
- Hero visuel : Capture d’écran principale ou mockup du projet
- Résumé du projet : Client, objectif, technologies, durée (en sidebar ou en grille)
- Le défi : Quel problème le client avait-il ? Pourquoi avait-il besoin de cette solution ?
- La solution : Comment vous avez résolu le problème, les choix techniques, les fonctionnalités développées
- Le processus : Wireframes, maquettes, itérations (montrez votre méthode de travail)
- Les résultats : Chiffres concrets — « +40% de trafic », « Temps de chargement divisé par 3 », « Augmentation des ventes de 25% »
- Témoignage client : Citation avec nom, titre et photo
- Galerie : Screenshots desktop et mobile
- CTA : « Vous avez un projet similaire ? Contactez-moi »
Metadonnées du projet en CSS
.project-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 24px;
padding: 32px;
background: #F9FAFB;
border-radius: 12px;
margin: 32px 0;
}
.meta-item {
text-align: center;
}
.meta-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
color: #6B7280;
margin-bottom: 4px;
}
.meta-value {
font-size: 1rem;
font-weight: 600;
color: #111827;
}
.meta-value a {
color: #2563EB;
}
Page À Propos — Votre histoire professionnelle
Les clients veulent savoir à qui ils confient leur projet :
- Photo professionnelle : Un portrait de qualité, pas une photo de vacances. Un fond uni ou votre espace de travail
- Bio courte : 2-3 paragraphes. Qui vous êtes, ce que vous faites, pourquoi vous le faites. Mentionnez votre expérience : « 5 ans de développement WordPress, plus de 50 sites livrés »
- Compétences techniques : Liste visuelle avec barres de niveau ou icônes des technologies maîtrisées
- Parcours : Formation, expériences marquantes, certifications
- Approche : Comment vous travaillez — votre méthodologie, vos valeurs
Liste de compétences visuelle
.skills-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0;
}
.skill-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #EFF6FF;
color: #2563EB;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
}
.skill-tag img {
width: 20px;
height: 20px;
}
Page Contact — Faciliter la prise de contact
- Formulaire simple : Nom, email, type de projet (menu déroulant), message, budget (optionnel)
- Bouton WhatsApp : Indispensable au Sénégal. « Discutons de votre projet sur WhatsApp »
- Email : Adresse professionnelle (votrenom@votredomaine.com, pas gmail)
- Réseaux sociaux : LinkedIn (professionnel), GitHub (développeurs), Behance/Dribbble (designers)
- Calendrier : Intégrez Calendly pour que les prospects réservent directement un créneau de découverte
Thème recommandé
Utilisez un thème minimaliste qui met vos projets en valeur :
- flavor theme : Avec un page builder comme Elementor pour les layouts personnalisés
- flavor theme : Léger et gratuit pour Gutenberg
- flavor theme personnalisé : Le plus professionnel — créez votre propre thème pour un portfolio unique
Évitez les thèmes trop chargés avec des animations partout. La simplicité est gage de professionnalisme. Vos projets doivent être les stars, pas les effets spéciaux du thème.
SEO pour un portfolio
Titres optimisés
Chaque page de projet doit avoir un titre SEO descriptif :
- « Site e-commerce WooCommerce pour [Client] — Développeur WordPress Dakar »
- « Refonte UI/UX de l’application [Client] — Designer UX Sénégal »
- « Identité visuelle et logo pour [Client] — Graphiste freelance Dakar »
Mots-clés à cibler
- « développeur wordpress dakar »
- « freelance web sénégal »
- « création site internet dakar »
- « designer ux dakar »
- « graphiste freelance sénégal »
Erreurs courantes à éviter
- Trop de projets médiocres : 5 projets excellents valent mieux que 20 projets moyens. Montrez uniquement votre meilleur travail
- Pas de contexte : Une image seule ne suffit pas. Expliquez le défi, la solution, et les résultats
- Projets trop anciens : Retirez les projets de plus de 3 ans sauf s’ils sont exceptionnels
- Pas de résultats chiffrés : « J’ai fait un site » est faible. « +150% de trafic en 3 mois » est convaincant
- Pas de CTA : Chaque page doit inviter le visiteur à vous contacter
- Temps de chargement lent : Un portfolio lent est ironique pour un développeur web. Optimisez vos images (WebP, lazy load) et utilisez un CDN
Checklist portfolio WordPress
- ☐ CPT « Projet » avec taxonomie et champs ACF
- ☐ Grille de projets avec filtres par catégorie
- ☐ Page d’étude de cas pour chaque projet (défi, solution, résultats)
- ☐ Page À Propos avec photo pro, bio et compétences
- ☐ Page Contact avec formulaire + WhatsApp
- ☐ 5-10 projets de qualité (pas plus si pas meilleurs)
- ☐ Témoignages clients sur chaque projet
- ☐ Design responsive (test mobile)
- ☐ Temps de chargement < 2 secondes
- ☐ SEO : titres descriptifs, meta descriptions, alt text
