74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
---
|
|
layout: ../../layouts/ProjectLayout.astro
|
|
title: This Website
|
|
description: My personal blog, portfolio, and homelab dashboard built with Astro, TypeScript, TailwindCSS, and Alpine.js featuring smart loading, advanced search, and accessibility features.
|
|
tags: ["astro", "typescript", "tailwindcss", "alpinejs", "gruvbox-theme"]
|
|
githubUrl: https://code.justin.deal/dealjus/justin.deal
|
|
timestamp: 2025-02-24T02:39:03+00:00
|
|
featured: true
|
|
filename: this-site
|
|
---
|
|
|
|
## 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.
|