diff --git a/README.md b/README.md index 0b6742f..fd0ff23 100644 --- a/README.md +++ b/README.md @@ -1,191 +1,134 @@ -# Kit Landing Page +# πŸ› οΈ Kit UI (kit.pivoine.art) -A stylish, animated landing page for [kit.pivoine.art](https://kit.pivoine.art) - your creative toolkit. +[![Production](https://img.shields.io/badge/Production-kit.pivoine.art-blue?style=for-the-badge)](https://kit.pivoine.art) +[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js)](https://nextjs.org) +[![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev) +[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com) -## Features +**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative toolsβ€”from advanced color manipulation to ASCII art generationβ€”into a single, unified workspace. -- ✨ **Animated UI** - Smooth animations with Framer Motion -- 🎨 **Modern Design** - Glassmorphism effects, gradients, and animated backgrounds -- πŸ“± **Responsive** - Mobile-first design that works on all devices -- ⚑ **Fast** - Static export with Next.js 16 and Turbopack for optimal performance -- 🎯 **SEO Optimized** - Proper meta tags and semantic HTML -- πŸš€ **Production Ready** - Docker support with Nginx +Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers a lightning-fast, glassmorphic experience with a focus on precision and accessibility. -## Tech Stack +--- -- **Next.js 16** - React framework with App Router and Turbopack -- **React 19** - Latest React with modern features -- **Tailwind CSS 4** - Utility-first CSS with CSS-first configuration -- **Framer Motion** - Professional animation library -- **TypeScript 5** - Type-safe development -- **ESLint 9** - Latest linting with flat config -- **pnpm** - Fast, efficient package manager +## πŸš€ The Toolkit -## Getting Started +Kit UI is divided into three core specialized applications: + +### 🎨 [Pastel](./app/(app)/pastel) β€” Professional Color Toolkit +A comprehensive suite for color theory, manipulation, and accessibility. +- **Color Playground**: Interactive HSL/RGB/HEX manipulation with real-time analysis. +- **Accessibility Suite**: WCAG 2.1 Contrast Checker and a real-time Colorblindness Simulator. +- **Generative Tools**: Harmony generator (Analogous, Triadic, etc.), Palette Generator, and Gradient Architect. +- **Batch Processing**: Perform mass color operations and exports. +- **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations. + +### πŸ“ [Units](./app/(app)/units) β€” Smart Unit Converter +A powerful, intuitive converter that understands the way you work. +- **187+ Units**: Supporting 23 categories including Length, Mass, Temperature, Force, and more. +- **Smart Search**: Quickly find units via a fuzzy-search command palette. +- **Visual Comparison**: Dynamic chart views for comparing scale across different units. +- **Favorites & History**: Save your most-used conversions for instant access. + +### ✍️ [Figlet](./app/(app)/figlet) β€” ASCII Art Generator +Retro-inspired text banners for terminals and documentation. +- **373 Fonts**: From classic `Standard` to complex 3D and cursive styles. +- **Real-time Preview**: See your ASCII art transform as you type. +- **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images. + +--- + +## ✨ Core Features + +- 🎭 **Glassmorphic UI**: A modern, translucent aesthetic with smooth Framer Motion transitions. +- ⚑ **Turbopack Optimized**: Built for speed using the latest Next.js 16 Turbopack engine. +- β™Ώ **Accessibility First**: Integrated tools to ensure your designs meet global standards. +- πŸ“± **Responsive & Fluid**: Tailored experience across mobile, tablet, and desktop. +- πŸ› οΈ **Developer Friendly**: Keyboard shortcuts, command palettes, and URL-state sharing. +- 🐳 **Production Ready**: Full Docker & Nginx integration for seamless deployment. + +--- + +## πŸ’» Tech Stack + +- **Framework**: [Next.js 16](https://nextjs.org) (App Router, Static Export) +- **Library**: [React 19](https://react.dev) +- **Styling**: [Tailwind CSS 4](https://tailwindcss.com) (CSS-first configuration) +- **Animations**: [Framer Motion](https://www.framer.com/motion/) +- **State Management**: [Zustand](https://github.com/pmndrs/zustand) & [React Query](https://tanstack.com/query) +- **Icons**: [Lucide React](https://lucide.dev) +- **Type Safety**: [TypeScript 5](https://www.typescriptlang.org) + +--- + +## πŸ—οΈ Project Structure + +```bash +. +β”œβ”€β”€ app/ # Next.js App Router (Pages & Layouts) +β”‚ β”œβ”€β”€ (app)/ # Core Tool Pages (Pastel, Units, Figlet) +β”‚ └── api/ # Backend API routes +β”œβ”€β”€ components/ # Reusable UI & Logic Components +β”‚ β”œβ”€β”€ pastel/ # Color-specific components +β”‚ β”œβ”€β”€ units/ # Converter-specific components +β”‚ β”œβ”€β”€ figlet/ # ASCII-specific components +β”‚ └── ui/ # Base Atomic Components (Buttons, Cards, etc.) +β”œβ”€β”€ lib/ # Business Logic & Utilities +β”‚ β”œβ”€β”€ pastel/ # WASM wrappers & Color logic +β”‚ β”œβ”€β”€ units/ # Conversion algorithms +β”‚ └── figlet/ # Font loading & ASCII generation +β”œβ”€β”€ public/ # Static assets & Figlet fonts +β”œβ”€β”€ Dockerfile # Multi-stage Docker build +└── nginx.conf # Production Nginx configuration +``` + +--- + +## πŸ› οΈ Development & Deployment ### Prerequisites +- **Node.js**: 20.x or higher +- **pnpm**: 9.x or higher -- Node.js 20+ -- pnpm (via corepack) - -### Development - +### Local Development ```bash -# Install dependencies +# Clone and install pnpm install -# Run development server +# Start development server with Turbopack pnpm dev +``` -# Build for production +### Production Build +```bash +# Build for static export pnpm build -# Preview production build locally -pnpm start +# The output will be in the /out directory ``` -Visit [http://localhost:3000](http://localhost:3000) to see the site. - -## Docker Deployment - -### Using Pre-built Image from GHCR - -The Docker image is automatically built and published to GitHub Container Registry on every push to main: - +### Docker Deployment ```bash -# Pull and run the latest image -docker pull ghcr.io/valknarness/kit-ui:latest -docker run -p 80:80 ghcr.io/valknarness/kit-ui:latest +# Build locally +docker build -t kit-ui . + +# Run with Nginx +docker run -p 80:80 kit-ui ``` -### Build Locally +--- -Or build and run locally: +## πŸ“ˆ Performance & Optimization -```bash -# Build the image -docker build -t kit-landing . +- **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times. +- **WASM Integration**: Heavy color calculations are offloaded to WebAssembly. +- **CSS-First Configuration**: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead. +- **Automatic CI/CD**: GitHub Actions pipeline for multi-architecture Docker builds. -# Run the container -docker run -p 80:80 kit-landing -``` +--- -### Docker Compose +## πŸ“ License -For production deployment, see `/home/valknar/Projects/docker-compose/kit/compose.yaml`. +Β© 2026 [pivoine.art](https://pivoine.art). All rights reserved. -### Available Tags - -- `latest` - Latest build from main branch -- `main` - Main branch builds -- `v*` - Semantic version tags (e.g., `v1.0.0`) -- `-` - Branch-specific builds with commit SHA - -## Project Structure - -``` -. -β”œβ”€β”€ app/ -β”‚ β”œβ”€β”€ layout.tsx # Root layout with metadata -β”‚ β”œβ”€β”€ page.tsx # Home page -β”‚ └── globals.css # Global styles and utilities -β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ AnimatedBackground.tsx # Animated gradient background -β”‚ β”œβ”€β”€ Hero.tsx # Hero section with logo -β”‚ β”œβ”€β”€ Logo.tsx # Animated SVG logo -β”‚ β”œβ”€β”€ ToolCard.tsx # Tool card component -β”‚ β”œβ”€β”€ ToolsGrid.tsx # Grid of available tools -β”‚ └── Footer.tsx # Footer component -β”œβ”€β”€ public/ # Static assets -β”œβ”€β”€ Dockerfile # Multi-stage Docker build -β”œβ”€β”€ nginx.conf # Nginx configuration -└── next.config.ts # Next.js configuration -``` - -## Customization - -### Adding New Tools - -Edit `components/ToolsGrid.tsx` and add a new tool object to the `tools` array: - -```typescript -{ - title: 'Tool Name', - description: 'Tool description', - url: 'https://tool.kit.pivoine.art', - gradient: 'gradient-purple-blue', // or 'gradient-cyan-purple' - icon: ( - // Your SVG icon here - ), -} -``` - -### Styling - -Tailwind CSS 4 uses a new CSS-first configuration approach: - -- **Theme customization**: Edit the `@theme` block in `app/globals.css` -- **Custom utilities**: Add `@utility` blocks in `app/globals.css` -- **Animations**: Define keyframes directly in the `@theme` block -- **Colors & fonts**: Configure via CSS custom properties in `@theme` - -## Available Tools - -- **Pastel** - Modern color manipulation toolkit with palette generation and accessibility testing -- **Units** - Smart unit converter with 187 units across 23 categories (length, mass, temperature, etc.) -- **Figlet** - ASCII art text generator with 373 fonts (text banners, terminal art, retro designs) - -## CI/CD Pipeline - -The project uses GitHub Actions for automated Docker image builds: - -### Workflow Features - -- βœ… **Automated builds** on push to main and tags -- βœ… **Multi-architecture support** (linux/amd64, linux/arm64) -- βœ… **GitHub Container Registry** (GHCR) publishing -- βœ… **Build caching** for faster builds -- βœ… **Artifact attestation** for supply chain security -- βœ… **Semantic versioning** support - -### Triggering Builds - -```bash -# Automatic build on push to main -git push origin main - -# Create a versioned release -git tag v1.0.0 -git push origin v1.0.0 - -# Manual trigger via GitHub Actions UI -# Go to Actions β†’ Build and Push Docker Image β†’ Run workflow -``` - -### Using the Published Image - -```bash -# Latest from main branch -docker pull ghcr.io/valknarness/kit-ui:latest - -# Specific version -docker pull ghcr.io/valknarness/kit-ui:v1.0.0 - -# Specific commit -docker pull ghcr.io/valknarness/kit-ui:main-abc1234 -``` - -## Performance - -- Static export for fast loading -- Optimized images and assets -- Gzip compression via Nginx -- Proper caching headers - -## License - -Private project - All rights reserved. - -## Author - -Created for [pivoine.art](https://pivoine.art) +Created and maintained by **Sebastian KrΓΌger** ([@valknarness](https://github.com/valknarness)). diff --git a/package.json b/package.json index 68d74e3..adfa6a9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "kit.pivoine.art", + "name": "kit-ui", "version": "0.1.0", "private": true, "scripts": {