Mongoose Signs & Advertising

Про проєкт

Mongoose Signs & Advertising — це повноцінний бізнес-сайт, створений для Сергія Тітова та його компанії у сфері вивісок і реклами. Метою проєкту було перетворити понад 20 років практичного досвіду в галузі та великий архів виконаних робіт на зрозумілу сучасну онлайн-присутність, яка пояснює послуги компанії, демонструє реальні проєкти та веде потенційного клієнта до запиту на розрахунок вартості. Сайт представляє бізнес через окремі розділи Home, About, Services, Portfolio, Reviews, Blog і Contact. Структура послуг охоплює встановлення вивісок, монтаж білбордів, LED-вивіски, ремонт і технічне обслуговування, брендування автомобілів, допомогу з дозволами та інші рекламні рішення. Розділ About розповідає про професійний шлях Сергія — від власного бізнесу в Україні та міжнародного досвіду до поточної роботи у штаті Вашингтон. На сайті також описано територію обслуговування та процес роботи від консультації до встановлення. Важливою частиною проєкту є візуальне портфоліо. Виконані роботи організовані за окремими категоріями: світлова реклама, фасади, стели, білборди, інтер'єри, маркізи, металеві конструкції, брендування автомобілів, банери, тонування, дорожні знаки, алюмінієва реклама та фарбувальні роботи. Я побудував портфоліо так, щоб сторінки категорій завантажували зображення з організованих папок проєкту та поступово показували додаткові роботи, а не виводили весь великий архів одночасно. Це робить портфоліо зручнішим для перегляду та подальшого обслуговування. Frontend було розроблено на Next.js 16, React 19 і TypeScript з використанням App Router та власного глобального CSS. Я створив повторно використовувані компоненти, адаптивні desktop- і mobile-layouts, мобільне burger-меню, редаговані SVG-елементи інтерфейсу та оптимізовані WebP-зображення. Дизайн адаптовано до різних розмірів екрана так, щоб стиль компанії, основні CTA та контактна інформація залишалися чіткими й доступними. Також я розробив сценарії взаємодії для звернення клієнтів. Посилання з послуг можуть передавати вибрану послугу безпосередньо у форму запиту, натискання на телефон дає підтвердження копіювання, а робота з email адаптована окремо для desktop і mobile. Форми контакту та відгуків підготовлені з валідацією і API-адаптерами для майбутнього backend, включно з перевіркою origin, honeypot-захистом, обмеженнями запитів і файлів та логікою rate limiting. Застосунок також містить security headers і Content Security Policy. Постійне збереження даних форм навмисно залишено для наступного етапу підключення backend, тому воно не подається як уже завершена функція бази даних. До проєкту також входять практичні production-елементи: власна сторінка 404, sitemap, robots-конфігурація, оптимізація зображень і підготовка до deployment. Результатом став адаптивний бізнес-сайт, який поєднує презентацію компанії, інформацію про послуги, велике категоризоване портфоліо, сценарії відгуків і запитів на розрахунок та технічну основу для подальшого розширення backend у міру розвитку бізнесу.

Моя роль

Я виконав повний дизайн і frontend-розробку сайту: інформаційну архітектуру, адаптивний UI, повторно використовувані компоненти Next.js, структуру послуг і портфоліо, оптимізацію зображень, дизайн взаємодії, валідацію форм і API-ready логіку безпеки, технічні SEO-сторінки, тестування та deployment на Vercel.

Що я зробив

• ✓Спланував інформаційну архітектуру та бізнес-орієнтований шлях користувача
• ✓Розробив сайт на Next.js 16, React 19 і TypeScript з використанням App Router
• ✓Створив адаптивні desktop- і mobile-layouts із власним глобальним CSS та burger-навігацією
• ✓Розробив сторінки Home, About, Services, Portfolio, Reviews, Blog, Contact, категорій, 404, sitemap і robots
• ✓Побудував портфоліо на основі папок із категоріями та поступовим завантаженням зображень для великого архіву робіт
• ✓Оптимізував матеріали портфоліо у WebP та створив повторно використовувані й редаговані SVG-елементи інтерфейсу
• ✓Реалізував передачу вибраної послуги у контактну форму, підтвердження копіювання телефону та окрему поведінку email для desktop і mobile
• ✓Підготував форми контакту та відгуків із валідацією, перевіркою origin, honeypot-захистом, лімітами запитів, обмеженнями файлів і логікою rate limiting
• ✓Додав security headers і Content Security Policy та підготував API-адаптери для подальшого backend-зберігання
• ✓Протестував проєкт і розгорнув production-ready frontend на Vercel