chore: remove duplicated contend from readme
This commit is contained in:
Ilia Mashkov
249
README.md
249
README.md
@@ -1,3 +1,5 @@
|
|||||||
|
# GSAP Carousel
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[🌐 English](#english) | [🇷🇺 Русский](#russian)
|
[🌐 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 <repository-url>
|
|
||||||
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
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a id="english"></a>
|
<a id="english"></a>
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -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.
|
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. Проект фокусируется на синхронизации сложных круговых переходов с динамической каруселью контента.
|
React-компонент UI для изучения продвинутых паттернов анимации с использованием GSAP. Проект фокусируется на синхронизации сложных круговых переходов с динамической каруселью контента.
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user