Мини‑лендинг для разработчика 1.0

Мини‑лендинг для разработчика в стиле VSCode/GitHub

Видео‑демо​

Что внутри​

• Кодо‑загрузка — экран старта «как набор кода» с мигающим курсором, ASCII‑прогрессом и кнопкой Пропустить.
• Ник с переливом «zenettany» + галочка Verified (пульс).
• Роли: Администратор ********** • Web Developer.
• Соц‑кнопки: VK, Telegram, PAWN — с кастомным подтверждением перехода (модальное окно вместо браузерного alert/confirm).
• Фон Canvas: «код‑частицы» с линиями и слабым grid‑паттерном, реагирует на движение мыши.
• 3D‑наклон карточки по курсору.
• Command Palette (Ctrl/Cmd + K): быстрые команды — открыть VK/TG/PAWN, сменить тему, скопировать ник.
• Темы: VSCode • GitHub • Light, переключение и сохранение в localStorage.
• Код‑блок с мини‑резюме в формате JSON (GitHub‑стилистика).
• Чистый PHP + HTML/CSS/JS. Никаких внешних зависимостей.

Как это работает​

1. Загрузка: JavaScript печатает строки лога, заполняет полосу прогресса, затем скрывает лоадер и показывает карточку.
2. Модальное подтверждение ссылок: клики по ссылкам с атрибутом data-confirm="1" перехватываются. Отображается окно с доменом/иконкой; после подтверждения выполняется переход.
3. Темизация: переключение через html[data-theme] + CSS‑переменные. Текущая тема сохраняется в localStorage.
4. Фон Canvas: набор «узлов», соединённых линиями. Узлы отталкиваются от курсора и двигаются с малой скоростью.
5. 3D Tilt: мягкие transform: rotateX/rotateY относительно позиции курсора.
6. Command Palette: оверлей с фильтрацией команд по вводу. Горячая клавиша — Ctrl/Cmd + K, закрытие — Esc.

Технологии​

• ЯП: PHP 7.4+ (подойдёт и 8.x), HTML/CSS/JS.
• Опционально: можно добавить генерацию OG‑изображения через Imagick (PNG превью для соцсетей).
• Стиль: VSCode/GitHub‑аура, сетки/градиенты, «программистический» прогресс‑бар.

Как развернуть​

• Залейте index.php на любой хостинг с PHP.
• Откройте страницу — лоадер отработает, затем появится карточка.
• В начале файла есть мини‑конфиг: имя/аватар/ссылки/стек (правится за 1–2 минуты).

Кастомизация​

• Цвета/акцент: поменяйте переменные в :root (--accent, --accent-2).
• Темы: оставьте одну по умолчанию или расширьте список (например, Monokai).
• Поведение ссылок: можно разрешать конкретные домены автоматически.
• Лоадер: настраивается скорость печати/длина прогресса или полностью отключается.
• Фон Canvas: меняется количество узлов/скорость/цвет линий.

FAQ​

• Почему без фреймворков? Задача — лёгкая визитка, быстрый старт, ноль зависимостей.
• Работает на телефонах? Да, адаптивная сетка и оптимизированные эффекты.
• Можно использовать для команды/проекта? Да, меняете конфиг + стили — и готово.

Планы​

• OG‑картинка (PNG) из PHP/Imagick.
• Бейджи достижений и «commit‑streak».
• Экспорт темы (VSCode Dark+/GitHub Dark/Light пресеты).

Идеи/предложения приветствуются. Если нужна адаптация под ваш бренд/палитру — отпишитесь в теме.