Все проекты

Создавать, тестировать, улучшать

Веб-сайт компании GM Microcementos

Веб-сайт компании GM Microcementos

Полная разработка корпоративной веб-платформы для GM Microcementos, компании, специализирующейся на применении микроцемента. Профессиональный сайт с 15 оптимизированными страницами, ориентированными на производительность, SEO и исключительное удобство для пользователей. Включает в себя калькулятор бюджета, галерею проектов с возможностью фильтрации, расширенные формы и минималистичную систему дизайна. Модульная архитектура с 100+ многократно используемыми компонентами и оптимизированная для Core Web Vitals.

Сайт Академии CEJ

Сайт Академии CEJ

Веб-платформа для Academia CEJ, академии, специализирующейся на экзаменах на государственную службу в Малаге. Полностью отзывчивый сайт с блогом, виртуальным кампусом, тестом знаний, системой регистрации и управления курсами. Разработан с использованием Next.js 14, React 18, Tailwind CSS, Framer Motion и Docker.

Веб-сайт DIMAP

Веб-сайт DIMAP

Разработка корпоративного сайта Dimap - современного приложения на базе Next.js 15, React 19, Redux Toolkit и TailwindCSS, ориентированного на обеспечение оптимальной производительности и плавности работы. Проект включает в себя страницы услуг, блог, корпоративные разделы и формы отслеживания лидов. Все они построены на модульной архитектуре и оптимизированы для загрузки с помощью SSG, Lazy Loading и ClientLoader.

DevCrate

DevCrate

DevCrate - это платформа для поиска ресурсов для разработки (инструментов, библиотек, активов, документации и проблем). Разве вам никогда не требовался ресурс для вашего проекта или просто вдохновение, а вы в итоге просматривали бесчисленное множество страниц? Именно поэтому я создал эту платформу: чтобы упорядочить и не потерять все ресурсы, которые я обнаружил за годы работы, и иметь возможность быстро находить их, не полагаясь на разрозненные закладки. Она включает в себя расширенный поиск, фильтры по тегам и административную область для управления всем содержимым. Кроме того, здесь можно оставлять предложения от сообщества, чтобы продолжать собирать полезные инструменты. Он построен на Next.js, React, TypeScript и MongoDB, имеет безопасную аутентификацию и современный интерфейс на основе shadcn/ui.

Cmd+kit

Cmd+kit

Cmd+kit - это многократно используемая система палитры команд для веб-продуктов, призванная обеспечить быстрый поиск, навигацию по клавиатуре и выполнение действий с помощью последовательного и доступного интерфейса. Она разработана для легкой интеграции в различные стеки с официальными адаптерами для React, Vue, Preact и Astro, сохраняя при этом единую базу поведения и визуальной кастомизации. В комплект входит полная документация и интерактивная игровая площадка для настройки тем, структуры команд и экспорта готового к использованию кода. Может быть установлен с помощью npm, pnpm, yarn или bun в зависимости от особенностей каждого проекта.

Contract-kit - генератор контрактов для API

Contract-kit - генератор контрактов для API

Zod SVG Icon

CLI-инструментарий + библиотека, опубликованная в npm, которая позволяет определять контракты API в одном типизированном JSON-файле и автоматически генерировать общие типы TypeScript, клиент Angular, проверку во время выполнения с помощью Zod и контроллеры для NestJS. Устраняет рассинхронизацию между фронтендом и бэкендом, позволяет избежать дублирования кода и обнаружить нежелательные изменения с помощью снимков контрактов. Включает генерацию макетов для тестирования и модульную архитектуру, основанную на множестве многократно используемых пакетов.

Клон сайта AirPods Pro 2

Клон сайта AirPods Pro 2

Реконструкция официального hero-раздела Apple для AirPods Pro 2, с упором на освоение продвинутых анимаций с использованием GSAP и ScrollTrigger. Я реализовал последовательность из 65 изображений, рендеренных в Canvas и синхронизированных со скроллом, а также плавные переходы, динамичную навигацию и визуальные эффекты, вдохновлённые оригинальным опытом Apple. Проект, направленный на совершенствование высокопроизводительной веб-анимации.

PWA для распознавания объектов на Angular

PWA для распознавания объектов на Angular

tensorflow
ionicons-v5_logos

Разработка PWA для распознавания объектов в реальном времени с использованием Angular 19 и TensorFlow.js. Включает настройку PWA, интеграцию TensorFlow.js для распознавания объектов, захват и обработку изображений в реальном времени, оптимизацию с помощью Web Workers и Lazy Loading, офлайн-хранение через IndexedDB и развертывание на мобильных устройствах.

Конфигуратор Стола 3D

Конфигуратор Стола 3D

Учебный проект для изучения Three.js и TresJS с 3D-моделями. Интерактивное веб-приложение, позволяющее настраивать регулируемый стол (standing desk) с различными вариантами отделки и цветов. Включает 3D-вид с орбитальными элементами управления, 3D-модели ноутбука, наушников и декоративного растения. Настраивайте отделку стола и выбирайте цвета аксессуаров с предпросмотром в режиме реального времени. Разработан на Vue 3, TresJS (интеграция Three.js с Vue), TypeScript, Vite и UnoCSS.

Клон Лэндинг Пейдж GTA VI

Клон Лэндинг Пейдж GTA VI

Клон лэндинг пейдж Grand Theft Auto VI, созданный исключительно для образовательных целей и демонстрации навыков веб-разработки. Современный веб-сайт с адаптивным дизайном, оптимизированным для всех разрешений рабочего стола (1024px - 4K). Включает выпадающее меню с расширенными анимациями на GSAP, динамическую систему представления персонажей и локаций с изображениями, интерактивный раздел трейлеров с превью и раздел загрузок с анимированными карточками. Некоммерческий образовательный проект, разработанный на Astro, Tailwind CSS и JavaScript.

Strapi Игровой Магазин

Strapi Игровой Магазин

Небольшой проект для практики работы со Strapi как CMS и бэкендом. Он разработан на React/Next.js, TypeScript и Tailwind CSS. Хотя в демо используются моковые данные, в коде реализована полноценная интеграция со Strapi для получения и управления контентом.

Чат в реальном времени

Чат в реальном времени

Проект чата в реальном времени с backend-архитектурой, ориентированной на продакшен. Использует Node.js + Express и Socket.IO для двусторонней коммуникации, с двумя режимами хранения: в памяти (mock) и опциональная персистентность через Supabase. Фронтенд (Vite) может работать в режиме demo или live, а решение построено послойно (configuration, HTTP, realtime, domain и storage) для лучшей поддержки, тестируемости и масштабируемости.

Super Mario Bros 85'

Super Mario Bros 85'

PhaserIcon

HTML5-реализация классической игры Super Mario Bros, созданная с помощью Phaser 3.55.2 для образовательных целей на основе работы Декапапи. Проект воссоздает опыт 2D-платформера с модульной архитектурой для анимации, блоков, структур, объектов, элементов управления игроком и HUD, а также дополнительных возможностей, таких как захват скриншотов с помощью html2canvas. Он поддерживает веб-развертывание и локальную разработку с помощью Vite, что упрощает тестирование и использование открытого исходного кода в рамках лицензии MIT.

Paint Windows 95'

Paint Windows 95'

Paint Win 95' воссоздает классический опыт Microsoft Paint с ретро-интерфейсом в стиле Windows 95 и современным поведением в вебе. В приложении есть инструменты рисования и выделения, палитра основных/дополнительных цветов, история отмены/повтора, рабочие уровни масштабирования, открытие локальных изображений, экспорт в PNG и поддержка ввода мышью, клавиатурой и сенсором/стилусом через Pointer Events.

Демо переходов в книжном магазине

Демо переходов в книжном магазине

Bookshop View Transitions — это демо на React + Vite, сосредоточенное на реализации плавных переходов между страницами с помощью API View Transitions, включая общие анимации между элементами (заголовок, обложка и навигация), чтобы добиться визуально непрерывной навигации.

Клон TikTok

Клон TikTok

Клон TikTok, созданный на React, TypeScript и Vite, спроектированный с mobile-first подходом. Включает вертикальную ленту с автопроигрыванием, навигацию Following/For You, интерактивные действия (лайк, комментарии, сохранения, поделиться), страницы Friends/Inbox/Profile и upload с публикацией в ленте. Работает на сервисной архитектуре (по умолчанию mock с персистентностью в localStorage) и оставляет Supabase готовым для реального backend-подключения.

Игра Atari Breakout

Игра Atari Breakout

Open-source проект по мотивам классического Breakout, реализованный на Astro с игровой логикой на TypeScript и Canvas. Включает выбор сложности прямо в canvas, настраиваемую и постепенно растущую скорость мяча, блоки с переменной прочностью и визуальными состояниями повреждения, управление с клавиатуры и перезапуск после Game Over.

Возврат наличных Agrooe

Возврат наличных Agrooe

В этом проекте я вместе с командой разрабатывал с нуля платформу для продажи качественных товаров и местной коммерции. Мы работали с нуля, от концепции до практики, создавая как back-end, так и front-end. Помимо различных технологий, мы внедрили такие интеграции, как jwt для контроля учетных записей пользователей и входа в систему, приборную панель для контроля всех данных... Функциональные возможности, такие как возможность входа в систему с помощью различных социальных сетей, создание учетной записи как пользователя для покупки товаров или как компании для их добавления, карты ближайших мест, где можно найти интересующий товар, и многое другое. По соображениям конфиденциальности код не показывается.

Узнай обо мне побольше

Привет! Я — Fran Full Stack | Разработчик программного обеспечения

У меня есть опыт работы с широким спектром веб-технологий. Тем не менее, моя специализация и основная сфера деятельности — это фронтенд-разработка.

С самого раннего возраста я интересовался компьютерами и мобильными устройствами, изучая их устройство как на программном, так и на аппаратном уровне. За эти годы я многому научился, самостоятельно разбираясь в технике и решая проблемы, и этот опыт только укрепил мою любознательность и технические навыки.