go2ismail/indotalent-webstore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add content my paas arsenal

Browse Source
This commit is contained in:
go2ismail
2026-07-22 11:50:54 +07:00
parent 799e6a7629
commit 34670a7032
21 changed files with 1051 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about-the-developer.html
+453
View File
@@ -0,0 +1,453 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About the Developer — Ismail Hamzah | INDOTALENT</title>
<meta name="description" content="About Ismail Hamzah — independent software architect, developer, and open-source contributor from Bandung, Indonesia. Creator of Indotalent enterprise .NET source code products." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/about-the-developer.html" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23f97316'/><text x='16' y='22' font-size='18' font-weight='bold' text-anchor='middle' fill='white'>I</text></svg>" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c',800:'#9a3412',900:'#7c2d12'}},fontFamily:{sans:['Inter','system-ui','-apple-system','sans-serif']}}}}</script>
<style>
[x-cloak]{display:none!important} html{scroll-behavior:smooth}
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s}
.btn-secondary:hover{border-color:#f97316;color:#f97316}
.fab-back-to-top{position:fixed;bottom:28px;right:28px;z-index:50;width:48px;height:48px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(249,115,22,0.35);transition:all 0.3s;opacity:0;pointer-events:none;transform:translateY(20px);text-decoration:none}
.fab-back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.fab-back-to-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(249,115,22,0.5)}
nav a.nav-item.active{color:#f97316!important;border-bottom:2px solid #f97316;padding-bottom:2px}
.about-card{transition:all 0.3s ease}
.about-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -8px rgba(249,115,22,0.12)}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- BREADCRUMB -->
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">About the Developer</span></li>
</ol>
</div>
</nav>
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60" x-data="{ mobileOpen: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-18">
<a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-7">
<a href="index.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Home</a>
<a href="index.html#products" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="for-beginners.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Beginners</a>
<a href="for-freelancers.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Freelancers</a>
<a href="blog.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
</div>
<div class="hidden lg:flex items-center gap-3"><a href="index.html#products" class="btn-primary text-sm py-2.5 px-5">Get Started</a></div>
<button @click="mobileOpen = !mobileOpen" class="lg:hidden text-gray-500 hover:text-gray-700 p-2">
<svg x-show="!mobileOpen" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
<svg x-show="mobileOpen" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
<div x-show="mobileOpen" x-cloak class="lg:hidden bg-white/98 border-b border-gray-200 px-4 pb-6"><div class="flex flex-col gap-4 pt-2"><a href="index.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Home</a><a href="index.html#products" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Products</a><a href="for-beginners.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Beginners</a><a href="for-freelancers.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Freelancers</a><a href="blog.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Blog</a><a href="support.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Support</a><a href="index.html#products" class="btn-primary text-sm py-2.5 px-5 text-center">Get Started</a></div></div>
</nav>
<!-- HERO SECTION -->
<section class="relative pt-12 pb-16 lg:pb-20 overflow-hidden">
<div class="absolute inset-0 opacity-[0.015]" style="background-image:radial-gradient(circle at 1px 1px,#f97316 1px,transparent 0);background-size:40px 40px"></div>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12" id="heroContent">
<div class="w-48 h-48 sm:w-56 sm:h-56 lg:w-64 lg:h-64 shrink-0 rounded-2xl overflow-hidden border-4 border-brand-200 shadow-xl bg-orange-50">
<img src="img_about/aboutme-portrait.jpg" alt="Ismail Hamzah — Indotalent Developer" class="w-full h-full object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
<div class="text-center lg:text-left">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-brand-700 text-xs font-medium tracking-wide">About the Developer</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">
Hi, I'm <span class="gradient-text">Ismail Hamzah</span>
</h1>
<p class="text-base sm:text-lg text-gray-600 max-w-2xl leading-relaxed">
An independent software architect, developer, and open-source contributor from Bandung, Indonesia.
For more than 15 years, I've been building software that solves real business problems.
</p>
</div>
</div>
</div>
</section>
<!-- INTRO SECTION -->
<section class="py-12 lg:py-16 bg-gray-50/80 border-y border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 about-card">
<p class="text-gray-700 leading-relaxed mb-4">
For more than 15 years, I've been building software that solves real business problems—from accounting, inventory, warehouse management, point of sale (POS), CRM, purchasing, and finance systems to enterprise web applications used in production environments.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
Unlike many digital stores, this is <strong class="text-gray-900">not a company with a large team</strong>.
</p>
<p class="text-gray-700 leading-relaxed">
It's simply me. Every product you find here is personally designed, architected, developed, tested, documented, and maintained by me.
</p>
</div>
</div>
</section>
<!-- COVID JOURNEY -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-amber-700 text-xs font-medium tracking-wide">Journey</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">A Small Journey That Started <span class="gradient-text">During COVID</span></h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<p class="text-gray-600 leading-relaxed mb-4">
When the COVID-19 pandemic changed the world, it also changed my career. After years of working in corporate software development and enterprise consulting, I decided to build something of my own.
</p>
<p class="text-gray-600 leading-relaxed mb-4">
Instead of chasing short-term freelance projects forever, I wanted to create software that could continue helping developers around the world—even while I was sleeping.
</p>
<p class="text-gray-600 leading-relaxed mb-4">
So I started publishing commercial source code, templates, and reusable application foundations. Every sale helped me improve the next product.
</p>
<p class="text-gray-600 leading-relaxed">
Little by little, this small digital business grew. It wasn't built overnight. It was built one project at a time.
</p>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-covid-strike-onthetrain.jpg" alt="COVID journey — on the train" class="w-full h-48 object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">On the train during COVID</p>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-covid-strie-new-bag-for-school.jpg" alt="COVID journey — new bag for school" class="w-full h-48 object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">New bag for school</p>
</div>
</div>
</div>
</div>
</section>
<!-- AI REVOLUTION -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-blue-700 text-xs font-medium tracking-wide">AI Era</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Then Came the <span class="gradient-text">AI Revolution</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 about-card">
<p class="text-gray-700 leading-relaxed mb-4">
Just as the world recovered from COVID, another wave arrived. Artificial Intelligence. Today, AI can generate code in seconds. That is amazing—and I use AI myself every day.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
But after working on enterprise software for many years, I've learned something important:
</p>
<blockquote class="border-l-4 border-brand-400 bg-orange-50/50 rounded-lg pl-5 pr-4 py-3 my-5">
<p class="text-base text-gray-700 italic leading-relaxed">
<span class="text-brand-500 text-lg leading-none mr-1">&ldquo;</span>Generating code is not the same as designing a complete software solution.<span class="text-brand-500 text-lg leading-none ml-1">&rdquo;</span>
</p>
</blockquote>
<p class="text-gray-700 leading-relaxed mb-4">
AI is excellent at writing functions. Real applications require architecture. They require authentication, authorization, database design, validation, security, maintainability, clean structure, deployment, scalability, business workflows, and hundreds of small engineering decisions that are difficult to discover one prompt at a time.
</p>
<p class="text-gray-700 leading-relaxed">
Many developers—especially students, junior developers, freelancers, and startup founders—still spend days or even weeks trying to assemble those pieces into a production-ready application. That is exactly the problem I want to solve.
</p>
</div>
</div>
</section>
<!-- WHY SOURCE CODE -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-emerald-700 text-xs font-medium tracking-wide">Mission</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Why I Still Build <span class="gradient-text">Source Code</span></h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<p class="text-gray-600 leading-relaxed mb-4">
Some people ask whether source code products are still useful in the age of AI. My answer is simple. More than ever.
</p>
<p class="text-gray-600 leading-relaxed mb-4">
AI becomes dramatically more powerful when it starts from a well-designed foundation instead of an empty folder. Rather than asking AI to invent an entire application from scratch, you can begin with a complete, working architecture that already follows practical software engineering principles.
</p>
<p class="text-gray-600 leading-relaxed mb-4">
Then let AI help you customize, extend, and accelerate development.
</p>
<p class="text-gray-600 leading-relaxed">
Think of my products as <strong class="text-gray-800">enterprise-grade foundations for AI-assisted development</strong>. You are not buying thousands of lines of code. You are saving weeks—or sometimes months—of engineering work.
</p>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-my-workspace.jpg" alt="My workspace" class="w-full h-72 object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">My workspace</p>
</div>
</div>
</div>
</section>
<!-- OPEN SOURCE -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-purple-700 text-xs font-medium tracking-wide">Open Source</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Built by Someone Who Loves <span class="gradient-text">Open Source</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 about-card">
<p class="text-gray-700 leading-relaxed mb-4">
Commercial projects are only one part of what I do. I also actively build open-source software because I believe knowledge should be shared whenever possible.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
Some of my GitHub projects have been used by developers around the world, and one of them has received more than <strong class="text-gray-900">1,300 GitHub stars</strong>.
</p>
<p class="text-gray-700 leading-relaxed">
Open source keeps me honest. It challenges me to write cleaner code, better documentation, and software that people genuinely enjoy using.
</p>
</div>
</div>
</section>
<!-- EXPERIENCE -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-cyan-700 text-xs font-medium tracking-wide">Experience</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Experience That Shapes <span class="gradient-text">Every Product</span></h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-my-corporate-work-before-covid.jpg" alt="Corporate work before COVID" class="w-full h-72 object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Corporate work before COVID</p>
</div>
<div>
<p class="text-gray-600 leading-relaxed mb-4">
Throughout my career I've worked with technologies including:
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">ASP.NET Core</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">C#</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">SQL Server</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">PostgreSQL</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">MySQL</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">JavaScript</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">Vue</span>
<span class="inline-flex items-center gap-1.5 bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700">React</span>
</div>
<p class="text-gray-600 leading-relaxed mb-4">
I've also worked extensively with Microsoft Dynamics AX, Odoo ERP, business process automation, analytics, cloud infrastructure, and enterprise architecture.
</p>
<p class="text-gray-600 leading-relaxed">
This combination of business knowledge and software engineering influences every template and application sold here. The goal isn't simply to make the code compile. The goal is to make it useful in real projects.
</p>
</div>
</div>
</div>
</section>
<!-- PHILOSOPHY -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-rose-50 border border-rose-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-rose-700 text-xs font-medium tracking-wide">Philosophy</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">My <span class="gradient-text">Philosophy</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 about-card">
<p class="text-gray-700 leading-relaxed mb-6">
I believe software should be:
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
<div class="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-3">
<svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>
<span class="text-gray-700 font-medium">Easy to understand</span>
</div>
<div class="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-3">
<svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>
<span class="text-gray-700 font-medium">Easy to extend</span>
</div>
<div class="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-3">
<svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>
<span class="text-gray-700 font-medium">Built with clean architecture</span>
</div>
<div class="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-3">
<svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>
<span class="text-gray-700 font-medium">Ready for production</span>
</div>
<div class="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-3">
<svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>
<span class="text-gray-700 font-medium">Friendly for learning</span>
</div>
<div class="flex items-center gap-3 bg-gray-50 rounded-xl px-4 py-3">
<svg class="w-5 h-5 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>
<span class="text-gray-700 font-medium">Compatible with AI-assisted development</span>
</div>
</div>
<p class="text-gray-600 leading-relaxed">
Whether you're a university student building your final project, a junior developer starting your career, a freelancer delivering client work, or a startup creating its MVP, I hope these projects can save you valuable time.
</p>
</div>
</div>
</section>
<!-- REAL PERSON / OFFICE -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-brand-700 text-xs font-medium tracking-wide">Behind the Store</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">A Real Person Behind <span class="gradient-text">This Website</span></h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
<div class="lg:col-span-3 bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 about-card">
<p class="text-gray-700 leading-relaxed mb-4">
This store operates from a modest office in Bandung, Indonesia.
</p>
<div class="bg-orange-50/50 rounded-xl p-4 border border-orange-100 mb-6">
<p class="text-sm font-semibold text-gray-800 mb-1">Office Address</p>
<p class="text-sm text-gray-600 leading-relaxed">
JL. Graha Kencana Blok G1 No. 13<br />
Batujajar<br />
Kabupaten Bandung Barat<br />
Indonesia
</p>
</div>
<p class="text-gray-700 leading-relaxed mb-4">
If you send an email, it comes directly to me. If you report a bug, I read it. If you suggest an improvement, I seriously consider it.
</p>
<p class="text-gray-700 leading-relaxed">
There is no marketing department. No sales team. No outsourced support. Just one developer who genuinely enjoys building useful software.
</p>
</div>
<div class="lg:col-span-2">
<div class="grid grid-cols-2 gap-3">
<div>
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-during-college-at-ITB-institut-teknologi-bandung-0.jpg" alt="During college at ITB" class="w-full h-36 object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-during-college-at-ITB-institut-teknologi-bandung-1.jpg" alt="During college at ITB" class="w-full h-36 object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
</div>
<div class="col-span-2">
<div class="rounded-xl overflow-hidden shadow-md">
<img src="img_about/aboutme-during-college-at-ITB-institut-teknologi-bandung-2.jpg" alt="During college at ITB" class="w-full h-52 object-top object-cover" loading="lazy" onerror="this.style.display='none'" />
</div>
</div>
</div>
<p class="text-[11px] text-gray-400 mt-3 text-center italic">From my student days at ITB (Institut Teknologi Bandung) &mdash; a very long time ago</p>
</div>
</div>
</div>
</section>
<!-- THANK YOU + SOCIAL LINKS -->
<section class="py-16 lg:py-20 bg-gradient-to-br from-orange-50 via-white to-orange-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-3xl p-8 sm:p-12 shadow-sm">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">Thank You</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Thank <span class="gradient-text">You</span></h2>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto mb-4">
If you've purchased one of my products, thank you. You're not only buying source code. You're supporting an independent developer who continues to believe that well-crafted software still matters—even in the age of AI.
</p>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto mb-4">
My goal has never been to compete with artificial intelligence. Instead, it's to build strong foundations that help developers—and AI—create better software together.
</p>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto mb-8">
I hope one of these projects becomes the starting point for your next great application. Thank you for visiting, and I sincerely appreciate your support.
</p>
<div class="border-t border-gray-200 pt-8 mt-8">
<p class="text-sm text-gray-500 mb-4">Online presence</p>
<div class="flex items-center justify-center gap-4">
<a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="w-12 h-12 rounded-full bg-gray-900 hover:bg-gray-700 transition-colors flex items-center justify-center" aria-label="GitHub">
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="https://www.linkedin.com/in/go2ismail/" target="_blank" rel="noopener" class="w-12 h-12 rounded-full bg-[#0A66C2] hover:bg-[#004182] transition-colors flex items-center justify-center" aria-label="LinkedIn">
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
<p class="text-xs text-gray-400 mt-4">github.com/go2ismail &middot; linkedin.com/in/go2ismail</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1"><a href="index.html" class="flex items-center gap-2 mb-3"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-6 w-auto" /></a><p class="text-xs text-gray-500 leading-relaxed">Enterprise .NET 10 & Blazor complete source code. Back End + Front End in one VSA monolith. Thank you for your support.</p></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Products</h5><ul class="space-y-2"><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">CRM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">CMS</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">HRM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">SCM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">WMS</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Resources</h5><ul class="space-y-2"><li><a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="text-sm text-gray-500 hover:text-brand-500">GitHub</a></li><li><a href="blog.html" class="text-sm text-gray-500 hover:text-brand-500">Blog</a></li><li><a href="support.html" class="text-sm text-gray-500 hover:text-brand-500">Support</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Company</h5><ul class="space-y-2"><li><a href="about-the-developer.html" class="text-sm text-brand-600 hover:text-brand-500 font-medium">About the Developer</a></li><li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-brand-500">Privacy</a></li><li><a href="no-refund-policy.html" class="text-sm text-gray-500 hover:text-brand-500">No Refund</a></li><li><a href="license.html" class="text-sm text-gray-500 hover:text-brand-500">License</a></li><li><a href="mailto:hi@indotalent.com" class="text-sm text-gray-500 hover:text-brand-500">Contact</a></li></ul></div>
</div>
<div class="border-t border-gray-200 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div>
</div>
</footer>
<!-- FAB Back to Top -->
<a href="#" class="fab-back-to-top" id="backToTop" title="Back to top">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
</a>
<script>
document.addEventListener('DOMContentLoaded',function(){
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo('#heroContent',{autoAlpha:0,y:40},{autoAlpha:1,y:0,duration:.8});
// Animate sections on scroll
document.querySelectorAll('section').forEach(section => {
gsap.fromTo(section.querySelectorAll('.about-card'),{autoAlpha:0,y:30},{autoAlpha:1,y:0,duration:.6,scrollTrigger:{trigger:section,start:'top 80%'}});
});
// Back to top FAB
const fab=document.getElementById('backToTop');
window.addEventListener('scroll',function(){
if(window.scrollY>500)fab.classList.add('visible');else fab.classList.remove('visible');
});
fab.addEventListener('click',function(e){e.preventDefault();window.scrollTo({top:0,behavior:'smooth'})});
});
</script>
</body>
</html>
img_about/aboutme-covid-strie-new-bag-for-school.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

img_about/aboutme-covid-strike-onthetrain.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

img_about/aboutme-during-college-at-ITB-institut-teknologi-bandung-0.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

img_about/aboutme-during-college-at-ITB-institut-teknologi-bandung-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

img_about/aboutme-during-college-at-ITB-institut-teknologi-bandung-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

img_about/aboutme-my-corporate-work-before-covid.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

img_about/aboutme-my-workspace.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 KiB

img_about/aboutme-portrait.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

img_paas/landing-cloudbeaver.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

img_paas/landing-dozzle.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

img_paas/landing-gitea.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB

img_paas/landing-nginx-proxy-manager.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

img_paas/landing-portainer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

img_paas/real-world-cloudbeaver.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

img_paas/real-world-dozzle.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

img_paas/real-world-nginx-proxy-manager.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

img_paas/real-world-usage-gitea.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

img_paas/real-world-usage-portainer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

index.html
+2 -2
View File
@@ -880,8 +880,8 @@
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1"><a href="index.html" class="flex items-center gap-2 mb-3"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-6 w-auto" /></a><p class="text-xs text-gray-500 leading-relaxed">Enterprise .NET 10 & Blazor complete source code. Back End + Front End in one VSA monolith. Thank you for your support.</p></div> <div class="col-span-2 md:col-span-1"><a href="index.html" class="flex items-center gap-2 mb-3"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-6 w-auto" /></a><p class="text-xs text-gray-500 leading-relaxed">Enterprise .NET 10 & Blazor complete source code. Back End + Front End in one VSA monolith. Thank you for your support.</p></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Products</h5><ul class="space-y-2"><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">CRM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">CMS</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">HRM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">SCM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">WMS</a></li></ul></div> <div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Products</h5><ul class="space-y-2"><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">CRM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">CMS</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">HRM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">SCM</a></li><li><a href="#products" class="text-sm text-gray-500 hover:text-brand-500">WMS</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Resources</h5><ul class="space-y-2"><li><a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="text-sm text-gray-500 hover:text-brand-500">GitHub</a></li><li><a href="blog.html" class="text-sm text-gray-500 hover:text-brand-500">Blog</a></li><li><a href="support.html" class="text-sm text-gray-500 hover:text-brand-500">Support</a></li></ul></div> <div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Resources</h5><ul class="space-y-2"><li><a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="text-sm text-gray-500 hover:text-brand-500">GitHub</a></li><li><a href="blog.html" class="text-sm text-gray-500 hover:text-brand-500">Blog</a></li><li><a href="support.html" class="text-sm text-gray-500 hover:text-brand-500">Support</a></li><li><a href="my-paas-arsenal.html" class="text-sm text-gray-500 hover:text-brand-500">My PaaS Arsenal</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Company</h5><ul class="space-y-2"><li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-brand-500">Privacy</a></li><li><a href="no-refund-policy.html" class="text-sm text-gray-500 hover:text-brand-500">No Refund</a></li><li><a href="license.html" class="text-sm text-gray-500 hover:text-brand-500">License</a></li><li><a href="mailto:hi@indotalent.com" class="text-sm text-gray-500 hover:text-brand-500">Contact</a></li></ul></div> <div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Company</h5><ul class="space-y-2"><li><a href="about-the-developer.html" class="text-sm text-gray-500 hover:text-brand-500">About the Developer</a></li><li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-brand-500">Privacy</a></li><li><a href="no-refund-policy.html" class="text-sm text-gray-500 hover:text-brand-500">No Refund</a></li><li><a href="license.html" class="text-sm text-gray-500 hover:text-brand-500">License</a></li><li><a href="mailto:hi@indotalent.com" class="text-sm text-gray-500 hover:text-brand-500">Contact</a></li></ul></div>
</div> </div>
<div class="border-t border-gray-200 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div> <div class="border-t border-gray-200 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div>
</div> </div>
my-paas-arsenal.html
+596
View File
@@ -0,0 +1,596 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My PaaS Arsenal — Building a Simple, Modern PaaS for 30+ ASP.NET Core Demos | INDOTALENT</title>
<meta name="description" content="A detailed technical journey of building a lightweight Self-Hosted PaaS infrastructure using Gitea, Portainer, Nginx Proxy Manager, PostgreSQL, MSSQL, CloudBeaver, and Dozzle to host 30+ ASP.NET Core demo applications on a single Linux VPS." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.indotalent.com/my-paas-arsenal.html" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23f97316'/><text x='16' y='22' font-size='18' font-weight='bold' text-anchor='middle' fill='white'>I</text></svg>" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c',800:'#9a3412',900:'#7c2d12'}},fontFamily:{sans:['Inter','system-ui','-apple-system','sans-serif']}}}}</script>
<style>
[x-cloak]{display:none!important} html{scroll-behavior:smooth}
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s}
.btn-secondary:hover{border-color:#f97316;color:#f97316}
.fab-back-to-top{position:fixed;bottom:28px;right:28px;z-index:50;width:48px;height:48px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(249,115,22,0.35);transition:all 0.3s;opacity:0;pointer-events:none;transform:translateY(20px);text-decoration:none}
.fab-back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.fab-back-to-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(249,115,22,0.5)}
nav a.nav-item.active{color:#f97316!important;border-bottom:2px solid #f97316;padding-bottom:2px}
.tool-card{transition:all 0.3s ease}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -8px rgba(249,115,22,0.12)}
.diagram-arrow{color:#f97316}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- BREADCRUMB -->
<nav aria-label="Breadcrumb" class="pt-20 bg-white border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<ol class="flex items-center gap-1.5 text-xs text-gray-400">
<li><a href="index.html" class="hover:text-brand-500 transition-colors">Home</a></li>
<li><span class="text-gray-300">/</span></li>
<li><span class="text-gray-600 font-medium">My PaaS Arsenal</span></li>
</ol>
</div>
</nav>
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60" x-data="{ mobileOpen: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-18">
<a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="hidden lg:flex items-center gap-7">
<a href="index.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Home</a>
<a href="index.html#products" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
<a href="blog.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
<a href="about-the-developer.html" class="nav-item text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">About</a>
</div>
<div class="hidden lg:flex items-center gap-3"><a href="index.html#products" class="btn-primary text-sm py-2.5 px-5">Get Started</a></div>
<button @click="mobileOpen = !mobileOpen" class="lg:hidden text-gray-500 hover:text-gray-700 p-2">
<svg x-show="!mobileOpen" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
<svg x-show="mobileOpen" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
<div x-show="mobileOpen" x-cloak class="lg:hidden bg-white/98 border-b border-gray-200 px-4 pb-6"><div class="flex flex-col gap-4 pt-2"><a href="index.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Home</a><a href="index.html#products" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Products</a><a href="blog.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">Blog</a><a href="about-the-developer.html" @click="mobileOpen=false" class="text-sm font-medium text-gray-600">About</a><a href="index.html#products" class="btn-primary text-sm py-2.5 px-5 text-center">Get Started</a></div></div>
</nav>
<!-- HERO -->
<section class="relative pt-12 pb-16 lg:pb-20 overflow-hidden">
<div class="absolute inset-0 opacity-[0.015]" style="background-image:radial-gradient(circle at 1px 1px,#f97316 1px,transparent 0);background-size:40px 40px"></div>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center" id="heroContent">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-brand-700 text-xs font-medium tracking-wide">Infrastructure</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">
My PaaS <span class="gradient-text">Arsenal</span>
</h1>
<p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-3">
Building a Simple, Modern, Yet Powerful PaaS Infrastructure for Hosting 30+ ASP.NET Core Demo Applications
</p>
<p class="text-sm text-gray-400">A technical deep-dive into self-hosted, container-based deployment</p>
</div>
</div>
</section>
<!-- INTRO / THE QUESTION -->
<section class="py-12 lg:py-16 bg-gray-50/80 border-y border-gray-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 tool-card">
<p class="text-gray-700 leading-relaxed mb-4">
One of the questions I receive most often is surprisingly not about C#, ASP.NET Core, or Clean Architecture.
</p>
<p class="text-gray-700 leading-relaxed mb-4">Instead, it's this:</p>
<blockquote class="border-l-4 border-brand-400 bg-orange-50/50 rounded-lg pl-5 pr-4 py-3 my-5 text-center">
<p class="text-base sm:text-lg text-gray-700 font-semibold italic leading-relaxed">
&ldquo;How do you host all of your live demo applications?&rdquo;
</p>
</blockquote>
<p class="text-gray-700 leading-relaxed mb-4">
Today, I maintain dozens of web application demos&mdash;CRM systems, POS applications, ERP modules, HR software, inventory systems, and various reusable templates.
</p>
<p class="text-gray-700 leading-relaxed mb-2 font-semibold">Each application needs to be:</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-4">
<div class="flex items-center gap-2 text-sm text-gray-600"><svg class="w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Available 24/7</div>
<div class="flex items-center gap-2 text-sm text-gray-600"><svg class="w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Easy to update</div>
<div class="flex items-center gap-2 text-sm text-gray-600"><svg class="w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Isolated from other applications</div>
<div class="flex items-center gap-2 text-sm text-gray-600"><svg class="w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Protected with HTTPS</div>
<div class="flex items-center gap-2 text-sm text-gray-600"><svg class="w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Connected to its own database</div>
<div class="flex items-center gap-2 text-sm text-gray-600"><svg class="w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg>Cost-effective to operate</div>
</div>
<p class="text-gray-700 leading-relaxed">
Years ago, the answer was easy. Windows Server. Microsoft IIS. Publish. Done. That changed when I migrated my entire infrastructure to Linux. Ironically, the migration wasn't driven by technology&mdash;it was driven by economics.
</p>
</div>
</div>
</section>
<!-- WHY LINUX -->
<section class="py-16 lg:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-red-700 text-xs font-medium tracking-wide">The Shift</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Why I Left <span class="gradient-text">Windows Server</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 tool-card">
<p class="text-gray-700 leading-relaxed mb-4">
Running dozens of demo applications on Windows Server works perfectly fine. The problem wasn't capability. It was cost.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
A VPS running Windows Server Datacenter with enough CPU and RAM to host many ASP.NET Core applications is <strong class="text-gray-900">significantly more expensive</strong> than an equivalent Linux VPS. Once your infrastructure begins growing beyond a few applications, licensing costs become difficult to ignore.
</p>
<p class="text-gray-700 leading-relaxed mb-4 font-semibold">I wanted something that was:</p>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-6">
<span class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-1.5 text-sm font-medium text-emerald-700">cheaper</span>
<span class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-1.5 text-sm font-medium text-emerald-700">easier to automate</span>
<span class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-1.5 text-sm font-medium text-emerald-700">container-friendly</span>
<span class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-1.5 text-sm font-medium text-emerald-700">cloud-native</span>
<span class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-1.5 text-sm font-medium text-emerald-700">capable of CI/CD</span>
<span class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-1.5 text-sm font-medium text-emerald-700">maintainable by one person</span>
</div>
<p class="text-gray-700 leading-relaxed mb-4">
Linux turned out to be the perfect fit. Today, the entire platform runs comfortably on a single VPS with:
</p>
<div class="flex flex-wrap gap-4 mb-4 justify-center">
<div class="bg-orange-50 rounded-xl px-6 py-3 border border-orange-200 text-center">
<p class="text-2xl font-bold text-brand-600">8</p>
<p class="text-xs text-gray-500">vCPU</p>
</div>
<div class="bg-orange-50 rounded-xl px-6 py-3 border border-orange-200 text-center">
<p class="text-2xl font-bold text-brand-600">24 GB</p>
<p class="text-xs text-gray-500">RAM</p>
</div>
</div>
<p class="text-gray-700 leading-relaxed">
Despite hosting more than thirty applications, the server remains responsive thanks to containerization and careful resource management. The operating system is almost invisible. Docker became the real operating system.
</p>
</div>
</div>
</section>
<!-- PHILOSOPHY -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-blue-700 text-xs font-medium tracking-wide">Philosophy</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">My <span class="gradient-text">Philosophy</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 tool-card text-center">
<p class="text-gray-600 leading-relaxed mb-4">
People often imagine Platform as a Service (PaaS) as something incredibly complex. Kubernetes. Service Mesh. Helm Charts. Hundreds of YAML files. For large organizations, those technologies make sense. For an independent software developer? Probably not.
</p>
<blockquote class="border-l-4 border-brand-400 bg-orange-50/50 rounded-lg pl-5 pr-4 py-3 my-5 max-w-xl mx-auto">
<p class="text-base text-gray-700 font-semibold italic leading-relaxed">
&ldquo;Deploy a production-ready application with a single Git push.&rdquo;
</p>
</blockquote>
<p class="text-gray-700 leading-relaxed">
That's it. Everything in this infrastructure exists to support that single objective.
</p>
</div>
</div>
</section>
<!-- THE ARSENAL HEADER -->
<section class="py-16 lg:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-amber-700 text-xs font-medium tracking-wide">The Arsenal</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">The <span class="gradient-text">Arsenal</span></h2>
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Instead of relying on one massive platform, I assembled several focused open-source tools. Each tool does one thing exceptionally well. Together, they form a lightweight but surprisingly capable PaaS.</p>
</div>
</div>
</section>
<!-- DIAGRAM CARD -->
<section class="py-8 lg:py-12 bg-gray-50/80">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<h3 class="text-lg font-bold text-gray-900 text-center mb-6">Infrastructure Components Overview</h3>
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="border-b border-r border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Developer</div>
<div class="border-b border-r border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Git Push</div>
<div class="border-b border-r border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Gitea</div>
<div class="border-b border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Portainer</div>
<div class="border-r border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Docker Build</div>
<div class="border-r border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Deploy</div>
<div class="border-r border-gray-200 px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">Nginx Proxy</div>
<div class="px-4 py-8 text-center text-gray-700 font-semibold text-xs sm:text-sm">HTTPS Live</div>
</div>
</div>
</section>
<!-- 1. GITEA -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="inline-flex items-center gap-1.5 bg-gray-100 border border-gray-200 rounded-lg px-3 py-1 mb-3">
<span class="text-gray-600 text-xs font-semibold tracking-wide">Tool #1</span>
</div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Gitea</h2>
<p class="text-sm text-gray-500 mb-1">Self-Hosted Git Repository</p>
<a href="https://about.gitea.com/" target="_blank" rel="noopener" class="text-xs text-brand-600 hover:text-brand-700 font-medium">about.gitea.com &rarr;</a>
<div class="mt-5 text-gray-700 leading-relaxed text-sm space-y-3">
<p>Every application begins here. Gitea stores all source code repositories for my commercial and internal projects.</p>
<p>I chose Gitea because it is lightweight, fast, self-hosted, open source, and extremely easy to maintain. Running my own Git server also means complete ownership of the development workflow.</p>
<p class="font-semibold text-gray-800">Every deployment begins with a Git commit.</p>
</div>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200">
<img src="img_paas/landing-gitea.png" alt="Gitea landing page" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Gitea &mdash; lightweight self-hosted Git service</p>
</div>
</div>
</div>
</section>
<!-- GITEA REAL USAGE -->
<section class="py-8 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200 max-w-2xl mx-auto">
<img src="img_paas/real-world-usage-gitea.png" alt="Gitea real-world usage" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Real-world Gitea dashboard &mdash; managing multiple repositories for demo applications</p>
</div>
</section>
<!-- 2. PORTAINER -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="inline-flex items-center gap-1.5 bg-gray-100 border border-gray-200 rounded-lg px-3 py-1 mb-3">
<span class="text-gray-600 text-xs font-semibold tracking-wide">Tool #2</span>
</div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Portainer</h2>
<p class="text-sm text-gray-500 mb-1">Docker & Deployment Management</p>
<a href="https://www.portainer.io/" target="_blank" rel="noopener" class="text-xs text-brand-600 hover:text-brand-700 font-medium">portainer.io &rarr;</a>
<div class="mt-5 text-gray-700 leading-relaxed text-sm space-y-3">
<p>Portainer is the heart of the platform. Many people think Portainer is simply a Docker dashboard. It is much more than that.</p>
<p>Every application in my infrastructure is defined by a Docker Compose file stored inside its Git repository. Each stack in Portainer continuously monitors its corresponding repository. Whenever new commits arrive, Portainer automatically:</p>
<ul class="space-y-1.5 pl-2">
<li class="flex items-start gap-2"><svg class="w-3.5 h-3.5 text-brand-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span>pulls the latest source code</span></li>
<li class="flex items-start gap-2"><svg class="w-3.5 h-3.5 text-brand-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span>rebuilds the Docker image</span></li>
<li class="flex items-start gap-2"><svg class="w-3.5 h-3.5 text-brand-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span>recreates the container</span></li>
<li class="flex items-start gap-2"><svg class="w-3.5 h-3.5 text-brand-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span>deploys the updated application</span></li>
</ul>
<p>No SSH. No manual publishing. No copying files. No Remote Desktop. Deployment becomes almost effortless. From my perspective, updating production often feels no different from committing code.</p>
</div>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200">
<img src="img_paas/landing-portainer.png" alt="Portainer landing page" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Portainer &mdash; Docker management and CI/CD automation</p>
</div>
</div>
</div>
</section>
<!-- PORTAINER REAL USAGE -->
<section class="py-8 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200 max-w-3xl mx-auto">
<img src="img_paas/real-world-usage-portainer.png" alt="Portainer real-world usage" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Real-world Portainer dashboard &mdash; managing 30+ running containers</p>
</div>
</section>
<!-- 3. NGINX PROXY MANAGER -->
<section class="py-16 lg:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="inline-flex items-center gap-1.5 bg-gray-100 border border-gray-200 rounded-lg px-3 py-1 mb-3">
<span class="text-gray-600 text-xs font-semibold tracking-wide">Tool #3</span>
</div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Nginx Proxy Manager</h2>
<p class="text-sm text-gray-500 mb-1">Reverse Proxy Made Simple</p>
<a href="https://nginxproxymanager.com/" target="_blank" rel="noopener" class="text-xs text-brand-600 hover:text-brand-700 font-medium">nginxproxymanager.com &rarr;</a>
<div class="mt-5 text-gray-700 leading-relaxed text-sm space-y-3">
<p>If Portainer is the heart, Nginx Proxy Manager is the traffic controller. Every application runs inside Docker. None of them expose ports directly to the internet. Instead, every container communicates through Docker's internal network.</p>
<p>This design provides several advantages. Applications can securely communicate with PostgreSQL, Microsoft SQL Server, CloudBeaver, internal APIs, and other containers without exposing database ports publicly.</p>
<p>Nginx Proxy Manager simply routes incoming HTTPS traffic to the correct container. It also automates one of the most annoying parts of hosting websites: SSL certificates. Let's Encrypt certificates are issued and renewed automatically. No manual renewal. No certificate expiration reminders. No downtime.</p>
</div>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200">
<img src="img_paas/landing-nginx-proxy-manager.png" alt="Nginx Proxy Manager landing page" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Nginx Proxy Manager &mdash; reverse proxy with automated SSL</p>
</div>
</div>
</div>
</section>
<!-- NPM REAL USAGE -->
<section class="py-8 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200 max-w-3xl mx-auto">
<img src="img_paas/real-world-nginx-proxy-manager.png" alt="Nginx Proxy Manager real-world" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Real-world Nginx Proxy Manager &mdash; routing traffic to dozens of containers</p>
</div>
</section>
<!-- 4. DATABASES -->
<section class="py-16 lg:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-violet-50 border border-violet-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-violet-700 text-xs font-medium tracking-wide">Data Layer</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">PostgreSQL & <span class="gradient-text">Microsoft SQL Server</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 tool-card">
<p class="text-gray-700 leading-relaxed mb-4">
Different projects have different requirements. Some customers prefer PostgreSQL. Others require Microsoft SQL Server.
</p>
<p class="text-gray-700 leading-relaxed">
Both database servers run as Docker containers inside the same private network. Applications connect using container names rather than IP addresses. Everything remains isolated from the public internet. Simple. Secure. Reliable.
</p>
</div>
</div>
</section>
<!-- 5. CLOUDBEAVER -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="inline-flex items-center gap-1.5 bg-gray-100 border border-gray-200 rounded-lg px-3 py-1 mb-3">
<span class="text-gray-600 text-xs font-semibold tracking-wide">Tool #4</span>
</div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">CloudBeaver</h2>
<p class="text-sm text-gray-500 mb-1">Browser-Based Database Management</p>
<a href="https://dbeaver.com/cloudbeaver-enterprise/" target="_blank" rel="noopener" class="text-xs text-brand-600 hover:text-brand-700 font-medium">dbeaver.com/cloudbeaver &rarr;</a>
<div class="mt-5 text-gray-700 leading-relaxed text-sm space-y-3">
<p>Managing databases through Remote Desktop or command-line tools quickly becomes inconvenient. CloudBeaver provides a modern browser-based database management interface.</p>
<p>Because it resides inside the same Docker network, it communicates directly with every database container. No SQL Server ports need to be exposed publicly. No PostgreSQL ports either.</p>
<p>Database administration can be performed securely from anywhere using only HTTPS. For me, this is one of those tools that quietly saves hours every month.</p>
</div>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200">
<img src="img_paas/landing-cloudbeaver.png" alt="CloudBeaver landing page" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">CloudBeaver &mdash; browser-based database management</p>
</div>
</div>
</div>
</section>
<!-- CLOUDBEAVER REAL USAGE -->
<section class="py-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200 max-w-3xl mx-auto">
<img src="img_paas/real-world-cloudbeaver.png" alt="CloudBeaver real-world usage" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Real-world CloudBeaver &mdash; managing databases securely via browser</p>
</div>
</section>
<!-- 6. DOZZLE -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="inline-flex items-center gap-1.5 bg-gray-100 border border-gray-200 rounded-lg px-3 py-1 mb-3">
<span class="text-gray-600 text-xs font-semibold tracking-wide">Tool #5</span>
</div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Dozzle</h2>
<p class="text-sm text-gray-500 mb-1">Real-Time Docker Logs & Monitoring</p>
<a href="https://dozzle.dev/" target="_blank" rel="noopener" class="text-xs text-brand-600 hover:text-brand-700 font-medium">dozzle.dev &rarr;</a>
<div class="mt-5 text-gray-700 leading-relaxed text-sm space-y-3">
<p>One of my favorite discoveries. Dozzle streams Docker logs in real time through an incredibly clean web interface. It also provides quick insight into container activity and overall resource usage.</p>
<p>When one application suddenly consumes more memory than expected, or starts producing unexpected logs, I usually discover it within seconds.</p>
<p>Dozzle intentionally keeps authentication simple. Rather than exposing it publicly, I place it behind Nginx Proxy Manager and enable HTTP Basic Authentication there. This approach keeps the service private while avoiding unnecessary complexity.</p>
</div>
</div>
<div>
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200">
<img src="img_paas/landing-dozzle.png" alt="Dozzle landing page" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Dozzle &mdash; real-time Docker log streaming</p>
</div>
</div>
</div>
</section>
<!-- DOZZLE REAL USAGE -->
<section class="py-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-xl overflow-hidden shadow-md border border-gray-200 max-w-3xl mx-auto">
<img src="img_paas/real-world-dozzle.png" alt="Dozzle real-world usage" class="w-full" loading="lazy" onerror="this.style.display='none'" />
</div>
<p class="text-[11px] text-gray-400 mt-1.5 text-center italic">Real-world Dozzle &mdash; monitoring container logs and resource usage</p>
</div>
</section>
<!-- PUTTING EVERYTHING TOGETHER -->
<section class="py-16 lg:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-emerald-700 text-xs font-medium tracking-wide">Integration</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Putting Everything <span class="gradient-text">Together</span></h2>
</div>
<div class="bg-white border-2 border-brand-200 rounded-2xl p-6 sm:p-8 tool-card">
<p class="text-gray-700 leading-relaxed mb-6">Individually, each tool solves a small problem. Together, they create a surprisingly capable developer platform. The workflow looks like this:</p>
<div class="flex flex-col items-center gap-0 text-sm max-w-sm mx-auto">
<div class="bg-gray-900 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Developer</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-gray-900 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Git Push</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-blue-600 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Gitea Repository</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-emerald-600 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Portainer detects changes</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-cyan-600 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Docker Compose Build</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-cyan-700 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Container Deployment</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-purple-600 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">Nginx Proxy Manager</div>
<svg class="w-6 h-6 text-brand-500 my-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div class="bg-brand-600 text-white rounded-xl px-5 py-2.5 font-semibold w-full text-center">HTTPS Live Demo</div>
</div>
<p class="text-gray-600 text-center mt-6">Updating an application often takes less than a minute. The deployment pipeline is almost invisible. Which is exactly how infrastructure should feel.</p>
</div>
</div>
</section>
<!-- WHY THIS WORKS -->
<section class="py-16 lg:py-20 bg-gray-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-cyan-700 text-xs font-medium tracking-wide">Why It Works</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Why This Works <span class="gradient-text">So Well</span></h2>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 tool-card">
<p class="text-gray-700 leading-relaxed mb-4">
This platform wasn't designed to impress DevOps engineers. It was designed to remove friction.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
As a solo developer, context switching is expensive. Every minute spent manually deploying software is a minute not spent writing software. Automation isn't about replacing people. It's about eliminating repetitive work.
</p>
<p class="text-gray-700 leading-relaxed">
Today I spend far less time thinking about deployment than I did several years ago. That allows me to focus on what actually creates value: building applications.
</p>
</div>
</div>
</section>
<!-- LESSONS LEARNED -->
<section class="py-16 lg:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-1.5 bg-rose-50 border border-rose-200 rounded-full px-3.5 py-1 mb-4">
<span class="text-rose-700 text-xs font-medium tracking-wide">Lessons</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Lessons <span class="gradient-text">Learned</span></h2>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div class="bg-white border border-gray-200 rounded-xl p-5 tool-card">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-3">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Containers Simplify</h3>
<p class="text-sm text-gray-500">Every application carries its own runtime, dependencies, and configuration. There are no "works on my machine" surprises anymore.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5 tool-card">
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-3">
<svg class="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M12 21a9 9 0 01-9-9m9 9a9 9 0 009-9m-9 9V3m0 0a9 9 0 00-5.657 2.343M12 3a9 9 0 015.657 2.343"/></svg>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Private Networking</h3>
<p class="text-sm text-gray-500">Almost every service communicates entirely through Docker's internal network. Very few ports are exposed to the public internet. Smaller attack surface, less configuration, greater peace of mind.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5 tool-card">
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-3">
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M3.75 13.5l10.5-11.25L12 3.75 3.75 13.5zm0 0L12 21.75l8.25-10.5M12 21.75V13.5"/></svg>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-1">CI/CD Without K8s</h3>
<p class="text-sm text-gray-500">Modern deployment pipelines can be remarkably simple. Docker Compose plus Portainer provides more than enough power without introducing unnecessary operational complexity.</p>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-5 tool-card">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-3">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.532.405 1.203.094 1.775a2.25 2.25 0 01-1.513 1.054l-.18.03a2.25 2.25 0 00-1.283.958l-.512.768a2.25 2.25 0 01-2.023 1.095l-.171-.01a2.25 2.25 0 00-1.716.632l-.417.418a2.25 2.25 0 00-.577 1.06l-.163.652a2.25 2.25 0 01-1.467 1.525l-1.08.36a2.25 2.25 0 01-1.401-.015l-.414-.138a2.25 2.25 0 00-1.948.23l-1.513.987"/></svg>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-1">Open Source Power</h3>
<p class="text-sm text-gray-500">Every major component comes from passionate open-source communities. Their work enables independent developers to build infrastructure that would have required an entire operations team just a few years ago.</p>
</div>
</div>
</div>
</section>
<!-- FINAL THOUGHTS -->
<section class="py-16 lg:py-20 bg-gradient-to-br from-orange-50 via-white to-orange-50/80">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white border border-orange-200 rounded-3xl p-8 sm:p-12 shadow-sm">
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
<span class="text-brand-700 text-xs font-medium tracking-wide">Final Thoughts</span>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Final <span class="gradient-text">Thoughts</span></h2>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto mb-4">
People often ask what cloud platform I use. The answer surprises them.
</p>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto mb-4">
There isn't one. Instead, I built a small, focused Platform as a Service tailored specifically to my workflow.
</p>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto mb-4">
It isn't the biggest. It isn't the most complicated. It certainly isn't the most expensive.
</p>
<p class="text-gray-600 leading-relaxed max-w-2xl mx-auto">
But it quietly hosts more than thirty production demo applications, supports smooth CI/CD deployments, minimizes operational overhead, and lets me concentrate on building software instead of maintaining infrastructure.
</p>
<blockquote class="border-l-4 border-brand-400 bg-orange-50/50 rounded-lg pl-5 pr-4 py-3 my-6 max-w-xl mx-auto">
<p class="text-base text-gray-700 font-semibold italic leading-relaxed">
&ldquo;Sometimes, the best engineering solution isn't the most sophisticated one. It's the one that stays out of your way and lets you keep creating.&rdquo;
</p>
</blockquote>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1"><a href="index.html" class="flex items-center gap-2 mb-3"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-6 w-auto" /></a><p class="text-xs text-gray-500 leading-relaxed">Enterprise .NET 10 & Blazor complete source code. Back End + Front End in one VSA monolith. Thank you for your support.</p></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Products</h5><ul class="space-y-2"><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">CRM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">CMS</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">HRM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">SCM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">WMS</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Resources</h5><ul class="space-y-2"><li><a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="text-sm text-gray-500 hover:text-brand-500">GitHub</a></li><li><a href="blog.html" class="text-sm text-gray-500 hover:text-brand-500">Blog</a></li><li><a href="support.html" class="text-sm text-gray-500 hover:text-brand-500">Support</a></li><li><a href="my-paas-arsenal.html" class="text-sm text-brand-600 hover:text-brand-500 font-medium">My PaaS Arsenal</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Company</h5><ul class="space-y-2"><li><a href="about-the-developer.html" class="text-sm text-gray-500 hover:text-brand-500">About the Developer</a></li><li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-brand-500">Privacy</a></li><li><a href="no-refund-policy.html" class="text-sm text-gray-500 hover:text-brand-500">No Refund</a></li><li><a href="license.html" class="text-sm text-gray-500 hover:text-brand-500">License</a></li><li><a href="mailto:hi@indotalent.com" class="text-sm text-gray-500 hover:text-brand-500">Contact</a></li></ul></div>
</div>
<div class="border-t border-gray-200 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div>
</div>
</footer>
<!-- FAB Back to Top -->
<a href="#" class="fab-back-to-top" id="backToTop" title="Back to top">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
</a>
<script>
document.addEventListener('DOMContentLoaded',function(){
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo('#heroContent',{autoAlpha:0,y:40},{autoAlpha:1,y:0,duration:.8});
// Animate tool cards on scroll
document.querySelectorAll('.tool-card').forEach(card => {
gsap.fromTo(card,{autoAlpha:0,y:30},{autoAlpha:1,y:0,duration:.6,scrollTrigger:{trigger:card,start:'top 85%'}});
});
// Back to top FAB
const fab=document.getElementById('backToTop');
window.addEventListener('scroll',function(){
if(window.scrollY>500)fab.classList.add('visible');else fab.classList.remove('visible');
});
fab.addEventListener('click',function(e){e.preventDefault();window.scrollTo({top:0,behavior:'smooth'})});
});
</script>
</body>
</html>