Porfolio personal - Juan Carlos Macías
juancarlosmacias.es

     

🔹 Algún bug, dimelo aquí.

🚀 Nuevas Funcionalidades v1.1.9

🔄 Sistema Híbrido SSR + SPA

• 🚀 Server-Side Rendering (SSR): Renderizado inicial en PHP para mejor SEO y rendimiento
• ⚡ Progressive Enhancement: React se hidrata sobre HTML pre-renderizado
• 🎯 Optimización SEO: Meta tags dinámicos completos desde el servidor
• 📱 Experiencia SPA: Navegación fluida sin recargas después del primer load
• 🏗️ Arquitectura front_php/: Sistema de templates PHP + build de React integrado

🎨 Sistema de Templates PHP

• 📄 Layout.php: Template base con meta tags dinámicos y structured data
• 🔧 Componentización: Sistema modular de componentes reutilizables
• 🌐 Detección de rutas: Parsing de URL para inyectar meta tags específicos
• 📊 Datos estructurados: JSON-LD automático para artículos y páginas

🤖 Generación de Artículos con IA - Contexto Avanzado (v1.0.8)

• 💡 Contenido contextual: Usa contenido existente como base para generar artículos más coherentes
• 🎨 Modal avanzado: Interfaz intuitiva con opciones completas de configuración
• 🎯 Control de tono: 5 estilos disponibles (profesional, casual, académico, amigable, técnico)
• 📊 Control de palabras: Selección precisa del número de palabras a generar
• 🔄 Auto-generación: Genera automáticamente extracto y meta description tras crear el artículo
• 🔧 Test de conexión: Herramienta de depuración integrada para verificar API
• 🛠️ Depuración mejorada: Logs detallados y manejo de errores más robusto

🚀 Funcionalidades v1.0.7

🔄 Sistema de Vistas de Artículos

• 📊 Contador de visualizaciones: Registra automáticamente las vistas de cada artículo
• 📈 Estadísticas en tiempo real: Panel de administración muestra estadísticas de visualizaciones
• 🔄 Inicialización de vistas: Botón para inicializar vistas en artículos existentes
• 🌐 Detección de entorno: Funciona correctamente en local y producción

🎨 Metadatos SEO Avanzados

• 🏷️ Meta tags completos: Metadatos de autor, fechas de publicación y modificación
• 📋 Structured data: JSON-LD para mejor indexación en Google
• 🔗 Open Graph mejorado: Metadatos específicos para artículos en redes sociales
• 📝 Twitter Cards: Optimización para compartir en Twitter
• ⚖️ Licencias: Metadatos de copyright y licencias Creative Commons

🖼️ Imagen Destacada Mejorada

• 🎯 Selector visual: Interfaz mejorada para seleccionar imágenes destacadas
• 👁️ Vista previa: Previsualización automática de la imagen seleccionada
• 🔧 Validación URL: Verificación automática de URLs de imágenes
• 📐 Recomendaciones: Guías de tamaño óptimo para redes sociales

🗺️ Generador de Sitemap Automático

• 🤖 Generación automática: Crea sitemaps XML automáticamente desde el panel admin
• 🔍 Detección React SPA: Descubre rutas de aplicaciones React automáticamente
• 🌐 Multi-entorno: Funciona en local y producción con detección automática
• ⚡ Tiempo real: Actualización instantánea del sitemap

🐛 Correcciones y Mejoras

• 🏷️ Tags de artículos: Corregido problema de formato CSV vs JSON en tags
• 🔗 URLs consistentes: Mejorada detección de entorno local vs producción
• 🛡️ Validaciones: Mejoras en validación de datos y manejo de errores

📚 Funcionalidades v1.0.6

✨ Sistema de Artículos y Blog

• 📝 Gestión completa de artículos: Crea, edita y publica artículos desde un panel de administración intuitivo
• 🤖 Generación automática con IA: Integración con múltiples proveedores de IA (Groq, Hugging Face, OpenAI) para generar contenido automáticamente
• 🔍 Búsqueda inteligente: Busca artículos en tiempo real por título, contenido o etiquetas
• 📱 Vista adaptativa: Cambia entre vista de cuadrícula y lista para una mejor experiencia de lectura
• 🏷️ Sistema de etiquetas: Organiza y filtra artículos por categorías y temas

🖼️ Galería de Imágenes Mejorada

• 📁 Explorador de imágenes: Navega y selecciona imágenes fácilmente desde el panel de administración
• ⬆️ Subida de archivos: Sube nuevas imágenes directamente desde la interfaz
• 🖱️ Selección modal: Interfaz elegante para seleccionar imágenes para proyectos y artículos
• 📏 Optimización automática: Las imágenes se optimizan automáticamente para web

🏗️ Panel de Administración Completo

• 🔐 Sistema de autenticación: Acceso seguro con gestión de sesiones
• 📊 Dashboard informativo: Vista general de proyectos, artículos y estadísticas
• ⚡ Interfaz responsive: Funciona perfectamente en desktop, tablet y móvil
• 🎨 Diseño moderno: Interfaz limpia y profesional con navegación intuitiva

🔄 API REST Mejorada

• 📄 Paginación inteligente: Navega por proyectos y artículos con controles de paginación
• 🔍 Filtros avanzados: Filtra proyectos por tipo (web, app) con contadores dinámicos
• ⚡ Rendimiento optimizado: Consultas optimizadas para cargas rápidas
• 🌐 CORS configurado: Acceso seguro desde diferentes dominios

🏠 Homepage Renovada

• 📰 Artículos recientes: Muestra automáticamente los últimos artículos publicados
• 🔗 Navegación mejorada: Nueva sección de artículos en el menú principal
• 📱 Diseño responsive: Adaptación perfecta a todos los dispositivos
• ⚡ Carga optimizada: Mejores tiempos de carga y fluidez general

Código

Puedes modificar el código de la forma y manera que te apetezca, eres libre de copiar y modificar a tu gusto, y si quieres puedes nombrarme juancmacias.

Tecnología

Mi portafolio personal juancarlosmacias.es presenta algunos de mis proyectos en Github, así como mi currículum y habilidades técnicas.

Este proyecto utiliza tecnologías modernas para ofrecer una experiencia completa tanto en frontend como en backend.

Frontend

• React.js - Framework principal para la interfaz de usuario
• Bootstrap - Framework CSS para diseño responsive
• React Router - Navegación entre páginas
• CSS3 - Estilos personalizados y animaciones
• JavaScript ES6+ - Funcionalidades modernas
• SSR con PHP - Renderizado híbrido servidor/cliente para SEO óptimo

Backend

• PHP 8+ - Lenguaje del servidor con programación orientada a objetos
• MySQL/MySQLi - Base de datos con compatibilidad automática
• API REST - Endpoints para proyectos, artículos e imágenes
• JSON - Formato de intercambio de datos

Integraciones de IA

• Groq API - Generación rápida de contenido
• Hugging Face - Modelos de lenguaje natural
• OpenAI - Generación de texto avanzada

Herramientas de Desarrollo

• Git - Control de versiones con etiquetado semántico
• VS Code - Editor principal con extensiones optimizadas
• Composer - Gestor de dependencias PHP (futuro)
• npm - Gestor de paquetes Node.js

Para empezar

Clona este repositorio. Necesitaras node.js, git y un servidor PHP instalados globalmente en tu máquina.

Instrucciones de instalación y configuración

Configuración del Frontend

Opción 1: Desarrollo SPA (Recomendado para desarrollo)

1. Instala las dependencias: npm install

2. Configura las URLs:

   • Revisa frontend/src/Services/urls.js
   • Ajusta las URLs según tu entorno (local/producción)

3. Inicia el desarrollo: npm start

Ejecuta la aplicación en modo de desarrollo. Abre http://localhost:3000 para verlo en el navegador. La página se recargará si realizas modificaciones.

Opción 2: Sistema Híbrido SSR + React (Producción)

1. Build del frontend:

   cd frontend
   npm install
   npm run build

2. Copia el build a front_php/:

   cp -r build/* ../front_php/build/

3. Configura PHP:

   • El archivo front_php/index.php servirá como punto de entrada
   • Los templates en front_php/templates/ manejan el SSR
   • React se hidrata automáticamente sobre el HTML generado

4. Accede a: http://tudominio.com/ (el SSR funcionará automáticamente)

Configuración del Backend

1. Servidor PHP: Asegúrate de tener PHP 8+ con extensiones MySQLi/PDO

2. Base de datos:

   • Importa admin/sql/init-database.sql en tu MySQL
   • Configura la conexión en admin/config/config.local.php

3. Configuración local:

   cp admin/config/config.local.example.php admin/config/config.local.php

   Luego edita config.local.php con tus datos reales.

4. Panel de administración:

   • Accede a http://tudominio.com/admin
   • Usa las credenciales configuradas en la base de datos

Configuración de IA (Opcional)

Para usar las funcionalidades de generación automática de contenido:

1. Obtén API keys de los proveedores que quieras usar:

   • Groq (recomendado - más rápido)
   • Hugging Face
   • OpenAI

2. Configura las keys en admin/config/config.local.php:

   'api_keys' => [
       'groq' => 'tu-api-key-aqui',
       'huggingface' => 'tu-api-key-aqui',
       'openai' => 'tu-api-key-aqui'
   ]

Instrucciones de uso

Estructura del Proyecto

📦 Portfolio/
├── 🎨 frontend/          # Aplicación React (desarrollo)
│   ├── src/components/   # Componentes reutilizables
│   ├── src/Services/     # Configuración de APIs y URLs
│   └── public/Assets/    # Imágenes y recursos estáticos
├── 🚀 front_php/        # Sistema híbrido SSR + SPA (producción)
│   ├── index.php        # Punto de entrada con detección de rutas
│   ├── templates/       # Templates PHP para SSR
│   │   ├── Layout.php   # Layout base con meta tags dinámicos
│   │   └── components/  # Componentes reutilizables PHP
│   └── build/           # Build de React integrado
├── 🔧 admin/            # Panel de administración
│   ├── pages/           # Páginas del admin (login, dashboard, etc.)
│   ├── api/             # APIs para imágenes y funciones IA
│   ├── classes/         # Clases PHP (AIContentGenerator, ArticleManager, etc.)
│   │   └── RAG/         # Sistema RAG para chat conversacional
│   └── config/          # Configuración de la aplicación
├── 🌐 api/portfolio/    # API REST principal
│   ├── projects.php     # Endpoint de proyectos
│   ├── articles.php     # Endpoint de artículos
│   ├── chat-rag.php     # Endpoint del chat conversacional
│   └── config.php       # Configuración de la API
└── 📚 doc/             # Documentación técnica

Personalización

1. Contenido personal:

   • Edita frontend/src/components/ para cambiar textos e información
   • Actualiza frontend/public/Assets/ con tus imágenes

2. Proyectos:

   • Usa el panel admin para agregar/editar proyectos
   • O edita directamente api/portfolio/datos_proyectos.json

3. Artículos:

   • Accede al panel admin → Sección "Artículos"
   • Crea nuevo contenido manualmente o con ayuda de IA

4. Estilos:

   • Modifica frontend/src/style.css para cambios visuales
   • Ajusta admin/assets/css/ para el panel de administración

Funcionalidades del Panel Admin

• 🏠 Dashboard: Vista general con estadísticas
• 📁 Proyectos: Gestión completa de tu portfolio
• 📝 Artículos: Sistema de blog con editor y IA
• 🖼️ Galería: Explorador y gestor de imágenes
• ⚙️ Configuración: Ajustes del sistema y APIs

Stats

Muestra tu apoyo

Si te gusto dale una estrella y puedes invitarme a un café.

Control de versions

✅ Checklist SemVer + Tags

1. 🧪 Antes de versionar

• Todo el código fue probado y funciona correctamente
• Todos los tests pasan
• El proyecto está en un estado estable o importante (lanzamiento, demo, entrega, etc.)

---

2. 📄 Decide la nueva versión

• ¿Rompiste compatibilidad con versiones anteriores? → Incrementa MAJOR
• ¿Añadiste nuevas funcionalidades compatibles? → Incrementa MINOR
• ¿Solo corregiste errores o hiciste mejoras menores? → Incrementa PATCH

🧠 Ejemplo:
Si la versión actual es v1.2.3 y corriges un bug, la nueva sería v1.2.4.

git tag -a v1.0.0 -m "Release: versión inicial"
git push origin v1.0.0

# para obtener la última versión
git describe