Humation - React + Vite + Tailwind

A human illustration system built with React, Vite, TypeScript, and Tailwind CSS.

Features

• 🎨 Customizable Avatars - Mix and match different parts to create unique characters
• 🖼️ SVG Export - Download your creations as high-quality SVG files
• ⚡ Fast Development - Powered by Vite for lightning-fast HMR
• 📱 Responsive Design - Works seamlessly on all devices
• 🔷 TypeScript - Type-safe code for better development experience

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open http://localhost:3000 in your browser.

Build for Production

npm run build

The built files will be in the dist directory.

Project Structure

├── public/              # Static assets
│   ├── favicon.ico
│   └── svgs/           # SVG data files
├── src/
│   ├── components/     # Reusable components
│   ├── data/          # JSON data (avatar parts)
│   ├── pages/         # Page components
│   ├── types/         # TypeScript types
│   ├── App.tsx        # Main app component
│   ├── index.css      # Global styles
│   └── main.tsx       # Entry point
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

Pages

• Home (/) - Landing page with information about the app
• Avatar (/avatar) - Avatar creator interface

Technologies

• React - UI library
• Vite - Build tool
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS
• React Router - Client-side routing

License

MIT