Atom Portfolio - Interactive Portfolio
Arthur Kowskii's personal portfolio, developed with Astro, GSAP and an innovative atomic architecture during summer 2025. An immersive web experience where projects orbit around a central nucleus, creating a unique and memorable navigation.
Infos Projet
4 Mois DEVELOPMENT
10 Projets SHOWCASED
Astro / JS LANGUAGE
2 Langues FR/EN
Links
📦 View on GitHubTechnologie
Outils et technologies utilisés
AstroGSAPJavaScriptTone.js
Development Process
From concept to deployment
- 1 Conceptualizing the atomic metaphor: the nucleus represents me, and the different energy layers represent the domains that drive me. On these domains, clickable (and draggable!) electrons represent different projects from their respective domains
- 2 Developing the orbital system with GSAP, calculating positions with collision avoidance, and interactive hover animations
- 3 Implementing the circular overlay system for detailed project presentation with smooth transitions
- 4 Visual design: bento inspiration for project/bio pages, minimalist approach for electrons, and accessibility features (dark/light mode, domain filtering with highlighting)
- 5 Adding complete bilingual system and resolving Firefox compatibility issues
Galerie
8 items
Major Technical Challenges
Key innovations from early development
- Drag & Drop Physics SystemImplementing a realistic drag-and-drop system for electrons while maintaining their orbital motion. Creating elastic snap-back animations, handling collisions during movement, and synchronizing with the GSAP orbit system for a smooth and intuitive experience.
- Dynamic Shell Generation from File StructureCreating a system that automatically generates shells from folder structure. Domain detection via numeric prefixes, dynamic naming assignment, and real-time visual adaptation. Maximum of 5 shells with elegant overflow handling.
- Circular Overlay Transition SystemDeveloping an innovative one-page experience with circular expansion from the clicked electron's position. Using CSS clip-path for the mask effect, precise origin point calculation, and smooth transition management without route changes.
Results & Impact
What makes this portfolio unique
- A truly unique portfolio that leaves a lasting impression through its interactive approach
- Smooth one-page experience with instant navigation between projects
- Centralized hub for professional contact and direct CV download
- Optimal performance with 91% asset reduction and constant 60fps animations
- Responsive experience with personalized message for mobile visitors
- Memorable interface that reflects both creativity and technical skills