My name is Natali. I'm a frontend developer with a real passion for building attractive and complex interfaces. I do love creating modern visual effects and have built some popular snippets on CodePen (check them out below).
Additionally, I'm a beginner tech article writer. I'm interested in sharing my experience through helpful articles and tutorials.
This article is a summary of my implementation of a vanilla JS alternative to the browser's scroll-behavior: smooth feature, along with a step-by-step tutorial on one of the possible implementation variants.
This article was born from experiments with function overloading in TypeScript. After an introduction about what overloading is in general, I want to talk about the curious nuances I encountered, and how these nuances have changed my understanding of working with overloads
๐ฅ My In-depth Projects
The purpose of these projects is to explore certain concepts in-depth and, optionally, to share the exploration results as a tutorial or article.
I'm implementing my own vanilla JS alternative to the browser's scroll-behavior: smooth feature here. It's useful for cases when you need to combine this functionality with complex scroll JS behavior. Also I've experimented with RAFs here.
๐ป My UI/UX Open-source Projects
All the items are realizations of my ideas, fully hand-built by me from the design up to code implementation
A stopwatch UI/UX built in a modern glassmorphism style via React/Typescript. I've created it from the very scratch including design part. It's crossbrowser and fully responsive.
Nice and slick timeline-like slider with gradient icons and gradient shadows. Here I've experimented with gradients and CSS Custom Properties. Fully responsive.
Smooth direction aware hover effect for better UI/UX. Inspired by old jQuery libs with similar effects. I've tried to reproduce it but my way, without any code references. Fully responsive.
A set of 4 HTML/CSS notification concepts (success/warning/danger). I've built them to share with junior frontend developers to encourage them to use notifications in their pet projects for better UI/UX. Inspired by some Dribbble shots. Fully responsive.
A fancy main page concept with multiple tiles sharing a single background image that beautifully changes on tile hover. Each tile is clickable and reveals corresponding inner page content. Fully responsive.
A 'load more' concept is useful when users have a lengthy list of items and want to show them in parts: making more elements visible on 'Load More' button click. I've integrated Animate.css in this project, so users can choose from a long list of predefined animations.
A CSS3/JS animations experiment: an appealing submit button concept. When users click on them, they will first see a loading animation, followed by a successful submission animation.
Material UI-compatible timeline inspiration. Can be useful to present a schedule of different events. Users can set the position for each timeline item. Additionally, there is an intricate gradient effect. Fully responsive.
Navigation Inspiration with separate tiles sharing a single gradient image. Users can set their own gradient image and direction. The gradient will be recalculated based on the number of navigation tiles present. Fully responsive.
A set of 5 cute Halloween icons built exclusively with HTML/CSS (no additional images). They are also 100% scalable: users can adjust the icon sizes as they prefer without any issues
A set of 8 cute Christmas icons built exclusively with HTML/CSS (no additional images). They are also 100% scalable: users can adjust the icon sizes as they prefer without any issues