Introduction: From 2017 to 2025
My final portfolio replace was in 2017. Within the eight years since, the net panorama has undergone a sea change. In 2025, as I transitioned my profession right into a devoted design studio, I wished my new web site to be greater than a gallery—it wanted to be an excavation of my roots.
As a substitute of following fashionable 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, every part was constructed from pixels. To me, the pixel is the final word “Atom” in Atomic Design. A single pixel represents a binary state, however when grouped, these atoms create a fancy, scalable design system.
Visible & Interactive Language
To finish the immersion, I centered on three pillars of retro-interaction:
The “Pixel Masks”:
As a substitute of recent fades or slides, I carried out 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 basic 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 looking 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 by way of .cursorrules
Within the period of “Vibe Coding,” the most important problem is sustaining design integrity whereas shifting at AI pace. To forestall the AI from “hallucinating” kinds or creating technical debt, I established a Design Structure by way of 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 vital 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 gained’t hallucinate #39FF14; it would 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 current reference?” This ensures the design system stays the one supply of fact.
# NOEINOI 2025 Challenge Guidelines
You might be an knowledgeable front-end developer and inventive coder helping Harry Design Studio. This challenge is a private portfolio with a "8-bit/Pixel" retro aesthetic, utilizing React, SCSS, GSAP, and Three.js.
## Common Directions
- Observe the "Part-First" (Lego Technique) 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 items for styling.
- **MANDATORY REFERENCE**: You could all the time check with `harryds/src/kinds/tokens.scss` earlier than producing SCSS.
- **VERIFICATION PROTOCOL**:
1. Earlier than outputting any styling (SCSS/Inline), you will 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 current one?"
## Tech Stack & Visible Fashion
- **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 photos. Use `PixelText` for headers and CTAs.
- **Accessibility (A11y)**: Keep readability. Pixel fonts are for headers/CTAs solely. Use commonplace system fonts for physique textual content and CJK (Chinese language/Japanese) characters.
## Part 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 property (Giphy, movies).
- Use `IntersectionObserver` to pause Canvas animations when off-screen.
- Restrict DPR to 1.5x on cell to make sure 60 FPS.
Atomic Meeting (The Lego Technique)
Following the “Lego Technique,” we constructed and verified each atomic part (PixelText, Button, Icon) in Storybook earlier than they ever touched the primary product interface. This ensured that 90% of visible bugs have been caught on the “brick” degree.
Efficiency-Conscious Pixel Artwork
Attaining a retro 8-bit look with out sacrificing fashionable efficiency required deep optimization of Canvas and WebGL.
Canvas Pixelation Supervisor (The Singleton Sample)
To deal with a number of pixelated photos concurrently, I carried out a Singleton PixelationManager. It makes use of an Offscreen Canvas to pattern and downscale photos earlier than rendering them again to the primary canvas with imageSmoothingEnabled = false. This avoids costly CPU calculations on each body.
class PixelationManager {
personal static occasion: PixelationManager;
personal offscreenCanvas: HTMLCanvasElement;
personal offscreenCtx: CanvasRenderingContext2D;
personal constructor() {
// Create a shared offscreen canvas to keep away from redundant canvas creation
// throughout a number of cases, considerably lowering reminiscence stress.
this.offscreenCanvas = doc.createElement('canvas');
this.offscreenCtx = this.offscreenCanvas.getContext('2nd', { willReadFrequently: false });
}
personal 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 realize the crisp "pixelated" look.
this.offscreenCtx.imageSmoothingEnabled = false;
this.offscreenCtx.drawImage(picture, 0, 0, blocksX, blocksY);
// Upscale the sampled pixel blocks again to the primary 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 carried out Adaptive High quality logic that dynamically lowers the render decision throughout high-intensity scroll moments, sustaining a constant 60 FPS on cell gadgets.
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 stop 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 by way of 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 property.
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 change the displayed body
// of the HarryAnimation part.
setRotationFrame(currentFrame);
}
}
});UX & Accessibility in a Lo-Fi World
Retro aesthetics typically battle with fashionable usability. Right here is how we balanced the “Vibe” with UX:
Sensible 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 consumer’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 commonplace clear typefaces to keep away from the legibility points frequent with pixelated advanced characters.
Mitigating Code Redundancy: The “Lego Technique” of Meeting
One of many inherent pitfalls of AI-assisted improvement is the era 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 current elements fairly than producing repetitive code. This not solely ensured a cleaner, extra maintainable codebase but additionally 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 information 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 eradicate handbook information entry. I constructed an automatic pipeline the place native JSON information is processed by AI for multi-language translation after which synced on to Strapi CMS by way of 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 cell.
– 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 strains of code we write, however by the intent we outline. On this planet of ‘Vibe Coding,’ AI could present the pace, however solely people can present the soul. The true creator is not the one who swings the hammer, however the one who goals of the structure and units the foundations that convey it to life.
