Exercice : Application Portfolio Personnel

Objectif#

Développer une application web complète permettant de gérer et d'afficher un portfolio professionnel. L'application comprendra un backoffice pour administrer le contenu et un frontoffice créatif pour présenter vos réalisations.

Partie 1 : Backoffice - Gestion du Contenu#

1.1 Gestion des Projets#

Chaque projet contient :

Informations principales :

• Titre, slug (auto-généré), description courte, description détaillée (WYSIWYG)
• Type (Site web, App mobile, API, Design, etc.), Statut (Brouillon/Publié/Archivé)
• Date de réalisation, Client, Contexte (Scolaire/Stage/Freelance/Personnel), Durée, Rôle
• Lien projet, Lien GitHub, Ordre d'affichage

Relations :

• Technologies utilisées (relation many-to-many)
• Images : 1 image principale + galerie (plusieurs images)

1.2 Gestion des Technologies#

• Nom, Catégorie (Backend/Frontend/BDD/DevOps/Design), Niveau (Débutant/Intermédiaire/Avancé/Expert)
• Logo (upload), Couleur (hex), Ordre d'affichage

1.3 Gestion des Expériences#

• Poste, Entreprise, Lieu, Date début/fin, Description (WYSIWYG)
• Type (Stage/CDI/CDD/Freelance/Alternance)

1.4 Gestion de la Formation#

• Diplôme, Établissement, Lieu, Date début/fin, Description

1.5 Informations Personnelles#

• Nom, Titre professionnel, Bio (WYSIWYG), Photo de profil
• Email, Téléphone, Localisation, Disponibilité
• CV (upload PDF)
• Liens sociaux (LinkedIn, GitHub, Twitter, etc.)

Partie 2 : Fonctionnalités Techniques#

2.1 Éditeur WYSIWYG#

Intégrer un éditeur de texte riche pour les descriptions. Options suggérées :

• Tiptap (moderne, headless, flexible mais plus de config)
• Quill (simple, léger)
• CKEditor 5 (complet)
• TinyMCE (populaire)

Fonctionnalités minimales : formatage texte, titres, listes, liens, blocs de code.

2.2 Upload d'Images#

• Upload multiple avec progression
• Validation (format, max 5MB)
• Suppression individuelle avec confirmation
• Réorganisation des images (bonus)

2.3 Pagination et Recherche#

Pour la liste des projets :

• Pagination (10-15 par page)
• Recherche (titre, description, technologies)
• Filtres (Statut, Type, Année)
• Tri (date, ordre d'affichage, alphabétique)

2.4 Interface#

Utiliser shadcn-vue pour créer une interface professionnelle (tableaux, formulaires, cards, dialogs, sidebar).

Partie 3 : Frontoffice - Affichage Public#

3.1 Page d'Accueil#

Présentation attractive : nom, titre, photo, phrase d'accroche, technologies principales, CTA vers projets/contact.

3.2 Page Projets#

Grille de projets avec image, titre, description courte, technologies. Filtres par type/technologie. Lien vers détail.

3.3 Page Détail Projet#

Affichage complet : galerie d'images, description détaillée, technologies, infos (client, durée, contexte), liens externes, navigation précédent/suivant.

3.4 Page À Propos#

Bio, parcours académique (timeline), expériences (timeline), technologies avec niveaux visualisés, lien téléchargement CV.

3.5 Page Contact#

Formulaire simple (nom, email, sujet, message) avec envoi par email Laravel Mail. Protection anti-spam (honeypot).

Partie 4 : Fonctionnalités Optionnelles#

Ces fonctionnalités augmenteront la qualité du projet mais ne sont pas obligatoires :

4.1 Blog Technique#

Section blog : articles avec titre, contenu (WYSIWYG), image, catégories/tags. Liste paginée + page détail.

4.2 Google Analytics#

Intégration Google Analytics pour tracking des visites. Affichage de statistiques basiques dans le backoffice.

4.3 Optimisation SEO#

• Meta tags personnalisables (title, description)
• Open Graph pour partage réseaux sociaux
• URLs propres (slugs)
• Images optimisées (compression, lazy loading)

Stack Technique#

• Backend : Laravel 12
• Frontend : Vue.js 3 (Composition API) + Inertia.js
• Starter Kit : Laravel Vue Starter Kit
• UI : shadcn-vue + Tailwind CSS v4
• Base de données : MySQL
• Auth : Laravel built-in

Bonnes pratiques :

• Utiliser Wayfinder pour les routes
• Utiliser le composant <Form> d'Inertia
• Code organisé, commits Git réguliers

Design du Frontoffice#

Le design est totalement libre. C'est l'occasion de montrer votre créativité et votre savoir-faire. Le frontoffice doit être :

• Original : Créez quelque chose d'unique qui vous représente
• Responsive : Fonctionnel sur mobile, tablette, desktop
• Professionnel : Soigné, moderne, sans fautes
• Performant : Images optimisées, navigation fluide

Inspirez-vous de portfolios existants mais ne copiez pas. Ce portfolio vous servira pour vos candidatures !