Colección de sitios web HTML estáticos ·
Introducción
Esta es una colección de páginas de destino y plantillas de blogs diseñadas por mí. Estos temas están basados en HTML, CSS, javascript, jquery y Bootstrap. Estoy creando este repositorio como un portafolio para mostrar mi trabajo como desarrollador web frontend para conseguir una oportunidad laboral, ya sea independiente, a tiempo parcial, a tiempo completo o por contrato, y estos diseños son solo una parte simple de mi Trabajo porque no puedo poner los trabajos de mis clientes aquí para el público. Si crees que mis servicios podrían serte útiles y estás interesado en contratarme, no dudes en enviarme un correo electrónico.
En este repositorio encontrarás los siguientes diseños.
Haga clic en el nombre del tema para ver la vista previa en vivo, y estos diseños NO son para uso personal o comercial, son solo para fines de visualización (para mostrar mis habilidades de interfaz).
- Canox: Blog simple, limpio, personal, moderno y profesional, ideal para crear un sitio web de blogs profesional.
- Covid-19: Covid-19: Página de inicio sencilla para ver las estadísticas del coronavirus y ver cómo protegerse de él con estadísticas en tiempo real provenientes de API y un mapa interactivo para ver las últimas estadísticas por país. Este diseño está diseñado por el diseñador Shahriar Hossain y solo convertí el diseño en códigos de interfaz haciendo algunos cambios en el diseño para que se vea mejor.
- Konish: página de inicio hermosa y sencilla para una empresa técnica. Y este trabajo es uno de mis primeros trabajos como desarrollador web frontend.
- Projection & Collision: Demostración de información web para el proyecto Projection & Collision del tercer año de mis estudios en la facultad de ingeniería en tecnología de la información de la Universidad de Damasco.
- Sass: otra página de destino para una empresa técnica. y puedes ver la presentación en behance aquí.
- Sellvas: Tema de plantilla de revista y blog en un tema de blog y revista de diseño elegante y limpio. Equipado con todo lo que necesitas para configurar un hermoso blog y galería de fotos, es un diseño minimalista moderno, fácil de mantener y pulido impecable en cada detalle. Y este tema contiene más de 10 variaciones de diseño y muchos estilos de publicaciones y páginas de error para combinar con cada estilo de diseño.
- Historia: Página de inicio simple y limpia para ver antigüedades y trabajos manuales, y este sitio fue diseñado por Majd Shamma, pero convertí ese diseño en un sitio web estático.
- Tieqode: un equipo de profesionales con las habilidades comerciales y técnicas necesarias, un sólido liderazgo, experiencia y conocimiento para ofrecer las mejores soluciones y servicios a los clientes. Y cuando me uní al equipo de TIEQODE trabajé en su sitio web, y puedes verlo aquí.
- Boda: Página de inicio moderna y hermosa para un evento de boda.
Acerca de estos temas
Características principales de estos diseños.
- HTML5, CSS3, Javascript, jQuery y Bootstrap.
- Bonitos efectos de paralaje.
- Scripts válidos y códigos agradables organizados.
- Diseños minimalistas, modernos y limpios.
- Usé fuentes gratuitas de Google como Roboto y Raleway.
- Todos los archivos están bien comentados para editarlos fácilmente.
- Soporte deslizante de carrusel.
- Incluye efectos jquery y CSS3.
- Los menús desplegables y los menús normales también están optimizados para dispositivos móviles.
- Admite ruta de navegación para una mejor navegación.
- Compatible con varios navegadores.
- Integración de fuentes impresionantes e íconos Ion.
- Soporte de formatos de publicación.
- Publicaciones relacionadas en publicaciones.
- Cuadro de autor incluido.
- Error personalizado 404 páginas.
Bibliotecas javascript usadas
En estos temas, se importan algunos archivos Javascript y todos los archivos y complementos necesarios se incluyen con los archivos del proyecto y estos archivos y complementos son:
- jQuery: jQuery es una biblioteca JavaScript rápida, pequeña y con muchas funciones. Simplifica mucho cosas como el recorrido y manipulación de documentos HTML, el manejo de eventos, la animación y Ajax con una API fácil de usar que funciona en una multitud de navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.
- Bootstrap: marco CSS gratuito y de código abierto dirigido al desarrollo web front-end responsivo y orientado a dispositivos móviles. Contiene plantillas de diseño basadas en CSS y JavaScript para tipografía, formularios, botones, navegación y otros componentes de la interfaz.
- Owl Carousel: es una biblioteca que me ayudó a crear controles deslizantes en los sitios web con hermosos efectos y estilos de transición.
- Paralaje: es una característica moderna, la uso para agregar bonitos efectos de paralaje al diseño al desplazarse con el mouse.
- Font Awesome & Ion Icons: iconos vectoriales y logotipos sociales para usar en los sitios web. Font Awesome es el conjunto de iconos y kit de herramientas más popular de la web, y lo utiliza el 38% de los sitios que utilizan secuencias de comandos de fuentes de terceros, y Ion Icons es un ícono diseñado premium para usar en aplicaciones web, iOS, Android y de escritorio. Y es compatible con SVG y fuentes web.
- Mixitup: biblioteca de alto rendimiento y libre de dependencias para manipulación DOM animada, que le brinda el poder de filtrar, ordenar, agregar y eliminar elementos DOM con hermosas animaciones. MixItUp funciona bien con su HTML y CSS existente, lo que lo convierte en una excelente opción para diseños responsivos y compatible con flujo en línea, porcentajes, consultas de medios, flexbox y más.
- TypedJs: una biblioteca que escribe. Ingrese cualquier cadena y observe cómo escribe a la velocidad que haya configurado, retroceda lo que se escribió y comience una nueva oración para todas las cadenas que haya configurado.
- Y finalmente, en el archivo
main.js recopilo todo lo anterior: implemento algunos complementos para crear los efectos en los temas. Estos complementos están empaquetados, por lo que no necesitaré editar manualmente nada en el archivo. Lo único que hay que saber es cómo llamar al método.
Imágenes e ilustraciones usadas
Todas las imágenes que se usaron en los diseños son 100% gratuitas, pero son solo para fines de demostración y utilicé las imágenes, íconos e ilustraciones de los siguientes sitios web:
- Pexels
- Pixabay
- Flaticon
- Freepik
