Atom Portfolio - Portfolio Interactif

Portfolio personnel d'Arthur Kowskii, développé avec Astro, GSAP et une architecture atomique innovante durant l'été 2025. Une expérience web immersive où les projets gravitent autour d'un noyau central, créant une navigation unique et mémorable.

Infos Projet

4 Mois DÉVELOPPEMENT

10 Projets PRÉSENTÉS

Astro / JS LANGUAGE

2 Langues FR/EN

Liens

📦 Voir sur GitHub

Technologie

Outils et technologies utilisés

AstroGSAPJavaScriptTone.js

Processus de Création

De la conception à la mise en ligne

1 Conceptualisation de la métaphore atomique : le noyau me représente, et les différentes couches énergétiques les domaines qui m'animent. Sur ces domaines des électrons cliquables (et bougeables !) représentent différents projets de leurs domaines respectifs.
2 Développement du système orbital avec GSAP, calcul des positions avec évitement de collision, et animations de hover interactives
3 Implémentation du système d'overlay circulaire pour la présentation détaillée des projets avec transitions fluides
4 Design visuel : inspiration bento pour les pages projet/bio, approche minimaliste pour les électrons, et fonctionnalités d'accessibilité (mode sombre/clair, filtrage par domaine avec mise en évidence)
5 Ajout du système bilingue complet et résolution des problèmes de compatibilité Firefox

Galerie

8 items

Défis Techniques Majeurs

Les innovations clés du développement initial

Système de Drag & Drop avec Physique

Implémentation d'un système de glisser-déposer réaliste pour les électrons tout en maintenant leur mouvement orbital. Création d'animations de retour élastique, gestion des collisions pendant le déplacement, et synchronisation avec le système d'orbite GSAP pour une expérience fluide et intuitive.
Génération Dynamique des Shells depuis la Structure de Fichiers

Création d'un système qui génère automatiquement les shells à partir de la structure des dossiers. Détection des domaines via les préfixes numériques, attribution dynamique des noms, et adaptation visuelle en temps réel. Maximum de 5 shells avec gestion élégante du surplus.
Système d'Overlay avec Transition Circulaire

Développement d'une expérience one-page innovante avec expansion circulaire depuis la position de l'électron cliqué. Utilisation de clip-path CSS pour l'effet de masque, calcul précis du point d'origine, et gestion fluide des transitions sans changement de route.

Résultats & Impact

Ce qui rend ce portfolio unique

🎯 Un portfolio véritablement unique qui marque les esprits par son approche interactive
⚡ Expérience fluide en one-page avec navigation instantanée entre les projets
🌐 Hub centralisé pour contact professionnel et téléchargement direct du CV
🚀 Performance optimale avec 91% de réduction des assets et animations à 60fps constant
📱 Expérience responsive avec message personnalisé pour visiteurs mobiles
🎨 Interface mémorable qui reflète créativité et compétences techniques