WRDLSS ASCII Aesthetic Portfolio Site

Overview

This website is a monochromatic, ASCII-centric portfolio that leverages a brutalist, terminal-inspired aesthetic. It and serves as a strong clone reference for builders looking to implement scroll-driven layouts, complex typography-driven hero sections, and minimalist content grids using a modern Nuxt/Prismic stack.

Design System

• Color Palette & Visual Hierarchy: The system is strictly black and white (#000000 on #FFFFFF), relying on negative space and character density to create depth. Large ASCII blocks create a 'hero' visual hierarchy without the need for traditional image assets.
• Typography: The site uses IBMPlexMono-Light as the primary typeface. The scale is high-contrast, featuring oversized <pre> text blocks for visual impact alongside small (f6/12px equivalent) utility text and uppercase (ttu) labels.
• Page Structure: The layout follows a structured vertical flow of full-height sections (vh-75 and vh-100). It transitions from an ASCII art hero to a four-column text grid, followed by a marquee image banner, and finally a dense, multi-column service list.
• Reusable Components:
  • ASCII Hero: A <pre> container styled with light weights and block spans for character-based graphics.
  • Services Grid: A versatile sliceItem grid that adapts from 4-columns to 2-columns for list-based data.
  • Data-Rich Footer: A four-column colophon featuring dynamic data like system time, browser info, and load speed.
• Interaction & Motion: The site utilizes data-scroll (likely via Locomotive Scroll or GSAP ScrollTrigger) to handle section fade-ins (opacity: 0 to 1) and parallax speed modifiers (data-scroll-speed="-8"). Content uses transform: matrix3d for smooth, hardware-accelerated scroll transitions.
• Implementation Clues: Built with Nuxt.js and Prismic CMS, the HTML reveals a utility-first approach (likely Tachyons or custom CSS modules) with classes like dt v-mid for table-cell centering and br4 for rounded section corners.

Use Cases

• Who should clone this: Creative developers, digital agencies, or technical consultants who want to showcase a high-level of technical craft through a minimalist, code-first aesthetic.
• Effective Remixes: This pattern is ideal for "Developer Advocacy" landing pages, system status dashboards, or experimental web-zines where text is the primary medium.
• Remix Directions: Replace the ASCII art with SVG wireframes for a cleaner look, or swap the monochromatic scheme for a high-contrast "dark mode" (e.g., green on black) to lean into a cyber-security or terminal theme.
• Clone Scope: A full-page clone is recommended to capture the specific scroll-synchronized pacing, though the footer section alone is a valuable reference for site metadata and social link organization.