This Website

astro typescript tailwindcss alpinejs gruvbox-theme
Source

The Details

This website serves as my personal digital space, combining a blog, project portfolio, and homelab dashboard in one cohesive experience. Built on Astro for performance and flexibility, it leverages TypeScript for type safety, TailwindCSS for styling, and Alpine.js for interactive components.

The architecture follows a component-based approach with a focus on reusability and maintainability. The site features a custom Gruvbox-inspired theme system that supports both dark and light modes while maintaining accessibility standards. The responsive design ensures a seamless experience across all device sizes.

The Features

Content & Navigation

  • Multi-purpose platform: Blog, portfolio, and homelab dashboard integration
  • Dark & light mode with smooth transitions and flash prevention
  • Gruvbox-inspired color scheme with customizable theme variables
  • Fully responsive design optimized for all screen sizes

Performance & User Experience

  • Smart loading system:

    • Connection-aware loading states that adapt to network speed
    • Skeleton loaders that match content layout during loading
    • Extended loading fallback UI for slow connections
    • Navigation API integration for accurate loading states

  • Advanced search functionality:

    • Real-time content filtering across all sections
    • Keyboard navigation with arrow keys and shortcuts
    • Category-aware filtering for structured content
    • Accessible search results with screen reader support

Technical Implementation

  • Component architecture:

    • Reusable UI components with TypeScript interfaces
    • Consistent styling patterns using CSS custom properties
    • Modular structure for easy maintenance and extension

  • Accessibility features:

    • ARIA attributes for screen reader compatibility
    • Keyboard navigation throughout the site
    • Reduced motion support for animations
    • High contrast theme options

  • Performance optimizations:

    • Optimized page transitions with minimal flicker
    • Network-aware resource loading
    • Efficient DOM updates using Alpine.js
    • Astro’s static site generation for fast initial loads

Homelab Integration

  • Self-hosted services dashboard with categorized listings
  • Service search and filtering by name, category, and tags
  • Visual indicators for service status and information

The Technology Stack

  • Framework: Astro 5.6
  • Languages: TypeScript, JavaScript
  • Styling: TailwindCSS 4.1, Custom CSS Variables
  • Interactivity: Alpine.js
  • Build Tools: Vite, npm/pnpm
  • Deployment: Self-hosted

The Future

Future enhancements will include expanded blog functionality, integration with more homelab services, and additional interactive features. The component library will continue to grow with new UI elements and patterns.