<!DOCTYPE html>
<html lang="en">
<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 user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="styles.css">
<title>JJPL PORTAFOLIO</title>
</head>
<body>
<!-- SECCION I N I C I O -->
<section id="inicio">
<div class="contenido">
<header>
<div class="contenido-header">
<h1>/JJPL/</h1>
<nav id="nav" class="">
<ul id="links">
<li><a href="#inicio" class="seleccionado" onclick="seleccionar(this)">INICIO</a></li>
<li><a href="#sobremi" onclick="seleccionar(this)">SOBRE MI</a></li>
<li><a href="#portfolio" onclick="seleccionar(this)">PORTAFOLIO</a></li>
</ul>
</nav>
<!-- Icono del menu responsive -->
<div id="icono-nav" onclick="responsiveMenu()">
<i class="fa-solid fa-bars"></i>
</div>
<div class="redes">
<a href="#"><i class="fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram-square"></i></a>
</div>
</div>
</header>
<div class="presentacion">
<p class="bienvenida">Bienvenidos</p>
<h2>Soy <span>Jesús Joan Pérez Loya</span>, Ing. Sitemas Computacionales</h2>
<p class="descripcion">A continuación presento los proyectos que e hecho durante mi carrera: </p>
<a href="#portfolio">Ir a Portafolio</a>
</div>
</div>
</section>
<!-- SECCION S O B R E M I -->
<section id="sobremi">
<div class="contenedor-foto">
<img src="foto.jpg" alt="">
</div>
<div class="sobremi">
<p class="titulo-seccion">Sobre Mi</p>
<h2>Hola, Soy <span>Jesús Joan Pérez Loya</span> </h2>
<h3>Ing. Sistemas Computacionales</h3>
<p>
Me presento como un ferviente aprendiz de la Ingeniería en Sistemas Computacionales: ¡Jesús Joan Pérez Loya es mi nombre!
Navegando por las corrientes tecnológicas, he conquistado los secretos de múltiples lenguajes de programación: C++, Python,
Java y otras criaturas cibernéticas. En este viaje académico, he tejido las telarañas de las páginas web y he dado vida a
las entidades conocidas como bases de datos.</p>
</div>
</section>
<!-- SECCION PORTAFOLIO -->
<section id="portfolio">
<h3 class="titulo-seccion">Mis Proyectos</h3>
<p></p>
<h3 class="titulo-seccion">Dibujos 2D</h3>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<img src="arbol.jpg" alt="">
<div class="info">
<h4>Explorando Grease Pencil de Blender</h4>
<p>Dibujo 2d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="arboles.jpg" alt="">
<div class="info">
<h4>Trazos personalizados</h4>
<p>Dibujo 2d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="dibujos3.jpg" alt="">
<div class="info">
<h4>Herramientas de trazos con Grease Pencil</h4>
<p>Dibujo 2d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<img src="figura_geo.jpg" alt="">
<div class="info">
<h4>Herramientas de trazos con Grease Pencil</h4>
<p>Dibujo 2d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="dibujo_geo.jpg" alt="">
<div class="info">
<h4>Dibujando con figuras geométricas</h4>
<p>Dibujo 2d</p>
</div>
</div>
</div>
<h3 class="titulo-seccion">Dibujos 3D</h3>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<img src="oruga.jpg" alt="">
<div class="info">
<h4>La oruga</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="copa.jpg" alt="">
<div class="info">
<h4>Copa de vino</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="mesa.jpg" alt="">
<div class="info">
<h4>Diseño libre de mesa</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="casco.jpg" alt="">
<div class="info">
<h4>Práctica 10. Casco vikingo</h4>
<p>Dibujo 3d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<img src="sombrero2.jpg" alt="">
<div class="info">
<h4>Pintar vértices</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="Práctica 12. Material de textura.jpg" alt="">
<div class="info">
<h4>Material de textura</h4>
<p>Dibujo 3d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<img src="Práctica 13. Sombreado BSDF parte 1.jpg" alt="">
<div class="info">
<h4>Sombredo BSDF parte 1</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="Práctica 13. Sombreado BSDF parte 2.jpg" alt="">
<div class="info">
<h4>HPráctica 13. Sombreado BSDF</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="Practica 14. Mesa de billar.jpg" alt="">
<div class="info">
<h4>Practica 14. Mesa de billar</h4>
<p>Dibujo 3d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<img src="logo_blender.jpg" alt="">
<div class="info">
<h4>TRABAJO DE UNIDAD LOGO DE BLENDER</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="Practica 15. Creación de cabello estilizado - primera parte.jpg" alt="">
<div class="info">
<h4>Creación de cabello estilizado - primera parte</h4>
<p>Dibujo 3d</p>
</div>
</div>
<div class="proyecto">
<div class="overlay"></div>
<img src="Practica 16. Creación de cabello estilizado - segunda parte.jpg" alt="">
<div class="info">
<h4>Practica 16. Creación de cabello estilizado - segunda parte</h4>
<p>Dibujo 3d</p>
</div>
</div>
</div>
</div>
<h3 class="titulo-seccion">Animaciones</h3>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<video width="780" height="500" controls autoplay>
<source src="monster-inc.mp4" type="video/mp4">
</video>
<div class="info">
<h4>Práctica 17. Esfera con cabello tipo monster inc</h4>
<p>Animacion 3d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<video width="780" height="500" controls autoplay>
<source src="mesa.mp4" type="video/mp4">
</video>
<div class="info">
<h4>Práctica 18. Diseño de tela -mantel-</h4>
<p>Animacion 3d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<video width="780" height="500" controls autoplay>
<source src="particulas.mp4" type="video/mp4">
</video>
<div class="info">
<h4>Práctica 19. Partículas y fuerzas</h4>
<p>Animacion 3d</p>
</div>
</div>
</div>
<div class="fila">
<div class="proyecto">
<div class="overlay"></div>
<video width="780" height="500" controls autoplay>
<source src="PORYGON_2.mp4" type="video/mp4">
</video>
<div class="info">
<h4>Proyecto final</h4>
<p>Animacion 3d</p>
</div>
</div>
</div>
</div>
</section>
<!-- SECCTION C O N T A C T O -->
<section id="contacto">
<h3 class="titulo-seccion">Teoria del Color</h3>
<div id="color-selector">
<label for="color">Selecciona un color:</label>
<input type="color" id="color" value="#000000" onchange="updateColor()">
<div id="color-preview"></div>
<div id="color-details">
<p>Hexadecimal: <span id="hex"></span></p>
<p>RGB: <span id="rgb"></span></p>
</div>
<h3>Versiones de Color</h3>
<div id="color-versions"></div>
</div>
<script src="script.js"></script>
</body>
</section>
<!-- SECCION FOOTER -->
<footer>
<p>KAYZAR INCORPORATION</p>
<div class="redes">
<a href="#"><i class="fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram-square"></i></a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>