453 lines
36 KiB
HTML
453 lines
36 KiB
HTML
<!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">“</span>Generating code is not the same as designing a complete software solution.<span class="text-brand-500 text-lg leading-none ml-1">”</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) — 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 · 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">© 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">♥</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> |