Portfolio with filterable gallery, scroll animations and hover effects.
The gradient on the profession keyword creates a strong visual signature. The eye is immediately drawn to the designer's identity, reinforced by the gradient stats.
background-clip: text + -webkit-text-fill-color: transparent Explore Text & Typography →The line draws progressively under the link on hover. A minimalist visual feedback that matches the refined aesthetics of a creative portfolio.
::after width: 0 to 100% + transition: 0.3s Explore Hover & Interactions →The dark overlay with "View Project" button appears gradually. Users understand that each card is clickable without cluttering the gallery view.
opacity: 0 to 1 + translateY(20px) to 0 Explore Hover & Interactions →The active button changes color instantly and unfiltered projects disappear. Immediate sorting avoids reloading and keeps users engaged.
display: none/block + background transition 0.3s Explore Transitions →Each bar fills with animated scaleX on load. More impactful than text percentage — visitors perceive skill level at a glance.
animation: skillFill 1s ease forwards + scaleX(0 to 1) Explore Data & Visualization →Elements rise 40px and become visible on scroll via IntersectionObserver. This creates visual storytelling where each section progressively "reveals."
opacity: 0 + translateY(40px) + .visible class Explore Scroll & Parallax →The field illuminates with a violet halo on focus. This visual feedback guides the user through the form and makes the input experience more pleasant.
border-color: var(--primary) + box-shadow: 0 0 0 3px Explore Forms →