Skip to content

Plataforma profesional de ciberseguridad con blog técnico y CTF writeups | Built with Astro + TypeScript | Soporte bilingüe ES/EN

License

Notifications You must be signed in to change notification settings

Crypt0xDev/Crypt0xDev-Platform

Repository files navigation

🔐 Crypt0xDev

Professional Cybersecurity Platform & CTF Writeups

Built with Astro TypeScript Tailwind CSS Sentry

Build Status Lighthouse License PRs Welcome

🌐 Live Demo📚 Documentation🚀 Quick Start🤝 Contributing



🇬🇧 English

📖 About

Crypt0xDev is an enterprise-grade web platform specialized in cybersecurity, built with cutting-edge web technologies. It combines a professional technical blog with a comprehensive CTF writeups collection, delivering high-quality educational content to the information security community.

✨ Key Features

🎯 Core Features

  • 🌍 Bilingual Support (ES/EN)
  • 100/100 Lighthouse Score
  • 🔐 CTF Writeups (HTB, THM, VulnHub, HackMyVM)
  • 📱 Fully Responsive Design
  • 🎨 Dark/Light Mode
  • 🔍 Advanced Search (Pagefind)

🚀 Technical Excellence

  • 📦 Path Aliases (@components, @layouts)
  • 🖼️ Lazy Loading Images (40-60% faster)
  • 📊 Error Tracking (Sentry)
  • 🌐 i18n System (Routing + SEO)
  • 📝 Content Collections (Type-safe)
  • 🎯 Zero Build Errors

🏗️ Architecture

graph TD
    A[Astro 5.15.3] --> B[Static Site Generation]
    A --> C[Content Collections]
    A --> D[i18n System]
    B --> E[440+ Pages]
    C --> F[Blog Posts]
    C --> G[CTF Writeups]
    C --> H[Resources]
    D --> I[ES Routes]
    D --> J[EN Routes]
Loading

📊 Project Metrics

Metric Value Status
Performance 100/100 ✅ Perfect
Accessibility 100/100 ✅ WCAG 2.1
SEO 100/100 ✅ Optimized
Best Practices 100/100 ✅ Modern
Build Time <11s ✅ Fast
Pages Generated 440+ ✅ Complete
Code Quality 8.6/10 ✅ Excellent

🚀 Quick Start

Prerequisites

Node.js >= 18.20.8 LTS
pnpm >= 7.1.0

Installation

# Clone repository
git clone https://github.com/Crypt0xDev/Crypt0.git
cd Crypt0

# Install dependencies
pnpm install

# Start development server
pnpm dev
# ➜ http://localhost:4321

Available Scripts

Script Command Description
dev pnpm dev Start development server (port 4321)
build pnpm build Build for production
preview pnpm preview Preview production build
test pnpm test Run tests with Vitest
generate:images pnpm generate:images Generate placeholder images

🛠️ Tech Stack

Framework Astro 5.15.3 Islands Architecture + SSG
Language TypeScript 5.9 Type safety + IntelliSense
Styling Tailwind CSS 3.4 Utility-first CSS
Monitoring Sentry 10.24 Error tracking + Performance
Search Pagefind 1.4 Client-side search
Testing Vitest 4.0 Unit + Integration tests
Deployment Vercel Edge Network + CDN

📁 Project Structure

Crypt0xDev/
├── src/
│   ├── components/       # Reusable components
│   │   ├── common/       # Shared UI components
│   │   ├── shared/       # Base components (Card, Badge, Button)
│   │   ├── ui/           # Layout components (Header, Footer)
│   │   └── writeup/      # Writeup-specific components
│   ├── content/          # Content Collections
│   │   ├── blog/         # Blog posts (es/en)
│   │   ├── writeups/     # CTF writeups (es/en)
│   │   ├── ctf/          # CTF challenges
│   │   └── resources/    # Learning resources
│   ├── i18n/             # Internationalization system
│   │   ├── constants/    # Categories, platforms, difficulty
│   │   ├── core/         # Translation engine
│   │   ├── translations/ # en.json, es.json
│   │   ├── types/        # TypeScript definitions
│   │   └── utils/        # Helper functions
│   ├── layouts/          # Page layouts
│   ├── pages/            # Astro pages (auto-routing)
│   └── styles/           # Global CSS + components
├── public/               # Static assets
│   ├── fonts/            # Inter + JetBrains Mono
│   ├── images/           # Writeup images, platforms
│   └── og/               # Open Graph images
├── scripts/              # Build scripts
│   └── generate-img.js   # Generate placeholder images
└── doc/                  # Documentation

🎨 Path Aliases

Configured for clean imports:

import Layout from '@layouts/Layout.astro';
import Card from '@components/shared/Card.astro';
import { useTranslations } from '@i18n/core';
import { formatDate } from '@i18n/utils';

Available aliases:

  • @components/*src/components/*
  • @layouts/*src/layouts/*
  • @i18n/*src/i18n/*
  • @utils/*src/i18n/utils/*
  • @types/*src/i18n/types/*
  • @constants/*src/i18n/constants/*

📖 Full documentation

🌍 i18n System

Fully bilingual with:

  • ✅ Automatic routing (/es/*, /en/*)
  • ✅ Localized content collections
  • ✅ SEO optimization (hreflang, sitemap)
  • ✅ Language switcher component
  • ✅ Translated UI strings

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
pnpm add -g vercel

# Deploy
vercel

Configuration in vercel.json:

  • Build Command: pnpm build
  • Output Directory: dist
  • Environment Variables: PUBLIC_SENTRY_DSN, SENTRY_AUTH_TOKEN

📊 Performance Optimizations

  • Lazy Loading: All images load on-demand
  • Path Aliases: Clean, maintainable imports
  • Error Tracking: Sentry monitoring
  • Static Generation: Pre-rendered pages
  • Code Splitting: Automatic chunking
  • Image Optimization: Sharp processing
  • CSS Purging: Unused styles removed

📚 Documentation

🤝 Contributing

We welcome contributions! Please read our Contributing Guide first.

# Fork the repository
# Create a feature branch
git checkout -b feature/amazing-feature

# Make your changes and commit
git commit -m "Add amazing feature"

# Push and create a Pull Request
git push origin feature/amazing-feature

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Crypt0xDev


🇪🇸 Español

📖 Acerca de

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

✨ Características Principales

🎯 Características Core

  • 🌍 Soporte Bilingüe (ES/EN)
  • 100/100 en Lighthouse
  • 🔐 Writeups CTF (HTB, THM, VulnHub, HackMyVM)
  • 📱 Diseño Responsive Completo
  • 🎨 Modo Oscuro/Claro
  • 🔍 Búsqueda Avanzada (Pagefind)

🚀 Excelencia Técnica

  • 📦 Path Aliases (@components, @layouts)
  • 🖼️ Lazy Loading de Imágenes (40-60% más rápido)
  • 📊 Tracking de Errores (Sentry)
  • 🌐 Sistema i18n (Routing + SEO)
  • 📝 Content Collections (Type-safe)
  • 🎯 Cero Errores de Build

🏗️ Arquitectura

graph TD
    A[Astro 5.15.3] --> B[Generación Estática]
    A --> C[Content Collections]
    A --> D[Sistema i18n]
    B --> E[440+ Páginas]
    C --> F[Posts de Blog]
    C --> G[Writeups CTF]
    C --> H[Recursos]
    D --> I[Rutas ES]
    D --> J[Rutas EN]
Loading

📊 Métricas del Proyecto

Métrica Valor Estado
Performance 100/100 ✅ Perfecto
Accesibilidad 100/100 ✅ WCAG 2.1
SEO 100/100 ✅ Optimizado
Mejores Prácticas 100/100 ✅ Moderno
Tiempo de Build <11s ✅ Rápido
Páginas Generadas 440+ ✅ Completo
Calidad de Código 8.6/10 ✅ Excelente

🚀 Inicio Rápido

Prerequisitos

Node.js >= 18.20.8 LTS
pnpm >= 7.1.0

Instalación

# Clonar repositorio
git clone https://github.com/Crypt0xDev/Crypt0.git
cd Crypt0

# Instalar dependencias
pnpm install

# Iniciar servidor de desarrollo
pnpm dev
# ➜ http://localhost:4321

Scripts Disponibles

Script Comando Descripción
dev pnpm dev Iniciar servidor de desarrollo (puerto 4321)
build pnpm build Construir para producción
preview pnpm preview Vista previa del build de producción
test pnpm test Ejecutar tests con Vitest
generate:images pnpm generate:images Generar imágenes placeholder

🛠️ Stack Tecnológico

Framework Astro 5.15.3 Arquitectura Islands + SSG
Lenguaje TypeScript 5.9 Seguridad de tipos + IntelliSense
Estilos Tailwind CSS 3.4 CSS utility-first
Monitoreo Sentry 10.24 Tracking de errores + Performance
Búsqueda Pagefind 1.4 Búsqueda del lado del cliente
Testing Vitest 4.0 Tests unitarios + integración
Despliegue Vercel Edge Network + CDN

📁 Estructura del Proyecto

Crypt0xDev/
├── src/
│   ├── components/       # Componentes reutilizables
│   │   ├── common/       # Componentes UI compartidos
│   │   ├── shared/       # Componentes base (Card, Badge, Button)
│   │   ├── ui/           # Componentes de layout (Header, Footer)
│   │   └── writeup/      # Componentes específicos de writeups
│   ├── content/          # Content Collections
│   │   ├── blog/         # Posts de blog (es/en)
│   │   ├── writeups/     # Writeups CTF (es/en)
│   │   ├── ctf/          # Desafíos CTF
│   │   └── resources/    # Recursos de aprendizaje
│   ├── i18n/             # Sistema de internacionalización
│   │   ├── constants/    # Categorías, plataformas, dificultad
│   │   ├── core/         # Motor de traducción
│   │   ├── translations/ # en.json, es.json
│   │   ├── types/        # Definiciones TypeScript
│   │   └── utils/        # Funciones helper
│   ├── layouts/          # Layouts de página
│   ├── pages/            # Páginas Astro (auto-routing)
│   └── styles/           # CSS global + componentes
├── public/               # Assets estáticos
│   ├── fonts/            # Inter + JetBrains Mono
│   ├── images/           # Imágenes writeups, plataformas
│   └── og/               # Imágenes Open Graph
├── scripts/              # Scripts de build
│   └── generate-placeholder-images.js
└── doc/                  # Documentación

🎨 Path Aliases

Configurados para imports limpios:

import Layout from '@layouts/Layout.astro';
import Card from '@components/shared/Card.astro';
import { useTranslations } from '@i18n/core';
import { formatDate } from '@i18n/utils';

Aliases disponibles:

  • @components/*src/components/*
  • @layouts/*src/layouts/*
  • @i18n/*src/i18n/*
  • @utils/*src/i18n/utils/*
  • @types/*src/i18n/types/*
  • @constants/*src/i18n/constants/*

📖 Documentación completa

🌍 Sistema i18n

Completamente bilingüe con:

  • ✅ Routing automático (/es/*, /en/*)
  • ✅ Content collections localizadas
  • ✅ Optimización SEO (hreflang, sitemap)
  • ✅ Componente de cambio de idioma
  • ✅ Strings de UI traducidos

🚀 Despliegue

Vercel (Recomendado)

# Instalar Vercel CLI
pnpm add -g vercel

# Desplegar
vercel

Configuración en vercel.json:

  • Build Command: pnpm build
  • Output Directory: dist
  • Variables de Entorno: PUBLIC_SENTRY_DSN, SENTRY_AUTH_TOKEN

📊 Optimizaciones de Performance

  • Lazy Loading: Todas las imágenes cargan bajo demanda
  • Path Aliases: Imports limpios y mantenibles
  • Tracking de Errores: Monitoreo con Sentry
  • Generación Estática: Páginas pre-renderizadas
  • Code Splitting: Fragmentación automática
  • Optimización de Imágenes: Procesamiento con Sharp
  • Purga de CSS: Estilos no usados eliminados

📚 Documentación

🤝 Contribuir

¡Damos la bienvenida a contribuciones! Por favor lee nuestra Guía de Contribución primero.

# Hacer fork del repositorio
# Crear una rama de feature
git checkout -b feature/caracteristica-increible

# Hacer cambios y commit
git commit -m "Agregar característica increíble"

# Push y crear Pull Request
git push origin feature/caracteristica-increible

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para detalles.

👤 Autor

Crypt0xDev


Made with ❤️ by Crypt0xDev

⭐ Star this repo if you find it useful!

About

Plataforma profesional de ciberseguridad con blog técnico y CTF writeups | Built with Astro + TypeScript | Soporte bilingüe ES/EN

Topics

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published