124 lines
3.8 KiB
Markdown
124 lines
3.8 KiB
Markdown
|
# Romanovna Photo - Сайт-портфолио фотографа
|
|||
|
|
|
|||
|
|
Минималистичный, эстетичный, тёмно-винтажный сайт-витрина для фотографа Ангелины Чёрной.
|
|||
|
|
|
|||
|
|
## 🚀 Быстрый старт
|
|||
|
|
|
|||
|
|
### Установка зависимостей
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Запуск в режиме разработки
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Откройте [http://localhost:3000](http://localhost:3000) в браузере.
|
|||
|
|
|
|||
|
|
### Сборка для продакшена
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
npm start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📁 Структура проекта
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
romanovna-photo/
|
|||
|
|
├── public/
|
|||
|
|
│ ├── logo/
|
|||
|
|
│ │ └── romanovna-logo.png # Логотип (уже добавлен)
|
|||
|
|
│ └── images/
|
|||
|
|
│ ├── carousel/ # Изображения для карусели (6 шт.)
|
|||
|
|
│ └── services/ # Обложки и примеры для услуг
|
|||
|
|
├── src/
|
|||
|
|
│ ├── app/ # Страницы Next.js
|
|||
|
|
│ ├── components/ # React компоненты
|
|||
|
|
│ ├── lib/ # Конфигурационные данные
|
|||
|
|
│ └── styles/ # CSS модули
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🖼️ Добавление изображений
|
|||
|
|
|
|||
|
|
### Карусель работ
|
|||
|
|
|
|||
|
|
Добавьте 6 изображений в `public/images/carousel/`:
|
|||
|
|
- `work-1.jpg`
|
|||
|
|
- `work-2.jpg`
|
|||
|
|
- `work-3.jpg`
|
|||
|
|
- `work-4.jpg`
|
|||
|
|
- `work-5.jpg`
|
|||
|
|
- `work-6.jpg`
|
|||
|
|
|
|||
|
|
### Услуги
|
|||
|
|
|
|||
|
|
Для каждой услуги добавьте изображения в `public/images/services/`:
|
|||
|
|
|
|||
|
|
**Фотосессия на улице (street):**
|
|||
|
|
- `street-cover.jpg` (обложка)
|
|||
|
|
- `street-example-1.jpg`
|
|||
|
|
- `street-example-2.jpg`
|
|||
|
|
- `street-example-3.jpg`
|
|||
|
|
|
|||
|
|
**Фотосессия в студии (studio):**
|
|||
|
|
- `studio-cover.jpg` (обложка)
|
|||
|
|
- `studio-example-1.jpg`
|
|||
|
|
- `studio-example-2.jpg`
|
|||
|
|
|
|||
|
|
**Ретушь (retouch):**
|
|||
|
|
- `retouch-cover.jpg` (обложка)
|
|||
|
|
- `retouch-example-1.jpg`
|
|||
|
|
- `retouch-example-2.jpg`
|
|||
|
|
|
|||
|
|
**Сертификат (certificate):**
|
|||
|
|
- `certificate-cover.jpg` (обложка)
|
|||
|
|
- `certificate-example-1.jpg`
|
|||
|
|
|
|||
|
|
## 🗺️ Настройка Яндекс.Карты
|
|||
|
|
|
|||
|
|
✅ Яндекс.Карта уже настроена и готова к использованию!
|
|||
|
|
|
|||
|
|
Если нужно изменить карту:
|
|||
|
|
1. Создайте новую карту на [Яндекс.Конструкторе карт](https://yandex.ru/map-constructor/)
|
|||
|
|
2. Скопируйте код скрипта
|
|||
|
|
3. Замените URL скрипта в `src/components/contacts/YandexMap.tsx`
|
|||
|
|
|
|||
|
|
## 🎨 Цветовая палитра
|
|||
|
|
|
|||
|
|
- **Акцентный**: `#A64456` (винтажный красно-розовый)
|
|||
|
|
- **Песочный**: `#BF9B7A`
|
|||
|
|
- **Светло-винтажный**: `#D9B79A`
|
|||
|
|
- **Коричневый винтаж**: `#8C654F`
|
|||
|
|
- **Тёмный**: `#594336`
|
|||
|
|
- **Фон**: `#1a1a1a`
|
|||
|
|
|
|||
|
|
## 📝 Настройка данных
|
|||
|
|
|
|||
|
|
Все данные о компании, услугах и галерее находятся в `src/lib/`:
|
|||
|
|
- `company.ts` - информация о компании
|
|||
|
|
- `services.ts` - список услуг
|
|||
|
|
- `gallery.ts` - изображения для карусели
|
|||
|
|
|
|||
|
|
## 🛠️ Технологии
|
|||
|
|
|
|||
|
|
- **Next.js 14** - React фреймворк
|
|||
|
|
- **TypeScript** - типизация
|
|||
|
|
- **CSS Modules** - стилизация
|
|||
|
|
- **Google Fonts** - типографика (Playfair Display, Inter)
|
|||
|
|
|
|||
|
|
## 📱 Адаптивность
|
|||
|
|
|
|||
|
|
Сайт полностью адаптирован для:
|
|||
|
|
- Desktop (1200px+)
|
|||
|
|
- Tablet (768px - 1199px)
|
|||
|
|
- Mobile (до 767px)
|
|||
|
|
|
|||
|
|
## 📄 Лицензия
|
|||
|
|
|
|||
|
|
Проект создан для фотографа Ангелины Чёрной (@romanovnaph_ch).
|
|||
|
|
|