|
1 | | -# Vanilla App Template |
| 1 | +## About: |
| 2 | +This project was created using Vite. |
| 3 | +To accomplish the task, the following steps were taken: |
| 4 | +1. Developed adaptive and semantic layout |
| 5 | +Created responsive layout using HTML5, CSS3, and JavaScript to ensure proper display across various devices. Enhanced SEO and accessibility through semantic tags. |
| 6 | +2. Optimized graphics and website performance |
| 7 | +Optimized graphics and performance by reducing image sizes, implementing SVG icons through sprites, and supporting Retina displays. |
| 8 | +3. Implemented user-friendly navigation and interactivity |
| 9 | +Created intuitive navigation: burger menu for mobile version, anchor links with smooth scrolling, hover effects, as well as sliders (Swiper.js) and accordion functionality (Accordeon.js). |
| 10 | +4. Integrated feedback form |
| 11 | +Added a form with email validation using regular expressions. |
| 12 | +Implemented a POST request to the server for sending collaboration requests. |
| 13 | +Provided user notifications about successful submission or errors. |
| 14 | +5. Added modal window for notifications |
| 15 | +Implemented a modal window to confirm request submissions. |
| 16 | +The window can be closed by clicking a button, the backdrop, or pressing the Escape key. |
| 17 | +6. Display of reviews from backend |
| 18 | +Implemented review retrieval through API. |
| 19 | +Thanks to these solutions, the website is fast, user-friendly, interactive, and effective for self-presentation to potential employers and clients. |
| 20 | +</br> |
| 21 | +Conclusions: |
| 22 | +The project was created considering modern web development trends and optimized for user convenience. With its responsive design, interactive elements, and high performance, the website will serve as an effective tool for showcasing student achievements. |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +## Technologies used: |
| 27 | + |
| 28 | +Front-end: `HTML` `CSS` `JavaScript` </br> |
| 29 | +Libraries: `Axios` `Accordeon` `iziToast` `Swiper` </br> |
| 30 | +Utilities: `VSCode` `Figma` `Git/GitHub` `Vite` |
| 31 | + |
| 32 | +## Team: |
| 33 | + |
| 34 | +1. **[Nicolas Vladymyrov](https://github.com/Nikolas-vl)** Team lead; |
| 35 | + Benefits |
| 36 | +2. **[Tetiana Petrenko](https://github.com/Kylbaba)** Scrum Master; Covers |
| 37 | +3. **[Denys Hudymiak](https://github.com/dendjoya25)** Projects and Reviews |
| 38 | +4. **[Anastasiia Parfeniuk](https://github.com/nastishaaa)** Work Together |
| 39 | +5. **[Yuriy Kushnir](https://github.com/wptraffadmin)** FAQ and About me |
| 40 | +6. **[Yevsielev Yurii](https://github.com/YevsieievYurii)** Header |
| 41 | +7. **[Diana Popal'](https://github.com/Diana-Po)** Hero |
2 | 42 |
|
3 | | -Цей проект було створено за допомогою Vite. Для знайомства та налаштування |
4 | | -додаткових можливостей [звернись до документації](https://vitejs.dev/). |
5 | | - |
6 | | -## Створення репозиторію за шаблоном |
7 | | - |
8 | | -Використовуй цей репозиторій організації GoIT як шаблон для створення |
9 | | -репозиторію свого проекту. Для цього натисни на кнопку `«Use this template»` і |
10 | | -обери опцію `«Create a new repository»`, як показано на зображенні. |
11 | | - |
12 | | - |
13 | | - |
14 | | -На наступному етапі відкриється сторінка створення нового репозиторію. Заповни |
15 | | -поле його імені, переконайся, що репозиторій публічний, після чого натисни |
16 | | -кнопку `«Create repository from template»`. |
17 | | - |
18 | | - |
19 | | - |
20 | | -Після того, як репозиторій буде створено, необхідно перейти в налаштування |
21 | | -створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано |
22 | | -на зображенні. |
23 | | - |
24 | | - |
25 | | - |
26 | | -Проскроливши сторінку до самого кінця, в секції `«Workflow permissions»` обери |
27 | | -опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це необхідно |
28 | | -для автоматизації процесу деплою проекту. |
29 | | - |
30 | | - |
31 | | - |
32 | | -Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок |
33 | | -репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим |
34 | | -репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй |
35 | | -їх на GitHub. |
36 | | - |
37 | | -## Підготовка до роботи |
38 | | - |
39 | | -1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js. |
40 | | - [Скачай та встанови](https://nodejs.org/en/) її якщо необхідно. |
41 | | -2. Встанови базові залежності проекту в терміналі командою `npm install`. |
42 | | -3. Запусти режим розробки, виконавши в терміналі команду `npm run dev`. |
43 | | -4. Перейдіть у браузері за адресою |
44 | | - [http://localhost:5173](http://localhost:5173). Ця сторінка буде автоматично |
45 | | - перезавантажуватись після збереження змін у файли проекту. |
46 | | - |
47 | | -## Файли і папки |
48 | | - |
49 | | -- Файли розмітки компонентів сторінки повинні лежати в папці `src/partials` та |
50 | | - імпортуватись до файлу `index.html`. Наприклад, файл з розміткою хедера |
51 | | - `header.html` створюємо у папці `partials` та імпортуємо в `index.html`. |
52 | | -- Файли стилів повинні лежати в папці `src/css` та імпортуватись до HTML-файлів |
53 | | - сторінок. Наприклад, для `index.html` файл стилів називається `index.css`. |
54 | | -- Зображення додавай до папки `src/img`. Збирач оптимізує їх, але тільки при |
55 | | - деплої продакшн версії проекту. Все це відбувається у хмарі, щоб не |
56 | | - навантажувати твій комп'ютер, тому що на слабких компʼютерах це може зайняти |
57 | | - багато часу. |
58 | | - |
59 | | -## Деплой |
60 | | - |
61 | | -Продакшн версія проекту буде автоматично збиратися та деплоїтись на GitHub |
62 | | -Pages, у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад, |
63 | | -після прямого пуша або прийнятого пул-реквесту. Для цього необхідно у файлі |
64 | | -`package.json` змінити значення прапора `--base=/<REPO>/`, для команди `build`, |
65 | | -замінивши `<REPO>` на назву свого репозиторію, та відправити зміни на GitHub. |
66 | | - |
67 | | -```json |
68 | | -"build": "vite build --base=/<REPO>/", |
69 | | -``` |
70 | | - |
71 | | -Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) та |
72 | | -виставити роздачу продакшн версії файлів з папки `/root` гілки `gh-pages`, якщо |
73 | | -це не було зроблено автоматично. |
74 | | - |
75 | | - |
76 | | - |
77 | | -### Статус деплою |
78 | | - |
79 | | -Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора. |
80 | | - |
81 | | -- **Жовтий колір** - виконується збірка та деплой проекту. |
82 | | -- **Зелений колір** - деплой завершився успішно. |
83 | | -- **Червоний колір** - під час лінтингу, збірки чи деплою сталася помилка. |
84 | | - |
85 | | -Більш детальну інформацію про статус можна переглянути натиснувши на іконку, і в |
86 | | -вікні, що випадає, перейти за посиланням `Details`. |
87 | | - |
88 | | - |
89 | | - |
90 | | -### Жива сторінка |
91 | | - |
92 | | -Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за |
93 | | -адресою, вказаною на вкладці `Settings` > `Pages` в налаштуваннях репозиторію. |
94 | | -Наприклад, ось посилання на живу версію для цього репозиторію |
95 | | - |
96 | | -[https://goitacademy.github.io/vanilla-app-template/](https://goitacademy.github.io/vanilla-app-template/). |
97 | | - |
98 | | -Якщо відкриється порожня сторінка, переконайся, що у вкладці `Console` немає |
99 | | -помилок пов'язаних з неправильними шляхами до CSS та JS файлів проекту |
100 | | -(**404**). Швидше за все у тебе неправильне значення прапора `--base` для |
101 | | -команди `build` у файлі `package.json`. |
102 | | - |
103 | | -## Як це працює |
104 | | - |
105 | | - |
106 | | - |
107 | | -1. Після кожного пуша у гілку `main` GitHub-репозиторію, запускається |
108 | | - спеціальний скрипт (GitHub Action) із файлу `.github/workflows/deploy.yml`. |
109 | | -2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується та |
110 | | - проходить лінтинг та збірку перед деплоєм. |
111 | | -3. Якщо всі кроки пройшли успішно, зібрана продакшн версія файлів проекту |
112 | | - відправляється у гілку `gh-pages`. В іншому випадку, у лозі виконання скрипта |
113 | | - буде вказано в чому проблема. |
0 commit comments