Skip to main content

​
Overview

The ASCII art appears on the home page of your portfolio and is the first thing visitors see. It’s displayed in bold Mauve color and centered on the screen.

​
Configuration

ASCII art is defined in the ascii_art field of your config.yaml file:
config.yaml
name: "Abdul Sattar"
title: "Sr. Full-stack Developer"
ascii_art: |
  ███████╗ █████╗ ████████╗████████╗ █████╗ ██████╗
  ██╔════╝██╔══██╗╚══██╔══╝╚══██╔══╝██╔══██╗██╔══██╗
  ███████╗███████║   ██║      ██║   ███████║██████╔╝
  ╚════██║██╔══██║   ██║      ██║   ██╔══██║██╔══██╗
  ███████║██║  ██║   ██║      ██║   ██║  ██║██║  ██║
  ╚══════╝╚═╝  ╚═╝   ╚═╝      ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝
The | character indicates a multi-line string in YAML. Each line of your ASCII art should be indented consistently.

​
How It’s Rendered

The ASCII art is styled and displayed using the following code:
ui/home.go
artStyle := r.NewStyle().
    Foreground(lipgloss.Color(Mauve)).  // Purple color (#cba6f7)
    Bold(true).                          // Bold text
    Align(lipgloss.Center).              // Center horizontally
    Width(width)

art := artStyle.Render(m.cfg.ASCIIArt)
The art is centered both horizontally and vertically on the home page, appearing above your title and introduction text.

​
Creating ASCII Art

​
Text to ASCII Generators

Use online tools to convert text to ASCII art: patorjk.com/software/taag/
  • Most popular ASCII art generator
  • Multiple font styles
  • Preview in real-time
  • Recommended fonts: “ANSI Shadow”, “Big”, “Standard”, “Banner3”
ascii-generator.site
  • Simple interface
  • Good for basic text conversion
Text.smushit.com
  • FIGlet-based generator
  • Lots of font options

​
Custom ASCII Art

For custom designs beyond text: asciiart.eu
  • Gallery of pre-made ASCII art
  • Browse by category
  • Copy and paste designs
ascii-art-generator.org
  • Convert images to ASCII
  • Adjust density and size
  • Best for logos or icons

​
Manual Creation

You can create ASCII art manually using box-drawing characters: 
╔═══════════════════╗
║   YOUR NAME       ║
╚═══════════════════╝
Common box-drawing characters:
  • Single line: ─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼
  • Double line: ═ ║ ╔ ╗ ╚ ╝ ╠ ╣ ╦ ╩ ╬
  • Blocks: █ ▓ ▒ ░ ▄ ▀

​
Size Considerations

​
Terminal Width

Most terminals are 80-120 characters wide. Keep your ASCII art narrower than the minimum expected width:
  • Safe width: 60-70 characters
  • Maximum: 80 characters
  • Minimum terminal: Consider 80x24 as baseline

​
Height

ASCII art height affects how much space remains for your title and intro:
  • Recommended: 4-8 lines
  • Maximum: 12 lines for small terminals
  • Content area height: terminal height - 4 (tab bar + status bar)

​
Testing Different Sizes

Test your ASCII art in different terminal sizes: 
# Resize your terminal and test
ssh localhost -p 2222

# Or specify dimensions when testing
stty rows 24 cols 80

​
Examples

​
Minimalist

ascii_art: |
  ┌─────────────┐
  │  DEVELOPER  │
  └─────────────┘

​
Block Letters

ascii_art: |
  ██████╗ ███████╗██╗   ██╗
  ██╔══██╗██╔════╝██║   ██║
  ██║  ██║█████╗  ██║   ██║
  ██║  ██║██╔══╝  ╚██╗ ██╔╝
  ██████╔╝███████╗ ╚████╔╝
  ╚═════╝ ╚══════╝  ╚═══╝

​
Standard Font

ascii_art: |
      _       _             ____
     | | ___ | |__  _ __   |  _ \  ___   ___
  _  | |/ _ \| '_ \| '_ \  | | | |/ _ \ / _ \
 | |_| | (_) | | | | | | | | |_| | (_) |  __/
  \___/ \___/|_| |_|_| |_| |____/ \___/ \___|

​
Simple Text

ascii_art: |
  ===========================
       FULL STACK DEV
  ===========================

​
With Icon

ascii_art: |
      ___
     {o,o}
     |)__)
     -"-"-
   CODE WIZARD

​
Best Practices

  1. Keep it readable: Avoid overly complex designs that are hard to read
  2. Test in different terminals: Colors and characters may render differently
  3. Use Unicode carefully: Some SSH clients may not support all Unicode characters
  4. Match your brand: Use ASCII art that reflects your personality or brand
  5. Consider accessibility: Ensure it doesn’t interfere with screen readers
  6. Preview before deploying: Always test changes locally first

​
Troubleshooting

​
Art appears misaligned

  • Check for consistent indentation in config.yaml
  • Ensure no trailing spaces on lines
  • Verify YAML syntax with a validator

​
Characters don’t display correctly

  • Use basic ASCII characters (33-126) for maximum compatibility
  • Test with ssh -p 2222 localhost to verify rendering
  • Some characters may not work in all terminal emulators

​
Art is cut off

  • Reduce the width of your ASCII art
  • Test with stty size to check terminal dimensions
  • Keep width under 70 characters for safety

​
Art looks different in SSH vs locally

  • Check terminal encoding (should be UTF-8)
  • Verify LANG and LC_ALL environment variables
  • Some SSH clients may have different font rendering

​
Removing ASCII Art

To remove ASCII art entirely, set it to an empty string:
config.yaml
ascii_art: ""
Or use a simple divider:
config.yaml
ascii_art: "════════════════════════════"

Build docs developers (and LLMs) love

Get started for freeTalk to us