Developer & Designer Utility

Component & Style Guide

An interactive blueprint directory documenting the exact typography, spacings, color palette, and structural code skeletons to keep elements consistent layout-wise.

Directory Anchors01. Colors & Accents 02. Typography & Scale 03. Interactive Buttons 04. Layout Skeletons 05. Data Ingestion JSONs

Access Guideline: Press Back above, or navigate to /reference anytime to reopen this environment guide.

01 / Palette

Color Integrity Systems

Background Cream

#F5F2EB

Primary background canvas. Warm and soft on the eyes.

Text Charcoal

#2C2A26

Primary typography, strong borders, and deep accents.

Muted Concrete

#EBE7DE

Secondary blocks, form cards, and subtle inset backing.

Stone Divider

#D6D1C7

Fine lines, hairline borders, and disabled button elements.

Sandy Gray

#A8A29E

Secondary metadata, inactive states, and placeholder elements.

02 / Typography

Type Hierarchy & Pairings

Hero Display Headingstext-6xl md:text-8xl lg:text-9xl font-serif font-normal text-[#2C2A26] tracking-tight

Quiet design.

Section Titlestext-4xl md:text-6xl font-serif font-normal text-[#2C2A26] tracking-tight

Biography & Focus

Subsections & Card Namestext-2xl md:text-3xl font-serif text-[#2C2A26] tracking-tight

Simplicity Chronos

Overlines & Meta labelstext-xs font-mono font-medium tracking-widest uppercase text-[#A8A29E]

Expertise III — Computational

Sleek Micro Footer Labelstext-[10px] md:text-xs uppercase tracking-widest font-mono text-[#5D5A53]/80

DEVELOPMENT MILESTONE PROGRESS

Body Narrative Texttext-lg font-light leading-relaxed text-[#5D5A53]

True digital-physical harmony requires custom, predictable logic, not speculative marketing campaigns. Weaving a decade of deep, pre-hype AI engineering with product craftsmanship.

03 / Interaction Components

Interactive Elements & Buttons

Circular Back Pill Button

className="group flex items-center gap-3 border border-[#2C2A26] px-5 py-2.5 rounded-full text-[10px] font-semibold uppercase tracking-widest text-[#2C2A26] hover:bg-[#2C2A26] hover:text-[#F5F2EB] transition-all duration-300 shadow-sm"

Clean Inset Block Textareas / Inputs

Aesthetic Badges & Matrix Highlights

AI & Computational FocusPhysical PrototypeBlender procedural shadersTruth-Grounded Verified

04 / Boilerplates

Section Layout Blueprint

Use this simple boilerplate structure to add extra portfolio sections or research details with beautiful boundaries.

{/* Section Layout Skeleton */}
<section id="custom-grid" className="py-24 border-t border-[#D6D1C7]/60">
  <div className="max-w-[1800px] mx-auto px-8">
    <div className="mb-16">
      <span className="text-xs font-mono tracking-widest text-[#A8A29E] uppercase">
        04 / Supplement
      </span>
      <h2 className="text-4xl md:text-6xl font-serif text-[#2C2A26] mt-4 tracking-tight">
        Next Chapter
      </h2>
    </div>
    
    <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
      <div className="md:col-span-8">
        <p className="text-xl font-light leading-relaxed text-[#5D5A53]">
          Your custom text goes here. Maintain generous line height.
        </p>
      </div>
    </div>
  </div>
</section>

05 / Data Inputs

Extending App Content Database

Glenn can easily append extra files or structures inside projects.jsonor /components/LabData.ts. Below are perfect, type-safe structures to copy:

New Project (for projects.json)

{
  "id": "new-study-id",
  "name": "New Project Title",
  "tagline": "A brief poetic tagline stating physical and AI fusion.",
  "description": "Short paragraph summary for the list page grid preview card.",
  "longDescription": "Detailed overview exploring the product backstory, CAD parameterized scripts, and limitations workarounds.",
  "year": "2026",
  "role": "Concept, CAD, AI Models",
  "client": "Client Studio / Independent Dev",
  "category": "AI & computational",
  "imageUrl": "https://images.unsplash.com/photo-[id]",
  "features": [
    "Localized neural prediction loops",
    "Procedural timber parameters",
    "Zero-cloud secure core"
  ],
  "processIntro": "How the solution was calculated and built.",
  "processSteps": [
    {
      "title": "Mathematical Parameterization",
      "desc": "Setting boundaries for the algorithm to operate without producing visual glitches in Blender.",
      "imageUrl": "https://assets.glenndebacker.be/projects/example/step1.jpg",
      "caption": "Optional single image caption",
      "imageUrls": [
        "https://assets.glenndebacker.be/projects/example/step1_a.jpg",
        "https://assets.glenndebacker.be/projects/example/step1_b.jpg",
        "https://assets.glenndebacker.be/projects/example/step1_c.jpg"
      ]
    }
  ]
}

New Lab Experiment (for LabData.ts)

{
  "id": "exp-custom-resonance",
  "title": "Acoustic Resonance Core",
  "tagline": "Tactile vibration feedbacks under physical CAD scripts.",
  "category": "CAD Automation",
  "date": "May 2026",
  "description": "Localized research translating sub-bass frequencies into micro-vibrational surface displacements.",
  "coverUrl": "https://images.pexels.com/photos/...",
  "type": "image",
  "features": [
    "E Ink telemetry visualization node",
    "Micro-displacement custom mesh rendering",
    "Predictive vibration smoothing calculations"
  ],
  "specs": [
    { "label": "Hardware", "value": "ESP32 Custom Core" },
    { "label": "Rendering", "value": "Blender Cycles Procedural" }
  ]
}