Este proyecto nace del deseo de expresar amor de una manera única y moderna. En un mundo donde la tecnología y los sentimientos a menudo parecen distantes, PageForMyLittleStar demuestra que el código también puede ser una forma de arte para expresar emociones profundas.
PageForMyLittleStar es un proyecto web personal y emotivo creado por Antony Salcedo como un regalo especial para Sara, su "estrellita", con motivo del día del amor y la amistad (21 de septiembre). Esta página web interactiva combina elementos multimedia, animaciones y mensajes personalizados para expresar sentimientos de amor y aprecio de una manera creativa y tecnológica.
- Diseño Responsivo: Adaptado para una visualización óptima en dispositivos móviles y de escritorio
- Fondo de Video Inmersivo: Video de fondo con respaldo de imagen para compatibilidad universal
- Animaciones Suaves: Transiciones y efectos visuales cuidadosamente diseñados
- Preloader Personalizado: Pantalla de carga inicial con animación temática
- Reproductor de Audio Personalizado:
- Selector de canciones con cambio dinámico de logos
- Controles intuitivos de reproducción
- Visualización del título de la canción actual
- Carrusel de Imágenes Estilo Libro:
- Navegación manual y automática
- Efectos de transición tipo libro
- Optimización de carga de imágenes
- Reproductor de Video Integrado:
- Controles personalizados
- Modo pantalla completa
- Autoplay opcional
- Modal Interactivo: Ventana emergente con poema personalizado
- Reloj de Amor Digital: Mensajes románticos dinámicos según la hora
- Integración con Spotify: Lista de reproducción personalizada embebida
PageForMyLittleStar/
├── 📄 index.html # Página principal
├── 📄 package.json # Configuración del proyecto
├── 📄 .gitignore # Archivos ignorados por Git
├── 📄 .prettierrc # Configuración de formato
├── 📄 .htmlvalidate.json # Validación HTML
├── 📄 LICENSE # Licencia del proyecto
├── 📄 README.md # Documentación principal
│
├── 📁 src/ # Código fuente
│ ├── 📁 styles/ # Hojas de estilo CSS
│ ├── 📁 scripts/ # Scripts JavaScript
│ └── 📁 components/ # Componentes reutilizables
│
├── 📁 assets/ # Recursos estáticos
│ ├── 📁 media/ # Contenido multimedia
│ │ ├── 📁 images/ # Imágenes optimizadas
│ │ ├── 📁 audio/ # Archivos de audio MP3
│ │ └── 📁 videos/ # Videos comprimidos MP4
│ ├── 📁 fonts/ # Fuentes personalizadas
│ └── 📁 icons/ # Iconos del proyecto
│
├── 📁 docs/ # Documentación técnica
│ └── 📄 TECHNICAL.md # Guía técnica detallada
│
└── 📁 config/ # Archivos de configuración
- HTML5: Estructura semántica y accesible
- CSS3: Estilos modernos con Flexbox y Grid
- JavaScript ES6+: Funcionalidad interactiva vanilla
- Google Fonts: Tipografía Poppins
- Node.js & npm: Gestión de dependencias y scripts
- Live Server: Servidor de desarrollo local
- Prettier: Formateo automático de código
- HTML Validate: Validación de HTML
- Clean CSS & Terser: Minificación de assets
- MP4: Videos optimizados y comprimidos
- MP3: Audio de alta calidad
- PNG/JPG: Imágenes optimizadas para web
- ICO: Favicon personalizado
- Optimización de recursos multimedia
- Minificación de CSS y JavaScript
- Implementación de caché estratégico
- Animaciones optimizadas para rendimiento
- Navegación fluida entre secciones
- Interfaz intuitiva y emotiva
- Etiquetas semánticas HTML5
- Atributos ARIA implementados
- Alto contraste y legibilidad
- Node.js >= 14.0.0
- npm >= 6.0.0
- Navegador web moderno (Chrome, Firefox, Safari, Edge)
# Clonar el repositorio
git clone https://github.com/tu-usuario/PageForMyLittleStar.git
# Navegar al directorio
cd PageForMyLittleStar
# Instalar dependencias de desarrollo
npm install# Iniciar servidor de desarrollo
npm start
# Modo desarrollo con recarga automática
npm run dev
# Construir para producción
npm run build
# Validar HTML
npm run validate
# Formatear código
npm run format- Desarrollo:
http://localhost:3000 - Producción: Desplegar archivos en servidor web
El proyecto ha sido reestructurado siguiendo las mejores prácticas de desarrollo web:
src/: Todo el código fuente organizado por tipoassets/: Recursos estáticos optimizados y categorizadosdocs/: Documentación técnica completaconfig/: Archivos de configuración del proyecto
- Prettier: Formateo automático consistente
- HTML Validate: Validación de estándares web
- Minificación: Optimización para producción
- Live Server: Desarrollo con recarga automática
- package.json: Scripts y dependencias organizadas
- npm scripts: Automatización de tareas comunes
- .gitignore: Control de versiones optimizado
- Reemplaza los archivos en
assets/media/con tus propios recursos - Mantén los nombres de archivo originales o actualiza las referencias
- Optimiza los nuevos recursos para web
- Edita
index.htmlpara personalizar mensajes - Adapta el contenido manteniendo la estructura
- Personaliza los mensajes del reloj en
src/scripts/scripts.js
- Colores: Modifica las variables CSS en
src/styles/styles.css - Fuentes: Cambia la fuente en Google Fonts
- Animaciones: Ajusta las transiciones y efectos
- Reproductor: Personaliza controles en JavaScript
- Modal: Modifica el contenido del poema
- Carrusel: Ajusta velocidad y efectos de transición
¿Quieres mejorar PageForMyLittleStar? ¡Tus contribuciones son bienvenidas!
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add: AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Este proyecto está bajo la Licencia MIT - consulta el archivo para más detalles.
- A Sara, mi estrellita, por ser la inspiración de este proyecto
- A la comunidad de desarrolladores por las herramientas y recursos
- A todos los que apoyan el código con propósito
Creado con ❤️ por Antony Salcedo
- GitHub: @tu-usuario
"En el vasto universo, entre millones de estrellas, te amo más que todas las estrellas del firmamento." ✨
