Skip to content

AquaSponsor4/bunstack-website

 
 

Repository files navigation

BunStack - Página Web Profesional 🚀

Descripción

Página web moderna y elegante para BunStack, empresa chilena de desarrollo web especializada en crear soluciones digitales para PYMES y emprendedores.

Características ✨

Diseño Moderno

  • Estilo Cibernético: Gradientes neón, efectos de glow y animaciones futuristas
  • Responsive Design: Optimizado para todos los dispositivos (móvil, tablet, desktop)
  • Animaciones Interactivas: Partículas de fondo, efectos hover y scroll animations
  • Tipografías: Orbitron (títulos) e Inter (contenido) para un look profesional

Funcionalidades

  • Navegación Suave: Scroll suave entre secciones
  • Menú Móvil: Hamburger menu para dispositivos móviles
  • Formulario de Contacto: Con validación y feedback visual
  • Estadísticas Animadas: Contadores que se animan al hacer scroll
  • Portfolio Interactivo: Tarjetas con efectos hover
  • Partículas de Fondo: Sistema de partículas interactivo

Secciones

  1. Hero: Presentación principal con call-to-action
  2. Estadísticas: Números clave de la empresa
  3. Servicios: Páginas web, tiendas online, landing pages
  4. Sobre Nosotros: Información de la empresa y tecnologías
  5. Portfolio: Proyectos destacados
  6. Proceso: Metodología de trabajo
  7. Testimonios: Reseñas de clientes
  8. Contacto: Formulario y información de contacto

Estructura de Archivos 📁

/
├── index.html          # Estructura HTML principal
├── styles.css          # Estilos CSS con diseño responsive
├── script.js           # JavaScript interactivo
└── README.md          # Este archivo

Tecnologías Utilizadas 🛠️

  • HTML5: Estructura semántica y accesible
  • CSS3: Flexbox, Grid, animaciones y gradientes
  • JavaScript ES6+: Interactividad y efectos dinámicos
  • Particles.js: Sistema de partículas de fondo
  • Google Fonts: Orbitron e Inter

Características Responsive 📱

Mobile (< 480px)

  • Menú hamburger
  • Stack vertical de elementos
  • Botones optimizados para touch
  • Texto y espaciado ajustados

Tablet (481px - 768px)

  • Grid adaptativo
  • Navegación colapsable
  • Imágenes responsive

Desktop (> 768px)

  • Grid completo
  • Efectos hover avanzados
  • Cursor personalizado
  • Animaciones complejas

Optimizaciones 🚀

Performance

  • Lazy Loading: Carga diferida de imágenes
  • CSS Optimizado: Selectores eficientes
  • JavaScript Modular: Código organizado y optimizado
  • Fonts Preload: Carga rápida de tipografías

SEO

  • Meta Tags: Descripción y palabras clave
  • Estructura Semántica: HTML5 tags apropiados
  • Alt Text: Descripciones de imágenes
  • Schema Markup Ready: Preparado para datos estructurados

Personalización 🎨

Colores Principales

--primary-cyan: #00ffff
--primary-magenta: #ff00ff
--background: #0a0a0a
--text-primary: #ffffff
--text-secondary: #b0b0b0

Fuentes

  • Títulos: Orbitron (Google Fonts)
  • Texto: Inter (Google Fonts)

Navegadores Soportados 🌐

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Instalación y Uso 💻

  1. Clonar o descargar los archivos en una carpeta
  2. Abrir index.html en cualquier navegador moderno
  3. Personalizar contenido según necesidades específicas

Para Desarrollo Local

# Servidor local simple con Python
python -m http.server 8000

# O con Node.js
npx serve .

# Luego abrir http://localhost:8000

Customización Rápida ⚡

Cambiar Información de Contacto

Editar en index.html:

<div class="contact-item">
    <div class="contact-icon">📧</div>
    <div>
        <h4>Email</h4>
        <p>tu-email@bunstack.cl</p>
    </div>
</div>

Modificar Servicios

Actualizar precios y descripciones en la sección .services:

<div class="service-price">Desde $XXX.XXX</div>

Cambiar Colores

En styles.css, modificar las variables CSS o los gradientes:

background: linear-gradient(135deg, #tu-color-1, #tu-color-2);

Funcionalidades JavaScript 🔧

Principales Características

  • Particles.js: Fondo animado interactivo
  • Intersection Observer: Animaciones on scroll
  • Smooth Scrolling: Navegación suave
  • Form Validation: Validación de formularios
  • Counter Animation: Animación de estadísticas
  • Mobile Menu: Navegación móvil

Event Listeners

  • Scroll events para navbar y animaciones
  • Click events para navegación
  • Hover effects para interactividad
  • Form submission handling

Próximas Mejoras 🔮

  • Integración con CMS
  • Sistema de blog
  • Chat en vivo
  • Formularios avanzados
  • Analytics integration
  • PWA capabilities

Contacto y Soporte 📞

Para consultas sobre customización o desarrollo:

Licencia 📄

© 2024 BunStack. Todos los derechos reservados.


Desarrollado con ❤️ en Chile por BunStack

About

Modern cybernetic landing page for BunStack - Professional web development services

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • HTML 56.6%
  • CSS 24.6%
  • JavaScript 18.8%