-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 13.8 KB
/
index.html
1
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Luis Enrique - Programador Web</title><link rel="stylesheet" href="./css/estilos.css"><link href="./dist/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="./dist/output.css"><meta name="description" content="Página estilo Currículum de un Programador Web Cubano"><link rel="shortcut icon" href="favicon.png" type="image/x-icon"></head><body class="fondoPurpura" id="inicio"><nav class="fondoPurpura2 text-gray-200 p-4 d-flex align-items-center justify-content-between sticky-top"><b class="text-lg md:text-2xl lg:text-4xl"><a href="#inicio" class="hover:text-white ">Luis Enrique</a></b><div class="d-none d-sm-block text-lg lg:text-2xl"><ul class="d-flex"><li><a href="#lenguajes" class="enlacesArriba ease-in duration-200 hover:text-purple-400 activo bg-indigo-800 py-2 px-6 rounded-lg">Lenguajes</a></li><li class="pl-5"><a href="#extras" class="ease-in duration-200 hover:text-purple-400 enlacesArriba">Otras Habilidades</a></li><li class="pl-5"><a href="#about" class="ease-in duration-200 hover:text-purple-400 enlacesArriba">Sobre Mí</a></li></ul></div><div class="d-flex d-sm-none text-2xl lg:text-2xl"><div class="gg-menu" id="openCloseMovil"></div></div></nav><div class="ease-in duration-200 opacity-0 d-sm-none" id="menuMovil"><div class="fixed hidden bg-black/50 z-10 w-100 h-100" id="fondo"></div><div class="fixed z-50 right-0 w-48 fondoPurpura2 flex-col mt-2 rounded-l-lg p-2 text-gray-300"><ul class="flex flex-col align-items-center"><li class="my-2"><a href="#lenguajes" class="enlacesMovil activoMovil hover:text-purple-400 activo bg-indigo-800 py-2 px-6 rounded-lg desactivado">Lenguajes </a></li><li class="my-2 "><a href="#extras" class="enlacesMovil desactivado">Otras Habilidades </a></li><li class="my-2 "><a href="#about" class="enlacesMovil desactivado">Sobre Mí </a></li><li class="my-2 hidden" id="contactoOculto"><a href="#contacto" class="enlacesMovil desactivado">Contacto </a></li></ul></div></div><main class="container mt-4"><header class="d-flex flex-wrap"><div class="col-12 col-md-6"><img src="./img/banner.webp"></div><div class="col-12 col-md-6 d-flex flex-col align-items-center justify-content-center"><p class="text-center text-gray-300 text-xl mt-4 md:mt-0 lg:text-3xl xl:text-4xl md:pb-3 lg:pb-4 xl:pb-5">Programador Web FullStack capaz de Desarrollar sitios Web Reponsivos, Modernos y Eficientes </p><a href="#contacto" class="text-gray-100 bg-purple-700 ease-in duration-200 hover:bg-purple-600 hover:text-white mt-4 px-6 lg:px-8 xl:px-10 py-2 rounded-lg font-bold text-md lg:text-lg xl:text-xl">Contáctame </a></div></header><div class="hr border-gray-500/50"></div><div class="seccion" id="lenguajes"><div class="mt-4 text-blue-300 font-medium text-2xl lg:text-4xl xl:text-6xl text-center active">Lenguajes que Conozco </div><section class="mt-6 md:mt-12 text-gray-200 text-center"><section class="d-flex flex-wrap align-items-center"><div class="col-12 col-sm-3 flex justify-content-center"><img src="./img/icons/html-5-svgrepo-com.svg" class="ease-in duration-300 hover:scale-105 w-48 sm:w-auto" width="40%"></div><div class="col-12 col-sm-9 text-lg lg:text-2xl xl:text-4xl"><b>HTML</b> es el lenguaje utilizado para dar estructura a los sitios webs, así como agregar las etiquetas correspondientes para realizar SEO, lo que permite aparecer en los resultados de búsqueda de Google.</div></section><section class="d-flex flex-wrap align-items-center"><div class="col-12 col-sm-9 text-lg lg:text-2xl xl:text-4xl order-2 order-sm-0 mt-2 md:mt-0"><b>CSS</b> permite dar estilo a un sitio web, crear animaciones, organizar la estructura visual del sitio web, realizar diseños adaptables a diferentes formatos de pantalla, etc. He usado Frameworks como <b>Bootstrap</b>, <b>MaterializeCSS</b> y <b>Tailwind</b>. </div><div class="col-12 col-sm-3 flex justify-content-center"><img src="./img/icons/css-3-svgrepo-com.svg" class="ease-in duration-300 hover:scale-105 w-48 sm:w-auto order-1 order-sm-0"></div></section><section class="d-flex flex-wrap align-items-center mt-2 md:mt-0"><div class="col-12 col-sm-3 flex justify-content-center"><img src="./img/icons/js-svgrepo-com.svg" class="ease-in duration-300 hover:scale-105 w-48 sm:w-auto"></div><div class="col-12 col-sm-9 text-lg lg:text-2xl xl:text-4xl"><b>JavaScript</b> es un lenguaje del lado del cliente. Utilizo funcionalidades de <b>ES6+</b> para programar con este y también tengo conocimientos sobre el uso de <b>AJAX</b> para enviar y recibir información hacia lenguajes del servidor como PHP usando <b>JSON</b>. </div></section><section class="d-flex flex-wrap align-items-center"><div class="col-12 col-sm-9 text-lg lg:text-2xl xl:text-4xl espaciado3 sm:pr-4 order-2 order-sm-0 mt-2 md:mt-0"><b>PHP</b> es un lenguaje del lado del servidor. Con este he realizado <b>subida de archivos</b> hacia un servidor, <b>consultas SQL</b> usando mysqli, <b>envío de emails</b> usando <b>PHPMailer</b>, <b>encriptación y desencriptación</b> de contraseñas de forma segura usando funciones hash, entre otras cosas.</div><div class="col-12 col-sm-3 flex justify-content-center text-end"><img src="./img/icons/php-svgrepo-com.svg" class="lg:pl-8 ease-in duration-300 hover:scale-105 w-48 sm:w-auto order-1 order-sm-0"></div></section><section class="d-flex flex-wrap align-items-center mt-4 sm:mt-0 lg:mt-4"><div class="col-12 col-sm-3 flex justify-content-center"><img src="./img/icons/mysql-official.svg" width="100%" class="ease-in duration-300 hover:scale-105 w-48 sm:w-auto"></div><div class="col-12 col-sm-9 text-lg lg:text-2xl xl:text-4xl espaciado2 sm:pl-4 lg:pl-8"><b>MySQL</b> es el lenguaje utilizado para realizar consultas a las base de datos. Me ha permitido realizar operaciones tales como <b>agregar</b>, <b>modificar</b>, <b>eliminar</b> y <b>obtener</b> datos de tablas. </div></section></section></div><div class="hr border-gray-500/50"></div><div class="seccion" id="extras"><div class="mt-5 text-blue-300 font-medium text-2xl lg:text-4xl xl:text-6xl text-center">Otras Habilidades: </div><section class="d-flex flex-wrap align-items-center mt-4 text-gray-200"><div class="col-12 text-lg lg:text-2xl xl:text-4xl text-center">Como extras a los lenguajes base sobre los que tengo conocimiento, me gustaría destacar los siguientes complementos: </div></section><section class="mt-12 mb-600 text-gray-300 text-lg mb-12 text-center flex flex-wrap justify-content-center"><div class="flex flex-col col-12 col-md-5 col-lg-3 m-3 rounded-lg azulOscuro align-items-center ease-in duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-800/40"><div class="p-2 bg-blue-900 rounded-t-lg w-100 text-lg font-bold xl:text-2xl">Código Legible</div><img src="./img/icons/prettier-svgrepo-com.svg" width="40%" class="pt-3"><div class="p-3 xl:text-2xl"><div class="hr2 border-gray-500/50 mb-2"></div>Programo utilizando formateadores de código, lo que me permite escribir un código correctamente identado; procuro mantener el código ordenado para una correcta legibilidad, lo cual es muy útil para mantenerlo y actualizarlo. Además, soy detallista y trato de hacer las cosas lo mejor posible. </div></div><div class="flex flex-col col-12 col-md-5 col-lg-3 m-3 rounded-lg azulOscuro align-items-center ease-in duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-800/40"><div class="p-2 bg-blue-900 rounded-t-lg w-100 text-lg font-bold xl:text-2xl">Diseño Web</div><img src="./img/icons/responsive-design_icon-icons.com_72187.svg" width="40%" class="pt-3"><div class="p-3 xl:text-2xl"><div class="hr2 border-gray-500/50 mb-2"></div>El gusto por el diseño moderno me caracteriza. Puedo desarrollar desde cero un esquema de diseño enfocado a tener una buena experiencia de usuario, así como una interfaz agradable para su sitio web. Además, su web puede ser diseñada para ser adaptable a diferentes formatos de pantalla. </div></div><div class="flex flex-col col-12 col-md-5 col-lg-3 m-3 rounded-lg azulOscuro align-items-center ease-in duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-800/40"><div class="p-2 bg-blue-900 rounded-t-lg w-100 text-lg font-bold xl:text-2xl">Seguridad Web</div><img src="./img/icons/browser_internet_safe_security_shield_web_website_icon_127033.svg" width="40%" class="pt-3"><div class="p-3 xl:text-2xl"><div class="hr2 border-gray-500/50 mb-2"></div>A diferencia de muchos programadores que solo priorizan lo visual, la rapidez y hacer lo mínimo posible, me preocupo por evitar vulnerabilidades webs graves conocidas tales como ataques de inyección sql, conexiones inseguras a basese de datos, etc. </div></div><div class="flex flex-col col-12 col-md-5 col-lg-3 m-3 rounded-lg azulOscuro align-items-center ease-in duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-800/40"><div class="p-2 bg-blue-900 rounded-t-lg w-100 text-lg font-bold xl:text-2xl">Aprendizaje</div><img src="./img/icons/online_learning_icon_182955.svg" width="40%" class="pt-3"><div class="p-3 xl:text-2xl"><div class="hr2 border-gray-500/50 mb-2"></div>Aprendo de forma autodidacta y suelo investigar de forma persistente ante un problema hasta intentar dar con la solución. Soy capaz de aprender nuevas tecnologías, frameworks o lenguajes de desarrollo web. </div></div><div class="flex flex-col col-12 col-md-5 col-lg-3 m-3 rounded-lg azulOscuro align-items-center ease-in duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-800/40"><div class="p-2 bg-blue-900 rounded-t-lg w-100 text-lg font-bold xl:text-2xl">Código Eficiente</div><img src="./img/icons/codingbrowser_102152.svg" width="40%" class="pt-3"><div class="p-3 xl:text-2xl"><div class="hr2 border-gray-500/50 mb-2"></div>Suelo buscar la manera de hacer más con menos, buscando el balance entre calidad y eficiencia. Evito usar imágenes pesadas y comprimo el código para lograr que cargue su sitio web cargue lo más rápido posible, manteniendo su funcionalidad. </div></div><div class="flex flex-col col-12 col-md-5 col-lg-3 m-3 rounded-lg azulOscuro align-items-center ease-in duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-800/40"><div class="p-2 bg-blue-900 rounded-t-lg w-100 text-lg font-bold xl:text-2xl">Pagos en Cripto</div><img src="./img/icons/crypto-wallet-percent.svg" width="40%" class="pt-3"><div class="p-3 xl:text-2xl"><div class="hr2 border-gray-500/50 mb-2"></div>Por último y no menos importante, acepto pagos en criptodivisas como alternativa. Esto puede ser muy útil para evitar pagar comisiones grandes, además de realizar pagos seguros y rápidos, beneficiandole tanto a usted como a mí. </div></div></section></div><div class="hr border-gray-500/50"></div><div class="seccion" id="about"><div class="text-blue-300 font-medium text-2xl lg:text-4xl xl:text-6xl text-center mt-5">Sobre Mí: </div><section class="mt-3 xl:mt-12 bg-indigo-900/50 p-3 text-lg lg:text-2xl xl:text-4xl text-gray-300 rounded-xl">Soy un programador web cubano, he trabajado en el <b>Palacio Central de la Computación y la Electrónica</b> impartiendo cursos, entre ellos uno enfocado a enseñar HTML y CSS. Mis conocimientos ha sido adquiridos de forma <b>autodidacta</b> gracias a diferentes videos y cursos de YouTube y Udemy que me han dopado de mucho conocimiento; aunque la práctica realizando ejercicios de programación en Codewars es lo que me ha permitido desarrollar mi lógica de programación. Aunque sé programar desde hace años admito que no me puedo considerar un programador senior, ya que mi experiencia se podría resumir en unos meses, pero considero que tengo el suficiente talento para <b>desarrollar proyectos complejos Full-Stack</b> del estilo CRUD. Me gusta ampliar mis conocimientos e ir mejorando para ser mejor programador a lo largo del tiempo.</section></div></main><footer class="fondoPurpura3 mt-5 text-gray-200 p-3"><div class="text-blue-300 font-medium text-2xl lg:text-4xl xl:text-6xl text-center seccion" id="contacto">Vías de Contacto: </div><div class="flex flex-wrap justify-content-center mt-3"><div class="flex flex-wrap text-2xl lg:text-4xl xl:text-6xl lg:mt-4 justify-content-center sm:pr-4 xl:pr-10 espaciado"><div class="font-bold">Teléfono:</div></div><div class="flex flex-wrap text-2xl lg:text-4xl xl:text-6xl lg:mt-4 justify-content-center"><div class="underline ">+53-5-505-57-89</div></div></div><div class="flex flex-wrap justify-content-center align-items-center text-2xl lg:text-4xl xl:text-6xl pt-3 lg:mt-6"><div class="flex align-items-center justify-content-center justify-content-sm-end ease-in duration-200 hover:scale-105 col-12 col-sm-4"><img src="./img/icons/telegram_logo_icon_147228.svg" class="pr-3 w-30 xl:w-28"><b><a href="https://t.me/HACKERMATR1X" class="hover:text-cyan-400 sm:pr-4 xl:pr-10 espaciado">Telegram </a></b></div><div class="flex align-items-center justify-content-center justify-content-sm-start ease-in duration-200 hover:scale-105 col-12 col-sm-4 mt-3 mt-sm-0"><img src="./img/icons/whatsapp_logo_icon_147205.svg" class="pr-3 w-30 xl:w-28"><b class=""><a href="https://wa.me/+5355055789" class="hover:text-green-400">WhatsApp</a></b></div></div><div class="flex justify-content-center align-items-center text-2xl lg:text-4xl xl:text-6xl mt-3"></div></footer><div class="flex flex-wrap justify-content-center bg-indigo-900/25 text-gray-400/60"><a href="https://www.freepik.es/vector-gratis/bandera-dibujos-animados-prueba-codigo-prueba-funcional-metodologia-programacion-errores-busqueda-errores-desarrollo-plataforma-sitio-web-optimizacion-usabilidad-tablero-ilustracion-vector-computadora-pc_10487786.htm#query=programador%20web&position=13&from_view=search&track=sph" class="hover:text-purple-600">Imagen del Banner por upklyak</a> en Freepik </div><div class="bg-indigo-800 py-2 px-6 rounded-lg d-none"></div><script src="./js/app.js"></script></body></html>