<!doctype html>
<html lang="en" class="scroll-smooth">

<head>
	<meta name="generator" content="Hugo 0.134.2">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="keywords" content="">
  <meta name="description" content="Web &amp; Mobile Software Engineering">
  <meta name="author" content="Marco Rico">
  <meta name="robots" content="index,follow">
  <title>Pioneering Your Digital Future | Marco Rico | Web &amp; Mobile Software Engineering</title>
  
<link rel="canonical" href="https://mrico.eu/en/">



<link rel="alternate" hreflang="de" href="https://mrico.eu/de/">

<link rel="alternate" hreflang="en" href="https://mrico.eu/en/">
<link rel="alternate" hreflang="x-default" href="https://mrico.eu/en/">


<meta property="og:title" content="Pioneering Your Digital Future">
<meta property="og:description" content="Web &amp; Mobile Software Engineering">
<meta property="og:url" content="https://mrico.eu/en/">
<meta property="og:site_name" content="Marco Rico | Web &amp; Mobile Software Engineering">
<meta property="og:locale" content="en">

<meta property="og:locale:alternate" content="de">

<meta property="og:type" content="website">





<meta property="og:image" content="https://mrico.eu/images/hero.png">







<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mricog">
<meta name="twitter:creator" content="@mricog">
<meta name="twitter:title" content="Pioneering Your Digital Future">
<meta name="twitter:description" content="Web &amp; Mobile Software Engineering">





<meta name="twitter:image" content="https://mrico.eu/images/hero.png">






<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Marco Rico - Web & Mobile Engineering",
  "url": "https:\/\/mrico.eu\/",
  "logo": "https:\/\/mrico.eu\/images\/favicon.png",
  "description": "Web \u0026 Mobile Software Engineering",
  "founder": {
    "@type": "Person",
    "name": "Marco Rico",
    "jobTitle": "Fractional CTO",
    "email": "hello@mrico.eu",
    "telephone": "+49-160-975-280-94"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "hello@mrico.eu",
    "telephone": "+49-160-975-280-94",
    "contactType": "customer service"
  },
  "sameAs": [
    "https://github.com/marcorico-tech",
    "https://x.com/mricog"
  ],
  "areaServed": {
    "@type": "GeoCircle",
    "geoMidpoint": {
      "@type": "GeoCoordinates",
      "latitude": 52.52,
      "longitude": 13.405
    },
    "geoRadius": "1000 km"
  },
  "knowsAbout": ["Web Development", "Mobile Development", "Software Engineering", "DevOps", "Cloud Architecture", "Fractional CTO"]
}
</script>




<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Marco Rico | Web \u0026 Mobile Software Engineering",
  "url": "https:\/\/mrico.eu\/",
  "description": "Web \u0026 Mobile Software Engineering",
  "inLanguage": ["en", "de"],
  "author": {
    "@type": "Person",
    "name": "Marco Rico"
  }
}
</script>





  
  
  <link rel="icon" type="image/png" href="https://mrico.eu/images/favicon_hu8465885563037080687.png" />
  <link rel="preconnect" href="https://rsms.me/">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <link href="/css/tailwind.css?1768511337" rel="stylesheet">
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
  <script>
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  </script>
</head>

<body class="text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-900 transition-colors duration-300">
  <a href="#main-content"
     class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-md">
    Skip to main content
  </a>

  <header x-data="{ open: false }" class="absolute inset-x-0 top-0 z-50">
    <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
    <div class="flex lg:flex-1">
        <a href="/en/" class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
        <span class="text-sm leading-6 font-medium">Marco Rico | Web &amp; Mobile Engineering</span>
        </a>
    </div>
    <div class="flex lg:hidden">
      <button @click="open = !open" type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-gray-300">
        <span class="sr-only">Open main menu</span>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
      </button>
    </div>
    <div class="hidden lg:flex lg:gap-x-12">
        <a href="/en/#services" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Services</a>
        <a href="/en/#case-studies" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">References</a>
        <a href="/en/#insights" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Insights</a>
        <a href="/en/#contact" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Contact</a>
    </div>
    <div class="hidden lg:flex lg:flex-1 gap-4 lg:justify-end lg:items-center">
        
        <button
          x-data="{
            dark: localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
            toggle() {
              this.dark = !this.dark;
              localStorage.theme = this.dark ? 'dark' : 'light';
              document.documentElement.classList.toggle('dark', this.dark);
            }
          }"
          @click="toggle()"
          class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
          :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'">
          <svg x-show="!dark" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
          </svg>
          <svg x-show="dark" x-cloak class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
          </svg>
        </button>
        
        
        <a href="/en/" class="text-sm font-semibold leading-6 text-blue-600 dark:text-blue-400 transition-colors" aria-current="page">English</a>
        
        <a href="/de/" class="text-sm font-semibold leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors" >Deutsch</a>
        
    </div>
    </nav>

    
  <div x-show="open" x-cloak class="lg:hidden" role="dialog" aria-modal="true">
    
    <div class="fixed inset-0 z-10 bg-gray-900/20 dark:bg-black/40" @click="open = false"></div>
    <div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white dark:bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:sm:ring-white/10">
      <div class="flex items-center justify-between">
        <a class="-m-1.5 p-1.5 text-gray-900 dark:text-white" href="/en/">
        <span class="text-sm leading-6 font-medium">Marco Rico | Web &amp; Mobile Engineering</span>
        </a>
        <button @click="open = false" type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-300">
          <span class="sr-only">Close menu</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="mt-6 flow-root">
        <div class="-my-6 divide-y divide-gray-500/10 dark:divide-gray-700">
          <div class="space-y-2 py-6">
            <a @click="open = false" href="/en/#services" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">Services</a>
            <a @click="open = false" href="/en/#case-studies" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">References</a>
            <a @click="open = false" href="/en/#insights" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">Insights</a>
            <a @click="open = false" href="/en/#contact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">Contact</a>
          </div>
          <div class="py-6 flex items-center justify-between">
            <div class="flex gap-4">
              
                  <a @click="open = false" href="/en/" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-blue-600 dark:text-blue-400 transition-colors" aria-current="page">English</a>
              
                  <a @click="open = false" href="/de/" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" >Deutsch</a>
              
            </div>
            
            <button
              x-data="{
                dark: localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
                toggle() {
                  this.dark = !this.dark;
                  localStorage.theme = this.dark ? 'dark' : 'light';
                  document.documentElement.classList.toggle('dark', this.dark);
                }
              }"
              @click="toggle()"
              class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
              :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'">
              <svg x-show="!dark" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
              </svg>
              <svg x-show="dark" x-cloak class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>


  <main id="main-content">
    <section class="hero relative isolate overflow-hidden bg-gradient-to-b from-blue-100/20 dark:from-blue-950/30 pt-14">
  <div
    class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-white dark:bg-gray-900 shadow-xl shadow-blue-600/10 ring-1 ring-blue-50 dark:ring-blue-900/20 sm:-mr-80 lg:-mr-96"
    aria-hidden="true"></div>
  <div class="mx-auto max-w-7xl px-6 py-32 sm:py-40 lg:px-8">
    <div
      class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-6 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8">
      <h1 class="max-w-2xl text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:col-span-2 xl:col-auto">
        Pioneering Your Digital Future</h1>
      <div class="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
        <p>From Concept to Launch: We Guide Your Software Projects Every Step of the Way.</p>
<p>Work with an expert team renowned for delivering reliable solutions, even in the most complex scenarios.</p>

        <div class="mt-10 flex items-center gap-x-6">
          <a href="/en/#contact"
            class="rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-blue-600 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all duration-200 active:scale-[0.98]">Let&#39;s talk</a>
          <a href="/en/#services" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Learn more <span
              aria-hidden="true">→</span></a>
        </div>
      </div>
      
      
      <img
        src="/images/hero_hu2468109584378476209.png"
        alt="Marco Rico - Web &amp; Mobile Engineering professional"
        class="mt-10 w-full max-w-lg rounded-2xl object-cover lg:max-w-none xl:row-span-2 xl:row-end-2 shadow-xl">
    </div>
  </div>
  <div class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white dark:from-gray-900 sm:h-32"></div>
</section>


<a id="services"></a>
<section class="reveal bg-white dark:bg-gray-900 py-8 sm:py-16">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Services</h2>
        <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300"><ul>
<li>Web Applications</li>
<li>Mobile App Development</li>
<li>Cloud-Backends</li>
<li>AWS DevOps</li>
</ul>
</p>
      </div>
      <div class="col-span-2">
        <dl class="grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
          
          <a href="https://mrico.eu/en/services/consulting/" class="block transition-transform duration-300 hover:-translate-y-1">
            <dt class="text-base font-semibold leading-7 text-gray-900 dark:text-white">
              <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 shadow-lg shadow-blue-500/25">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                  aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
                </svg>
              </div>
              Consulting
            </dt>
            <dd class="mt-1 text-base leading-7 text-gray-600 dark:text-gray-300">Focusing on your requirements, we help you choose the right tools and methods before and during implementation.</dd>
          </a>
          
          <a href="https://mrico.eu/en/services/project/" class="block transition-transform duration-300 hover:-translate-y-1">
            <dt class="text-base font-semibold leading-7 text-gray-900 dark:text-white">
              <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 shadow-lg shadow-blue-500/25">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                  aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75" />
                </svg>
              </div>
              Project Management
            </dt>
            <dd class="mt-1 text-base leading-7 text-gray-600 dark:text-gray-300">From the initial idea to delivery and beyond, we support you in analysis, planning, and control.</dd>
          </a>
          
          <a href="https://mrico.eu/en/services/development/" class="block transition-transform duration-300 hover:-translate-y-1">
            <dt class="text-base font-semibold leading-7 text-gray-900 dark:text-white">
              <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 shadow-lg shadow-blue-500/25">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                  aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
                </svg>
              </div>
              Software Development
            </dt>
            <dd class="mt-1 text-base leading-7 text-gray-600 dark:text-gray-300">We develop your software in an agile process that suits you. Continuously, step by step.</dd>
          </a>
          
          <a href="https://mrico.eu/en/services/integrations/" class="block transition-transform duration-300 hover:-translate-y-1">
            <dt class="text-base font-semibold leading-7 text-gray-900 dark:text-white">
              <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 shadow-lg shadow-blue-500/25">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                  aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
                </svg>
              </div>
              Integrations
            </dt>
            <dd class="mt-1 text-base leading-7 text-gray-600 dark:text-gray-300">Connect your systems and automate workflows with custom API integrations and third-party service connections.</dd>
          </a>
          
        </dl>
        <div class="mt-20">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Selected Technologies</h3>
          <ul class="mt-4 text-base leading-7 text-gray-500 dark:text-gray-400 grid grid-cols-2 lg:grid-cols-4 gap-2">
            <li>GO</li>
            <li>React</li>
            <li>Next.js</li>
            <li>Typescript</li>
            <li>Scala</li>
            <li>Python</li>
            <li>React Native</li>
            <li>Kubernetes</li>
            <li>PostgreSQL</li>
            <li>MongoDB</li>
            <li>Redis</li>
            <li>AWS</li>
          </ul>
        </div>
    </div>
  </div>
</section>



<a id="case-studies"></a>
<section class="reveal bg-blue-50/50 dark:bg-gray-800/50 py-8 sm:py-16">

  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Case Studies</h2>
        <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300"><p>Learn how to grow your business with our expert advice.</p>
</p>
      </div>
    <div class="col-span-2 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
    
      <article class="flex flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="relative w-full">
          
          

            <img src="/en/case-studies/ai-assistant-customer-support/cover_hu10107936469484909820.png" alt="Building an AI-Powered Customer Support Assistant" class="aspect-[16/9] w-full bg-gray-100 dark:bg-gray-800 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">

          <a href="/en/case-studies/ai-assistant-customer-support/">
          <div class="absolute inset-0 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10"></div>
          </a>
        </div>
        <div class="max-w-xl p-6">
          <div class="flex items-center gap-x-4 text-xs">
            <a href="/en/case-studies/ai-assistant-customer-support/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">AI Development</a>
          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
              <a href="/en/case-studies/ai-assistant-customer-support/">
                <span class="absolute inset-0"></span>
                Building an AI-Powered Customer Support Assistant
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300">How a modern chat widget with custom RAG capabilities and intelligent tools transformed customer support for an enterprise web application.</p>
          </div>
        </div>
      </article>
      
      <article class="flex flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="relative w-full">
          
          

            <img src="/en/case-studies/peavox-mvp/cover_hu10107936469484909820.png" alt="Peavox: Building a Fitness SaaS MVP as a Solo Founder" class="aspect-[16/9] w-full bg-gray-100 dark:bg-gray-800 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">

          <a href="/en/case-studies/peavox-mvp/">
          <div class="absolute inset-0 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10"></div>
          </a>
        </div>
        <div class="max-w-xl p-6">
          <div class="flex items-center gap-x-4 text-xs">
            <a href="/en/case-studies/peavox-mvp/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">MVP Development</a>
          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
              <a href="/en/case-studies/peavox-mvp/">
                <span class="absolute inset-0"></span>
                Peavox: Building a Fitness SaaS MVP as a Solo Founder
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300">How smart architecture choices and modern tooling enabled one developer to build a production-ready fitness management platform.</p>
          </div>
        </div>
      </article>
      
      <article class="flex flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="relative w-full">
          
          

            <img src="/en/case-studies/aws-costreduction-and-devops-optimization/cover_hu10107936469484909820.png" alt="AWS Cost Reduction and DevOps Optimization" class="aspect-[16/9] w-full bg-gray-100 dark:bg-gray-800 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">

          <a href="/en/case-studies/aws-costreduction-and-devops-optimization/">
          <div class="absolute inset-0 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10"></div>
          </a>
        </div>
        <div class="max-w-xl p-6">
          <div class="flex items-center gap-x-4 text-xs">
            <a href="/en/case-studies/aws-costreduction-and-devops-optimization/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">DevOps</a>
          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
              <a href="/en/case-studies/aws-costreduction-and-devops-optimization/">
                <span class="absolute inset-0"></span>
                AWS Cost Reduction and DevOps Optimization
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300">Simplified AWS Infrastructure for early-stage startup to reduce AWS Bill by 50%.</p>
          </div>
        </div>
      </article>
      
    </div>
  </div>
  
</section>


<section class="reveal bg-white dark:bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Our Clients <a id="clients"></a></h2>
      <div
        class="mx-auto col-span-2 grid max-w-lg grid-cols-3 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-4">
        
        
          
          
          <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1 dark:opacity-70 dark:invert transition-opacity hover:opacity-100"
            src="/logos/containergrid_hu17296832913714913943.png" width="500" height="85" alt="/containergrid logo">
          
        
          
          
          <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1 dark:opacity-70 dark:invert transition-opacity hover:opacity-100"
            src="/logos/eon_hu14072643320627174856.png" width="500" height="147" alt="/eon logo">
          
        
          
          
          <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1 dark:opacity-70 dark:invert transition-opacity hover:opacity-100"
            src="/logos/metro_hu11764752802570793337.png" width="500" height="120" alt="/metro logo">
          
        
          
          
          <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1 dark:opacity-70 dark:invert transition-opacity hover:opacity-100"
            src="/logos/twotronic_hu4575142035794453687.png" width="500" height="86" alt="/twotronic logo">
          
        
          
          
          <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1 dark:opacity-70 dark:invert transition-opacity hover:opacity-100"
            src="/logos/vaps_hu2225466061623694642.png" width="500" height="264" alt="/vaps logo">
          
        
          
          
          <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1 dark:opacity-70 dark:invert transition-opacity hover:opacity-100"
            src="/logos/veact_hu3141565635046245983.png" width="500" height="134" alt="/veact logo">
          
        
    </div>
  </div>
</section>


<section class="reveal bg-blue-50/50 dark:bg-gray-800/50 py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
  <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Insights <a id="insights"></a></h2>
    <div class="mx-auto col-span-2 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2">
    
      <article class="flex max-w-xl flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="flex items-center gap-x-4 text-xs">
          <time datetime="2024-09-22" class="text-gray-500 dark:text-gray-400">Sep 22, 2024</time>
          <a href="/en/blog/the-costly-mistake-of-hiring-the-wrong-people/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">Leadership</a>
        </div>
        <div class="group relative">
          <h3 class="mt-3 text-2xl font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
            <a href="/en/blog/the-costly-mistake-of-hiring-the-wrong-people/">
              <span class="absolute inset-0"></span>
              The Costly Mistake of Hiring the Wrong People
            </a>
          </h3>
          <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300"> <p>Starting a business is an exciting journey filled with innovation and determination. As a startup founder, you&rsquo;ve …</p></p>
        </div>

      </article>
    
      <article class="flex max-w-xl flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="flex items-center gap-x-4 text-xs">
          <time datetime="2024-05-20" class="text-gray-500 dark:text-gray-400">May 20, 2024</time>
          <a href="/en/blog/why-staying-with-cloud-providers-could-be-your-smartest-move-yet/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">Cloud</a>
        </div>
        <div class="group relative">
          <h3 class="mt-3 text-2xl font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
            <a href="/en/blog/why-staying-with-cloud-providers-could-be-your-smartest-move-yet/">
              <span class="absolute inset-0"></span>
              Why Staying With Cloud Providers Could Be Your Smartest Move Yet
            </a>
          </h3>
          <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300"> <p>In recent times, several high-profile companies have made headlines by transitioning from cloud providers like AWS to …</p></p>
        </div>

      </article>
    
      <article class="flex max-w-xl flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="flex items-center gap-x-4 text-xs">
          <time datetime="2023-11-14" class="text-gray-500 dark:text-gray-400">Nov 14, 2023</time>
          <a href="/en/blog/how-to-share-protobuf-for-grpc-services/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">Architecture</a>
        </div>
        <div class="group relative">
          <h3 class="mt-3 text-2xl font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
            <a href="/en/blog/how-to-share-protobuf-for-grpc-services/">
              <span class="absolute inset-0"></span>
              How to Share Protobuf for gRPC Services
            </a>
          </h3>
          <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300"> <p>How to share the .proto files across the different teams and services? - or to not sharing them at all, but let each …</p></p>
        </div>

      </article>
    
      <article class="flex max-w-xl flex-col items-start justify-between bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
        <div class="flex items-center gap-x-4 text-xs">
          <time datetime="2023-03-01" class="text-gray-500 dark:text-gray-400">Mar 1, 2023</time>
          <a href="/en/blog/how-to-perform-healthchecks-in-kubernetes-for-an-grpc-service/" class="relative z-10 rounded-full bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">DevOps</a>
        </div>
        <div class="group relative">
          <h3 class="mt-3 text-2xl font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
            <a href="/en/blog/how-to-perform-healthchecks-in-kubernetes-for-an-grpc-service/">
              <span class="absolute inset-0"></span>
              How to Perform Healthchecks in Kubernetes for a gRPC Service
            </a>
          </h3>
          <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300"> <p>Every service needs a health check! Health checks are used to test if a service is alive and able to handle requests. If …</p></p>
        </div>

      </article>
    
    </div>
  </div>
</section>



<a id="contact"></a>
<section class="reveal bg-white dark:bg-gray-900 py-8 sm:py-16">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div
            class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
            <div>
                <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">How can we support you?</h2>
                <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">Just send me a message or give me a call. I am looking forward to hearing from you.</p>
                <p class="mt-10">
                    <a class="text-2xl font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors" href="/cdn-cgi/l/email-protection#cba3aea7a7a48ba6b9a2a8a4e5aebe"><span class="__cf_email__" data-cfemail="1078757c7c7f507d6279737f3e7565">[email&#160;protected]</span></a>
                </p>
                <p class="mt-5">
                    <a class="text-2xl text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors" href="tel:+4916097528094">+49 160 975 280 94</a>
                </p>
            </div>
            <div class="col-span-2">
                <div class="w-60">
                    
                    
                    <img src="/images/contact_hu7288574446094577162.jpg" alt="Portrait of Marco Rico, Fractional CTO" class="flex-row h-60 rounded-full ring-4 ring-blue-100 dark:ring-blue-900/50">
                    <div class="text-base leading-6 text-center mt-5">
                        <p class="font-semibold text-gray-900 dark:text-white">
                            Marco Rico
                        </p>
                        <p class="text-gray-600 dark:text-gray-400">Fractional CTO</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

  </main>

  <footer class="bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
  <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
    <div class="flex justify-center space-x-6 md:order-2">
      <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
        <span class="sr-only">Instagram</span>
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="https://x.com/mricog" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
        <span class="sr-only">X</span>
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
        </svg>
      </a>
      <a href="https://github.com/marcorico-tech" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
        <span class="sr-only">GitHub</span>
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
        <span class="sr-only">YouTube</span>
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
    <div class="mt-8 md:order-1 md:mt-0">
      <p class="text-center text-xs leading-5 text-gray-500 dark:text-gray-400">&copy; 2026 Marco Rico. All rights reserved.</p>
    </div>
  </div>
</footer>


  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    document.addEventListener('DOMContentLoaded', function() {
      const revealElements = document.querySelectorAll('.reveal');
      const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('active');
            revealObserver.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

      revealElements.forEach(el => revealObserver.observe(el));
    });
  </script>
</body>

</html>
