Introduction

In this post, I’ll walk you through how I built this terminal-style blog using Astro and Tailwind CSS.

Why Astro?

Astro is an excellent choice for content-focused websites because:

1. Performance: It ships zero JavaScript by default
2. Content Collections: Built-in support for Markdown and MDX
3. Flexibility: Works with any UI framework or none at all
4. Developer Experience: Great TypeScript support

The Design

The terminal-inspired design features:

• Monospace font throughout
• Green color scheme (toggleable with dark/light mode)
• Typing animations
• Minimalist layout

Code Snippets

Here’s how I set up the typing effect:

const terminalElements = document.querySelectorAll('.terminal-text');

terminalElements.forEach((element) => {
    const text = element.getAttribute('data-text') || '';
    const speed = parseInt(element.getAttribute('data-speed') || '100');
    let index = 0;

    const type = () => {
        if (index < text.length) {
            element.textContent = text.substring(0, index + 1);
            index++;
            setTimeout(type, speed);
        }
    };

    type();
});

Conclusion

Astro makes it easy to build fast, content-focused websites with a unique design.