Yannick Gregoire ASCII Portfolio Portfolio

Overview

This portfolio is a masterclass in creative coding, featuring real-time video-to-ASCII processing and a high-contrast terminal aesthetic. It is a powerful reference for builders looking to push the boundaries of canvas-based layouts and character-map visuals while maintaining a professional project showcase.

Design System

• Color Palette & Visual Hierarchy: The site uses a strict monochrome palette (black background, white/light gray text). Visual hierarchy is established through character density; dense ASCII blocks represent dark areas of images, while sparse punctuation represents highlights, creating shape without traditional colors.
• Typography: Features a sleek, monospaced typography system inspired by command-line interfaces. Captions and tags use small-scale sans-serif fonts to provide a UI-like wrapper around the expressive ASCII sections.
• Page Structure & Flow: The flow starts with a high-impact intro animation followed by a profile section with an interactive ASCII headshot. Below the fold, the layout shifts to a structured grid of projects followed by a utility-focused service list and contact footer.
• Reusable Components:
  • ASCII Image/Video Wrapper: A video element nested within a canvas that renders current frames as text characters.
  • Project Cards: Truncated terminal-style snippets with metadata (Tech, URL, Description) that expand or highlight on interaction.
  • Service Accordions: Minimalist text blocks that reveal further information using arrow indicators (⮐).
• Interaction & Motion: The site uses smooth, high-frame-rate scroll transitions. Hovering over project titles triggers video previews that are processed into the ASCII aesthetic in real-time.
• Implementation Clues: The HTML reveals a heavy reliance on <canvas> for rendering, with logic managed via high-performance frontend frameworks like GatsbyJS and React. The use of matterjs and react-spring suggests physics-based motion and sophisticated state-driven animations.

Use Cases

• Creative Portfolios: Designers and developers can clone the ASCII visual engine to showcase their work through a unique technological lens that proves technical competence.
• Tech Service Landing Pages: Cybersecurity firms or backend engineering agencies can remix this into a "system terminal" branded site to align with their industry's visual language.
• Remix Directions: Swap the high-density ASCII for low-fidelity pixel art or different character sets (e.g., emojis or math symbols) to change the brand mood from "hacker" to "joyful."
• Clone Scope: Start with a full-page clone to understand the canvas-rendering pipeline, or specifically clone the project section grid to add a retro-tech flair to an existing standard portfolio.