Introduction: From 2017 to 2025
My final portfolio replace was in 2017. Within the eight years since, the online panorama has undergone a sea change. In 2025, as I transitioned my profession right into a devoted design studio, I needed my new website to be greater than a gallery—it wanted to be an excavation of my roots.
As an alternative of following trendy design, I returned to the 80s: the period of NES, Gameboy, and the binary world of 0 and 1. That is the story of how I constructed an 8-bit universe utilizing a 95% AI-driven workflow, ruled by a strict “Design Structure.”
The Idea: Pixel as a Design System
Within the 80s, all the pieces was constructed from pixels. To me, the pixel is the last word “Atom” in Atomic Design. A single pixel represents a binary state, however when grouped, these atoms create a posh, scalable design system.
Visible & Interactive Language
To finish the immersion, I centered on three pillars of retro-interaction:
The “Pixel Masks”:
As an alternative of recent fades or slides, I applied a customized “Pixel Masks” transition for Modals—a tribute to 8-bit sport scene modifications.
// A part of TransitionOverlay.tsx
// 4x4 Bayer Dithering Matrix (Normalized 0..1)
// This matrix determines which "sub-pixels" are drawn based mostly on the alpha threshold,
// making a traditional retro-ordered dithering impact.
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));
// Contained in the render loop:
const pixelSize = 60; // Dimension of every 8-bit "block"
const cell = pixelSize / 4; // Every 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 larger than the matrix worth, draw the sub-pixel
if (alpha > bayer4x4[ry][rx]) {
ctx.fillStyle = coloration;
ctx.fillRect(
x + rx * cell,
y + ry * cell,
Math.ceil(cell),
Math.ceil(cell)
);
}
}
}Auditory Suggestions:
Each interplay is paired with synthesized 8-bit sound results, turning a regular searching session right into a “play” expertise.
Retro Inspiration:
The design attracts closely from Showa-era LED boards and classic Japanese commercials present in archived collections, mixing Twentieth-century aesthetics with Twenty first-century code.
The AI Structure: Programming Intent through .cursorrules
Within the period of “Vibe Coding,” the largest problem is sustaining design integrity whereas transferring at AI pace. To forestall the AI from “hallucinating” kinds or creating technical debt, I established a Design Structure by a .cursorrules file. This isn’t only a immediate; it’s a set of exhausting constraints that govern the AI’s decision-making course of.
The Proactive Inquiry Protocol (Zero-Guessing)
Probably the most important rule within the structure is the Verification Protocol. I’ve strictly forbidden the AI from hardcoding any hex codes or uncooked pixel values.
The Rule: “If no matching Design Token exists in
tokens.scss, you ARE FORBIDDEN from guessing. You MUST cease and ask for permission.”
This transforms the AI from a “code generator” right into a “compliance officer.” If it wants a particular shade of neon inexperienced that isn’t outlined, it received’t hallucinate #39FF14; it’ll pause the workflow and ask: “I can’t discover a appropriate token for this spotlight coloration. Ought to I create a brand new one or use an present reference?” This ensures the design system stays the only supply of fact.
# NOEINOI 2025 Undertaking Guidelines
You might be an skilled front-end developer and artistic coder aiding Harry Design Studio. This mission is a private portfolio with a "8-bit/Pixel" retro aesthetic, utilizing React, SCSS, GSAP, and Three.js.
## Normal Directions
- Comply with the "Element-First" (Lego Methodology) workflow: construct/confirm atomic elements in Storybook (`harryds`) earlier than assembling them into the portfolio interfaces.
## Strict Design Token System
- **NO HARDCODED VALUES**: You might be strictly forbidden from utilizing hex codes, uncooked pixel values, or uncooked rem models for styling.
- **MANDATORY REFERENCE**: You have to at all times consult with `harryds/src/kinds/tokens.scss` earlier than producing SCSS.
- **VERIFICATION PROTOCOL**:
1. Earlier than outputting any styling (SCSS/Inline), you need to SCAN `tokens.scss` for the closest semantic match.
2. If no match exists, you ARE FORBIDDEN from guessing or utilizing a uncooked worth.
3. You MUST cease and ask: "ISSUE: I can't discover a appropriate Design Token for [Value/Requirement] in tokens.scss. Ought to I create a brand new token or use an present one?"
## Tech Stack & Visible Type
- **Visuals**: Prioritize Canvas and WebGL (Three.js) for pixelation and distortion results. Use GSAP for all scroll-triggered and timeline animations.
- **8-bit Aesthetic**: Use `PixelationImg` and `DistortedPixels` elements for pictures. Use `PixelText` for headers and CTAs.
- **Accessibility (A11y)**: Keep readability. Pixel fonts are for headers/CTAs solely. Use normal system fonts for physique textual content and CJK (Chinese language/Japanese) characters.
## Element Construction
- Each part folder should embody:
- `ComponentName.tsx` (React)
- `ComponentName.scss` (SCSS with @import url('../tokens.css');)
- `ComponentName.tales.tsx` (Storybook)
- `index.ts` (Export)
- All kinds should use `var(--hds-sys-...)` or `var(--hds-ref-...)`.
## Efficiency
- Use `useSmartPreload` for heavy belongings (Giphy, movies).
- Use `IntersectionObserver` to pause Canvas animations when off-screen.
- Restrict DPR to 1.5x on cellular to make sure 60 FPS.
Atomic Meeting (The Lego Methodology)
Following the “Lego Methodology,” we constructed and verified each atomic part (PixelText, Button, Icon) in Storybook earlier than they ever touched the principle product interface. This ensured that 90% of visible bugs had been caught on the “brick” stage.
Efficiency-Conscious Pixel Artwork
Attaining a retro 8-bit look with out sacrificing trendy efficiency required deep optimization of Canvas and WebGL.
Canvas Pixelation Supervisor (The Singleton Sample)
To deal with a number of pixelated pictures concurrently, I applied a Singleton PixelationManager. It makes use of an Offscreen Canvas to pattern and downscale pictures earlier than rendering them again to the principle canvas with imageSmoothingEnabled = false. This avoids costly CPU calculations on each body.
class PixelationManager {
non-public static occasion: PixelationManager;
non-public offscreenCanvas: HTMLCanvasElement;
non-public offscreenCtx: CanvasRenderingContext2D;
non-public constructor() {
// Create a shared offscreen canvas to keep away from redundant canvas creation
// throughout a number of situations, considerably decreasing reminiscence strain.
this.offscreenCanvas = doc.createElement('canvas');
this.offscreenCtx = this.offscreenCanvas.getContext('2nd', { willReadFrequently: false });
}
non-public drawInstance(occasion: PixelationInstance): void {
const { canvas, picture, currentPixelSize } = occasion;
const ctx = canvas.getContext('2nd');
// Core Logic: Downscale the supply picture to the offscreen canvas (Sampling).
const blocksX = Math.max(1, Math.flooring(targetW / currentPixelSize));
const blocksY = Math.max(1, Math.flooring(targetH / currentPixelSize));
this.offscreenCanvas.width = blocksX;
this.offscreenCanvas.top = blocksY;
// Disable smoothing to attain the crisp "pixelated" look.
this.offscreenCtx.imageSmoothingEnabled = false;
this.offscreenCtx.drawImage(picture, 0, 0, blocksX, blocksY);
// Upscale the sampled pixel blocks again to the principle show canvas.
ctx.imageSmoothingEnabled = false;
ctx.drawImage(
this.offscreenCanvas,
0, 0, blocksX, blocksY,
offsetX, offsetY, targetW, targetH
);
}
}Reactive WebGL Distortion
The DistortedPixels part makes use of Three.js Customized Shaders to create “digital tearing” results. We applied Adaptive High quality logic that dynamically lowers the render decision throughout high-intensity scroll moments, sustaining a constant 60 FPS on cellular units.
const renderLoop = useCallback(() => {
// ...
// 1. Calculate present impact depth based mostly on scroll velocity.
const p = maxPixelation > 0 ? currentPixelation / maxPixelation : 0;
const d = maxDistortion > 0 ? currentDistortion / maxDistortion : 0;
const depth = Math.min(1, Math.max(p, d));
// 2. Adaptive High quality: Decrease the decision scale because the impact depth will increase.
if (adaptiveQuality && composerRef.present) {
const minScale = 0.3; // Minimal decision scale (30%)
const targetScale = THREE.MathUtils.lerp(1, minScale, depth);
// Solely replace the pixel ratio if the change is important (> 0.05)
// to forestall frequent and costly canvas resizing.
if (Math.abs(targetScale - currentQualityScale) > 0.05) {
composerRef.present.setPixelRatio(window.devicePixelRatio * targetScale);
currentQualityScale = targetScale;
}
}
composerRef.present.render();
}, [maxPixelation, maxDistortion, adaptiveQuality]);GSAP Orchestration
Each scroll interplay is synchronized through GSAP ScrollTrigger. By mapping scroll progress to particular animation frames (e.g., the HarryAnimation character rotation), we created a 3D-like expertise utilizing solely light-weight 2D pixel belongings.
gsap.to(visualElement, {
x: '-50vw',
scrollTrigger: {
set off: introSection,
begin: 'backside 50%',
scrub: true,
onUpdate: (self) => {
// Key: Map the normalized scroll progress (0 to 1)
// to the particular animation frames (Body 1 to eight).
const progress = self.progress;
const currentFrame = Math.spherical(1 + progress * 7);
// Replace the React state to modify the displayed body
// of the HarryAnimation part.
setRotationFrame(currentFrame);
}
}
});UX & Accessibility in a Lo-Fi World
Retro aesthetics typically battle with trendy usability. Right here is how we balanced the “Vibe” with UX:
Good Asset Preloading: I constructed a useSmartPreload hook using a Hover Intent sample—ready 300ms earlier than triggering a load. It makes use of AbortController to cancel requests instantly if the person’s mouse leaves.
Typography Layering: Pixel fonts are strictly reserved for giant Headers and CTAs. For physique textual content, we use high-contrast system fonts to make sure readability.
Language-Particular Adaptation: Whereas English makes use of 8-bit fonts, CJK (Chinese language/Japanese) characters are rendered in normal clear typefaces to keep away from the legibility points frequent with pixelated complicated characters.
Mitigating Code Redundancy: The “Lego Methodology” of Meeting
One of many inherent pitfalls of AI-assisted improvement is the technology of redundant, monolithic code. When tasked with constructing complete pages directly, AI tends to “reinvent the wheel” for each part, resulting in extreme code bloat. To counteract this, I enforced a strict Backside-Up Meeting technique.
By growing and verifying atomic elements in Storybook first, I created a library of single-responsibility “bricks.” This modularity ensured that when it got here time to assemble the ultimate product, the AI reused present elements moderately than producing repetitive code. This not solely ensured a cleaner, extra maintainable codebase but in addition assured that the visible integrity of every part remained intact through the transition from isolation to manufacturing. Within the product interface, the main target shifted fully to knowledge orchestration, leaving the “pixel-fixing” behind within the part lab.
CMS Automation: AI-Pushed Content material Pipeline
Past the visible front-end, I optimized the backend workflow to get rid of handbook knowledge entry. I constructed an automatic pipeline the place native JSON knowledge is processed by AI for multi-language translation after which synced on to Strapi CMS through customized automated scripts. This ensures that the portfolio stays simply updatable and globally accessible with out the friction of conventional content material administration.
Efficiency Outcomes
Regardless of the heavy use of Canvas, WebGL, and animations, the location maintains a Lighthouse Efficiency rating round 80. We achieved this by:
– Limiting DPR to 1.5x on cellular.
– Utilizing IntersectionObserver to pause all off-screen Canvas animations.
Conclusion
This retrospective proved that within the age of generative AI, our worth isn’t measured by the traces of code we write, however by the intent we outline. On the earth of ‘Vibe Coding,’ AI might present the pace, however solely people can present the soul. The true creator is now not the one who swings the hammer, however the one who goals of the structure and units the foundations that deliver it to life.
