Портфолио — тестовое Fullstack

Лендинг-визитка с формой обратной связи, PHP API и блоком AI (OpenRouter).

Автор: Никита, Telegram @AndeEdna, GitHub trackgosh/TZ.

Стек

• Frontend: HTML, Tailwind CSS, JavaScript (ES modules), Vue 3
• Backend: PHP 8.1+, REST API, PHPMailer
• AI: OpenRouter API (/api/ai-helper.php), без ключа — демо-ответ

Структура

index.html
assets/css/main.css    — сборка Tailwind
assets/js/app.js       — Vue: форма и AI
assets/js/api.js
assets/js/main.js
api/contact.php
api/ai-helper.php
includes/              — Validator, Mailer, AiService, bootstrap
router.php             — для php -S
scripts/install-phpmailer.ps1
.env.example

Запуск локально

npm install
npm run build:css
composer install

Если composer install падает по сети:

.\scripts\install-phpmailer.ps1

Скопировать окружение:

copy .env.example .env

Запуск:

php -S localhost:8080 router.php

Сайт: http://localhost:8080

Слежение за CSS: npm run dev:css

Переменные .env

Переменная	Назначение
MAIL_DRIVER	log — заявки в logs/mail.log; mail — на хостинге; smtp — Mail.ru с паролем приложения
MAIL_FROM, MAIL_TO	От кого и куда уходят заявки
SMTP_*	Нужны только при MAIL_DRIVER=smtp
OPENAI_API_KEY	Ключ OpenRouter
OPENAI_MODEL	Например openrouter/free
AI_API_URL	https://openrouter.ai/api/v1/chat/completions
APP_URL, CORS_ORIGIN	URL сайта (локально http://localhost:8080)

Форма

1. Vue-компонент: имя, телефон, email, комментарий; состояния loading / success / error.
2. POST /api/contact.php, JSON.
3. PHP: валидация, затем Mailer::sendContact() — письмо на MAIL_TO и копия на email из формы.

Локально при MAIL_DRIVER=log письма на почту не отправляются, только файл logs/mail.log. На хостинге обычно ставят MAIL_DRIVER=mail.

Для отправки с ПК через Mail.ru:

MAIL_DRIVER=smtp
SMTP_HOST=smtp.mail.ru
SMTP_PORT=465
SMTP_USER=ваш@mail.ru
SMTP_PASS=пароль_приложения
SMTP_SECURE=ssl

Пароль создаётся в настройках Mail.ru: «Пароли для внешних приложений».

AI

Блок на Vue: короткий ввод → POST /api/ai-helper.php → AiService::summarize().

С ключом OpenRouter — ответ модели. Без ключа — заготовленный демо-текст.

Деплой

Нужен хостинг с PHP 8.1+ (не GitHub Pages).

Пошагово: DEPLOY.md — InfinityFree (бесплатно), Beget/Timeweb, .env, проверка формы и AI.

Кратко: залить файлы + vendor/, создать .env на сервере, MAIL_DRIVER=mail, APP_URL и CORS_ORIGIN = URL сайта.

AI при разработке

• Cursor: разметка, PHP, черновик README.
• Вручную: данные на сайте, валидация, почта, OpenRouter, правки после тестов.

Ссылки

• GitHub: https://github.com/trackgosh/TZ
• Деплой: (добавить после выкладки на хостинг)