33< head >
44 < meta charset ="UTF-8 ">
55 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < title > PIXELS — Digital Craft Studio</ title >
7- < meta name ="description " content ="Pixels — independent digital craft. Design, code and motion, built with precision .>
6+ < title > spixelsDev — Web & Motion Studio</ title >
7+ < meta name ="description " content ="spixelsDev — independent digital craft. High-performance web, interactive motion, and AI agent infrastructure .>
88 < meta name ="theme-color " content ="#0a0a0b ">
99 < link rel ="preconnect " href ="https://fonts.googleapis.com ">
1010 < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
1111 < link href ="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Space+Mono:wght@400;700&display=swap " rel ="stylesheet ">
1212 < link rel ="stylesheet " href ="css/style.css ">
13- < link rel ="icon " href ="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%230a0a0b'/><rect x='30 ' y='30 ' width='40 ' height='40' fill='%23d9ff4b '/></svg> ">
13+ < link rel ="icon " href ="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%230a0a0b'/><rect x='25 ' y='25 ' width='50 ' height='50' rx='10' fill='%23c6ff3a '/></svg> ">
1414</ head >
1515< body >
1616
1717 <!-- Preloader -->
1818 < div class ="loader " id ="loader " aria-hidden ="true ">
1919 < div class ="loader__inner ">
2020 < span class ="loader__count " id ="loaderCount "> 00</ span >
21- < span class ="loader__label "> PIXELS · LOADING </ span >
21+ < span class ="loader__label "> SPIXELS · INITIALIZING </ span >
2222 </ div >
2323 < div class ="loader__bar "> < span id ="loaderBar "> </ span > </ div >
2424 </ div >
4040
4141 <!-- Nav -->
4242 < header class ="nav " id ="nav ">
43- < a href ="#top " class ="nav__logo " data-hover > PIXELS < sup > ®</ sup > </ a >
43+ < a href ="#top " class ="nav__logo " data-hover > spixelsDev < sup > ®</ sup > </ a >
4444 < nav class ="nav__links ">
4545 < a href ="#work " data-hover > < span class ="nav__idx "> 01</ span > Work</ a >
4646 < a href ="#studio " data-hover > < span class ="nav__idx "> 02</ span > Studio</ a >
5757 <!-- Hero -->
5858 < section class ="hero ">
5959 < div class ="hero__meta reveal ">
60- < span > DIGITAL CRAFT STUDIO</ span >
61- < span > EST. 2019 — JAKARTA / REMOTE</ span >
60+ < span > WEB, MOTION & AI AGENT STUDIO</ span >
61+ < span > BOGOR, ID / REMOTE</ span >
6262 </ div >
6363
64- < h1 class ="hero__title " aria-label ="Design in motion>
65- < span class ="line "> < span class ="line__inner "> DESIGN </ span > </ span >
64+ < h1 class ="hero__title " aria-label ="Crafted in motion>
65+ < span class ="line "> < span class ="line__inner "> DIGITAL </ span > </ span >
6666 < span class ="line line--indent "> < span class ="line__inner "> IN < em > MOTION</ em > </ span > </ span >
6767 </ h1 >
6868
6969 < div class ="hero__foot ">
7070 < p class ="hero__desc reveal ">
71- Independent studio crafting precise interfaces,
72- identities and interactive experiences —
73- engineered to feel effortless.
71+ Studio independen yang membangun website berperforma tinggi,
72+ desain motion interaktif, serta infrastruktur Agen AI modern — presisi, cepat, dan terukur.
7473 </ p >
7574 < a href ="#work " class ="hero__cta reveal " data-hover data-magnetic >
7675 < span class ="hero__cta-ring "> </ span >
@@ -82,10 +81,10 @@ <h1 class="hero__title" aria-label="Design in motion">
8281 <!-- Marquee -->
8382 < div class ="marquee " aria-hidden ="true ">
8483 < div class ="marquee__track " id ="marquee ">
85- < span > INTERFACE · IDENTITY · MOTION · CODE · </ span >
86- < span > INTERFACE · IDENTITY · MOTION · CODE · </ span >
87- < span > INTERFACE · IDENTITY · MOTION · CODE · </ span >
88- < span > INTERFACE · IDENTITY · MOTION · CODE · </ span >
84+ < span > WEB DEVELOPMENT · GSAP MOTION · AI AGENT · POS SYSTEM · </ span >
85+ < span > WEB DEVELOPMENT · GSAP MOTION · AI AGENT · POS SYSTEM · </ span >
86+ < span > WEB DEVELOPMENT · GSAP MOTION · AI AGENT · POS SYSTEM · </ span >
87+ < span > WEB DEVELOPMENT · GSAP MOTION · AI AGENT · POS SYSTEM · </ span >
8988 </ div >
9089 </ div >
9190
@@ -96,23 +95,23 @@ <h1 class="hero__title" aria-label="Design in motion">
9695 < span class ="section-head__label "> STUDIO</ span >
9796 </ div >
9897 < p class ="manifesto__text ">
99- < span class ="reveal-line "> < span > We believe good software is quiet .</ span > </ span >
100- < span class ="reveal-line "> < span > No noise, no clutter — every pixel earns </ span > </ span >
101- < span class ="reveal-line "> < span > its place, every motion has a reason .</ span > </ span >
102- < span class ="reveal-line "> < span > We build fast, we build precise .</ span > </ span >
98+ < span class ="reveal-line "> < span > Kami percaya kode terbaik adalah yang efisien .</ span > </ span >
99+ < span class ="reveal-line "> < span > Tanpa distraksi, tanpa bloatware — setiap pixel</ span > </ span >
100+ < span class ="reveal-line "> < span > memiliki fungsi, setiap motion memiliki tujuan .</ span > </ span >
101+ < span class ="reveal-line "> < span > Cepat, presisi, dan siap menghasilkan konversi .</ span > </ span >
103102 </ p >
104103 < div class ="manifesto__stats ">
105104 < div class ="stat reveal " style ="--i:0 ">
106- < span class ="stat__num " data-count ="48 "> 0</ span >
107- < span class ="stat__label "> PROJECTS SHIPPED </ span >
105+ < span class ="stat__num " data-count ="35 "> 0</ span >
106+ < span class ="stat__label "> PROYEK SELESAI </ span >
108107 </ div >
109108 < div class ="stat reveal " style ="--i:1 ">
110- < span class ="stat__num " data-count ="7 "> 0</ span >
111- < span class ="stat__label "> YEARS OF CRAFT </ span >
109+ < span class ="stat__num " data-count ="100 "> 0</ span >
110+ < span class ="stat__label "> LIGHTHOUSE SCORE </ span >
112111 </ div >
113112 < div class ="stat reveal " style ="--i:2 ">
114113 < span class ="stat__num " data-count ="120 "> 0</ span >
115- < span class ="stat__label "> FPS, ALWAYS </ span >
114+ < span class ="stat__label "> FPS FLUID MOTION </ span >
116115 </ div >
117116 </ div >
118117 </ section >
@@ -121,45 +120,53 @@ <h1 class="hero__title" aria-label="Design in motion">
121120 < section class ="work " id ="work ">
122121 < div class ="section-head reveal ">
123122 < span class ="section-head__idx "> 01</ span >
124- < span class ="section-head__label "> SELECTED WORK </ span >
123+ < span class ="section-head__label "> PORTFOLIO PILIHAN </ span >
125124 </ div >
126125
127126 < ul class ="work__list ">
128- < li class ="work__item reveal " data-hover style ="--hue:72 ">
129- < span class ="work__num "> 001</ span >
130- < div class ="work__body ">
131- < h2 class ="work__name "> Nusantara Pay</ h2 >
132- < p class ="work__tags "> FINTECH · PRODUCT DESIGN · 2025</ p >
133- </ div >
134- < span class ="work__arrow "> →</ span >
135- < span class ="work__disc " aria-hidden ="true "> </ span >
127+ < li class ="work__item reveal " data-hover style ="--hue:25 ">
128+ < a href ="https://github.com/spixelsdev " target ="_blank " rel ="noopener noreferrer " style ="display:flex;width:100%;align-items:center;gap:inherit; ">
129+ < span class ="work__num "> 001</ span >
130+ < div class ="work__body ">
131+ < h2 class ="work__name "> Kasirku POS</ h2 >
132+ < p class ="work__tags "> UNIFIED RESTAURANT POS · QRIS SELF-ORDER · NESTJS & VUE 3 · 2026</ p >
133+ </ div >
134+ < span class ="work__arrow "> ↗</ span >
135+ < span class ="work__disc " aria-hidden ="true "> </ span >
136+ </ a >
137+ </ li >
138+ < li class ="work__item reveal " data-hover style ="--hue:75 ">
139+ < a href ="https://spixels.fun " target ="_blank " rel ="noopener noreferrer " style ="display:flex;width:100%;align-items:center;gap:inherit; ">
140+ < span class ="work__num "> 002</ span >
141+ < div class ="work__body ">
142+ < h2 class ="work__name "> spixelsDev Web</ h2 >
143+ < p class ="work__tags "> CREATIVE STUDIO SHOWCASE · ASTRO & GSAP MOTION · 2026</ p >
144+ </ div >
145+ < span class ="work__arrow "> ↗</ span >
146+ < span class ="work__disc " aria-hidden ="true "> </ span >
147+ </ a >
136148 </ li >
137149 < li class ="work__item reveal " data-hover style ="--hue:160 ">
138- < span class ="work__num "> 002</ span >
139- < div class ="work__body ">
140- < h2 class ="work__name "> Orbit Studio</ h2 >
141- < p class ="work__tags "> BRAND · WEBGL · 2025</ p >
142- </ div >
143- < span class ="work__arrow "> →</ span >
144- < span class ="work__disc " aria-hidden ="true "> </ span >
150+ < a href ="https://github.com/spixelsdev/sentul-outdoor-web " target ="_blank " rel ="noopener noreferrer " style ="display:flex;width:100%;align-items:center;gap:inherit; ">
151+ < span class ="work__num "> 003</ span >
152+ < div class ="work__body ">
153+ < h2 class ="work__name "> Sentul Outdoor</ h2 >
154+ < p class ="work__tags "> RENTAL & OUTDOOR GEAR BOOKING PLATFORM · JAVASCRIPT · 2026</ p >
155+ </ div >
156+ < span class ="work__arrow "> ↗</ span >
157+ < span class ="work__disc " aria-hidden ="true "> </ span >
158+ </ a >
145159 </ li >
146160 < li class ="work__item reveal " data-hover style ="--hue:210 ">
147- < span class ="work__num "> 003</ span >
148- < div class ="work__body ">
149- < h2 class ="work__name "> Kala Archive</ h2 >
150- < p class ="work__tags "> EDITORIAL · DEVELOPMENT · 2024</ p >
151- </ div >
152- < span class ="work__arrow "> →</ span >
153- < span class ="work__disc " aria-hidden ="true "> </ span >
154- </ li >
155- < li class ="work__item reveal " data-hover style ="--hue:20 ">
156- < span class ="work__num "> 004</ span >
157- < div class ="work__body ">
158- < h2 class ="work__name "> Signal Deck</ h2 >
159- < p class ="work__tags "> DASHBOARD · MOTION SYSTEM · 2024</ p >
160- </ div >
161- < span class ="work__arrow "> →</ span >
162- < span class ="work__disc " aria-hidden ="true "> </ span >
161+ < a href ="https://github.com/spixelsdev " target ="_blank " rel ="noopener noreferrer " style ="display:flex;width:100%;align-items:center;gap:inherit; ">
162+ < span class ="work__num "> 004</ span >
163+ < div class ="work__body ">
164+ < h2 class ="work__name "> OpenViking Memory Hub</ h2 >
165+ < p class ="work__tags "> AI AGENT CONTEXT DB & RAG INFRASTRUCTURE · PYTHON & NODE · 2026</ p >
166+ </ div >
167+ < span class ="work__arrow "> ↗</ span >
168+ < span class ="work__disc " aria-hidden ="true "> </ span >
169+ </ a >
163170 </ li >
164171 </ ul >
165172 </ section >
@@ -168,28 +175,28 @@ <h2 class="work__name">Signal Deck</h2>
168175 < section class ="caps ">
169176 < div class ="section-head reveal ">
170177 < span class ="section-head__idx "> 03</ span >
171- < span class ="section-head__label "> CAPABILITIES </ span >
178+ < span class ="section-head__label "> LAYANAN & KEAHLIAN </ span >
172179 </ div >
173180 < div class ="caps__grid ">
174181 < div class ="cap reveal " style ="--i:0 ">
175182 < span class ="cap__idx "> A</ span >
176- < h3 > Interface Design </ h3 >
177- < p > Systems-first product design. Typography, spacing and hierarchy tuned until it disappears .</ p >
183+ < h3 > Website & Landing Page </ h3 >
184+ < p > Landing page konversi tinggi dan company profile modern dengan struktur SEO optimal dan kecepatan maksimal .</ p >
178185 </ div >
179186 < div class ="cap reveal " style ="--i:1 ">
180187 < span class ="cap__idx "> B</ span >
181- < h3 > Creative Development </ h3 >
182- < p > Hand-written front-ends. No bloat, no template — sixty to one-twenty frames, every second .</ p >
188+ < h3 > Infrastruktur Agen AI </ h3 >
189+ < p > Setup bot otomatis WhatsApp, basis pengetahuan RAG, dan integrasi backend di VPS Cloud terkelola .</ p >
183190 </ div >
184191 < div class ="cap reveal " style ="--i:2 ">
185192 < span class ="cap__idx "> C</ span >
186- < h3 > Motion & Interaction </ h3 >
187- < p > Choreographed micro-interactions that guide the eye and make software feel alive .</ p >
193+ < h3 > Motion & Interaktivitas </ h3 >
194+ < p > Animasi GSAP dan mikro-interaksi responsif 60–120 FPS tanpa lag dan zero-CLS .</ p >
188195 </ div >
189196 < div class ="cap reveal " style ="--i:3 ">
190197 < span class ="cap__idx "> D</ span >
191- < h3 > Identity </ h3 >
192- < p > Sharp, reduced visual languages that survive beyond trends .</ p >
198+ < h3 > Sistem POS & Aplikasi Web </ h3 >
199+ < p > Aplikasi web terpadu dengan integrasi pembayaran QRIS dinamis dan arsitektur modular teruji .</ p >
193200 </ div >
194201 </ div >
195202 </ section >
@@ -198,23 +205,27 @@ <h3>Identity</h3>
198205 < section class ="contact " id ="contact ">
199206 < div class ="section-head reveal ">
200207 < span class ="section-head__idx "> 04</ span >
201- < span class ="section-head__label "> CONTACT </ span >
208+ < span class ="section-head__label "> HUBUNGI KAMI </ span >
202209 </ div >
203- < a href ="mailto:hello@pixels.studio " class ="contact__big " data-hover data-magnetic >
204- < span class ="line "> < span class ="line__inner reveal-big "> LET'S </ span > </ span >
205- < span class ="line "> < span class ="line__inner reveal-big "> TALK < em > ↗</ em > </ span > </ span >
210+ < a href ="https://wa.me/6285157965588 " target =" _blank " rel =" noopener noreferrer " class ="contact__big " data-hover data-magnetic >
211+ < span class ="line "> < span class ="line__inner reveal-big "> MULAI </ span > </ span >
212+ < span class ="line "> < span class ="line__inner reveal-big "> PROYEK < em > ↗</ em > </ span > </ span >
206213 </ a >
207- < p class ="contact__mail reveal "> hello@pixels.studio</ p >
214+ < p class ="contact__mail reveal ">
215+ < a href ="mailto:yhogieisk66@gmail.com " class ="hover:underline "> yhogieisk66@gmail.com</ a > •
216+ < a href ="https://wa.me/6285157965588 " target ="_blank " class ="hover:underline "> +62 851-5796-5588</ a >
217+ </ p >
208218 </ section >
209219
210220 </ main >
211221
212222 < footer class ="footer ">
213- < span > © 2026 PIXELS </ span >
214- < span > JAKARTA — < span id ="clockFoot "> --:--</ span > WIB</ span >
215- < a href ="#top " data-hover > BACK TO TOP ↑</ a >
223+ < span > © 2026 spixelsDev • Bogor, ID </ span >
224+ < span > WAKTU — < span id ="clockFoot "> --:--</ span > WIB</ span >
225+ < a href ="#top " data-hover > KEMBALI KE ATAS ↑</ a >
216226 </ footer >
217227
218228 < script src ="js/main.js " defer > </ script >
219229</ body >
220230</ html >
231+
0 commit comments