Styling & Design

The MilesONerd website combines Tailwind CSS for utility-first styling with custom CSS for unique animations and components. This page covers the complete styling approach.

Styling Architecture

The website uses a two-layer approach:

Tailwind CSS (CDN)

Utility classes for layout, spacing, typography, and responsive design

Custom CSS

Animations, special effects, and component-specific styles in assets/style/styles.css

Tailwind CSS Integration

Tailwind is loaded via CDN for simplicity:

<script src="https://cdn.tailwindcss.com/3.4.16"></script>

Key Tailwind Patterns

The site extensively uses Tailwind’s utility classes:

<!-- Container with responsive padding -->
<div class="container mx-auto px-6 py-4">

<!-- Flexbox utilities -->
<div class="flex items-center justify-between">

<!-- Grid layout for blog posts -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">

The site uses Tailwind’s default configuration without customization, relying on the CDN build.

Color Scheme

The website uses a dark theme with blue accents:

Primary Colors

Color	Tailwind Class	Usage
Background	`bg-gray-900`	Main page background
Secondary BG	`bg-gray-800`	Cards, sections
Text	`text-gray-100`	Primary text
Secondary Text	`text-gray-300`, `text-gray-400`	Links, secondary info
Accent	`text-blue-400`, `bg-blue-600`	CTAs, highlights
Hover	`hover:text-blue-400`	Interactive elements

Gradient Backgrounds

Custom gradient defined in styles.css:

.hero-gradient {
    background: linear-gradient(135deg, #000428 0%, #004e92 100%);
}

Used in the hero section for a dramatic blue-to-dark gradient effect.

Custom CSS (styles.css)

The assets/style/styles.css file contains all custom styles and animations. Here’s the complete breakdown:

Global Box Sizing

* {
    box-sizing: border-box;
}

Ensures consistent box model across all elements.

Hero Gradient

.hero-gradient {
    background: linear-gradient(135deg, #000428 0%, #004e92 100%);
}

Creates a striking diagonal gradient from deep navy to blue, used on the homepage hero section.

Glow Effect

.glow {
    text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
}

Adds a subtle blue glow to text elements, creating a neon-like effect on headings.

Usage Example

Applied to the main hero heading: “If it hasn’t worked out yet, it’s because it’s not over yet”

Pulse Animation

Subtle scaling animation for attention-grabbing elements:

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

Used on: The “Another site by MilesONerd” button in the header.

Terminal Component

The homepage features a realistic terminal window:

.terminal {
    background-color: #1e1e1e;
    color: #0f0;
    font-family: 'Courier New', monospace;
    border-radius: 8px;
    position: relative;
}

.terminal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: #333;
    border-radius: 8px 8px 0 0;
}

Creates macOS-style window controls (red, yellow, green dots).

Typewriter Animation

An iconic typing effect for terminal text:

.typewriter {
    overflow: hidden;
    border-right: .15em solid #0f0;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #0f0 }
}

How the typewriter effect works

Text overflow: Hidden to reveal text gradually
Border-right: Creates blinking cursor effect
Typing animation: Expands width from 0 to 100% in steps
Blink animation: Toggles cursor visibility
Letter-spacing: Monospace terminal aesthetic

Example usage in HTML:

<div class="typewriter text-lg mb-4">> Hello World...</div>
<div class="typewriter text-lg mb-4 delay-1000">> Downloading resources...</div>
<div class="typewriter text-lg mb-4 delay-2000">> Running.</div>

Blog Post Styles

Custom styles for the blog listing:

.post-list {
    list-style-type: none;
    padding-left: 0;
}

.post-list li {
    background-color: #2d3748;
    margin: 10px 0;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.post-list li:hover {
    background-color: #4a5568;
}

.post-list a {
    text-decoration: none;
    color: #63b3ed;
    font-weight: bold;
}

.post-list a:hover {
    color: #e2e8f0;
}

Provides clean, card-like appearance for blog posts with smooth hover transitions. Complex responsive system for social media icons in the footer:

.social-icon {
    width: 8vw !important; 
    height: 8vw !important;
    max-width: 50px !important;
    max-height: 50px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    object-fit: contain !important;
}

.social-icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 10px;
    padding: 10px;
    max-width: 100%;
    overflow-x: auto;
}

The !important flags are used to override inline styles. Consider refactoring to avoid inline styles for cleaner CSS.

Typography

The site uses system fonts via Tailwind’s font-sans class:

font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Font Awesome Icons

Icons are loaded from Font Awesome CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Common icon usage:

<!-- Social icons -->
<i class="fas fa-envelope"></i>
<i class="fas fa-map-marker-alt"></i>

<!-- Blog category icons -->
<i class="fas fa-code"></i>
<i class="fas fa-brain"></i>
<i class="fas fa-server"></i>

Responsive Design

The site is mobile-first with three main breakpoints:

Breakpoint	Tailwind Class	Width	Common Uses
Mobile	(default)	< 768px	Single column, hidden nav
Tablet	`md:`	≥ 768px	2-column grids, show nav
Desktop	`lg:`	≥ 1024px	3-column grids, larger text

Responsive Patterns

Navigation

Grid Layouts

<!-- Responsive blog grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">

<!-- Responsive footer grid -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">

Typography

<!-- Responsive heading -->
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold">

<!-- Responsive paragraph -->
<p class="text-base md:text-lg lg:text-xl">

Effects & Animations

Summary of all custom effects:

Pulse

2-second infinite scaling animation (1.0 → 1.05 → 1.0)

Typewriter

3.5-second typing effect with blinking green cursor

Glow

Blue text shadow for neon-like effect

Transitions

0.3s color transitions on hover states

Component Styles

<header class="fixed w-full z-50 bg-gray-900 bg-opacity-90 backdrop-blur-sm">

Fixed positioning: Stays at top while scrolling
Backdrop blur: Semi-transparent with blur effect
High z-index: Overlays other content

Cards

<div class="bg-gray-900 p-8 rounded-xl shadow-lg hover:shadow-xl transition cursor-pointer">

Rounded corners: rounded-xl for modern look
Shadow elevation: Increases on hover
Cursor change: Indicates interactivity

Buttons

Two button styles used throughout:

<a class="px-8 py-4 bg-white text-blue-900 font-bold rounded-lg hover:bg-gray-100 transition shadow-lg">
    Public Repositories
</a>

Best Practices

Use Tailwind First

Leverage Tailwind utilities before writing custom CSS

Keep Custom CSS Minimal

Only use custom CSS for animations and unique effects

Maintain Consistency

Reuse color classes and spacing patterns across pages

Test Responsively

Check all breakpoints, especially mobile (most visitors)

Performance Considerations

CDN Loading: Tailwind CSS loads from CDN, which may cause a flash of unstyled content (FOUC). The custom CSS loads quickly from the same domain.

Optimization opportunities:

Consider building a custom Tailwind CSS file with only used classes
Minify styles.css for production
Use CSS containment for blog post cards

Next Steps

Project Structure

Understand the file organization

Deployment

Learn about the build and deployment process

Overview

Features

Development

Contributing

Styling Architecture

Tailwind CSS Integration

Key Tailwind Patterns

Color Scheme

Primary Colors

Gradient Backgrounds

Custom CSS (styles.css)

Global Box Sizing

Hero Gradient

Glow Effect

Usage Example

Pulse Animation

Terminal Component

Typewriter Animation

Blog Post Styles

Typography

Font Awesome Icons

Responsive Design

Responsive Patterns

Effects & Animations

Pulse

Typewriter

Glow

Transitions

Component Styles

Header

Cards

Buttons

Best Practices

Performance Considerations

Next Steps

Project Structure

Deployment

Build docs developers (and LLMs) love

Overview

Features

Development

Contributing

​Styling Architecture

​Tailwind CSS Integration

​Key Tailwind Patterns

​Color Scheme

​Primary Colors

​Gradient Backgrounds

​Custom CSS (styles.css)

​Global Box Sizing

​Hero Gradient

​Glow Effect

Usage Example

​Pulse Animation

​Terminal Component

​Typewriter Animation

​Blog Post Styles

​Social Icons Responsive Sizing

​Typography

​Font Awesome Icons

​Responsive Design

​Responsive Patterns

​Effects & Animations

Pulse

Typewriter

Glow

Transitions

​Component Styles

​Header

​Cards

​Buttons

​Best Practices

​Performance Considerations

​Next Steps

Project Structure

Deployment

Build docs developers (and LLMs) love

Styling Architecture

Tailwind CSS Integration

Key Tailwind Patterns

Color Scheme

Primary Colors

Gradient Backgrounds

Custom CSS (styles.css)

Global Box Sizing

Hero Gradient

Glow Effect

Pulse Animation

Terminal Component

Typewriter Animation

Blog Post Styles

Social Icons Responsive Sizing

Typography

Font Awesome Icons

Responsive Design

Responsive Patterns

Effects & Animations

Component Styles

Header

Cards

Buttons

Best Practices

Performance Considerations

Next Steps