Skip to content

CONTENT_GUIDE.md

Latest commit

 

History

History
219 lines (165 loc) · 8.6 KB

CONTENT_GUIDE.md

File metadata and controls

219 lines (165 loc) · 8.6 KB
Raw

Как менять изображения проектов

Обзор

В секции Projects теперь отображаются изображения 16:9 вместо иконок папок. Этот документ объясняет, как заменить или добавить новые изображения.

Структура файлов

Dun4ev_site_r1/
├── public/
│   └── images/
│       └── projects/
│           ├── documentation-generator.png
│           ├── pipeline-analytics.png
│           └── portfolio-website.png
├── constants.ts
└── components/
    └── ProjectCard.tsx

Как заменить изображение проекта

Шаг 1: Подготовьте изображение

Требования к изображению:

  • Соотношение сторон: 16:9 (например, 1920x1080, 1280x720, 800x450)
  • Формат: PNG, JPG, или WebP
  • Размер: Рекомендуется не более 500KB для быстрой загрузки
  • Стиль: Темная тема с бирюзовыми акцентами для соответствия дизайну сайта

Шаг 2: Добавьте изображение в проект

  1. Поместите файл изображения в папку:

    /Users/j15/Documents/Code_and_Scripts_local/Website/Dun4ev_site_r1/public/images/projects/

  2. Назовите файл понятным именем (например, my-project.png)

Шаг 3: Обновите константы

Откройте файл constants.ts и найдите массив PROJECTS:

export const PROJECTS: Project[] = [
  {
    id: 'auto-comment-sheets',
    title: 'Automated Documentation Generator',
    description: '...',
    tools: ['Python', 'Pandas', 'OpenPyXL', 'Automation'],
    link: 'https://github.com/Dun4ev',
    image: '/images/projects/documentation-generator.png'  // ← Измените этот путь
  },
  // ... другие проекты
];

Измените значение поля image на путь к вашему новому изображению:

image: '/images/projects/my-project.png'

Шаг 4: Проверьте результат

  1. Сохраните файл constants.ts
  2. Браузер автоматически обновится (hot reload)
  3. Перейдите на http://localhost:3000/#projects
  4. Проверьте, что новое изображение отображается

Добавление нового проекта с изображением

Чтобы добавить новый проект:

export const PROJECTS: Project[] = [
  // ... существующие проекты
  {
    id: 'new-project',                           // Уникальный ID
    title: 'Название проекта',                   // Заголовок
    description: 'Описание проекта...',          // Описание
    tools: ['Tool1', 'Tool2', 'Tool3'],         // Технологии
    link: 'https://github.com/username/repo',   // Ссылка на GitHub
    image: '/images/projects/new-project.png'   // Путь к изображению
  }
];

Создание изображений

Вариант 1: Генерация с помощью AI

Вы можете попросить меня создать изображение:

"Создай изображение 16:9 для проекта [название]. 
Тема: [описание]. 
Стиль: темный фон с бирюзовыми акцентами."

Вариант 2: Использование Figma/Canva

  1. Создайте новый документ 1920x1080px
  2. Используйте темную цветовую схему:
    • Фон: #0f172a (slate-900)
    • Акценты: #5eead4 (teal-300)
  3. Добавьте элементы, связанные с проектом
  4. Экспортируйте как PNG

Вариант 3: Скриншоты

Если у вас есть работающий проект:

  1. Сделайте скриншот интерфейса
  2. Обрежьте до 16:9
  3. При необходимости добавьте темный оверлей для единообразия

Текущие изображения

1. Documentation Generator

Файл: documentation-generator.png
Тема: Python код, Excel таблицы, автоматизация
Цвета: Темно-синий фон, бирюзовые акценты

2. Pipeline Analytics

Файл: pipeline-analytics.png
Тема: Газопроводы, графики данных, аналитика
Цвета: Темно-синий фон, бирюзовые акценты

3. Portfolio Website

Файл: portfolio-website.png
Тема: React компоненты, TypeScript, D3.js графики
Цвета: Темный градиент, бирюзово-синие тона

Технические детали

Компонент ProjectCard

Изображения отображаются с помощью следующего кода:

{project.image ? (
  <div className="relative w-full aspect-video rounded-lg overflow-hidden border border-slate-700 group-hover:border-teal-300/50 transition-colors">
    <img 
      src={project.image} 
      alt={project.title}
      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
    />
  </div>
) : (
  // Fallback: иконка папки
  <div className="flex items-center justify-center w-12 h-12 mt-1 rounded bg-slate-800/50 border border-slate-700 text-teal-300 group-hover:border-teal-300/50 transition-colors">
    <Folder className="w-6 h-6" />
  </div>
)}

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

  • aspect-video - автоматически поддерживает соотношение 16:9
  • object-cover - изображение заполняет контейнер без искажений
  • group-hover:scale-105 - легкое увеличение при наведении
  • border-slate-700 → border-teal-300/50 - изменение цвета рамки при hover

Fallback

Если поле image не указано или пустое, автоматически отображается иконка папки (Folder).

Оптимизация изображений

Для лучшей производительности:

  1. Сжатие: Используйте TinyPNG или Squoosh
  2. WebP формат: Современный формат с лучшим сжатием
  3. Responsive images: Можно добавить несколько размеров для разных экранов

Пример: Замена изображения

До:

{
  id: 'pipeline-analytics',
  title: 'Pipeline Data Analytics Tool',
  // ...
  image: '/images/projects/pipeline-analytics.png'
}

После:

{
  id: 'pipeline-analytics',
  title: 'Pipeline Data Analytics Tool',
  // ...
  image: '/images/projects/my-new-analytics-image.png'
}

Устранение проблем

Изображение не отображается

  1. Проверьте путь: Убедитесь, что путь начинается с /images/projects/
  2. Проверьте файл: Убедитесь, что файл существует в public/images/projects/
  3. Проверьте имя: Имя файла должно точно совпадать (учитывается регистр)
  4. Hard refresh: Нажмите Cmd+Shift+R для очистки кеша

Изображение искажено

  • Убедитесь, что исходное изображение имеет соотношение 16:9
  • Класс object-cover обрежет изображение, если оно не 16:9

Изображение слишком большое

  • Сожмите изображение перед добавлением
  • Рекомендуемый размер: 800x450px (достаточно для веба)

Заключение

Теперь вы можете легко менять изображения проектов, просто обновляя файлы в папке public/images/projects/ и пути в constants.ts. Изменения применяются автоматически благодаря hot reload! 🎉