{{ pengaturan.logo || 'P' }} {{ pengaturan.namaWebsite || 'Portfolio' }}
Start a project
Available for selected projects GSAP · Three.js · Lenis experience

{{ hero.nama || 'Digital' }} {{ hero.role || 'Engineer' }}

{{ hero.headline || 'Designing systems that move businesses forward.' }}

{{ hero.deskripsi || 'I turn complex product ideas into clear, scalable, and high-performing digital experiences.' }}

Explore selected work Discuss a project
{{ allClientProjects.length }} Visible projects ready to browse.
{{ clientSkills.data?.length || 0 }} Core capabilities mapped into the stack.
{{ clientLayanan.data?.length || 0 }} Service tracks from concept to deployment.
{{ skill.nama }}
Realtime canvas / Three.js
{{ item }}
Featured build {{ featuredClientProject()?.judul || 'Product engineering' }} {{ featuredClientProject()?.kategori || 'Immersive digital product' }}
Scroll to explore
System architecture

Motion, depth, and smoothness now have clear jobs.

GSAP menangani choreography antar section, Three.js dipakai untuk hero canvas yang membangun identitas visual, dan Lenis mengontrol scroll agar transisi anchor, reveal, dan scrub terasa konsisten di seluruh landing page.

GSAP

Narrative motion

Reveal, parallax, dan scroll-driven composition mengarahkan fokus ke section yang paling penting.

Three.js

Interactive hero surface

Canvas hero memberi depth visual dan respon pointer tanpa mengganggu keterbacaan konten utama.

Lenis

Controlled flow

Smooth scrolling menjaga perpindahan antar anchor dan scrub animation tetap stabil dan terasa premium.

{{ skill.nama }}
01 / ABOUT

Engineering with clarity and intent.

{{ profil.deskripsi || 'I combine product thinking, technical depth, and thoughtful execution to create digital systems that are useful, reliable, and built to last.' }}

Motion

GSAP for hierarchy

Digunakan untuk intro timeline, scroll reveal, parallax, dan ritme antar block agar page terasa hidup tapi tetap fokus.

Depth

Three.js for immersion

Diposisikan hanya di hero supaya depth visual kuat di first impression, tanpa membebani section konten lain.

Flow

Lenis for continuity

Menyatukan smooth anchor navigation, scrub animation, dan perubahan section jadi satu pengalaman yang konsisten.

Core expertise

{{ item }} Full-stack engineering

Technology focus

{{ item }} Scalable web products
02 / Selected work

Products built to perform.

Semua proyek publik sekarang tersedia penuh di landing page. Spotlight dipakai untuk proyek utama, lalu archive grid menampilkan keseluruhan katalog yang bisa dicari dan dipaginasi di client-side.

01 / Spotlight Featured
{{ featuredClientProject()?.kategori || 'Digital product' }}

{{ featuredClientProject()?.judul || 'Flagship delivery' }}

{{ featuredClientProject()?.deskripsiLengkap || featuredClientProject()?.deskripsiSingkat || 'A detailed case study is available for this project.' }}

{{ technology }}
Live project Source
{{ clientProjects.total || 0 }} visible projects Filter: “{{ projectQuery.search }}”
{{ projectVisualIndex(index) }} {{ project.kategori || 'Digital product' }}

{{ project.judul }}

{{ project.deskripsiSingkat || 'Project summary is not yet available.' }}

{{ technology }}
Live Source
No projects match your search.
03 / Capabilities

Tools are only as good as the thinking.

Technical fluency across the stack, applied according to product constraints rather than trends.

{{ String(index + 1).padStart(2, '0') }} {{ skill.tingkat }}%

{{ skill.nama }}

04 / Journey

Experience in motion.

A record of roles, responsibilities, and the systems delivered along the way.

{{ String(index + 1).padStart(2, '0') }}

{{ experience.posisi }}

{{ experience.perusahaan }}

{{ experience.periode }}

{{ experience.tanggungJawab }}

05 / Services

From ambiguity to shipped product.

Focused engineering services for teams that value robust systems, clear decisions, and measurable outcomes.

0{{ index + 1 }}

{{ service.nama }}

{{ service.deskripsi }}

06 / Trust

What collaboration feels like.

Perspectives from people and teams who have shared the process.

“
{{ testimonial.review }}
{{ testimonial.nama }} {{ testimonial.perusahaan }}
07 / Notes

Ideas, lessons, and technical notes.

Short observations from building products and engineering systems in the real world.

{{ article.tanggal }} 0{{ index + 1 }}

{{ article.judul }}

{{ article.konten ? article.konten.substring(0, 155) + '…' : '' }}

08 / Start a conversation

Have a product worth building?

Share the context, constraints, and outcome you need. I will respond with clear next steps.

{{ kontak.email }} {{ kontak.lokasi }}
Validating session...

{{ activeMenu }}

Content Overview
Project Growth
Cumulative Views
Write one expertise per line for a cleaner landing-page layout.
Write one technology or category per line.
Skill Name Level (%) Status Actions
{{ s.nama }} {{ s.tingkat }}% {{ s.statusTampil ? 'Visible' : 'Hidden' }}
Order Thumbnail Title Category Status Featured Actions
{{ p.urutan }} {{ p.judul }} {{ p.kategori }} {{ p.statusTampil ? 'Visible' : 'Hidden' }} Yes-
Position Company Period Status Actions
{{ e.posisi }} {{ e.perusahaan }} {{ e.periode }} {{ e.statusTampil ? 'Visible' : 'Hidden' }}
Service Name Description Status Actions
{{ l.nama }} {{ l.deskripsi }} {{ l.statusTampil ? 'Visible' : 'Hidden' }}
Client Name Company Review Status Actions
{{ t.nama }} {{ t.perusahaan }} {{ t.review }} {{ t.statusTampil ? 'Visible' : 'Hidden' }}
Date Title Status Actions
{{ a.tanggal }} {{ a.judul }} {{ a.statusTampil ? 'Visible' : 'Hidden' }}
Sender Message Received Status Actions
{{ message.nama }}
{{ message.email }}
{{ message.pesan }}
 {{ formatMessageDate(message.createdAt) }} {{ message.status === 'baru' ? 'Unread' : 'Read' }}
No messages found.
Landing Page Sections

Choose which sections are visible. Hidden content remains saved in the CMS.

Change Admin Password
Minimum 8 characters.