Проект "Моё Резюме"

Современный проект с веб-страницей резюме и генерацией PDF, созданный с использованием React, TypeScript, Tailwind CSS и Markdown.

Описание

Этот проект представляет собой одностраничный сайт-резюме с адаптивным дизайном, созданный с использованием современных технологий веб-разработки. Резюме доступно на двух языках (русский и английский) с возможностью переключения между ними. Содержимое резюме хранится в Markdown-файлах для удобного редактирования и поддержки.

Проект также включает функциональность генерации PDF-версии резюме с помощью Puppeteer, которая автоматически обновляется при изменении содержимого. Поддерживается выбор языка через query-параметры URL (?lang=en или ?lang=ru) и переключение между светлой и темной темой с сохранением выбора пользователя.

Страница содержит следующие разделы:

Заголовок с именем, должностью и переключателем языка
Информация обо мне
Образование и сертификаты (в одной строке)
Навыки и проекты (в компактной сетке)
Опыт работы
Футер с контактной информацией и датой генерации

Использованные технологии

React - библиотека JavaScript для создания пользовательских интерфейсов
TypeScript - типизированный язык программирования, расширяющий JavaScript
Tailwind CSS - утилитарный CSS-фреймворк для быстрого создания дизайна
PostCSS - инструмент для трансформации CSS с помощью JavaScript
Vite - быстрый инструмент сборки для современной веб-разработки
vite-plugin-markdown - плагин для импорта Markdown-файлов как модулей
React Icons - библиотека иконок для React
Puppeteer - библиотека для автоматизации браузера и генерации PDF
Jest - фреймворк для тестирования JavaScript
React Testing Library - библиотека для тестирования React компонентов
Husky - инструмент для управления Git-хуками
ESLint - инструмент для анализа кода и поиска ошибок
lint-staged - запуск линтеров только для измененных файлов

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

resume/
│── index.html                # Основной HTML файл
│── content/                  # Markdown-файлы с содержимым резюме
│   │── ru/                   # Русская версия
│   │   │── about.md          # Информация обо мне
│   │   │── experience.md     # Опыт работы
│   │   │── education.md      # Образование
│   │   │── skills.md         # Навыки
│   │   │── projects.md       # Проекты
│   │   │── certificates.md   # Сертификаты
│   │   └── contacts.md       # Контактная информация
│   └── en/                   # Английская версия
│       │── about.md          # Информация обо мне
│       │── experience.md     # Опыт работы
│       │── education.md      # Образование
│       │── skills.md         # Навыки
│       │── projects.md       # Проекты
│       │── certificates.md   # Сертификаты
│       └── contacts.md       # Контактная информация
│── src/
│   │── components/           # React компоненты
│   │   │── LanguageDropdown/ # Компонент переключения языка
│   │   │── MarkdownViewer/   # Компонент для отображения Markdown
│   │   │── SkillsViewer/     # Компонент для отображения навыков
│   │   └── Contacts/        # Компонент для отображения контактов
│   │── locales/              # Файлы локализации
│   │   │── ru/               # Русский язык
│   │   │   └── translation.json
│   │   └── en/               # Английский язык
│   │       └── translation.json
│   │── scripts/              # Скрипты
│   │   └── generatePDF.tsx  # Скрипт генерации PDF
│   │── styles.css           # Стили Tailwind CSS
│   │── App.tsx              # Главный компонент приложения
│   │── main.tsx             # Точка входа в приложения
│   └── i18n.ts              # Настройка мультиязычности
│── .husky/                  # Конфигурация Git-хуков
│   └── pre-commit          # Скрипт предкоммитного хука
│── eslint.config.js        # Конфигурация ESLint
│── vite.config.ts           # Конфигурация Vite
│── tailwind.config.js       # Конфигурация Tailwind CSS
│── postcss.config.js        # Конфигурация PostCSS
│── tsconfig.json            # Конфигурация TypeScript
│── .gitignore               # Игнорируемые Git файлы
│── package.json             # Зависимости проекта
└── README.md                # Описание проекта

Установка и запуск

Клонировать репозиторий:

git clone <url-репозитория>
cd resume

Установить зависимости:
```
npm install
```
Эта команда также автоматически настроит Husky для Git-хуков.
Генерация PDF-версии резюме:
```
npm run generate-pdf
```
Эта команда создаст PDF-файл резюме на текущем выбранном языке.
Запустить проект в режиме разработки:
```
npm run dev
```
Эта команда сначала генерирует PDF, а затем запускает сервер разработки.
Собрать проект для продакшена:
```
npm run build
```
Эта команда также включает генерацию PDF перед сборкой.
Предпросмотр собранного проекта:
```
npm run preview
```
Проверка кода с помощью ESLint:
```
npm run lint
```
Автоматическое исправление ошибок линтинга:
```
npm run lint:fix
```
Запуск тестов:
```
npm test
```
Запуск тестов в режиме наблюдения:

npm run test:watch

Запуск тестов с отчетом о покрытии:

npm run test:coverage

Редактирование резюме

Для обновления содержимого резюме достаточно отредактировать соответствующие Markdown-файлы в директориях content/ru/ и content/en/. Изменения будут автоматически отображены на странице после перезагрузки.

Стилизация

Проект использует Tailwind CSS для стилизации компонентов. Основные стили определены в файле src/styles.css и применяются непосредственно к компонентам через утилитарные классы Tailwind.

Для стилизации Markdown-контента используется плагин @tailwindcss/typography, который обеспечивает красивое отображение типографики в Markdown.

Темная тема

Проект поддерживает темную тему с использованием механизма darkMode: 'class' в Tailwind CSS. Темная тема активируется добавлением класса dark к элементу html. При первом посещении сайта тема выбирается автоматически на основе системных настроек пользователя (prefers-color-scheme). Выбор пользователя сохраняется в localStorage и используется при последующих посещениях.

Тестирование

Проект использует Jest и React Testing Library для модульного и интеграционного тестирования компонентов и функциональности.

Структура тестов

Тесты располагаются в директориях __tests__ рядом с тестируемыми компонентами. Например:

src/
└── components/
    └── MarkdownViewer/
        ├── MarkdownViewer.tsx
        └── __tests__/
            └── MarkdownViewer.test.tsx

Запуск тестов

Для запуска всех тестов используйте команду:

npm test

Для запуска тестов в режиме наблюдения (тесты будут перезапускаться при изменении файлов):

npm run test:watch

Для генерации отчета о покрытии кода тестами:

npm run test:coverage

Моки и тестовые пропсы

Для тестирования компонентов, которые используют Markdown-файлы, используются моки в директории src/__mocks__/. Все моки написаны на TypeScript.

Компоненты также поддерживают специальные тестовые пропсы для изолированного тестирования:

MarkdownViewer принимает testContent, testIsLoading и testError для контроля состояния в тестах
SkillsViewer принимает testSkillCategories, testIsLoading и testError для контроля состояния в тестах

Эти тестовые пропсы позволяют избежать реальной загрузки markdown-файлов в тестах, что делает тесты более быстрыми, надежными и изолированными.


## Как использовать

1. Установите зависимости проекта:

npm install


2. Запустите проект в режиме разработки:

npm run dev


3. Для сборки проекта:

npm run build


4. Для предварительного просмотра собранного проекта:

npm run preview


### Выбор языка

Для выбора языка используйте query-параметр `lang` в URL:

- Английский: `http://localhost:3000/?lang=en`
- Русский: `http://localhost:3000/?lang=ru`

Если параметр не указан, язык будет выбран на основе сохраненных настроек в localStorage или языка браузера.

### Переключение темы

Для переключения между светлой и темной темой используйте кнопку с иконкой солнца/луны в верхней части страницы. Выбранная тема сохраняется в localStorage и будет использоваться при следующих посещениях.

## Персонализация

Для персонализации резюме под свои нужды:
1. Замените текст в файле `index.html` на свою информацию.
2. При необходимости добавьте свою фотографию.
3. Измените цветовую схему в файле `tailwind.config.js`, отредактировав значения цветов в разделе `theme.extend.colors`.
4. Добавьте дополнительные стили в файл `src/style.css` с использованием директив TailwindCSS.

## Деплой на Vercel

Проект настроен для автоматического деплоя на Vercel с использованием адаптера `@astrojs/vercel`.

### Настройка деплоя

1. **Подключите репозиторий к Vercel:**
- Зайдите на [vercel.com](https://vercel.com)
- Импортируйте ваш Git репозиторий
- Vercel автоматически определит, что это Astro проект

2. **Настройте переменные окружения в Vercel:**

OPENAI_API_KEY=your_openai_api_key_here ENABLE_CHAT_WIDGET=true


3. **Автоматический деплой:**
- При каждом push в main ветку проект будет автоматически пересобран и задеплоен
- PDF файлы будут сгенерированы во время сборки

### Конфигурационные файлы

- `vercel.json` - основная конфигурация Vercel
- `.vercelignore` - файлы, исключаемые из деплоя
- `astro.config.mjs` - настроен адаптер `@astrojs/vercel/static`

### Особенности деплоя

- Проект собирается как статический сайт (`output: 'static'`)
- PDF файлы генерируются во время сборки и включаются в деплой
- Поддерживается многоязычность с правильным роутингом
- Переменные окружения безопасно управляются через Vercel Dashboard

## Лицензия

Свободно для личного использования.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Проект "Моё Резюме"

Описание

Использованные технологии

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

Установка и запуск

Редактирование резюме

Стилизация

Темная тема

Тестирование

Структура тестов

Запуск тестов

Моки и тестовые пропсы

About

Uh oh!

Releases

Packages

Contributors 2

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 29 Commits
.husky		.husky
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
.vercelignore		.vercelignore
README.md		README.md
astro.config.mjs		astro.config.mjs
eslint.config.js		eslint.config.js
index.html		index.html
jest.config.js		jest.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
yarn.lock		yarn.lock

annaserba/Resume

Folders and files

Latest commit

History

Repository files navigation

Проект "Моё Резюме"

Описание

Использованные технологии

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

Установка и запуск

Редактирование резюме

Стилизация

Темная тема

Тестирование

Структура тестов

Запуск тестов

Моки и тестовые пропсы

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

Languages

Packages