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.
| Article | Description |
|---|---|
| Hand-built smoothScrollTo() Implementation (Eng) | 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. |
| Function Overloadings in Typescript (Ru) | 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 |
The purpose of these projects is to explore certain concepts in-depth and, optionally, to share the exploration results as a tutorial or article.
| Project Repo | Demo | Article | Stack | Description |
|---|---|---|---|---|
| smoothScrollTo() Function Concept | Live Demo | Article | TS/JS/HTML/CSS | 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. |
All the items are realizations of my ideas, fully hand-built by me from the design up to code implementation
| Project Repo | Demo | Description |
|---|---|---|
| Gradient Cards Concept | Live Demo | Modern cards built with complex CSS3 gradients (including conic gradients) and filters. Crossbrowser and fully responsive |
| Glassmorphism StopWatch | Live Demo | 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. |
| Progress Bars Collection | Live Demo | A collection of 4 single-element Progress Bars built with HTML/CSS/TS (with a separate JS version if needed). Fully responsive. |
| Timeline Slider Concept | Live Demo | Nice and slick timeline-like slider with gradient icons and gradient shadows. Here I've experimented with gradients and CSS Custom Properties. Fully responsive. |
| Direction Aware Hover Effect | Live Demo | 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. |
| Notifications Collection | Live Demo | 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. |
| Fancy Navigation Block | Live Demo | 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. |
| 'Load More' Concept | Live Demo | 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. |
| Password Strength Validator UI | Live Demo | Bootstrap-compatible password strength validation UI/UX. The purpose of the project is to demonstrate how smooth and slick such an effect can be. |
| Multi Step Form with animations | Live Demo | Bootstrap-compatible multi-step form where users can choose from 1 of 5 predefined, hand-built step reveal animations. Fully responsive. |
| Submit buttons inspiration | Live Demo | 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. |
| Timeline Inspiration | Live Demo | 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. |
| Tabs Navigation UI | Live Demo | Material UI-compatible tabs animation: animates both tab pill changes and tab content changes. |
| Gradient Navigation Tiles | Live Demo | 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. |
| Project Repo | Demo | Description |
|---|---|---|
| Halloween Icons Set | Live Demo | 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 |
| Animated Easter SVG Icons | Live Demo | A set of 5 funny Easter svg icons animated with anime.js lib |
| Christmas Icons Set | Live Demo | 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent