Membangun alam semesta 8-bit yang penuh nostalgia dengan teknologi modern: Vibe Coding Journey – Beragampengetahuan

Pendahuluan: 2017 hingga 2025

Terakhir kali saya memperbarui portofolio saya adalah pada tahun 2017. Dalam delapan tahun sejak itu, lanskap jaringan telah mengalami perubahan yang luar biasa. Saat saya mentransisikan karier saya ke studio desain khusus pada tahun 2025, saya ingin situs web baru saya menjadi lebih dari sekadar galeri, namun akan menyentuh asal usul saya.

Alih-alih mengikuti desain modern, saya kembali ke tahun 1980an: era NES, Gameboy, dan dunia biner 0 dan 1. Inilah cara saya menggunakannya 95% alur kerja didukung AIdiatur oleh “konstitusi desain” yang ketat.

Konsep: Piksel sebagai Sistem Desain

Pada tahun 1980-an, semuanya dibuat dari piksel. Bagi saya, piksel adalah atom tertinggi desain atom. Satu piksel mewakili keadaan biner, namun ketika dikelompokkan, atom-atom ini menciptakan sistem desain yang kompleks dan dapat diskalakan.

bahasa visual dan interaktif

Untuk melengkapi pemahaman ini, saya fokus pada tiga pilar interaksi retro:

“Topeng Piksel”:
Alih-alih fade atau slideshow modern, saya menerapkan transisi “pixel mask” khusus untuk modalnya, yang mengacu pada perubahan adegan dalam game 8-bit.

// Part of TransitionOverlay.tsx

// 4x4 Bayer Dithering Matrix (Normalized 0..1)
// This matrix determines which "sub-pixels" are drawn based on the alpha threshold,
// creating a classic retro-ordered dithering effect.
const bayer4x4 = [
  [0, 8, 2, 10],
  [12, 4, 14, 6],
  [3, 11, 1, 9],
  [15, 7, 13, 5]
].map(row => row.map(v => (v + 0.5) / 16));

// Inside the render loop:
const pixelSize = 60; // Size of each 8-bit "block"
const cell = pixelSize / 4; // Each block is subdivided by the 4x4 matrix

for (let ry = 0; ry < 4; ry++) 
  for (let rx = 0; rx < 4; rx++) 
    // If the pixel's alpha is greater than the matrix value, draw the sub-pixel
    if (alpha > bayer4x4[ry][rx]) 
      ctx.fillStyle = color;
      ctx.fillRect(
        x + rx * cell, 
        y + ry * cell, 
        Math.ceil(cell), 
        Math.ceil(cell)
      );
    
  

Umpan balik pendengaran:
Setiap interaksi dipasangkan dengan suara 8-bit yang disintesis, mengubah sesi penelusuran standar menjadi pengalaman “permainan”.

Inspirasi antik:
Desainnya banyak memanfaatkan panel LED era Showa dan iklan kuno Jepang dari koleksi arsip, memadukan estetika abad ke-20 dengan kode abad ke-21.

Konstitusi Kecerdasan Buatan: Diprogram dengan Niat .cursorrules

Di era “Vibe Coding”, tantangan terbesarnya adalah menjaga integritas desain sambil bergerak dengan kecepatan kecerdasan buatan. Untuk mencegah AI dari gaya “berhalusinasi” atau menciptakan hutang teknis, saya membangun a merancang konstitusi melalui a .cursorrules dokumen. Ini bukan sekedar petunjuk; ini adalah serangkaian batasan keras yang mengatur proses pengambilan keputusan AI.

Protokol kueri proaktif (tidak perlu menebak-nebak)

Aturan paling krusial dalam Konstitusi adalah Protokol verifikasi. Saya dengan tegas melarang AI melakukan hardcoding pada kode hex atau nilai piksel mentah apa pun.

aturan: “Jika tidak ada token desain yang cocok tokens.scssmelarang tebakan Anda. Anda harus berhenti dan meminta izin. “

Hal ini mengubah AI dari “pembuat kode” menjadi “petugas kepatuhan”. Ia tidak akan berhalusinasi jika memerlukan rona hijau neon tertentu yang tidak terdefinisi #39FF14;Ini akan menghentikan alur kerja dan bertanya: “Saya tidak dapat menemukan marker yang cocok untuk warna highlight ini. Haruskah saya membuat marker baru atau menggunakan referensi yang sudah ada?” Hal ini memastikan bahwa sistem desain tetap menjadi satu-satunya sumber kebenaran.

# NOEINOI 2025 Project Rules

You are an expert front-end developer and creative coder assisting Harry Design Studio. This project is a personal portfolio with a "8-bit/Pixel" retro aesthetic, using React, SCSS, GSAP, and Three.js.

## General Instructions
- Follow the "Component-First" (Lego Method) workflow: build/verify atomic components in Storybook (`harryds`) before assembling them into the portfolio interfaces.

## Strict Design Token System
- **NO HARDCODED VALUES**: You are strictly forbidden from using hex codes, raw pixel values, or raw rem units for styling.
- **MANDATORY REFERENCE**: You must always refer to `harryds/src/styles/tokens.scss` before generating SCSS.
- **VERIFICATION PROTOCOL**: 
  1. Before outputting any styling (SCSS/Inline), you must SCAN `tokens.scss` for the closest semantic match.
  2. If no match exists, you ARE FORBIDDEN from guessing or using a raw value.
  3. You MUST stop and ask: "ISSUE: I cannot find a suitable Design Token for [Value/Requirement] in tokens.scss. Should I create a new token or use an existing one?"

## Tech Stack & Visual Style
- **Visuals**: Prioritize Canvas and WebGL (Three.js) for pixelation and distortion effects. Use GSAP for all scroll-triggered and timeline animations.
- **8-bit Aesthetic**: Use `PixelationImg` and `DistortedPixels` components for images. Use `PixelText` for headers and CTAs.
- **Accessibility (A11y)**: Maintain readability. Pixel fonts are for headers/CTAs only. Use standard system fonts for body text and CJK (Chinese/Japanese) characters.

## Component Structure
- Every component folder must include:
  - `ComponentName.tsx` (React)
  - `ComponentName.scss` (SCSS with @import url('../tokens.css');)
  - `ComponentName.stories.tsx` (Storybook)
  - `index.ts` (Export)
- All styles must use `var(--hds-sys-...)` or `var(--hds-ref-...)`.

## Performance
- Use `useSmartPreload` for heavy assets (Giphy, videos).
- Use `IntersectionObserver` to pause Canvas animations when off-screen.
- Limit DPR to 1.5x on mobile to ensure 60 FPS.

Perakitan Atom (Metode Lego)

Mengikuti “metode LEGO”, kami membuat dan memvalidasi setiap komponen atom dalam Buku Cerita (teks piksel, tombol, ikon) sebelum menyentuh antarmuka produk utama. Hal ini memastikan bahwa 90% kesalahan visual ditangkap pada tingkat “bata”.

Seni piksel yang sadar kinerja

Untuk mencapai tampilan retro 8-bit tanpa mengorbankan kinerja modern memerlukan pengoptimalan Canvas dan WebGL yang mendalam.

Manajer pikselasi kanvas (mode tunggal)

Untuk memproses beberapa gambar piksel secara bersamaan, saya menerapkan lajang PixelationManager. itu menggunakan a di luar layar kanvas Mengambil sampel dan memperkecil ukuran gambar sebelum merendernya kembali ke kanvas utama imageSmoothingEnabled = false. Hal ini menghindari perhitungan CPU yang mahal pada setiap frame.

class PixelationManager 
  private static instance: PixelationManager;
  private offscreenCanvas: HTMLCanvasElement;
  private offscreenCtx: CanvasRenderingContext2D;

  private constructor() 
    // Create a shared offscreen canvas to avoid redundant canvas creation 
    // across multiple instances, significantly reducing memory pressure.
    this.offscreenCanvas = document.createElement('canvas');
    this.offscreenCtx = this.offscreenCanvas.getContext('2d',  willReadFrequently: false );
  

  private drawInstance(instance: PixelationInstance): void 
    const  canvas, image, currentPixelSize  = instance;
    const ctx = canvas.getContext('2d');
    
    // Core Logic: Downscale the source image to the offscreen canvas (Sampling).
    const blocksX = Math.max(1, Math.floor(targetW / currentPixelSize));
    const blocksY = Math.max(1, Math.floor(targetH / currentPixelSize));
    
    this.offscreenCanvas.width = blocksX;
    this.offscreenCanvas.height = blocksY;
    
    // Disable smoothing to achieve the crisp "pixelated" look.
    this.offscreenCtx.imageSmoothingEnabled = false;
    this.offscreenCtx.drawImage(image, 0, 0, blocksX, blocksY);

    // Upscale the sampled pixel blocks back to the main display canvas.
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(
      this.offscreenCanvas, 
      0, 0, blocksX, blocksY, 
      offsetX, offsetY, targetW, targetH
    );
  

Distorsi WebGL reaktif

ini DistortedPixels Penggunaan komponen Shader khusus Three.js Ciptakan efek “sobek digital”. kami menerapkan kualitas adaptif Logika pengurangan resolusi rendering secara dinamis selama momen pengguliran intensitas tinggi tetap konsisten. 60 frame/detik pada perangkat seluler.

const renderLoop = useCallback(() => 
  // ... 
  // 1. Calculate current effect intensity based on scroll velocity.
  const p = maxPixelation > 0 ? currentPixelation / maxPixelation : 0;
  const d = maxDistortion > 0 ? currentDistortion / maxDistortion : 0;
  const intensity = Math.min(1, Math.max(p, d));

  // 2. Adaptive Quality: Lower the resolution scale as the effect intensity increases.
  if (adaptiveQuality && composerRef.current) 
    const minScale = 0.3; // Minimum resolution scale (30%)
    const targetScale = THREE.MathUtils.lerp(1, minScale, intensity);
    
    // Only update the pixel ratio if the change is significant (> 0.05) 
    // to prevent frequent and expensive canvas resizing.
    if (Math.abs(targetScale - currentQualityScale) > 0.05) 
      composerRef.current.setPixelRatio(window.devicePixelRatio * targetScale);
      currentQualityScale = targetScale;
    
  
  
  composerRef.current.render();
, [maxPixelation, maxDistortion, adaptiveQuality]);

orkestrasi GSAP

Setiap interaksi gulir disinkronkan melalui Pemicu gulir GSAP. Dengan memetakan kemajuan gulir ke bingkai animasi tertentu (mis. HarryAnimation Rotasi karakter), kami menciptakan pengalaman seperti 3D hanya dengan menggunakan sumber daya piksel 2D yang ringan.

gsap.to(visualElement, 
  x: '-50vw',
  scrollTrigger: 
    trigger: introSection,
    start: 'bottom 50%',
    scrub: true,
    onUpdate: (self) => 
      // Key: Map the normalized scroll progress (0 to 1) 
      // to the specific animation frames (Frame 1 to 8).
      const progress = self.progress;
      const currentFrame = Math.round(1 + progress * 7); 
      
      // Update the React state to switch the displayed frame 
      // of the HarryAnimation component.
      setRotationFrame(currentFrame);
    
  
);

Pengalaman pengguna dan aksesibilitas di dunia Lo-Fi

Estetika retro sering kali berbenturan dengan kegunaan modern. Inilah cara kami menyeimbangkan “getaran” dengan pengalaman pengguna:

Pramuat sumber daya cerdas: Saya membangunnya useSmartPreload Eksploitasi kait arahkan niat Mode—Tunggu 300 milidetik sebelum memicu beban. itu menggunakan AbortController Jika mouse pengguna keluar, permintaan langsung dibatalkan.

Tata letak berlapis: Font piksel hanya diperuntukkan bagi judul besar dan CTA. Untuk isi teks, kami menggunakan font sistem kontras tinggi untuk memastikan keterbacaan.

Adaptasi khusus bahasa: Meskipun bahasa Inggris menggunakan font 8-bit, Karakter CJK (Cina/Jepang). Disajikan dalam font standar yang bersih untuk menghindari masalah keterbacaan yang umum terjadi pada karakter kompleks berpiksel.

Mengurangi redundansi kode: Perakitan “Metode Lego”.

Salah satu kendala yang melekat pada pengembangan yang dibantu AI adalah pembuatan kode monolitik yang berlebihan. Ketika seluruh halaman perlu dibuat sekaligus, AI cenderung “menemukan kembali roda” untuk setiap bagian, yang mengakibatkan pengasapan kode yang parah. Untuk mengatasi masalah ini, saya menerapkan yang ketat Perakitan dari bawah ke atas strategi.

Saya membuat perpustakaan “bata” tanggung jawab tunggal dengan terlebih dahulu mengembangkan dan memvalidasi komponen atom di Buku Cerita. Modularitas ini memastikan bahwa ketika merakit produk akhir, AI dapat menggunakan kembali komponen yang ada daripada menghasilkan kode duplikat. Hal ini tidak hanya memastikan basis kode yang lebih bersih dan mudah dipelihara, namun juga memastikan bahwa setiap komponen mempertahankan integritas visual penuh selama transisi dari isolasi ke produksi. Di antarmuka produk, fokusnya beralih sepenuhnya ke orkestrasi datameninggalkan “penyematan piksel” di lab komponen.

Otomatisasi CMS: Saluran Konten yang Didukung AI

Selain visual front-end, saya juga mengoptimalkan alur kerja back-end untuk menghilangkan entri data manual. Saya menyiapkan saluran pipa otomatis yang bersifat lokal data JSON Terjemahan multi-bahasa diproses oleh AI dan kemudian disinkronkan langsung ke Tali CMS Melalui skrip otomatisasi khusus. Hal ini memastikan portofolio produk dapat dengan mudah diperbarui dan diakses secara global tanpa dampak pengelolaan konten tradisional.

hasil kinerja

Meskipun banyak menggunakan Canvas, WebGL, dan animasi, situs ini tetap ada Skor kinerja mercusuar sekitar 80. Kami mencapainya dengan:
– membatasi DPR menjadi 1,5 kali di ponsel.
– menggunakan pengamat persimpangan Menjeda semua animasi Canvas di luar layar.

sebagai kesimpulan

Retrospektif ini membuktikan bahwa di era AI generatif, nilai kita tidak diukur dari baris kode yang kita tulis, namun dari niat yang kita tentukan. Dalam dunia “Vibe Coding”, kecerdasan buatan bisa memberikan kecepatan, tapi hanya manusia yang bisa memberikan jiwa. Pencipta sesungguhnya bukan lagi orang yang memegang palu, tapi orang yang memimpikan bangunannya dan membuat peraturan untuk mewujudkannya.