[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-en-tailwindcss":3,"technology-projects-en-tailwindcss":30,"mdc-pz2gq8-key":142},{"id":4,"title":5,"category":6,"content":7,"description":8,"extension":9,"faq":10,"icon":11,"links":12,"meta":21,"projects":22,"since":26,"stem":27,"updated":28,"__hash__":29},"technologies_en\u002Fen\u002Ftechnologies\u002Ftailwindcss.yml","Tailwind CSS","frontend","Tailwind CSS is a CSS framework built around utility classes. I use it for application interfaces and public websites, including VetCard, VetSpace, DigiSpace and this portfolio.\n\n## Styling in practice\n\nIn VetCard, shared components provide the page structure while clinic-specific colors give each page its identity. In this portfolio, Tailwind CSS v4 works with Nuxt UI, and theme values are defined in CSS. DigiSpace also uses Tailwind in its administration interface.\n\n## Keeping the interface consistent\n\n- **Responsive layouts** — adapt navigation, forms and cards to different screen widths.\n- **Design tokens** — share colors and spacing across components.\n- **Reusable components** — extract repeated patterns when they have a clear common purpose.\n\n## What utility classes do not guarantee\n\nKeeping classes near the markup makes styling easier to follow, but shared components and global theme changes can still affect many pages. Generated CSS size depends on detected classes and custom styles. I review mobile layouts, keyboard focus and color contrast alongside the visual design rather than assuming the framework handles them automatically.\n","Tailwind CSS for responsive Vue and Nuxt interfaces: reusable components, clinic branding and styling across my web projects.","yml",null,"i-simple-icons-tailwindcss",[13,18],{"label":14,"to":15,"color":16,"icon":17},"tailwindcss.com","https:\u002F\u002Ftailwindcss.com","neutral","i-heroicons-arrow-top-right-on-square",{"label":19,"to":20,"color":16,"icon":17},"Technical reference","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdetecting-classes-in-source-files",{},[23,24,25],"digispace","vetcard","vetspace","2021","en\u002Ftechnologies\u002Ftailwindcss","2026-09-20","MR8bqzsvGi3OtMVzwx__dw6ulSQjtYx1Bjlf9dAlK6M",[31,77,106],{"id":32,"title":33,"content":34,"date":35,"description":36,"extension":9,"featured":37,"image":38,"links":39,"meta":48,"stack":49,"stem":72,"tags":73,"url":42,"__hash__":76},"projects_en\u002Fen\u002Fprojects\u002Fdigispace.yml","DigiSpace","The production website behind digispace.pro — the agency's public site, admin panel and custom CMS in a single Laravel app, now fully multilingual (EN\u002FUK\u002FPL) with a Filament admin panel running alongside the legacy Inertia + Vue one. The same code that runs the live site is available on GitHub.\n\n## Key Features\n\n- **Filament admin panel** - a parallel `\u002Fcontrol` panel (24 resources) with a TipTap rich editor, straight-to-MinIO image uploads and content-first navigation, rolled out resource-by-resource next to the existing Inertia admin\n- **Multilingual by design** - both content and structural UI strings (menus, footer, buttons) are translated per locale, not just page text, with hreflang-aware localized routing\n- **SEO built in** - JSON-LD structured data, localized sitemaps and proper 404 handling across every locale\n- **Monolith done right** - public site and two admin surfaces live in one Laravel app, no separate API to maintain\n- **Self-managed content** - pages, services and portfolio entries are edited in the CMS — no deploy needed for a text or translation change\n- **Quality gates** - PHPUnit tests and PHPStan static analysis run in CI\n- **Source available** - the exact code serving digispace.pro is public on GitHub\n\n## Tech Stack\n\n- **Backend**: Laravel\n- **Admin**: Filament 5 (`\u002Fcontrol`) + legacy Inertia.js + Vue admin\n- **Frontend**: Vue.js, Vite\n- **Localization**: EN\u002FUK\u002FPL content and structure translations\n- **Architecture**: Custom CMS\n","2022-10-05","The agency's multilingual (EN\u002FUK\u002FPL) production site with a custom CMS — a Filament admin panel with a rich content editor, content translations, JSON-LD and localized sitemaps built in, alongside the legacy Inertia + Vue admin",true,"\u002Fhero\u002Fdigispace.avif",[40,44],{"label":41,"to":42,"color":43,"icon":17},"Live Demo","https:\u002F\u002Fdigispace.pro","primary",{"label":45,"to":46,"color":16,"icon":47},"GitHub","https:\u002F\u002Fgithub.com\u002FYurij2015\u002FDigiSpace","i-simple-icons-github",{},[50,53,56,59,62,65,66,69],{"name":51,"icon":52},"Laravel","i-simple-icons-laravel",{"name":54,"icon":55},"Inertia","i-simple-icons-inertia",{"name":57,"icon":58},"Vue","i-simple-icons-vuedotjs",{"name":60,"icon":61},"Vite","i-simple-icons-vite",{"name":63,"icon":64},"MySQL","i-simple-icons-mysql",{"name":5,"icon":11},{"name":67,"icon":68},"Filament","i-simple-icons-filament",{"name":70,"icon":71},"CMS","i-heroicons-document-text","en\u002Fprojects\u002Fdigispace",[51,67,54,57,74,75],"i18n","SEO","dtWB-9st6fApdLs4qomkqmMQVq9PBqeHoPzR0Ywgu0I",{"id":78,"title":79,"content":80,"date":28,"description":81,"extension":9,"featured":37,"image":82,"links":83,"meta":89,"stack":90,"stem":101,"tags":102,"url":85,"__hash__":105},"projects_en\u002Fen\u002Fprojects\u002Fvetcard.yml","VetCard","The public-facing side of VetSpace — a multi-tenant catalog of veterinary clinics. A single Nuxt SSR deployment serves every clinic: SEO-first clinic card pages, online appointment booking proxied to each clinic's own tenant backend, per-clinic theming, and multi-branch support.\n\n## Key Features\n\n- **One deployment, many clinics** — a single app routes by clinic slug; booking and slot requests are proxied to each clinic's own tenant backend\n- **SEO-first catalog** — 590+ clinics with SSR pages, structured data and localized routes built to be indexed\n- **Per-clinic branding** — every clinic page is themed by its own brand color, with a \"Powered by VetSpace\" badge\n- **Real booking UX** — available slots show free-doctor counts with scarcity color-coding\n- **Fully localized** — Ukrainian, English and Polish with prefix-based routing\n\n## Tech Stack\n\n- **Frontend**: Nuxt 4 \u002F Vue 3, Tailwind CSS v4\n- **Backend**: Laravel catalog API + per-tenant appointment endpoints\n- **Rendering**: SSR for SEO pages, CSR for booking flows\n- **Testing**: Vitest unit tests + Cypress E2E against a real backend\n","Multi-tenant catalog of veterinary clinics: SEO clinic pages, online appointment booking, per-clinic branding — one Nuxt app serves every clinic","\u002Fhero\u002Fvetcard.avif",[84,86],{"label":41,"to":85,"color":43,"icon":17},"https:\u002F\u002Fvetcard.pro",{"label":87,"to":88,"color":16,"icon":47},"Overview","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-vetcard",{},[91,94,95,98,99],{"name":92,"icon":93},"Nuxt","i-simple-icons-nuxtdotjs",{"name":57,"icon":58},{"name":96,"icon":97},"TypeScript","i-simple-icons-typescript",{"name":5,"icon":11},{"name":100,"icon":52},"Laravel API","en\u002Fprojects\u002Fvetcard",[92,57,103,75,104],"Multi-tenant","SSR","E8OJJw44yMkVkIiATLwF2krirApHUeRnAApzpvv7c10",{"id":107,"title":108,"content":109,"date":110,"description":111,"extension":9,"featured":37,"image":112,"links":113,"meta":124,"stack":125,"stem":138,"tags":139,"url":115,"__hash__":141},"projects_en\u002Fen\u002Fprojects\u002Fvetspace.yml","VetSpace","A two-sided veterinary platform — an SEO clinic catalog and a subscription-based CRM with appointments and patient records. A public clinic catalog built for SEO-first customer acquisition, and a subscription-based CRM (appointments, visits, patient records) as separate Vue\u002FNuxt apps on top of a single Laravel API. Database-per-tenant architecture, Stripe subscriptions via Cashier, GraphQL + REST, and AI-assisted visit analysis through a dedicated Go microservice.\n\n## Key Features\n\n- **Two-sided funnel** - an SEO-first public catalog acquires clinics; the subscription CRM (appointments, patient records) retains them\n- **True tenant isolation** - database-per-tenant keeps every clinic's data separate and makes GDPR export\u002Fdelete a per-database operation\n- **Dual API surface** - GraphQL for complex catalog queries, REST for the CRM — one Laravel codebase\n- **Billing built-in** - Stripe subscriptions via Cashier: trials, plan changes, dunning\n- **AI where it helps** - visit analysis runs in a dedicated Go microservice, keeping the main API unburdened\n\n## Tech Stack\n\n- **Backend**: Laravel (API)\n- **Frontend**: Vue\u002FNuxt (separate apps)\n- **Architecture**: Database-per-tenant multi-tenancy\n- **Payments**: Stripe via Cashier\n- **API**: GraphQL + REST\n- **AI**: Go microservice for visit analysis\n","2026-09-19","A two-sided veterinary platform — an SEO clinic catalog and a subscription-based CRM with appointments and patient records","\u002Fhero\u002Fvetspace.avif",[114,116,119,122],{"label":41,"to":115,"color":43,"icon":17},"https:\u002F\u002Fvetspace.pro",{"label":117,"to":118,"color":16,"icon":47},"API Overview","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api",{"label":120,"to":121,"color":16,"icon":47},"Frontend Overview","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":123,"to":88,"color":16,"icon":47},"VetCard Overview",{},[126,127,128,129,132,135],{"name":51,"icon":52},{"name":57,"icon":58},{"name":92,"icon":93},{"name":130,"icon":131},"Stripe","i-simple-icons-stripe",{"name":133,"icon":134},"GraphQL","i-simple-icons-graphql",{"name":136,"icon":137},"AI","i-heroicons-sparkles","en\u002Fprojects\u002Fvetspace",[140,51,57,103,130,136],"SaaS","NDJ-cDU24m4uCf7HzSeTbCgbh0MGVh5P5HASDymy0wA",{"data":143,"body":144},{},{"type":145,"children":146},"root",[147,155,162,167,173,209,215],{"type":148,"tag":149,"props":150,"children":151},"element","p",{},[152],{"type":153,"value":154},"text","Tailwind CSS is a CSS framework built around utility classes. I use it for application interfaces and public websites, including VetCard, VetSpace, DigiSpace and this portfolio.",{"type":148,"tag":156,"props":157,"children":159},"h2",{"id":158},"styling-in-practice",[160],{"type":153,"value":161},"Styling in practice",{"type":148,"tag":149,"props":163,"children":164},{},[165],{"type":153,"value":166},"In VetCard, shared components provide the page structure while clinic-specific colors give each page its identity. In this portfolio, Tailwind CSS v4 works with Nuxt UI, and theme values are defined in CSS. DigiSpace also uses Tailwind in its administration interface.",{"type":148,"tag":156,"props":168,"children":170},{"id":169},"keeping-the-interface-consistent",[171],{"type":153,"value":172},"Keeping the interface consistent",{"type":148,"tag":174,"props":175,"children":176},"ul",{},[177,189,199],{"type":148,"tag":178,"props":179,"children":180},"li",{},[181,187],{"type":148,"tag":182,"props":183,"children":184},"strong",{},[185],{"type":153,"value":186},"Responsive layouts",{"type":153,"value":188}," — adapt navigation, forms and cards to different screen widths.",{"type":148,"tag":178,"props":190,"children":191},{},[192,197],{"type":148,"tag":182,"props":193,"children":194},{},[195],{"type":153,"value":196},"Design tokens",{"type":153,"value":198}," — share colors and spacing across components.",{"type":148,"tag":178,"props":200,"children":201},{},[202,207],{"type":148,"tag":182,"props":203,"children":204},{},[205],{"type":153,"value":206},"Reusable components",{"type":153,"value":208}," — extract repeated patterns when they have a clear common purpose.",{"type":148,"tag":156,"props":210,"children":212},{"id":211},"what-utility-classes-do-not-guarantee",[213],{"type":153,"value":214},"What utility classes do not guarantee",{"type":148,"tag":149,"props":216,"children":217},{},[218],{"type":153,"value":219},"Keeping classes near the markup makes styling easier to follow, but shared components and global theme changes can still affect many pages. Generated CSS size depends on detected classes and custom styles. I review mobile layouts, keyboard focus and color contrast alongside the visual design rather than assuming the framework handles them automatically."]