diff --git a/README.md b/README.md index b4a7084..88cd428 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +# GSAP Carousel + --- [🌐 English](#english) | [🇷🇺 Русский](#russian) @@ -8,249 +10,6 @@ --- -# Only Task - -A React-based UI component developed to explore advanced animation patterns using GSAP. This project focuses on synchronizing complex circular transitions with a dynamic content carousel. - -## Technical Highlights - -- **GSAP Integration**: Implementation of smooth, high-performance animations for state transitions -- **Circular Data Visualization**: An interactive timeline with selectable time periods -- **Adaptive Layout**: Fully responsive architecture supporting mobile, tablet, and desktop viewports -- **Custom Navigation**: Bespoke UI controls for seamless event browsing - -## 🚀 Technologies - -- **React 19** - User interface library -- **TypeScript 5** - Typed JavaScript -- **GSAP** - Smooth animation library -- **Swiper** - Modern carousel library -- **Webpack 5** - Module bundler -- **SCSS** - CSS preprocessor with modules -- **Jest** - Testing framework -- **ESLint + Prettier** - Code linting and formatting - -## 📋 Requirements - -- **Node.js** >= 18.0.0 -- **pnpm** >= 8.0.0 - -## 🛠️ Installation - -1. Clone the repository: - -```bash -git clone -cd gsap-carousel -``` - -2. Install dependencies: - -```bash -pnpm install -``` - -## 🎯 Available Commands - -### Development - -```bash -# Start dev-server on port 3000 -pnpm dev -``` - -The application will be available at: http://localhost:3000 - -### Build - -```bash -# Production build -pnpm build:prod - -# Development build -pnpm build:dev -``` - -The build result will be in the `dist/` folder - -### Testing - -```bash -# Run all unit tests -pnpm test:unit - -# Check TypeScript types -pnpm type-check -``` - -### Linting - -```bash -# Check JavaScript/TypeScript code -pnpm lint - -# Auto-fix errors -pnpm lint --fix - -# Check styles (SCSS) -pnpm lint:styles - -# Auto-fix styles -pnpm lint:styles --fix -``` - -### Storybook - -```bash -# Run Storybook for component development -pnpm storybook - -# Build static version of Storybook -pnpm build-storybook -``` - -### Pre-push Checks - -```bash -# Run all checks before push -pnpm pre-push -``` - -This command runs: - -- ✅ TypeScript type checking -- ✅ Code linting -- ✅ Style linting -- ✅ Unit tests -- ✅ Production build - -## 📁 Project Structure - -``` -gsap-carousel/ -├── config/ # Build configuration -│ ├── build/ # Webpack configuration -│ ├── jest/ # Jest configuration -│ └── storybook/ # Storybook configuration -├── dist/ # Production build (generated) -├── src/ # Source code -│ ├── app/ # Root application component -│ ├── entities/ # Business entities (data types) -│ ├── shared/ # Reusable components and utilities -│ │ ├── assets/ # Static resources (SVG, images) -│ │ └── ui/ # UI components (Button, Card) -│ └── widgets/ # Complex components (TimeFrameSlider) -├── .husky/ # Git hooks -├── package.json # Dependencies and scripts -└── tsconfig.json # TypeScript configuration -``` - -## 🎨 Main Components - -### TimeFrameSlider - -The main application widget combining a circular timeline and an events carousel. - -**Features:** - -- Interactive circular chart with periods -- Smooth GSAP animations during transitions -- Responsive design for mobile, tablet, and desktop -- Custom navigation - -### CircleTimeline - -A circular timeline with period points. - -**Features:** - -- Auto-rotation to the active period -- Click on points to switch periods -- Period title animations - -### EventsCarousel - -Historical events carousel using Swiper. - -**Features:** - -- Adaptive number of slides -- Custom navigation -- Smooth appearance/disappearance animation - -## ⚡ Performance Optimization - -The project is optimized for production: - -- ✅ **Code splitting** - chunk separation (vendors, runtime, main) -- ✅ **Tree shaking** - removal of unused code -- ✅ **Gzip compression** - file compression (~68% size reduction) -- ✅ **Minification** - JS and CSS minification -- ✅ **CSS Modules** - isolated component styles -- ✅ **Babel caching** - caching for fast rebuilds - -**Bundle size:** - -- Uncompressed: ~371 KiB -- Gzipped: ~117 KiB - -## 🧪 Testing - -The project is covered by unit tests: - -- ✅ Component tests (Button, Card, CircleTimeline, TimeFrameSlider, EventsCarousel) -- ✅ Utility tests (calculateCoordinates) -- ✅ Mocks for GSAP and Swiper -- ✅ 39 tests, 100% successful - -## 📱 Responsiveness - -The application is adapted for all devices: - -- **Desktop** (>1440px) - Full version with circular chart -- **Tablet** (768px - 1024px) - Optimized version -- **Mobile** (<768px) - Simplified version with bottom navigation - -## 🔧 Configuration - -### Webpack - -- Babel for transpilation (faster than ts-loader) -- CSS Modules for style isolation -- SVGR for importing SVG as React components -- Hot Module Replacement for development -- Bundle Analyzer for size analysis - -### TypeScript - -- Strict mode enabled -- Path aliases (`@/*` → `src/*`) -- Type checking separate from build - -### ESLint - -- Rules for React, TypeScript, Jest -- Prettier integration -- Import sorting - -## 🤝 Git Hooks - -Pre-push hook automatically runs: - -1. Type checking -2. ESLint -3. Stylelint -4. Unit tests -5. Production build - -This ensures that only working code enters the repository. - -## 📝 License - -ISC - ---- - --- @@ -259,7 +18,7 @@ ISC --- -# Only Task +# GSAP Carousel React-based UI component developed to explore advanced animation patterns using GSAP. This project focuses on synchronizing complex circular transitions with a dynamic content carousel. @@ -512,7 +271,7 @@ ISC --- -# Only Task +# GSAP Carousel React-компонент UI для изучения продвинутых паттернов анимации с использованием GSAP. Проект фокусируется на синхронизации сложных круговых переходов с динамической каруселью контента.