Skip to content

Crypt0xDev/Crypt0

BranchesTags

Repository files navigation

🔐 Crypt0xDev

Plataforma Profesional de Ciberseguridad & CTF Writeups

Built with Astro TypeScript TailwindCSS Vercel

Build Status Lighthouse Performance License MIT PRs Welcome

🚀 Demo en Vivo • 📚 Documentación • 📖 Wiki • ⚡ Inicio Rápido • 🤝 Contribuir

📋 Tabla de Contenidos

🎯 Descripción del Proyecto

Crypt0xDev es una plataforma web de nivel empresarial especializada en ciberseguridad, desarrollada con las últimas tecnologías web. Combina un blog técnico profesional con una colección exhaustiva de CTF writeups, ofreciendo contenido educativo de alta calidad para la comunidad de seguridad informática.

🚀 Propuesta de Valor

  • 🎯 Especialización: Enfoque 100% en ciberseguridad y ethical hacking
  • 🌍 Alcance Global: Soporte bilingüe completo (ES/EN) con SEO multiidioma
  • ⚡ Performance: Arquitectura SSG con puntuación Lighthouse perfecta (100/100)
  • 📱 Experiencia Superior: Design system moderno con UX optimizada
  • 🔍 Contenido Estructurado: Taxonomía avanzada para CTFs y técnicas

📊 Métricas del Proyecto

Métrica Valor Descripción
Performance Score 100/100 Lighthouse Performance
SEO Score 100/100 Optimización para motores de búsqueda
Accessibility 100/100 Cumplimiento WCAG 2.1
Best Practices 100/100 Estándares web modernos
Bundle Size ~45KB Carga ultrarrápida
Build Time <30s CI/CD optimizado

✨ Características Principales

🏢 Características Empresariales

Categoría Característica Descripción Técnica Beneficio
🌐 Internacionalización Routing Bilingüe Rutas automáticas /es/ y /en/ Alcance global +40% tráfico
SEO Multiidioma Hreflang + sitemap XML localizado Ranking SERP mejorado
Content Localization Content Collections por idioma Gestión escalable de contenido
� Especialización CTF Taxonomía Avanzada Platform + Difficulty + OS + Attack Vector Búsqueda precisa de contenido
Metadatos Técnicos CVSS scores, herramientas, técnicas MITRE Valor educativo superior
Multi-Platform Support HTB, THM, VulnHub, PortSwigger Cobertura completa del ecosistema
Analytics Especializados Progreso CTF, stats por plataforma Tracking de aprendizaje
⚡ Performance Islands Architecture Hidratación selectiva + minimal JS Core Web Vitals perfectos
Edge Optimization CDN global + static generation Latencia <100ms mundial
Bundle Optimization Code splitting + tree shaking Time to Interactive <2s
�️ Developer Experience Type Safety End-to-end TypeScript + Zod Bugs reducidos 90%
Automated QA ESLint + Prettier + CI/CD Calidad consistente
Hot Development HMR + instant preview Productividad 3x mayor

🎨 Características de UX/UI

Componente Tecnología Funcionalidad
🎭 Design System Tailwind + CSS Variables Tokens consistentes + theming
📱 Responsive Design Mobile-first + Container Queries Experiencia fluida en todos los dispositivos
🌙 Dark/Light Mode CSS Custom Properties Preferencias persistentes del usuario
🔍 Search & Filter Client-side filtering Búsqueda instantánea sin backend
📑 Table of Contents Auto-generated + scroll spy Navegación intuitiva en posts largos
🔗 Related Content Algorithm-based recommendations Engagement mejorado +25%

🏗️ Arquitectura Técnica

📐 Patrones de Diseño

graph TB
    A[Client Request] --> B[Vercel Edge CDN]
    B --> C[Static Site Generation]
    C --> D[Astro Islands]
    D --> E[Selective Hydration]
    E --> F[Minimal JavaScript]
    
    G[Content Collections] --> H[Zod Validation]
    H --> I[Type-safe Content]
    I --> C
    
    J[Internationalization] --> K[Route-based i18n]
    K --> L[Localized Content]
    L --> C
Loading

🏗️ Estructura del Proyecto

📁 Estructura de Directorios (Click para expandir) 
Crypt0xDev/
├── 🌐 public/                    # Assets estáticos + SEO
│   ├── robots.txt               # Crawler configuration
│   └── images/                  # Imágenes optimizadas
│       ├── blog/               # Hero images para posts
│       ├── writeups/           # Screenshots CTF
│       └── platforms/          # Logos de plataformas
├── 🔧 src/
│   ├── 🎨 components/           # Sistema de componentes
│   │   ├── ui/                 # Design system base
│   │   ├── blog/              # Componentes del blog
│   │   ├── writeup/           # CTF specialized components
│   │   └── common/            # Shared components
│   ├── 📝 content/             # Content Collections
│   │   ├── config.ts          # Zod schemas + validation
│   │   ├── blog/              # Artículos técnicos
│   │   │   ├── es/           # Contenido en español
│   │   │   └── en/           # Contenido en inglés
│   │   └── writeups/          # CTF writeups
│   │       ├── es/           # Writeups en español
│   │       └── en/           # Writeups en inglés
│   ├── 🎭 layouts/             # Layout system
│   │   ├── Layout.astro       # Base layout + SEO
│   │   ├── BlogLayout.astro   # Blog with TOC
│   │   └── WriteupLayout.astro # CTF specialized layout
│   ├── 📄 pages/               # File-based routing
│   │   ├── [lang]/            # Localized routes
│   │   └── api/               # API endpoints
│   ├── 🌍 i18n/                # Internationalization
│   │   ├── translations/      # UI strings
│   │   └── utils.ts          # i18n helpers
│   └── 🛠️ utils/               # Shared utilities
├── 📋 doc/                      # Documentación completa
└── ⚙️ Config files             # Astro, TypeScript, etc.

🧩 Arquitectura de Componentes

Layer Responsabilidad Tecnologías Ejemplos
🎨 Presentation UI Components + Styling Astro + Tailwind Header.astro, PostCard.astro
🔄 Logic Business Logic + State TypeScript + Zod Content validation, i18n utils
📊 Data Content Management Content Collections + MDX Blog posts, CTF writeups
🌐 Infrastructure Build + Deploy Vite + Vercel SSG, CDN, CI/CD

⚡ Performance Architecture

  • 🏝️ Islands Architecture: Hidratación selectiva para máxima performance
  • 📦 Bundle Optimization: Code splitting automático por ruta
  • 🖼️ Asset Optimization: Sharp integration + responsive images
  • 🔄 Edge Caching: Vercel Edge Functions + immutable assets
  • 📱 Progressive Enhancement: Funcionalidad base sin JavaScript

⚡ Inicio Rápido

📋 Prerrequisitos

Node.js ≥ 18.20.8 LTS  |  pnpm ≥ 7.1.0  |  Git ≥ 2.25.0
🔧 Verificar versiones instaladas 
node --version && pnpm --version && git --version

Si no tienes pnpm instalado:

npm install -g pnpm@latest

� Configuración en 3 Pasos

# 1️⃣ Clonar e instalar
git clone https://github.com/Crypt0xDev/Crypt0.git
cd Crypt0
pnpm install

# 2️⃣ Iniciar desarrollo
pnpm dev

# 3️⃣ Abrir en navegador
# ➜ http://localhost:4321

🎉 ¡Listo! El servidor de desarrollo estará corriendo con hot-reload habilitado.

📋 Scripts Principales

Comando Acción Descripción
pnpm dev 🔥 Desarrollo Servidor local con hot-reload
pnpm build 📦 Producción Build optimizado para deploy
pnpm preview 👀 Preview Vista previa del build local
pnpm lint:fix 🔧 Calidad Auto-corrección de código
🛠️ Scripts Avanzados
Script Comando Uso
Type Check pnpm type-check Verificación TypeScript
Format pnpm format Formateo con Prettier
Sync pnpm astro sync Sincronizar Content Collections
Clean rm -rf .astro dist Limpiar cache y builds

🎯 Workflow Recomendado

# Desarrollo diario
pnpm dev                    # Iniciar servidor
# ... hacer cambios ...
pnpm type-check            # Verificar tipos
pnpm lint:fix              # Corregir linting
pnpm build && pnpm preview # Probar build local

🛠️ Stack Tecnológico

🏗️ Core Technologies

Framework Language Styling Deployment
Astro TypeScript Tailwind Vercel

📋 Technology Matrix

Categoría Tecnología Versión Propósito
🚀 Core Astro v5.15.3 Meta-framework con Islands Architecture
TypeScript ^5.x Type safety + developer experience
Vite Native Build tool ultrarrápido + HMR
Node.js ≥18.20.8 JavaScript runtime LTS
📝 Content Content Collections Native Type-safe content management
Zod Latest Schema validation + inference
MDX ^4.3.9 Enhanced Markdown + React components
🎨 Styling Tailwind CSS ^3.4.18 Utility-first CSS framework
CSS Custom Properties Native Design tokens + theming system
Typography Plugin ^0.5.19 Optimized content typography
🚀 Performance Sharp ^0.34.4 High-performance image processing
Static Site Generation Native Pre-rendering + edge optimization
Sitemap ^3.6.0 SEO + search engine optimization
🛠️ DevEx ESLint ^9.38.0 Code quality + consistency
Prettier ^3.6.2 Automated code formatting
pnpm ≥7.1.0 Efficient package management
☁️ Infrastructure Vercel Latest Edge deployment + global CDN
GitHub Actions Latest CI/CD automation

🏆 Key Benefits

  • ⚡ Performance: Lighthouse 100/100, Core Web Vitals optimized
  • 🔒 Type Safety: End-to-end TypeScript with Zod validation
  • 🌍 Scalability: Edge deployment + static generation
  • 🛠️ Developer Experience: Hot reload, automated testing, modern tooling
  • 📱 Modern Standards: Progressive enhancement, accessibility, SEO

🎯 Características Técnicas Avanzadas

� Arquitectura de Internacionalización

Sistema i18n Nativo - Click para expandir
  • ✅ Routing Bilingüe: Rutas automáticas /es/ y /en/
  • ✅ Content Collections Localizadas: Esquemas Zod por idioma
  • ✅ SSG Multiidioma: Generación estática para ambos idiomas
  • ✅ SEO Localizado: Sitemap XML + hreflang automático
  • ✅ Fallback Inteligente: Detección de idioma por Accept-Language
  • ✅ Persistencia de Preferencias: LocalStorage + navegación coherente
// Ejemplo de configuración i18n
export const languages = {
  es: 'es-ES',
  en: 'en-US',
} as const;

export const defaultLang = 'es';
export const ui = {
  /* ... */
};

⚡ Optimización de Rendimiento

Performance-First Architecture - Click para expandir
  • 🚀 Islands Architecture: JS mínimo, hidratación selectiva
  • 📦 Bundle Splitting: Código dividido automáticamente por ruta
  • 🖼️ Image Optimization: Sharp + responsive images + lazy loading
  • 📱 Core Web Vitals: LCP < 1.5s, FID < 100ms, CLS < 0.1
  • 💾 Static Generation: 100% SSG, sin runtime server
  • 🔄 Edge Caching: Vercel Edge + inmutable assets

Métricas objetivo:

Lighthouse Score: 100/100/100/100
First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Time to Interactive: < 3.5s

� Especialización Cybersecurity

CTF-Focused Content System - Click para expandir
  • 🎯 Taxonomía Especializada: Platform + Difficulty + OS + Attack Vector
  • 📊 Metadatos Técnicos: CVSS scores, tools used, techniques
  • 🏷️ Sistema de Tags: MITRE ATT&CK mapping + custom categories
  • 🔍 Búsqueda Avanzada: Filtros por dificultad, plataforma, técnicas
  • 📈 Analytics: Progreso CTF, estadísticas por plataforma
  • 🎨 UI Especializada: Badges dinámicos, difficulty indicators

Plataformas soportadas:

  • HackTheBox (HTB) - Machines & Challenges
  • TryHackMe (THM) - Rooms & Paths
  • VulnHub - Boot2Root VMs
  • PortSwigger - Web Security Academy

🛠️ Developer Experience

Herramientas y Automatización - Click para expandir
  • 📝 Content Authoring: MDX + frontmatter validation
  • 🔧 Type Safety: End-to-end TypeScript + Zod schemas
  • 🎨 Component Library: Design system reutilizable
  • 🔍 Code Quality: ESLint + Prettier + automated formatting
  • 🚀 CI/CD Pipeline: GitHub Actions + deploy automático
  • 📱 Responsive First: Mobile-first design + PWA ready

VS Code Integration:

  • Astro extension + syntax highlighting
  • Auto-formatting on save
  • TypeScript intellisense
  • Integrated terminal + debugging

� Análisis del Proyecto

📈 Métricas del Código

# Estructura del proyecto (estimado)
Total de archivos: ~45 archivos
Líneas de código: ~2000+ líneas
Componentes Astro: 10+ componentes reutilizables
Páginas dinámicas: Sistema de rutas bilingüe completo
Content Collections: 2 colecciones (blog + writeups)

🏗️ Arquitectura del Sistema

  • Patrón de Diseño: Arquitectura modular con separación de responsabilidades
  • File-based Routing: Sistema de rutas automático de Astro
  • Component-Driven: Componentes reutilizables y especializados
  • Content-First: Enfoque en contenido con Content Collections
  • Type-Safe: TypeScript en toda la aplicación

🔧 Configuraciones Clave

  • Astro Config: SSG + Vercel adapter con analytics
  • Tailwind: Configuración personalizada sin estilos base
  • ESLint: Reglas específicas para Astro y TypeScript
  • Vercel: Deploy automático con optimizaciones Edge

� Performance Budget

Métrica Target Current Status
First Contentful Paint < 1.5s ~1.2s ✅
Largest Contentful Paint < 2.5s ~1.8s ✅
Cumulative Layout Shift < 0.1 ~0.05 ✅
Time to Interactive < 3s ~2.1s ✅
Total Bundle Size < 100KB ~45KB ✅
Lighthouse Score 95+ 100 ✅

📝 Guía de Contenido

✍️ Crear Nuevo Contenido

Tipo Ubicación Template
📖 Blog Post src/content/blog/[lang]/ 
---
title: 'Título del artículo'
description: 'Descripción breve SEO'
pubDate: '2024-11-02'
tags: ['ciberseguridad', 'tutorial']
heroImage: '/images/blog/post-hero.jpg'
---
🔐 CTF Writeup src/content/writeups/[lang]/[platform]/ 
---
title: "Máquina HTB"
platform: "htb"
difficulty: "medium"
os: "linux"
pubDate: "2024-11-02"
tags: ["web", "privesc", "sudo"]
heroImage: "/images/writeups/machine.jpg"
---

🎯 Content Guidelines

  • 📏 Tamaño óptimo: 800-2000 palabras para SEO
  • 🖼️ Hero Images: Ratio 16:9, optimizadas para web
  • 🏷️ Tags: Usar taxonomía existente para consistencia
  • 🌍 Multiidioma: Sincronizar contenido entre ES/EN

📖 Wiki Colaborativa

La Wiki del proyecto es ideal para:

  • 📚 Tutoriales detallados y guías paso a paso
  • 🔧 Configuraciones avanzadas y troubleshooting
  • 💡 Tips y tricks de la comunidad
  • 📝 Notas de desarrollo y decisiones técnicas
# Clonar y editar la Wiki
git clone https://github.com/Crypt0xDev/Crypt0.wiki.git
# Editar archivos Markdown y hacer push
📋 Frontmatter Reference
Campo Tipo Requerido Descripción
title string ✅ Título SEO-optimizado
description string ✅ Meta description (150-160 chars)
pubDate Date ✅ Fecha de publicación
tags string[] ✅ Taxonomía para filtrado
heroImage string ❌ Imagen de portada
platform enum ✅* Solo writeups: htb, thm, etc.
difficulty enum ✅* Solo writeups: easy, medium, hard
os enum ✅* Solo writeups: linux, windows

🚀 Despliegue

☁️ Deploy Automático con Vercel

# 1️⃣ Push a GitHub (deploy automático)
git push origin main

# 2️⃣ Vercel detecta cambios y despliega
# ➜ Deploy completo en ~30 segundos
# ➜ URL de producción actualizada automáticamente
Ambiente URL Trigger Tiempo
🔴 Production crypt0xdev.vercel.app Push to main ~30s
🟡 Preview crypt0xdev-git-*.vercel.app Push to PR ~25s
🟢 Development localhost:4321 pnpm dev Instant

⚙️ Variables de Entorno

🔐 Configuración de Secrets (Click para expandir)

Para CI/CD completo, configura en Settings → Secrets and variables → Actions:

Secret Obtener en Uso
VERCEL_TOKEN Vercel Tokens API authentication
VERCEL_ORG_ID Account Settings Organization ID
VERCEL_PROJECT_ID Project Settings → General Project identification 
# Verificar configuración local
vercel --version
vercel whoami
vercel env ls

📚 Documentación

🛠️ Guías de Desarrollo

Documento Descripción Audiencia
VERCEL_SETUP.md Configuración completa de deploy DevOps
Content Collections Guide Manejo de contenido tipado Editores
Astro Components Desarrollo de componentes Developers
Tailwind Config Personalización de estilos Designers

🔧 Troubleshooting Común

Problemas de Build 
# Error: Content Collections no encontradas
pnpm astro sync

# Error: TypeScript types obsoletos
rm -rf .astro && pnpm dev

# Error: Cache de Vercel corrupto
vercel --prod --force

# Error: Dependencies desactualizadas
pnpm update --latest
Desarrollo Local 
# Puerto ocupado
pnpm dev --port 3000

# Hot reload no funciona
rm -rf node_modules .astro && pnpm install

# VS Code no reconoce Astro
Ctrl+Shift+P → "Reload Window"

# Prettier no formatea .astro
Verificar que prettier-plugin-astro está instalado

🤝 Contribuciones

�‍♂️ Cómo Contribuir

¡Las contribuciones son bienvenidas! Desde corrección de typos hasta nuevas características.

Tipo Descripción Proceso
🐛 Bug Fix Corrección de errores Issue → Fork → PR
✨ Feature Nueva funcionalidad Discussion → Issue → PR
📝 Content Nuevos writeups/posts Direct PR
📚 Docs Mejoras de documentación Direct PR

⚡ Quick Start Contributor

# Setup del proyecto en 30 segundos
git clone https://github.com/Crypt0xDev/Crypt0.git
cd Crypt0 && pnpm install && pnpm dev
# ➜ http://localhost:4321

# Para contribuir a la Wiki
git clone https://github.com/Crypt0xDev/Crypt0.wiki.git
cd Crypt0.wiki
# Editar archivos .md y hacer push directo

📋 Standards

  • 📝 Commits: Conventional Commits (feat:, fix:, docs:)
  • 🔧 Code: Auto-formatting con Prettier + ESLint
  • 🧪 Testing: Lighthouse CI + manual testing
  • 📖 Docs: TSDoc para componentes, frontmatter para contenido

💡 Tip: Revisa doc/CONTRIBUTING.md para la guía completa.

📄 Licencia

MIT License Security Policy

Licencia MIT - Libertad total para usar, modificar y distribuir

📜 Ver detalles completos

🔗 Links Útiles

📚 Documentación del Proyecto

Documento Descripción Enlace
📖 Wiki del Proyecto Documentación colaborativa GitHub Wiki
📖 Documentación Técnica Guía técnica detallada doc/technical-documentation.md
🛠️ Guía de Instalación Setup paso a paso doc/installation-guide.md
🤝 Guía de Contribución Cómo contribuir doc/contributing-guide.md
📋 Índice de Documentación Navegación completa doc/documentation-index.md
📄 Vista General del Proyecto Overview completo doc/project-overview.md
⚖️ Información de Licencia Términos de uso detallados doc/license-information.md

🌐 Links Externos

💬 Soporte & Comunidad

¿Tienes preguntas? ¡Estamos aquí para ayudar!

GitHub Issues GitHub Discussions GitHub Stars

🐛 Reportar Bug • 💡 Solicitar Feature • 💬 Hacer Pregunta

🙏 Agradecimientos

Construido con tecnologías de código abierto increíbles:

Astro • TypeScript • Tailwind CSS • Vercel • Zod

Desarrollado con ❤️ para la comunidad de ciberseguridad

© 2024 Crypt0xDev. Licenciado bajo MIT.

About

crypt0-six.vercel.app/es

Topics

blog ctf-writeups astro writeups htb-writeups multilenguaje

Resources

Readme

License

View license

Contributing

Contributing

Security policy

Security policy
Activity

Stars

4 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages