A personal digital space where I document my journey of building systems — digital, emotional, spiritual, and physical. This is more than just a blog; it's a living document of my exploration, creation, and growth.
- 🎵 Art & Expression — creative soul, aesthetic power, truth-telling
- 🛠️ DIY & Creation — physical builds, handmade goods, crafting
- 🧘🏽♂️ Integration & Growth — inner mastery, parenting, masculine leadership
- 📚 Learning Projects — documentation of mastery in progress
- 🌀 Metaspace — reflections on the journey itself
- 👨👩👧👦 Parenting — raising resilient children, family dynamics, and personal growth
- ⚖️ Politics — power dynamics, social structures, and collective healing
- 🧠 Psychology — human behavior, social dynamics, and mental processes
- 💻 Systems & Strategy — technical systems, organizational design, and strategic thinking
- Astro - Modern static site builder
- TypeScript - Type-safe JavaScript
- MDX - Markdown with JSX support
- Tailwind CSS - Utility-first CSS framework
- Sharp - Image optimization
- Vercel Analytics - Performance monitoring
- Vercel Speed Insights - Real-time performance metrics
- ✅ Responsive design with mobile-first approach
- ✅ Dark mode support with system preference detection
- ✅ Image optimization with Sharp
- ✅ RSS feed support
- ✅ Sitemap generation
- ✅ Vercel Analytics & Speed Insights integration
- ✅ Tailwind CSS with custom design tokens
- ✅ TypeScript configuration
- ✅ PostCSS for CSS processing
- ✅ Reading progress indicator
- ✅ Back to top button
- ✅ Skip to main content accessibility feature
- ✅ Responsive image handling with proper aspect ratios
- ✅ WebP format conversion for images
- ✅ Lazy loading with eager loading option for above-the-fold
- ✅ Accessibility-first media components
- ✅ Reduced motion support
- ✅ Gallery component for grid-based media display
- ✅ Figure component for semantic image markup
- ✅ Optimized image loading and caching
- ✅ Proper alt text and caption support
- ✅ Mobile-first media gallery layouts
- ✅ Multi-language support (English, Spanish)
- ✅ Category and tag organization
- ✅ Reading time estimation
- ✅ Publication and update date tracking
- 🚧 Content preview system (in progress)
- 📅 Automated backups (planned)
- 📅 Content validation (planned)
- 📅 Full-text search implementation (planned)
- 📅 Tag-based filtering (planned)
- 📅 Related posts suggestions (planned)
- ✅ Image optimization with Sharp
- ✅ Lazy loading with eager option
- ✅ Caching strategies
- ✅ Reduced motion preferences support
- ✅ WebP format support
- ✅ Proper aspect ratio handling
- ✅ Optimized media delivery
- Clone the repository:
git clone https://github.com/antoniwan/strongvault.git
cd strongvault- Install dependencies:
npm install- Start the development server:
npm run dev├── public/ # Static assets
├── src/
│ ├── components/ # Reusable UI components
│ ├── content/ # Content collections
│ ├── data/ # Static data and configurations
│ ├── layouts/ # Page layouts
│ ├── pages/ # Route components
│ ├── plugins/ # Custom Astro plugins
│ ├── styles/ # Global styles and Tailwind config
│ └── utils/ # Utility functions
├── scripts/ # Build and optimization scripts
├── astro.config.mjs # Astro configuration
├── package.json # Project dependencies
└── tsconfig.json # TypeScript configuration
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
- Design System - Visual design guidelines and typography system
- Recommendations - Future improvements and planned features
- Notes - Development notes and guidelines
- Changelog - Version history and changes
- Media Report - Media optimization and component documentation
The blog content is organized into the following categories:
- 🎵 Art & Expression - Creative and aesthetic content
- 🛠️ DIY & Creation - Physical builds and crafting
- 🧘🏽♂️ Integration & Growth - Personal development
- 📚 Learning Projects - Documentation of mastery
- 🌀 Metaspace - Journey reflections
- 👨👩👧👦 Parenting - Family and growth
- ⚖️ Politics - Social structures
- 🧠 Psychology - Human behavior
- 💻 Systems & Strategy - Technical systems
- 🛠 Builds.software — my technical portfolio
- 💜 Strong Hands, Soft Heart — my brand
- 🐙 GitHub — open source & code
- 🌀 BlueSky — my social brain
This work is licensed under a Creative Commons Attribution 4.0 International License.
"If you're building something good, or trying to become someone better, I'm probably down to help. Get in touch." — Antonio Rodríguez Martínez
The blog uses Tailwind CSS for styling, providing a utility-first approach that ensures consistency and maintainability. The styling system includes:
- Design Tokens: Custom colors, typography, spacing, and z-index scales defined in
tailwind.config.js - Dark Mode: System preference detection and manual toggle
- Responsive Design: Mobile-first approach with consistent breakpoints
- Typography: Custom font families and responsive type scale
- Component Styles: Base styles for common elements
- Accessibility: Built-in accessibility features and utilities
src/
├── styles/
│ └── global.css # Global styles and Tailwind imports
├── components/ # Reusable components
└── layouts/ # Page layouts
- Performance: Tailwind's JIT compiler and purge settings
- Maintainability: Utility-first approach
- Consistency: Design tokens for visual consistency
- Developer Experience: Rapid prototyping with utility classes
- Dark Mode: System preference support with CSS variables