ProjectsCode SnippetsArticlesAbout

Hi, I'm Adir

Frontend Developer

Biker Animation

Projects

Motoin Blur JS

Motion Blur JS

A lightweight JavaScript library that allows your animations to shine with homemade native CSS Motion Blur and Motion Fade while keeping your code clean and your CSS animations smooth.

Launch project
Notes App

Notes

Notes app that respects your privacy, it keeps everything local on your device.

Launch project
Phone contacts app made entirly in CSS

Contacts app

A fully functional phone contacts app - made entirly in CSS.

Launch project
Proportional Scale App

Scale

A simple API for calculating proportional scale.

Launch project
Visual Console

Visual Console

Adding a console to online projects, so it can be debugged and fixed on a mobile device or in online code editors such as Codepen or Glitch.

Launch project
Color Extract

Color Extract

A Chrome extension for extracting colors from any web page.

Launch project
NoTube: YouTube Clone

NoTube

A YouTube clone I made with Tailwind CSS, just for learning purposes.

Launch project
SVGram: Instagram SVG Clone

SVGram

Instagram clone, done entirly with SVG technology as part of a talk I gave on "SVG superpowers", for showcasing purposes.

Launch project
Tailwind Apply

Tailwind Apply

JavaScript library for implementing Tailwind's Apply feature without the need to compile, so it can be used in online code editors such as Codepen or Glitch.

Launch project

Code Snippets

3D iMac: CSS Only

3D iMac

The 2021 colorful iMac - done only in CSS with 3D Animation.

See code
Egg Hunt: CSS Game

Egg Hunt

CSS Chickens with random eggs, click around and have fun.

See code
Koi Fish

CSS Koi Fish

Koi fish with pure CSS, works in Desktop Chrome only.

See code
Snowman

Snowman

Cute animation for the winter.

See code
Walking Down the Street

Walking

CSS Animation I did just for fun.

See code
Kodamas: Miyazaki Tribute

Kodamas

CSS Interaction I did inspired by Miyazaki's animated films.

See code
No Face: Miyazaki Tribute

No Face

CSS Interaction I did inspired by Miyazaki's animated films.

See code
iPad Pro Clone

iPad Pro

Semi-functional iPad Pro clone.

See code
CSS Random Cards

CSS Random

CSS-only Randomness with cards.

See code
Buttons: Client Work

Buttons

Buttons for a Design System, done for client work.

See code
Number Inputs: Client Work

Number Inputs

Number Inputs for a Design System, done for client work.

See code
Attention: CSS Animation

Attention

A noDiv Animation of a smartphone notification.

See code
Dribbble: Loader Animation

Dribbble Loader

Simple Loading Animation for Dribbble.

See code
90% SVG Animation

90% SVG Animation

SVG Animation for a website, done for client work.

See code
Ping Pong Animation

Ping Pong

CSS Animation just for fun.

See code
Emoji Animation

Emoji Fun

SVG Animation of emojis, original emojis designed by Twitter.

See code

Articles

Creating randomness with pure CSS

Creating randomness with pure CSS

These cards were made using HTML and CSS only, no JavaScript , no Sass and no other external scripts or preprocessors involved.

Read article
How to add multiple values in a single CSS property

How to add multiple values in a single CSS property

Last year I started teaching basic Front-End Development courses (HTML/CSS) in a few Design Schools, I also gave a talk in a few meetups to an audience of more seasoned JavaScript developers.

Read article
Figma: 5 ways to add animation to your designs

Figma: 5 ways to add animation to your designs

As a designer/developer I always look out for new tools, both at the design front and at the development front, we clearly are in the golden age of new tools in both of these fronts.

Read article
Should motion design guidelines appear in Design Systems? Yes!

Should motion design guidelines appear in Design Systems? Yes!

This article is about motion design and animations for digital interfaces and it’s about Design Systems as well. Design Systems are a powerful tool that I think it’s worth understanding what they are and where they come from.

Read article
Button differentiation done right

Button differentiation done right

Call to Action buttons (CTA, for short) are common practice in web design these days, almost every website you enter have a “log in” button or a “try now” or “learn more” button...

Read article
Motion Blur in CSS and SVG Animations

Motion Blur in CSS and SVG Animations

As part of my job as UI/UX Designer I make a lot of web animations, most of them end up in the browser, so I write them down in code.

Read article
Creative Use of CSS Filters

Creative Use of CSS Filters

The filter property in CSS is a lot more powerful than people think, not only does it allow us to change the color or the tone of an image but it also allows us to change those properties on regular HTML/CSS shapes.

Read article

About

Adir's avatar

Hello, my name is Adir and I'm a frontend developer

A motivated and curious frontend developer, with proven experience in HTML, CSS, JavaScript and SVG Animations. I also teach HTML & CSS in a few institutions in Israel, and I co-manage a facebook group named “CSS Masters Israel”. Even though I already have a full-time job, I’ll be happy to hear from you and maybe collaborate on interesting projects in the future. You can see a breakdown of my skills below.