Aperçu en direct : jihed-hagui.vercel.app

Rehaussez votre présence numérique

Oubliez les sites de portfolio génériques et plats.

Un modèle de portfolio cinématographique et interactif conçu pour les développeurs, designers, technologues créatifs et artistes numériques qui veulent que leur travail soit vécu comme une expérience.

Propulsé par Next.js 14, Three.js, React Three Fiber, GSAP et Lenis, il réunit 3D en temps réel, mouvement immersif, son interactif et transitions soignées dans une expérience numérique inoubliable.

Conçu pour capter l'attention, mettre votre travail en valeur et produire cette première impression qui vous démarque.

Fonctionnalités principales

3D WebGL en temps réel

Des expériences 3D interactives propulsées par Three.js et React Three Fiber, avec des scènes personnalisées dont le Crâne, le Cavalier d'échecs et Le Penseur.

Un rendu optimisé garde l'expérience réactive tout en préservant la qualité visuelle des environnements 3D.

Animations cinématographiques

GSAP ScrollTrigger, le défilement fluide de Lenis, Framer Motion, des interactions personnalisées d'inspiration physique, des effets d'éventail de cartes et des transitions cinématographiques donnent un portfolio qui semble vivant du premier défilement à la dernière section.

Ambiance sonore immersive

Un système Web Audio intégré ajoute une couche atmosphérique à la navigation.

Le retour audio interactif et un sound design soigneusement intégré font du portfolio une expérience numérique plutôt qu'un site web traditionnel.

Personnalisation sans effort

Conçu pour être personnalisé sans lutter contre le code.

Modifiez vos informations personnelles, projets, couleurs, liens et autres contenus tout en conservant l'architecture sous-jacente intacte.

Formulaire de contact prêt à l'emploi

Intégré à Resend API pour une livraison fiable des messages du formulaire de contact.

Connectez vos identifiants de messagerie et recevez des demandes directement depuis votre portfolio.

Performances adaptatives

Conçu en pensant aux performances sur ordinateur comme sur mobile.

Des réglages 3D adaptatifs, des mises en page responsives, un rendu optimisé et des contrôles de performance selon l'appareil aident à garder une expérience fluide sur différentes tailles d'écran.

Code propre et bien commenté

Entièrement développé en TypeScript et organisé selon une architecture modulaire et propre.

Le code est soigneusement commenté dans tout le projet, ce qui permet de comprendre plus facilement le fonctionnement des différents systèmes et où effectuer des modifications.

Aucune clé d'API exposée. Aucune complexité inutile. Aucun code brouillon.

Documentation complète

Un fichier README dédié est inclus avec le projet.

Il couvre les étapes essentielles pour installer les dépendances, configurer le projet, lancer le serveur de développement, définir les variables d'environnement et préparer le portfolio au déploiement.

Technologie

Framework
Next.js 14
React 18
TypeScript

3D
Three.js
React Three Fiber
@react-three/drei

Animation
GSAP
ScrollTrigger
Framer Motion
Lenis

Style
Tailwind CSS

État et audio
Zustand
Web Audio API

E-mail
Resend API

Conçu pour

Développeurs créatifs
Développeurs frontend
Développeurs full-stack
Artistes 3D
Designers UI/UX
Directeurs de création
Agences digitales
Freelances

Que vous présentiez de l'ingénierie, du design, des œuvres 3D, des projets expérimentaux ou du développement créatif, il offre à votre travail l'environnement visuel qu'il mérite.

Installation

Le démarrage ne demande que quelques étapes.

1. Téléchargez le code source.

2. Suivez le README inclus.

3. Installez les dépendances.

4. Configurez vos variables d'environnement.

5. Ajoutez votre contenu personnel.

6. Lancez le serveur de développement.

7. Déployez votre portfolio.

L'expérience

Ce n'est pas un énième portfolio bâti autour d'une section d'en-tête, d'une grille de projets et d'un bouton de contact.

Il est conçu autour d'une idée différente :

Le portfolio lui-même doit faire partie du travail.

Un environnement numérique cinématographique où technologie, mouvement, son et narration visuelle se rejoignent pour rendre votre travail impossible à ignorer.

Ne vous contentez pas de présenter votre travail.
Créez une expérience autour.