Joshua Sánchez

Desarrollador web

Proyectos

Cafetería Triple Espresso

Información general

Este proyecto consiste en el desarrollo de una página web para una cafetería, diseñada para presentar su concepto, compartir recetas en video y permitir a los usuarios reservar una mesa mediante un formulario interactivo. El sitio fue construido utilizando HTML5 y CSS, siguiendo buenas prácticas de maquetación semántica y aplicando la metodología BEM para mantener un código organizado, escalable y fácil de mantener. La estructura del proyecto está dividida en bloques CSS independientes, lo que facilita su lectura y mantenimiento.

Características

  • HTML5 semántico
    Uso de etiquetas semánticas como header, nav, main, section y footer para mejorar la estructura, accesibilidad y legibilidad del sitio.
  • Diseño modular con metodología BEM
    Implementación de clases siguiendo el estándar BEM (Block, Element, Modifier), lo que permite un código CSS claro, reutilizable y fácil de escalar.
  • Diseño visual atractivo
    Uso de imágenes de fondo, tipografías personalizadas de Google Fonts y una paleta de colores coherente para transmitir la identidad visual de la cafetería.
  • Sección de recetas con contenido multimedia
    Integración de videos de YouTube mediante iframe, mostrando recetas de café con información adicional como duración.
  • Formulario de reservación funcional
    Formulario con validaciones nativas de HTML que permite ingresar nombre, número de comensales, fecha y hora, correo electrónico y aceptación de términos.
  • Navegación interna fluida
    Enlaces de navegación con desplazamiento suave (scroll-behavior: smooth) hacia las distintas secciones del sitio.
  • Estructura CSS por archivos
    Separación del código CSS en múltiples archivos según cada bloque (header, nav, recipes, reservation, form, footer), mejorando la organización del proyecto.

Logros Principales

  • Desarrollo completo de una landing page funcional
    Creación de una página web completa que incluye navegación, contenido informativo, multimedia y un formulario interactivo.
  • Aplicación correcta de buenas prácticas de maquetación
    Uso consistente de HTML semántico y estructura clara del DOM para facilitar el mantenimiento y la escalabilidad.
  • Implementación efectiva de la metodología BEM
    Código CSS estructurado de forma profesional, evitando conflictos de estilos y facilitando futuras modificaciones.
  • Integración exitosa de formularios y validaciones
    Uso de atributos HTML como required, type y min/max para garantizar una experiencia de usuario correcta.
  • Diseño coherente y alineado con la identidad del proyecto
    Uso de tipografías, colores y distribución visual que refuerzan la temática de una cafetería moderna.

Resumen

Este proyecto demuestra habilidades sólidas en desarrollo web frontend, específicamente en HTML y CSS. A través de una estructura bien organizada y el uso de la metodología BEM, se logró crear una página visualmente atractiva, funcional y fácil de mantener. La integración de contenido multimedia, formularios y navegación interna refleja una comprensión clara de los fundamentos del desarrollo web y un enfoque en la experiencia del usuario. En conjunto, el proyecto representa un paso importante en la construcción de aplicaciones web bien estructuradas y profesionales.

Proyecto cafeteria1 Proyecto cafeteria2 Proyecto cafeteria3

TripleTen Art Gallery

Información general

Este proyecto frontend de una galería de arte digital desarrollada con HTML5 y CSS3, presenta obras visuales y lugares del mundo junto con información de sus artistas. El sitio utiliza maquetación semántica y la metodología BEM para mantener un código organizado, escalable y fácil de mantener, además de un diseño completamente responsivo.

Características

  • HTML5 semántico
    Uso de etiquetas como header, main, section y footer para estructurar correctamente el contenido y mejorar la accesibilidad.
  • Arquitectura CSS modular con metodología BEM
    Implementación de clases siguiendo el estándar BEM para evitar conflictos de estilos y facilitar la reutilización de componentes.
  • Diseño responsivo (Responsive Design)
    Adaptación completa a dispositivos móviles, tablets y pantallas de escritorio mediante media queries.
  • Galería de imágenes con CSS Grid
    Implementación de una cuadrícula flexible que reorganiza automáticamente las imágenes según el tamaño de pantalla.
  • Sección de lugares con diseño avanzado en Grid
    Uso de CSS Grid para distribuir imágenes, textos, enlaces y botones de manera estructurada y visualmente atractiva.
  • Tipografías personalizadas
    Integración de fuentes locales mediante @font-face para reforzar la identidad visual del proyecto.
  • Normalización de estilos entre navegadores
    Uso de normalize.css para asegurar consistencia visual en diferentes entornos.
  • Interacciones visuales
    Efectos hover en imágenes y botones para mejorar la experiencia del usuario.
  • Optimización semántica y metadatos SEO básicos
    Inclusión de metaetiquetas como description, author y keywords.

Logros Principales

  • Desarrollo completo de una landing page funcional y responsiva
    Implementación de una interfaz moderna, adaptable y orientada a la experiencia del usuario.
  • Correcta separación de responsabilidades en CSS
    Organización del estilo en archivos independientes por componente (header, gallery, places, footer, etc.).
  • Uso avanzado de CSS Grid y Flexbox
    Construcción de layouts complejos y adaptativos sin dependencia de librerías externas.
  • Aplicación consistente de la metodología BEM
    Estructura profesional del código CSS que facilita futuras ampliaciones del proyecto.
  • Integración visual coherente
    Uso armonioso de tipografía, colores oscuros y espaciados para transmitir una estética artística y moderna.
  • Implementación de enlaces externos funcionales
    Conexión con recursos informativos sobre NFTs y atribución clara de autores.

Resumen

Este proyecto demuestra habilidades sólidas en desarrollo frontend, diseño responsivo y organización profesional del código CSS mediante la metodología BEM. Refleja la capacidad de construir interfaces modernas, visualmente atractivas y estructuradas siguiendo buenas prácticas.

Proyecto Galeria de arte1 Proyecto Galeria de arte2 Proyecto Galeria de arte3

Around the U.S.

Información general

Aplicación web interactiva desarrollada con HTML5, CSS3 y JavaScript (ES6) que permite a los usuarios crear y editar su perfil, actualizar su avatar y gestionar una galería de imágenes. La plataforma incluye funcionalidades para agregar y eliminar tarjetas, dar “like” a publicaciones y visualizar imágenes en tamaño completo mediante ventanas modales.

El proyecto implementa un diseño completamente responsivo y consume una API REST para la persistencia y sincronización de datos, garantizando una experiencia dinámica y consistente entre sesiones. Además, se estructura bajo una arquitectura modular orientada a objetos para facilitar el mantenimiento y la escalabilidad del código.

Características

  • Gestión completa de perfil de usuario
    Edición de nombre, descripción y avatar mediante formularios en ventanas modales, con validación en tiempo real y retroalimentación visual para el usuario.
  • Sistema dinámico de tarjetas de imágenes
    Creación, renderizado y eliminación de tarjetas desde la interfaz, con actualización inmediata en el DOM y sincronización con el servidor.
  • Funcionalidad avanzada de “likes”
    Registro y eliminación de likes con persistencia en backend, reflejando el estado correcto al recargar la página.
  • Visualización de imágenes en tamaño completo
    Apertura de imágenes en modal con enfoque en usabilidad y navegación intuitiva.
  • Validación de formularios del lado del cliente
    Mensajes de error personalizados, deshabilitación de botones según el estado del formulario y prevención de envíos inválidos.
  • Arquitectura modular con clases ES6
    Uso de clases como Card, Section, Api, Popup, UserInfo, entre otras, para una mejor organización del código.
  • Diseño responsivo y adaptable
    Uso combinado de CSS Grid, Flexbox y media queries para garantizar compatibilidad con dispositivos móviles, tablets y escritorio.
  • Integración con API REST
    Implementación de operaciones CRUD para usuarios y tarjetas utilizando peticiones asíncronas y manejo de promesas.

Logros Principales

  • Desarrollo completo de una aplicación web interactiva
    Implementación de todas las funcionalidades clave desde cero, siguiendo una estructura profesional de proyecto frontend.
  • Integración exitosa con un backend mediante API REST
    Sincronización confiable de perfiles, tarjetas y likes, garantizando persistencia de datos entre sesiones.
  • Aplicación sólida de programación orientada a objetos
    Diseño de componentes reutilizables y desacoplados que mejoran la legibilidad y mantenibilidad del código.
  • Implementación de validación avanzada de formularios
    Reducción de errores de entrada de datos y mejora notable en la experiencia del usuario.
  • Interfaz completamente responsiva
    Comportamiento estable y diseño uniforme en distintos tamaños de pantalla y navegadores modernos.

Resumen

Proyecto frontend avanzado que refleja un dominio sólido de JavaScript moderno, manipulación del DOM y consumo de APIs REST, así como buenas prácticas en organización del código mediante arquitectura modular y programación orientada a objetos.

Demuestra la capacidad de desarrollar aplicaciones web interactivas, responsivas y centradas en el usuario, integrando validación de formularios, manejo de estados de carga y sincronización con servidor, con un enfoque en calidad técnica y experiencia de usuario.

Proyecto al rededor de los UUEE1 Proyecto al rededor de los UUEE2 Proyecto al rededor de los UUEE3

Acerca de mi

Foto de perfil
Soy desarrollador web frontend junior con formación en desarrollo moderno de interfaces y experiencia creando aplicaciones web interactivas y responsivas. Actualmente me encuentro completando un bootcamp intensivo enfocado en HTML, CSS, JavaScript y buenas prácticas de arquitectura frontend.

He trabajado en proyectos que integran consumo de APIs REST, validación de formularios, programación orientada a objetos y diseño adaptable a distintos dispositivos, siempre priorizando la experiencia del usuario y la calidad del código.

Además, cuento con experiencia como team manager en el sector de telecomunicaciones, lo que me ha permitido desarrollar habilidades sólidas de comunicación, liderazgo y trabajo bajo presión.

Actualmente busco una oportunidad como desarrollador frontend junior donde pueda seguir aprendiendo, aportar valor al equipo y crecer profesionalmente en un entorno colaborativo.

Contacto

joshuamsm2135@gmail.com

Si deseas conocer más sobre mi experiencia y formación, puedes consultar mi currículum aquí:

Currículum