Каталог работWork journal
Написать в Message me on Telegram

Сайты · Telegram-боты · оплата · дизайнWebsites · Telegram bots · payments · design

МарчеллаMarcella

каталог работwork journal

.solutions.solutionsPollyPollyTHE OM SHOWTHE OM SHOWChromisChromisHamiltonHamiltonЧто там?Что там?Бот-магазинShop botAcunetixAcunetix

13 работ13 worksнажмите на проект — откроется его страницаtap a project and its page opens

СодержаниеContents

Здесь собрано то, чем я занимался последнее время: работы для заказчиков, помощь знакомым и мои собственные эксперименты — от первых проектов до последних. Журнал будет пополняться. Нажмите на картинку — откроется сайт.This is what I have been doing lately: work for clients, favours for people I know and my own experiments — from the first projects to the latest. The journal will keep growing. Tap a picture and the site opens.

  1. .solutions.solutions3
  2. PollyPolly4
  3. THE OM SHOWTHE OM SHOW5
  4. ChromisChromis6
  5. HamiltonHamilton7
  6. Что там?Что там?8
  7. Бот-магазинShop bot9
  8. AcunetixAcunetix10
  9. 15 мест за одним столом15 seats at one table11
  10. Shuba DaddyShuba Daddy12
  11. Модный дом: найди паруFashion house: find the pair13
  12. Коллаж «Dilemma»“Dilemma” collage14
  13. Ягодная деревушкаЯгодная деревушкав работеin progress
  14. Сложное — простыми словамиComplex things in plain words15
  15. Как я работаюHow I work16
  16. Книжная полкаBookshelf19
  17. Как заказатьHow to order20
2

mrcll-001 · .solutions.solutions

Сайт бренда одеждыClothing brand website · Vue 3 · FastAPI · Redis · InSales API · CloudPayments · СДЭКVue 3 · FastAPI · Redis · InSales API · CloudPayments · CDEK

Что сделалWhat I did
Новый сайт — отдельное приложение поверх InSales.A new site for the brand — a standalone app on top of InSales. С Г.К. придумали сайт, я его собрал. В каталоге модель занимает две ячейки, вещь — одну. Размерная сетка, тема и язык меняются из панели управления. Подбор размера, вход по коду из письма, оплата и доставка. Все на модулях, InSales — бэк-офис.G.K. and I came up with the site, I built it. In the catalogue a model takes two cells, an item takes one. The size chart, the theme and the language are switched from the control panel. Size matching, sign-in by a code from an e-mail, payment and delivery. Everything runs on modules; InSales stays the back office.
Демо — пароль по запросуDemo — password on request
3

mrcll-002 · PollyPolly

Сайт архитектора-дизайнераArchitect's website · Vue 3 · Vite · Tailwind CSS · SVGVue 3 · Vite · Tailwind CSS · SVG

Что сделалWhat I did
Портфолио архитектора: интерьеры и озеленение на одном сайте.An architect's portfolio: interiors and greening on one site. Структура, дизайн и сборка. Главная разъезжается на два направления, у проекта — чертеж, фото и этапы работы. Чертежи нарисованы кодом, есть темная тема и английская версия.Structure, design and build. The home page splits into two directions; a project page has a drawing, photos and the stages of the work. The drawings are made in code, there is a dark theme and an English version.
polly.marcella.solutions
4

mrcll-003 · THE OM SHOWTHE OM SHOW

Сайт музыкального проектаMusic project website · Tilda · Zero-блоки · CSS · FigmaTilda · Zero blocks · CSS · Figma

Что сделалWhat I did
Дом в разрезе: каждая комната — раздел сайта.A house in cross-section: every room is a section of the site. Договорились о разделах и нашли образ дома. Комнаты обставлены вещами из реального мира ребят: гитары, одежда, фотографии, объекты из обложек, Xbox. Сайт собрал на Tilda, после запуска правлю по комментариям команды.We agreed on the sections and found the image of a house. The rooms are furnished with things from the band’s real world: guitars, clothes, photographs, objects from the covers, an Xbox. I built the site on Tilda and keep editing it on the team’s comments after launch.
theom.showtheom.show
5
Chromis: поиск по домену с милыми кошками рядом

mrcll-004 · ChromisChromis

Сервис проверки доменаDomain check service · Vue 3 · FastAPI · Redis · DNS-over-HTTPSVue 3 · FastAPI · Redis · DNS-over-HTTPS

Что сделалWhat I did
WHOIS, Geo-IP и ответ на вопрос «можно ли доверять сайту» — за один запрос.WHOIS, Geo-IP and an answer to “can I trust this site” in a single request. Фронтенд и API: возраст домена, регистратор, владелец IP и точка на карте. Блок доверия проверяет черные списки, веб-архив, сертификат и защиту писем и пишет итог одной фразой.Front end and API: domain age, registrar, IP owner and a point on the map. The trust block checks blocklists, the web archive, the certificate and e-mail protection, and sums it up in one sentence.
chromis.marcella.solutionschromis.marcella.solutions
6

mrcll-005 · HamiltonHamilton

Демо-магазин цветовDemo flower shop · Vue 3 · Pinia · Node.js · Express · SQLite · ЮKassaVue 3 · Pinia · Node.js · Express · SQLite · YooKassa

Что сделалWhat I did
Магазин доставки цветов, который можно пройти до оплаты.A flower delivery shop you can walk through all the way to payment. Девять букетов в трех размерах, доставка по зонам и слотам, промокоды, оплата ЮKassa в тестовом режиме и страница, где видно, как заказ едет к получателю. Оплату сервер перепроверяет через API.Nine bouquets in three sizes, delivery by zone and time slot, promo codes, YooKassa payments in test mode and a page that shows the order on its way. The server re-checks every payment through the API.
ПопробоватьTry it
Промокод HELLO10, карта 5555 5555 5555 4477Promo code HELLO10, card 5555 5555 5555 4477
hamilton.marcella.solutionshamilton.marcella.solutions
7

Пример утренней сводки: человек следит за ДринкитA morning digest: someone following Drinkit

mrcll-006 · Что там?Что там?

Telegram-ботTelegram bot · Python · FastAPI · aiogram 3 · SQLite · DeepSeekPython · FastAPI · aiogram 3 · SQLite · DeepSeek

Что сделалWhat I did
Каждое утро — что люди ищут в Google о вашей сфере или теме и почему.Every morning: what people are searching Google for in your field, and why. Человек в паре фраз описывает свою сферу или тему — нейросеть составляет профиль. Бот следит за всплесками поисковых запросов и по свежим новостям объясняет, почему люди это ищут. Срочные всплески приходят сразу, но не чаще двух раз в день и не ночью.You describe your field or topic in a couple of lines and a neural network builds a profile. The bot watches for spikes in search queries and uses fresh news to explain why people are looking. Urgent spikes arrive at once, but no more than twice a day and never at night.
@marcella_trends_bot@marcella_trends_bot
8

Корзина, счет и чек — прямо в чатеCart, invoice and receipt — right in the chat

mrcll-007 · Бот-магазинShop bot

Магазин в TelegramShop in Telegram · Python · aiogram 3 · Telegram Payments · SQLitePython · aiogram 3 · Telegram Payments · SQLite

Что сделалWhat I did
Каталог, корзина и оплата — не выходя из чата.Catalogue, cart and payment without leaving the chat. Каталог, корзина, счет через Telegram Payments, заказ в базу и уведомление владельцу. Оплата тестовая: сценарий проходится картой 4242 4242 4242 4242.Catalogue, cart, an invoice through Telegram Payments, the order into the database and a notice to the owner. Payments are in test mode: the card 4242 4242 4242 4242 walks the whole flow.
@marcella_shop_bot@marcella_shop_bot
9

mrcll-008 · AcunetixAcunetix

ПромостраницаLanding page · Vue 3 · Tailwind CSS · anime.jsVue 3 · Tailwind CSS · anime.js

Что сделалWhat I did
Лендинг сканера веб-уязвимостей.A landing page for a web vulnerability scanner. Сверстал промостраницу: анимированные блоки, сравнение «до и после» ползунком, этапы проверки, карта в контактах. Отдельные версии для компьютера и телефона.I built the promo page: animated blocks, a before-and-after slider, the stages of a scan and a map in the contacts. Separate versions for desktop and phone.
acunetix.marcella.solutionsacunetix.marcella.solutions
10

mrcll-009 · 15 мест за одним столом15 seats at one table

Схема рассадкиA seating chart · FigmaFigma

Что сделалWhat I did
Тестовое задание моей подруги: рассадить 8 клиентов и 7 сотрудников так, чтобы сделка прошла.A test task my friend was given: seat 8 clients and 7 colleagues so that the deal goes through. Логика — ее, а я превратил таблицу из Excel в рассадку за столом: цвет таблички — отрасль клиента, под каждым — роль и связи.The logic is hers; I turned her Excel table into a seating chart: the colour of a name card is the client’s industry, and under every person are their role and their links.
11

mrcll-010 · Shuba DaddyShuba Daddy

Карусель из 10 слайдовA ten-slide carousel · Figma, PhotoshopFigma, Photoshop

Что сделалWhat I did
Результаты бегового клуба одним постом: каждый слайд — про человека.A running club’s results in one post: every slide is about a person. Вырезал каждого бегуна из фото с забега и обвел фиолетовым контуром клуба. За спиной — маршрут забега, нарисованный по карте трассы, рядом — дистанция, время и темп. Фон — то же фото, смазанное движением и переведенное в растр: точки, как в газетной печати.I cut every runner out of the race photos and outlined them in the club’s purple. Behind each one is the route of their race, drawn from the course map, with distance, time and pace beside it. The background is the same photo, smeared with motion and turned into a raster of dots, like newspaper print.
12

Модный дом: найди паруFashion house: find the pair

Нарисовал карточки в Figma, а потом превратил их в игру: найдите пару — модный дом и факт из его истории.I drew the cards in Figma and then turned them into a game: find the pair — a fashion house and a fact from its history.

Модный домFashion houseШанельChanelПарижParisПодсказкаHint19261926Маленькое черное платьеThe little black dress
Что сделалWhat I did
Нарисовал карточки в Figma, а потом превратил их в игру: найдите пару — модный дом и факт из его истории.I drew the cards in Figma and then turned them into a game: find the pair — a fashion house and a fact from its history. Рубашки нарисованы программой: слои камня изогнуты шумом, у каждой своя прожилка. Карточка переворачивается в 3D средствами CSS, названия набраны шрифтом, без логотипов.The card backs are drawn by code: layers of stone bent by noise, each with its own vein. A card flips in 3D with CSS; the names are set in type, without logos.
13

mrcll-012 · Коллаж «Dilemma»“Dilemma” collage

КоллажCollage · PhotoshopPhotoshop

14

Сложное — простыми словамиComplex things in plain words

Сложный процесс можно разложить на простые части и показать каждую — тогда его поймет любой посетитель. Два примера того, как я это делаю:A complex process can be broken into simple parts and each part shown — then any visitor will follow it. Two examples of how I do that:

Как устроена АЭСHow a nuclear plant worksДевять шагов: от урана в реакторе до тока в сети. Камера облетает станцию и показывает каждую часть.Nine steps: from uranium in the reactor to current in the grid. The camera flies around the plant and shows every part.Смотреть схемуSee the scheme Как проходит оплата картойHow a card payment worksЧто происходит между кнопкой «Оплатить» и словом «Оплачено»: девять шагов через магазин, платежный сервис и банк.What happens between the Pay button and the word Paid: nine steps through the shop, the payment service and the bank.Смотреть схемуSee the scheme

Что непонятно в вашем бизнесе? Пришлите процесс, который клиентам трудно понять, — разложу его по шагам.What is hard to explain in your business? Send me a process your clients struggle with and I will lay it out step by step.

15

Как я работаюHow I work

Сначала разбираюсь, что должен понять и сделать ваш посетитель, — потом решаем, что будет на сайте, где и почему.First I work out what your visitor has to understand and do — then we decide what goes on the site, where and why.

  1. 01РазговорConversationОбсуждаем задачу. Из разговора вырастают пункты ТЗ и список подключений по API, которые могут понадобиться.We talk the task through. Out of that conversation come the points of the spec and the list of API connections we may need. пункты ТЗ и список APIthe points of the spec and the API list
  2. 02СтруктураStructureКарта сайта: какие страницы, что на каждой и зачем. Согласуем до дизайна.A site map: which pages there are, what is on each one and why. Agreed before design. карта сайтаthe site map
  3. 03ДизайнDesignМакеты ключевых страниц для понимания и оценки.Mockups of the key pages, enough to judge the look and to price the work. макеты ключевых страницmockups of the key pages
16

Дальше — то, что можно потрогатьFrom here on, things you can touch

  1. 04MVPMVPРабочая версия на тестовом адресе: можно кликать и показывать коллегам.A working version at a test address: you can click it and show it to colleagues. ссылка на тестовую версиюa link to the test version
  2. 05ПодключенияConnectionsУтверждаем все подключения — оплату, CRM, запись, ботов — и проверяем их на тестовых данных.We sign off every connection — payment, CRM, booking, bots — and test them on test data. подключения проверены на тестовых данныхconnections tested on test data
  3. 06ДоводкаPolishПодключаем Метрику + 2 раунда* правок. Ошибки и опечатки — бесплатно и бессрочно.We switch on Metrica + 2 rounds* of edits. Mistakes and typos — free, with no time limit. Метрика и 2 раунда правокMetrica and 2 rounds of edits
17

Tilda или код?Tilda or code?

Решаем по задаче. Три вопроса — и понятно, на чем делать.It depends on the task. Three questions and it is clear what to build on.

  • Тексты и цены меняете самиYou change the texts and prices yourselfTilda или код с админкойTilda, or code with an admin panel
  • Нужна своя логика или связка с сервисамиYou need your own logic or a link to other servicesкодcode
  • И то и другоеBoth of thoseTilda и сервис рядомTilda plus a service beside it

Если нужно и то и другое, сайт остается на Tilda, а сложная часть работает рядом отдельным сервисом.If you need both, the site stays on Tilda and the complicated part runs beside it as a separate service.

18

Книжная полкаBookshelf

Вещь делают не для рамы на стене, а для жизни: она должна работать.A thing is made not for a frame on the wall but for life: it has to work.

Мысль Николая Тарабукина из «От мольберта к машине», 1923 — пересказNikolai Tarabukin’s thought from From the Easel to the Machine, 1923 — paraphrased

  • Unix и LinuxUnix and Linux руководство системного администратора · Немет, Снайдер, Хейн, Уэйли, МакинSystem Administration Handbook · Nemeth, Snyder, Hein, Whaley, MackinХороший сайт держится на том, чего не видно: на сервере, который не падает.A good site rests on what you never see: a server that stays up.
  • MDN и learn.javascript.ruMDN and learn.javascript.ru JavaScript без фреймворковJavaScript without frameworksПо ним учил язык с нуля и сверяюсь до сих пор.I learned the language from them from scratch and still check against them.
  • Дональд НорманDonald Norman «Дизайн привычных вещей»The Design of Everyday ThingsПонятной вещи инструкция не нужна: если посетитель ищет подсказку, ошибся не он, а сайт.A clear thing needs no instructions: if a visitor is hunting for a hint, it is the site that got it wrong, not them.
  • Ян ЧихольдJan Tschichold «Новая типографика», 1928The New Typography, 1928Порядок красивее украшения: хорошая сетка сама расставляет акценты.Order is lovelier than ornament: a good grid sets the accents by itself.
  • Иоханнес ИттенJohannes Itten «Искусство цвета»The Art of ColorОдин точный цвет говорит больше, чем десять случайных.One exact color says more than ten random ones.
19

Как заказатьHow to order

1Написать в TelegramMessage me on Telegram

Опишите задачу в двух словах — уточняющие вопросы задам сам.Describe the task in a line or two — I will ask the follow-up questions myself.

Наведите камеру телефона — откроется чатPoint your phone camera at it and the chat opens@soratokensили на почтуor by e-mail vx@marcellapng.com
2Оставить заявку здесьLeave a request here

Сообщение придет мне в Telegram.The message comes to me in Telegram.

Отправляя, вы соглашаетесь с политикой конфиденциальности.By sending it you agree to the privacy policy.

Дальше — план, срок и цена. Работаю по договору.Next come a plan, a deadline and a price. I work under a contract.

Резюме разработчикаDeveloper CV · PDFРезюме аналитикаAnalyst CV · PDF

20