📱 larasebs.projects - Guía de Uso y Despliegue

¿Qué tienes?

Tu sitio web completo con:

• ✅ Página de inicio moderna y minimalista
• ✅ Sección de proyectos con descargas
• ✅ Blog/Tutoriales
• ✅ Formulario de contacto
• ✅ Newsletter
• ✅ Links a redes sociales
• ✅ Diseño responsive (funciona en móviles)

---

🚀 Cómo desplegar tu sitio (opciones gratuitas)

Opción 1: GitHub Pages (Recomendado - Gratis)

Pasos:

1. Crea una cuenta en github.com si no la tienes
2. Crea un nuevo repositorio llamado larasebs-projects (o cualquier nombre)
3. Sube los 4 archivos:
   • index.html
   • styles.css
   • script.js
   • (Este archivo README.md)
4. Ve a Settings → Pages
5. Selecciona "Deploy from a branch"
6. Elige la rama main
7. ¡Listo! Tu sitio estará en https://tuusuario.github.io/larasebs-projects

Opción 2: Netlify (Muy fácil - Gratis)

Pasos:

1. Ve a netlify.com
2. Conecta tu repositorio de GitHub
3. Netlify detectará automáticamente tu sitio
4. Tu sitio estará en vivo al instante
5. (Opcional) Puedes agregar un dominio personalizado

Opción 3: Vercel (Rápido - Gratis)

Pasos:

1. Ve a vercel.com
2. Importa tu repositorio de GitHub
3. Un clic y ¡listo!
4. Tu sitio estará en https://larasebs-projects.vercel.app

---

🎨 Cómo personalizar tu sitio

1. Cambiar colores

Abre styles.css y busca :root {

Cambia estos valores:

--primary: #3b82f6;        /* Color principal (azul actualmente) */
--primary-dark: #1e40af;   /* Azul más oscuro para hover */
--text-dark: #1f2937;      /* Texto oscuro */
--bg-light: #f9fafb;       /* Fondo claro */

Colores sugeridos para gaming:

• Naranja/Rojo: #ff6b35
• Púrpura: #9d4edd
• Cian: #00d9ff

2. Actualizar tus redes sociales

Abre index.html y busca la sección social-links:

<a href="https://www.youtube.com/c/TU_CANAL" target="_blank">

Reemplaza con tus URLs reales:

• YouTube: https://www.youtube.com/c/LaraSebas
• Twitter: https://twitter.com/tuusuario
• Discord: https://discord.gg/tuservidor
• GitHub: https://github.com/tuusuario

3. Agregar tus proyectos

Abre script.js y busca la sección const projects = [

Ejemplo de cómo agregar tu launcher:

{
    id: 1,
    icon: "⚙️",
    name: "LaraSebas Launcher",
    description: "Launcher no-oficial para Minecraft Java. Gestiona tus instalaciones y mods.",
    version: "1.0.0",
    downloadUrl: "https://github.com/TU_USUARIO/launcher/releases/download/v1.0/launcher.jar",
    category: "Minecraft"
}

Cómo obtener el link de descarga:

• Si subes a GitHub Releases: Usa el link de descarga
• Si subes a Google Drive: Comparte el archivo y copia el link
• Si subes a MediaFire: Copia el link de descarga

4. Agregar posts al blog

En script.js, busca const blogPosts = [

{
    id: 1,
    title: "Tu título aquí",
    description: "Descripción corta del tutorial",
    date: "15 Abril 2024",
    emoji: "📥"  // Puedes cambiar el emoji
}

Emojis útiles:

• 📥 Tutorial descarga
• 🎮 Gaming
• 🚀 Lanzamiento
• ⚡ Performance
• 📚 Documentación
• 🎯 Tips

5. Cambiar el nombre/branding

En index.html:

• Cambia <title> para el nombre en la pestaña del navegador
• Cambia LaraSebas<span>.projects</span> en el logo

---

📂 Estructura de archivos

larasebs-projects/
├── index.html      (Página principal - NO TOQUES estructura, solo contenido)
├── styles.css      (Estilos - Edita colores aquí)
├── script.js       (JavaScript - Edita proyectos y blog aquí)
└── README.md       (Este archivo)

---

🔗 Dominio personalizado

Si quieres larasebs.projects como dominio real:

1. Compra un dominio en:

   • Namecheap (muy barato)
   • GoDaddy
   • 1&1
   • Registrar.com

2. Configura el DNS en tu proveedor de hosting:

   • Si usas GitHub Pages: Añade CNAME con larasebs.projects
   • Si usas Netlify: Conecta directamente
   • Si usas Vercel: Lo hace automáticamente

---

💾 Cómo hospedar archivos de descarga

Opción 1: GitHub Releases (Gratis, hasta 2GB por archivo)

1. Ve a tu repositorio
2. Crea un Release
3. Copia los archivos (.jar, .zip, etc.)
4. Copia el enlace de descarga

Opción 2: Google Drive (Gratis, 15GB)

1. Sube el archivo
2. Compartir → Link público
3. Usa el ID del archivo para crear un enlace directo

Opción 3: MediaFire (Gratis, 50GB)

1. Sube el archivo
2. Copia el enlace de descarga

---

📊 Estadísticas de descargas

Para rastrear descargas, puedes:

1. Usar Google Analytics (gratis)
2. Usar Countly (analíticas open source)
3. Ver descargas en GitHub Releases

---

🛡️ Formulario de contacto y Newsletter

Actualmente, estos formularios muestran un mensaje de confirmación.

Para hacerlos funcionales, necesitarás:

Opción 1: Formspree (Gratis)

1. Ve a formspree.io
2. Crea una cuenta
3. Copia tu endpoint
4. En index.html, cambia <form id="contactForm"> a:

<form action="https://formspree.io/f/TUENDPOINT" method="POST">

Opción 2: EmailJS (Gratis)

1. Ve a emailjs.com
2. Sigue el tutorial de integración
3. Es más fácil y no requiere backend

---

✨ Consejos para mejorar

1. SEO: Agrega meta tags para aparecer en Google
2. Logo: Crea un favicon (icono de la pestaña)
3. Contenido: Actualiza blog regularmente
4. Imágenes: Agrega capturas/screenshots de tus proyectos
5. Videos: Incruста un vídeo de YouTube en la sección hero

---

🆘 Solución de problemas

El sitio no se carga en GitHub Pages

• Espera 5-10 minutos después de subir
• Verifica que el repositorio sea público
• Revisa la rama en Settings → Pages

Los formularios no envían emails

• Necesitas integrar Formspree o EmailJS
• Sin backend, los formularios solo muestran "enviado"

Los links de descarga no funcionan

• Verifica que las URLs sean correctas
• Asegúrate de que los archivos estén públicos

---

📱 Testing responsivo

Antes de lanzar:

1. Abre tu sitio en móvil
2. Verifica que todo se vea bien
3. Prueba los botones y formularios
4. Prueba en diferentes navegadores

---

🎯 Siguiente paso

1. Sube los archivos a GitHub
2. Activa GitHub Pages
3. Personaliza los colores y datos
4. ¡Comparte tu sitio con tu comunidad!

---

📞 Necesitas ayuda?

Si tienes preguntas específicas:

1. Revisa la documentación de tu plataforma de hosting
2. Busca en Stack Overflow
3. Pregunta en comunidades de programación

---

¡Mucho éxito con tu sitio! 🚀