Animate UI - Beautifully animated components for the web

My resume

Mohammad Hossein Moradi

Web developer

About

Hi there. I'm Mohammad, an experienced frontend developer with over 4 years of experience in develop web apps with a focus on modularity, best possible structure, optimal design patterns, impeccable UI/UX design, accessibility, keyboard navigation, highly interactive with user through features like drag and drop and animated UI using the cutting-edge web technologies; Bind Javascript and Rust and bring the power of WebAssembly to build robust and efficient apps, toolchains and infrastructures.

I love JavaScript as a dynamic language and Rust as a static language and every day learning about them, exploring new solutions and so on.

Experiences

Senior Frontend Developer

Bacham

Feb 2024 - Present(4 Months)

Tehran, Tehran Province, IranRemote

Develop Bacham application

Implement authentication and control flow
Implement guard interface for access control with chaining capability
Implement advanced, robust, composable, polymorphic and slottable design system with latest design system implementation method; Features includes drag and drop, swipeable, keyboard navigation, accessible, virtualization, high DX, concise and pro API, subgrid, CVA
Use almost all Framer Motion features like sequence animations, scroll base, spring, transform values, velocity, gestures, variants, drag, custom, animation presence, layout animations and in view or intersection observer API
Implement robust jalali calendar and datetime picker with virtualization, infinite years, month and days
Register service worker and convert the app to a PWA
Implement custom audio and video players with unique design
Implement SSR rendering for blog pages and serialize data to be fallback data (initial data) for SWR

bacham.org

Frontend Developer

Arad dasht software co

Aug 2022 - Mar 2023(6 Months)

Yazd, Yazd Province, IranOn-site

Develop fully feature e-commerce application Include admin panel and shop

Implement fully responsive design system base on Headless UI components (Menu, Listbox, Dialog, Tooltip, Loading, ...)
Implement TreeView Component with single and multiple select, intermediate state can render in popover or static
Implement image editor can append logo, resize, crop, change format and remove background with AI
Implement robust sorting component that has concise and pro api model with support flex, grid, drag and drop and keyboard
Fix redux persist in their project that cause hard refresh in the development mode
Implement custom alert dialog with success, warning, delete, info and confirm variant
Implement Neshan Map with search, reverse geocoding and geocoding
Implement robust and fully feature breadcrumbs can support static and dynamic (async) breadcrumb with image, icon, label, path
Implement Scrollspy Tab component with intersection observer support under the hood

deponet.ir admin.deponet.ir

Web developer

Pishgaman ginco kavir

Aug 2022 - Mar 2023(6 Months)

Yazd, Yazd Province, IranOn-site

Develop and design digital marketing website with beautiful animations

Implement SSR
Use animations with framer motion
Use Strapi (zone, component, ...) for manage site data
All section of site can modify and reorder and organize in Strap CMS

Demo gincoplus.com

Design and develop e-commerce admin panel with Nextjs

Use WooCommerce API under the hood
Implement dynamic theme setting for wordpress site in admin panel
Implement highly responsive design system

Demo admin.gincoplus.com

Skills

HTML

HTML is the standard markup language for Web pages.

CSS

Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML.

SVG

SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format.

Typescript

TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript.

Rust

Rust is a multi-paradigm, general-purpose programming language that emphasizes performance, type safety, and concurrency.

Next is an open-source web development framework that enables you to create high-quality web applications with the power of React components.

React

React is a free and open-source front-end JavaScript library for building user interfaces based on components.

Tailwind CSS

Tailwind CSS is an open-source CSS framework.

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

DnD Kit

A lightweight, modular, performant, accessible and extensible drag & drop toolkit for React.

CVA

CVA allows you to create variants for UI components with ease.

SWR

React Hooks for Data Fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861.

Zustand

A small, fast and scalable bearbones state-management solution using simplified flux principles.

Zod

TypeScript-first schema validation with static type inference

Regex

Its a string of characters created within the framework of Regex syntax rules. You can easily manage your data with Regex, which uses commands like finding, matching, and editing.

Rest API

REST, which stands for Representational State Transfer, is an architectural style for designing networked applications.

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

Date Fns

Most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Swiper

The Most Modern Mobile Touch Slider for the web.

Framer Motion

A comprehensive and production-ready motion library for React.

Axios

Promise based HTTP client for the browser and node.js.

React Table

Headless UI library for building powerful tables & datagrids.

React Virtual

Headless UI library for Virtualizing Large Element Lists.

PWA

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.