Building Splarf: How I Created This Site

January 2025

When I set out to build splarf.com, I wanted something that would showcase my interests while providing a clean, functional platform for technical writing. Drawing inspiration from maker culture and 3D printing, I created a site that balances modern web design with subtle technical aesthetics.

The Tech Stack

I kept the technology deliberately simple to focus on content and performance:

Domain and DNS Setup

Since the domain was already registered with Cloudflare, the DNS configuration was straightforward. Cloudflare's nameservers handled everything automatically once I connected the Pages deployment.

The 3D Printer Background Animation

The signature layer line effect required careful balance between visual impact and performance. The JavaScript creates subtle animated layer lines that move across the screen, mimicking the appearance of a 3D printer in action:

function createPrinterBackground() {
    const printerBg = document.getElementById('printer-bg');
    
    // Clear existing elements
    printerBg.innerHTML = '';
    
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    
    // Create subtle grid dots
    const gridSpacing = 40;
    for (let x = 0; x < screenWidth; x += gridSpacing) {
        for (let y = 0; y < screenHeight; y += gridSpacing) {
            const dot = document.createElement('div');
            dot.className = 'grid-dot';
            dot.style.left = x + 'px';
            dot.style.top = y + 'px';
            printerBg.appendChild(dot);
        }
    }
    
    // Create animated layer lines
    for (let i = 0; i < 3; i++) {
        const layerLine = document.createElement('div');
        layerLine.className = 'layer-line';
        layerLine.style.top = (Math.random() * screenHeight) + 'px';
        layerLine.style.animationDelay = (i * 2.5) + 's';
        printerBg.appendChild(layerLine);
    }
}

CSS Design Philosophy

The visual design centers around a modern, technical aesthetic with nods to maker culture:

Design Evolution

The site has gone through an interesting evolution:

  1. Initial Version - Started with a cyberpunk "Matrix" theme with falling green code
  2. Current Version - Evolved to reflect my interests in 3D printing and maker projects

This transformation shows how personal websites should grow with your interests. As my focus shifted from purely digital to more physical making, the site aesthetics adapted accordingly.

Deployment Pipeline

Cloudflare Pages made deployment incredibly simple:

  1. Connect GitHub repository to Cloudflare Pages
  2. Configure build settings (none needed for static HTML)
  3. Add custom domain (splarf.com)
  4. Push to main branch triggers automatic deployment

The entire process from code commit to live website takes under 30 seconds, with automatic SSL certificates and global edge caching included.

Performance Considerations

The background animations run smoothly by:

Image Optimization

For the project images and diagrams:

What's Next

Future enhancements planned:

The complete source code is available on GitHub, demonstrating how modern web technologies can create a clean, functional site with minimal complexity.

Building this site reminded me that sometimes the most effective solutions are the simplest ones. No complex frameworks, no build processes, just clean code and thoughtful design.