Liquid Glass UI

Персональная страница с элегантным liquid glass дизайном, построенная на React, TypeScript и Tailwind CSS.

✨ Особенности

• 🎨 Liquid Glass эффект с backdrop-filter blur
• 🌈 Анимированный градиентный фон с парящими орбами
• 📱 Полностью адаптивный дизайн
• ⚡ Быстрая и оптимизированная сборка с Vite
• 🎭 Плавные анимации и переходы
• 🔄 Переключение между вкладками "Частным лицам" и "Бизнесу"

🚀 Запуск проекта

Установка зависимостей

npm install

Режим разработки

npm run dev

Сборка для продакшена

npm run build

Предпросмотр сборки

npm run preview

🏗️ Структура проекта

src/
├── components/
│   ├── ProfileHeader.tsx    # Шапка профиля с аватаром
│   ├── ToggleSwitch.tsx     # Переключатель вкладок
│   └── LinkCard.tsx         # Стеклянная карточка-ссылка
├── App.tsx                  # Главный компонент
├── main.tsx                 # Точка входа
└── index.css                # Стили и анимации

🎨 Дизайн-система

Цветовая палитра

• Текст: #1a1a2e (primary), #4a4a6a (secondary)
• Акценты: #667eea (blue), #764ba2 (purple), #f093fb (pink)
• Фон: Градиент от #fbc2eb до #a6c1ee

Стеклянные эффекты

• backdrop-filter: blur(20px) saturate(180%)
• Полупрозрачные фоны: rgba(255, 255, 255, 0.65)
• Тонкие рамки: rgba(255, 255, 255, 0.4)

📦 Технологии

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Lucide React (иконки)

🤖 Claude Code с плагином Claude-Mem

Для разработки этого проекта рекомендуется использовать Claude Code с плагином claude-mem, который обеспечивает персистентную память между сеансами кодирования.

Установка Claude-Mem

1. Установите плагин через marketplace Claude Code:

   > /plugin marketplace add thedotmack/claude-mem
   > /plugin install claude-mem
   

2. Перезапустите Claude Code

3. Контекст из предыдущих сеансов будет автоматически появляться в новых сеансах

Требования

• Node.js 18.0.0 или выше
• Claude Code с поддержкой плагинов
• Bun (устанавливается автоматически при необходимости)
• uv менеджер пакетов Python (устанавливается автоматически)

Веб-интерфейс

После установки веб-интерфейс Claude-Mem будет доступен по адресу: http://localhost:37777

Документация

Подробная документация доступна на: https://docs.claude-mem.ai

📄 Лицензия

© 2026 Прошинский Владислав