|
1 | | -# landing-page |
| 1 | +# SaltaDev - Landing Page |
2 | 2 |
|
3 | | -Landing page de la comunidad de SaltaDev |
| 3 | + |
4 | 4 |
|
5 | | -Nueva update extendiendo el uso del website, actualmente usando Jekyll |
| 5 | +Página web oficial de la **comunidad de desarrolladores más grande de Salta**, construida con Jekyll y optimizada para GitHub Pages. |
6 | 6 |
|
7 | | -Pasos de instalacion: |
| 7 | +## 🌟 Características |
8 | 8 |
|
9 | | -🔧 1. Instalar Jekyll |
10 | | -Si no lo tienes, instálalo con: |
| 9 | +- **Diseño responsive** compatible con dispositivos móviles y desktop |
| 10 | +- **Sistema de eventos dinámico** con countdown automático |
| 11 | +- **Galería de partners** con carousel animado |
| 12 | +- **Sección de equipo** con información de administradores |
| 13 | +- **Formulario de contacto** integrado |
| 14 | +- **Optimización SEO** y rendimiento web |
| 15 | +- **Arquitectura modular** con componentes reutilizables |
11 | 16 |
|
12 | | -```sh |
13 | | -gem install jekyll bundler |
| 17 | +## 🛠️ Tecnologías Utilizadas |
| 18 | + |
| 19 | +- **Jekyll** 4.x - Generador de sitios estáticos |
| 20 | +- **Bootstrap** 5.3.3 - Framework CSS responsive |
| 21 | +- **GSAP** 3.12.7 - Animaciones y efectos visuales |
| 22 | +- **Font Awesome** 6.7.2 - Iconografía |
| 23 | +- **Google Fonts** (Poppins) - Tipografía |
| 24 | +- **Liquid** - Template engine de Jekyll |
| 25 | + |
| 26 | +## 📁 Estructura del Proyecto |
| 27 | + |
| 28 | +``` |
| 29 | +├── _confidents/ # Archivos de partners/sponsors |
| 30 | +├── _events/ # Eventos de la comunidad |
| 31 | +├── _includes/ # Componentes reutilizables |
| 32 | +│ ├── head/ # Meta tags y imports |
| 33 | +│ ├── contact.html # Formulario de contacto |
| 34 | +│ ├── footer.html # Pie de página |
| 35 | +│ ├── nav.html # Navegación |
| 36 | +│ ├── partners.html # Sección de partners |
| 37 | +│ └── staff.html # Equipo de administración |
| 38 | +├── _staff/ # Información del equipo |
| 39 | +├── assets/ # Recursos estáticos organizados |
| 40 | +│ ├── css/ # Estilos CSS modulares |
| 41 | +│ │ ├── components/ # Estilos de componentes |
| 42 | +│ │ ├── pages/ # Estilos específicos de páginas |
| 43 | +│ │ ├── main.css # Estilos principales |
| 44 | +│ │ └── style.css # Configuración global |
| 45 | +│ ├── fonts/ # Fuentes personalizadas |
| 46 | +│ ├── img/ # Imágenes categorizadas |
| 47 | +│ │ ├── backgrounds/ |
| 48 | +│ │ ├── events/ |
| 49 | +│ │ ├── icons/ |
| 50 | +│ │ ├── partners/ |
| 51 | +│ │ └── staff/ |
| 52 | +│ └── js/ # JavaScript modular |
| 53 | +│ ├── components/ # Módulos de componentes |
| 54 | +│ ├── config/ # Configuraciones |
| 55 | +│ └── main.js # Archivo principal |
| 56 | +├── index.html # Página principal |
| 57 | +├── events.html # Página de eventos |
| 58 | +├── reglamento.html # Página de reglamento |
| 59 | +└── _config.yml # Configuración de Jekyll |
| 60 | +``` |
| 61 | + |
| 62 | +## 🚀 Instalación y Desarrollo |
| 63 | + |
| 64 | +### Prerrequisitos |
| 65 | + |
| 66 | +1. **Ruby** (versión 2.7 o superior) |
| 67 | + - Windows: Descargar desde [RubyInstaller](https://rubyinstaller.org/) |
| 68 | + - macOS: `brew install ruby` |
| 69 | + - Linux: `sudo apt-get install ruby-full` |
| 70 | + |
| 71 | +2. **Jekyll y Bundler** |
| 72 | + ```bash |
| 73 | + gem install jekyll bundler |
| 74 | + ``` |
| 75 | + |
| 76 | +### Configuración Local |
| 77 | + |
| 78 | +1. **Clonar el repositorio** |
| 79 | + ```bash |
| 80 | + git clone https://github.com/Salta-Dev/landing-page.git |
| 81 | + cd landing-page |
| 82 | + ``` |
| 83 | + |
| 84 | +2. **Instalar dependencias** |
| 85 | + ```bash |
| 86 | + bundle install |
| 87 | + ``` |
| 88 | + |
| 89 | +3. **Ejecutar servidor de desarrollo** |
| 90 | + ```bash |
| 91 | + bundle exec jekyll serve --livereload --config _config.yml |
| 92 | + ``` |
| 93 | + |
| 94 | +4. **Abrir en navegador** |
| 95 | + - Ir a `http://localhost:4000` |
| 96 | + - Los cambios se recargan automáticamente con LiveReload |
| 97 | + |
| 98 | +### VS Code (Recomendado) |
| 99 | + |
| 100 | +El proyecto incluye una task configurada. Usar `Ctrl+Shift+P` → "Tasks: Run Task" → "Jekyll GitHub Pages Server" |
| 101 | + |
| 102 | +## 📅 Gestión de Eventos |
| 103 | + |
| 104 | +### Crear un Evento |
| 105 | + |
| 106 | +1. **Crear archivo** en `_events/` con formato: `dd_mm_yyyy_prioridad.md` |
| 107 | + - Ejemplo: `15_12_2025_00.md` |
| 108 | + - La prioridad (00-99) determina el orden de visualización |
| 109 | + |
| 110 | +2. **Estructura del archivo**: |
| 111 | + ```yaml |
| 112 | + --- |
| 113 | + title: "Nombre del Evento" |
| 114 | + description: "Descripción detallada del evento" |
| 115 | + location: "Lugar del evento" |
| 116 | + photo: "/assets/img/events/evento.jpg" |
| 117 | + link: "https://enlace-al-evento.com" |
| 118 | + date: 2025-12-15 19:00:00 -0300 |
| 119 | + event_start_date: "15_12_2025:19_00_00" |
| 120 | + event_end_date: "15_12_2025:22_00_00" |
| 121 | + event_date_parsed: "15/12/2025" |
| 122 | + event_hours_parsed: "19:00 - 22:00" |
| 123 | + --- |
| 124 | + |
| 125 | + Contenido adicional del evento en Markdown... |
| 126 | + ``` |
| 127 | + |
| 128 | +### Formato de Fechas |
| 129 | + |
| 130 | +- **`event_start_date/event_end_date`**: `dd_MM_yyyy:hh_mm_ss` |
| 131 | +- **`date`**: Formato ISO con timezone de Argentina (-0300) |
| 132 | +- **`event_date_parsed`**: Formato de visualización `dd/MM/yyyy` |
| 133 | +- **`event_hours_parsed`**: Formato de visualización `hh:mm - hh:mm` |
| 134 | + |
| 135 | +## 👥 Gestión de Equipo |
| 136 | + |
| 137 | +### Agregar Miembro del Staff |
| 138 | + |
| 139 | +Crear archivo en `_staff/` con formato `nombre_apellido.md`: |
| 140 | + |
| 141 | +```yaml |
| 142 | +--- |
| 143 | +name: "Nombre Completo" |
| 144 | +role: "Cargo" # Fundador, Administrador, Administradora |
| 145 | +description: "Descripción profesional" |
| 146 | +photo: "/assets/img/staff/nombre_apellido.jpg" |
| 147 | +twitter: "https://twitter.com/usuario" # Opcional |
| 148 | +linkedin: "https://linkedin.com/in/usuario" |
| 149 | +github: "https://github.com/usuario" # Opcional |
| 150 | +--- |
| 151 | +``` |
| 152 | + |
| 153 | +## 🤝 Gestión de Partners |
| 154 | + |
| 155 | +### Agregar Partner/Sponsor |
| 156 | + |
| 157 | +Crear archivo en `_confidents/` con formato `nombre_empresa.md`: |
| 158 | + |
| 159 | +```yaml |
| 160 | +--- |
| 161 | +name: "Nombre de la Empresa" |
| 162 | +description: "Descripción de la empresa" |
| 163 | +link: "https://empresa.com" |
| 164 | +icon: "/assets/img/partners/logo_empresa.png" |
| 165 | +--- |
| 166 | +``` |
| 167 | + |
| 168 | +## 🎨 Personalización de Estilos |
| 169 | + |
| 170 | +### CSS Modular |
| 171 | + |
| 172 | +- **`main.css`**: Estilos principales del sitio |
| 173 | +- **`components/`**: Estilos de componentes específicos |
| 174 | +- **`pages/`**: Estilos específicos de páginas |
| 175 | +- **`style.css`**: Configuración global y variables CSS |
| 176 | + |
| 177 | +### Variables CSS Principales |
| 178 | + |
| 179 | +```css |
| 180 | +:root { |
| 181 | + --primaryColor: #ff4444; |
| 182 | + --font-path: '/assets/fonts/'; |
| 183 | + --img-path: '/assets/img/'; |
| 184 | +} |
14 | 185 | ``` |
15 | 186 |
|
16 | | -Si usas Windows, instala Ruby+DevKit primero desde [https://rubyinstaller.org/](rubyinstaller.org). |
| 187 | +## 🚀 Despliegue |
| 188 | + |
| 189 | +### GitHub Pages (Automático) |
| 190 | + |
| 191 | +El sitio se despliega automáticamente en GitHub Pages con cada push a la rama `main`. |
17 | 192 |
|
18 | | -Puedes ejecutar la task de visual studio code para ejecutarlo. sino tienes el comando |
| 193 | +### Despliegue Manual |
19 | 194 |
|
20 | | -```sh |
21 | | -bundle exec jekyll serve --livereload --config _config.yml |
| 195 | +```bash |
| 196 | +# Construir sitio para producción |
| 197 | +bundle exec jekyll build |
| 198 | + |
| 199 | +# Los archivos generados estarán en _site/ |
22 | 200 | ``` |
23 | 201 |
|
24 | | -EVENTOS |
| 202 | +## 📱 SEO y Performance |
| 203 | + |
| 204 | +- **Meta tags** optimizados para redes sociales |
| 205 | +- **Imágenes optimizadas** en formatos WebP y AVIF |
| 206 | +- **CSS y JS minificados** en producción |
| 207 | +- **Lazy loading** de imágenes |
| 208 | +- **Sitemap** automático generado por Jekyll |
| 209 | + |
| 210 | +## 🤝 Contribución |
| 211 | + |
| 212 | +1. **Fork** del repositorio |
| 213 | +2. **Crear rama** para la característica: `git checkout -b feature/nueva-caracteristica` |
| 214 | +3. **Commit** de cambios: `git commit -m 'Agregar nueva característica'` |
| 215 | +4. **Push** a la rama: `git push origin feature/nueva-caracteristica` |
| 216 | +5. **Crear Pull Request** |
| 217 | + |
| 218 | +## 📞 Contacto |
| 219 | + |
| 220 | +- **Email**: comusaltadev@gmail.com |
| 221 | +- **Website**: [saltadev.org](https://saltadev.org) |
| 222 | +- **WhatsApp**: [Únete a la comunidad](https://linktr.ee/saltadev) |
| 223 | + |
| 224 | +## 📄 Licencia |
| 225 | + |
| 226 | +Este proyecto está bajo la Licencia MIT. Ver el archivo `LICENSE` para más detalles. |
| 227 | + |
| 228 | +--- |
25 | 229 |
|
26 | | -Puedes crear eventos en la folder de \_events, deben tener el formato dd_mm_yyyy_prioridad, como por ejemplo "20_03_2025_0", mientras mas alto es el numero es un evento de mayor prioridad, por lo que puede haber multiples eventos un mismo dia, dentro de ellos. Siempre sigue el esquema base de evento el cual tiene como nombre "00_00_00_00" |
| 230 | +**Hecho con ❤️ por la comunidad SaltaDev** |
0 commit comments