<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Pagina web">
        <meta name="keywords" content="Developer">
        <meta name="autor" content="Montero">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/invitaciones.css">
        <link rel="stylesheet" href="assets/css/galeria.css">
        <link rel="stylesheet" href="assets/css/reseñas.css">
        <link rel="icon" href="assets/img/foto_perfil-montedeveloper.gif" type="image/x-icon">
        <!-- Carritocompra -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <title>Developer Montero - Desarrollador Web</title>
        <!-- Estilo para los copos de nieve -->
        <style>
            .copo {
                position: fixed;
                top: -5px;
                width: 10px;
                height: 10px;
                background-color: white;
                border-radius: 50%;
                animation: caer 5s linear infinite;
                z-index: 0; /* Asegura que estén detrás del contenido */
            }

            /* Animación de caída */
            @keyframes caer {
                to {
                    transform: translateY(100vh);
                }   
            }

        </style>
    </head>
<body>
    <!-- NAVEGADOR BARRA DE ARRIBA -->
    <header>
        <nav>
            <div class="logo">
                <span alt="DeveloperMontero">MONTE7292</span>
            </div>
            <ul>
                <li><a href="#servicios"> Mi Trabajo</a></li>
                <li><a href="#discordtrabajados"> Experiencia</a></li>
                <li><a href="#discordtrabajados"> Reseñas</a></li>
            </ul>
        </nav>
    </header>

    <!-- CODIGO PRINCIPAL DEL MAIN -->
    <main>
        <!-- CODIGO MENU MORADO -->
        <section class="sobre-mi">
            <div class="imagen-perfil">
                <img src="/assets/img/foto_perfil-montedeveloper.gif" alt="Foto Personal Developer Monte">
                <h1>MONTE</h1>
                <section class="iconos">
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/badge-icons/fee1624003e2fee35cb398e125dc479b.png" alt="Icono 1">
                        <div class="tooltip">Exalumnos de la academia de moderadores</div>
                    </div>
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/badge-icons/3aa41de486fa12454c3761e8e223442e.png" alt="Icono 2">
                        <div class="tooltip">Balance de HypeSquad</div>
                    </div>
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/badge-icons/6bdc42827a38498929a4920da12695d9.png" alt="Icono 3">
                        <div class="tooltip">Desarrollador activo</div>
                    </div>
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/badge-icons/7060786766c9c840eb3019e725d2b358.png" alt="Icono 4">
                        <div class="tooltip">Partidario inicial</div>
                    </div>
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/badge-icons/0e4080d1d333bc7ad29ef6528b6f2fb7.png" alt="Icono 6">
                        <div class="tooltip">Mejorando servidores desde 1 oct 2024</div>
                    </div>
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/emojis/1145817524940845076.webp?size=44" alt="Icono 7">
                        <div class="tooltip">Cazador de Bugs</div>
                    </div>
                    <div class="icono">
                        <img src="https://cdn.discordapp.com/badge-icons/7d9ae358c8c5e118768335dbe68b4fb8.png" alt="Icono 8">
                        <div class="tooltip">Una misión completada</div>
                    </div>
                </section>
            </div>
            <!--texto de Sobre mi -->
            <div class="content">
                <p id="text" alt="Texto Personal Developer Monte">
                    Hola, me llamo #monte7292, soy estudiante de Desarrollo de Aplicaciones Web (DAW) y tengo más de dos años de experiencia creando bots para Discord y ofreciendo soporte técnico. <br><br>
                    Actualmente, trabajo como Soporte Técnico y Programador de Bot de Discord tanto para ZonaGemelos como para ClandestinoRP.<br><br>
                    <a href="#" class="cv"><i class="fa-solid fa-download"></i> Descargar CV</a> 
                </p>
            </div>
            
            <!-- Imagen Discord -->
            <div class="image">
                <!-- Imagen de ilustración (puedes cambiar por tu imagen propia) -->
                <img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/664daa37ea162cadf9603500_Art.webp" alt="ImagenSobreDeveloperMontero">
            </div>
              
        </section>

        <!-- Botones Redes Sociales -->
        <div class="botones">
            <a href="https://discord.gg/VGYp97suen" class="boton-red" target="_blank"><i class="fab fa-discord"></i> DISCORD</a>
            <a href="https://monteritogfx.pb.design/" class="boton-red" target="_blank"><i class="fab fa-linkedin"></i></i> DISEÑOS</a>
            <a href="https://x.com/monterito2002" class="boton-red" target="_blank"><i class="fab fa-twitter"></i> TWITTER</a>
            <a href="https://www.instagram.com/monterito.2002/" class="boton-red" target="_blank"><i class="fab fa-instagram"></i> INSTAGRAM</a>
        </div>

        <!-- CODIGO MENU DE GALERIA SERVICIOS -->
        <h1 id="servicios"><i class="fa-solid fa-money-bill-wave"></i> MI TRABAJO</h1>
        <div>
            <p class="safety-description2">Al adquirir nuestros servicios, tendrá incluido bot alojado 24/7 y soporte técnico.</p>
        </div>
        
        <!-- GALERIA -->
        <section class="section-discord-bot-services">
            <div class="container">
                <!-- Sistema de Bienvenida -->
                <div class="safety-item fade-in">
                    <div class="safety-text">
                      <h2 class="safety-heading">Sistema de Bienvenida</h2>
                      <p class="safety-description">
                        Configura mensajes de bienvenida personalizados para recibir a los nuevos miembros en tu servidor, configurable y customizable al 100%.
                      </p>
                      <a href="https://discord.gg/VGYp97suen" class="btn-saber-mas" target="_blank">
                        <i class="fas fa-shopping-cart"></i>
                        Adquirir 
                      </a>
                    </div>
                    <div class="safety-image fade-in">
                        <img src="assets/img/sistema.png" alt="Sistema de Bienvenida de Developer Montero" class="image" />
                    </div>
                </div>
                  
                <!-- Sistema de Tickets Personalizado -->
                <div class="safety-item reverse fade-in">
                    <div class="safety-text">
                        <h2 class="safety-heading">Sistema de Tickets Personalizado</h2>
                        <p class="safety-description">
                            Implementa un sistema de tickets adaptado a las necesidades de tu servidor. Incluye registros completos, transcripciones automáticas y notificaciones en tiempo real.
                        </p>
                        <a href="https://discord.gg/VGYp97suen" class="btn-saber-mas" target="_blank">
                            <i class="fas fa-shopping-cart"></i>
                            Adquirir 
                          </a>
                    </div>
                    <div class="safety-image fade-in">
                        <img src="assets/img/sistema1.png" alt="Sistema de Tickets Personalizado de Developer Montero" class="image" />
                    </div>
                </div>
        
                <!-- Sistema de Reseñas y Valoraciones -->
                <div class="safety-item fade-in">
                    <div class="safety-text">
                        <h2 class="safety-heading">Sistema de Reseñas y Valoraciones</h2>
                        <p class="safety-description">
                            Permite a los usuarios dejar comentarios y puntuaciones sobre productos, servicios o interacciones en tu servidor, fomentando la retroalimentación constructiva.
                        </p>
                        <a href="https://discord.gg/VGYp97suen" class="btn-saber-mas" target="_blank">
                            <i class="fas fa-shopping-cart"></i>
                            Adquirir 
                        </a>
                    </div>
                    <div class="safety-image fade-in">
                        <img src="assets/img/sistema3.png" alt="Sistema de Reseñas y Valoraciones de Developer Montero" class="image" />
                    </div>
                </div>
        
                <!-- Sistema de Seguridad -->
                <div class="safety-item reverse fade-in">
                    <div class="safety-text">
                        <h2 class="safety-heading">Sistema de Seguridad</h2>
                        <p class="safety-description">
                            Protege tu servidor con herramientas avanzadas contra enlaces maliciosos, flood, y accesos no autorizados. Personaliza reglas para garantizar un ambiente seguro.
                        </p>
                        <a href="https://discord.gg/VGYp97suen" class="btn-saber-mas" target="_blank">
                            <i class="fas fa-shopping-cart"></i>
                            Adquirir 
                        </a>
                    </div>
                    <div class="safety-image fade-in">
                        <img src="assets/img/sistema4.png" alt="Sistema de Seguridad de Developer Montero" class="image" />
                    </div>
                </div>
        
                <!-- Sistema de Comandos personalizados -->
                <div class="safety-item fade-in">
                    <div class="safety-text">
                        <h2 class="safety-heading">Sistema de Comandos personalizados</h2>
                        <p class="safety-description">
                            Diseña comandos adaptados a las necesidades de tu comunidad. Desde comandos informativos hasta automatización de tareas, optimiza la interacción en tu servidor.
                        </p>
                        <a href="https://discord.gg/VGYp97suen" class="btn-saber-mas" target="_blank">
                            <i class="fas fa-shopping-cart"></i>
                            Adquirir 
                        </a>
                    </div>
                    <div class="safety-image fade-in">
                        <img src="assets/img/sistema5.png" alt="Sistema de Comandos personalizados de Developer Montero" class="image" />
                    </div>
                </div>
            </div>
        </section>
        
          
    
        <!-- CODIGO MENU DE DISCORDS TRABAJADOS -->
        <h1 id="discordtrabajados"><i class="fa-solid fa-book"></i> EXPERIENCIA</h1>

        <!-- TEXTO EXPLICATIVO -->
        <div class="descripciondiscord fade-on">
            <p class="safety-description2">
                A lo largo de mi experiencia, he tenido la oportunidad de trabajar desarrollando bots y ofreciendo soporte técnico en servidores de Discord como ZonaGemelosShop Support, donde sigo trabajando actualmente. Jerarquía RP, con una comunidad de más de 19,000 personas y ClandestinoV2. 
                Durante este tiempo, me he dedicado a crear sus bots personalizados, optimizar roles y canales, y resolver problemas técnicos como parte del soporte, siempre adaptándome a las necesidades de cada comunidad.
            </p>
        </div>

        <!-- DISCORDS -->
        <div class="discords">
            <div class="discord-invite-container fade-on">
                <div class="discord-invite-left">
                    <img src="https://cdn.zonagemelosoficial.com/logo_web_new.webp" alt="Imagen de servidor" class="discord-server-img">
                    <div class="discord-invite-info">
                        <h3>ZonaGemelosShop Support</h3>
                        <p><span class="status-point green"></span> <strong>255 en línea</strong> <span class="status-point gray"></span> <strong>3.531 en total</strong></p>
                    </div>
                </div>
                <a href="https://discord.gg/PKxxQf4dQa" target="_blank" class="discord-invite-btn">Unirse</a>
            </div>


            <div class="discord-invite-container fade-on">
                <div class="discord-invite-left">
                    <img src="https://pbs.twimg.com/profile_images/1574506044394438658/T-ZYM-4G_400x400.jpg" alt="Imagen de servidor" class="discord-server-img">
                    <div class="discord-invite-info">
                        <h3>Jerarquia RP</h3>
                        <p><span class="status-point green"></span> <strong>3360 en línea</strong> <span class="status-point gray"></span> <strong>19.347 en total</strong></p>
                    </div>
                </div>
                <a href="https://discord.gg/lajerarquiarp" target="_blank" class="discord-invite-btn">Unirse</a>
            </div>


            <div class="discord-invite-container fade-on">
                <div class="discord-invite-left">
                    <img src="assets/img/logo_clandestinov2.png" alt="Imagen de servidor" class="discord-server-img">
                    <div class="discord-invite-info">
                        <h3>ClandestinoV2</h3>
                        <p><span class="status-point green"></span> <strong>15 en línea</strong> <span class="status-point gray"></span> <strong>65 en total</strong></p>
                    </div>
                </div>
                <a href="https://discord.gg/sNJfdstQYB" target="_blank" class="discord-invite-btn">Unirse</a>
            </div>
            
        </div>     
    </main>
    <!-- CODIGO MENU DE DISCORDS TRABAJADOS -->
    <h1 id="discordtrabajados"><i class="fa-brands fa-weixin"></i> RESEÑAS</h1>

    <!-- TEXTO EXPLICATIVO -->
    <div class="descripciondiscord">
        <p class="safety-description2">
            Si deseas compartir su opinión o sugerencia , la podrás enviar directamente desde nuestro <a href="https://discord.com/invite/VGYp97suen">Discord</a> <br>
            ¡Su feedback es clave para seguir creciendo y poder ir mejorando nuestros servicios poco a poco!
          </p>

    <!-- GALERIA DE RESEÑAS -->
    </div>
    <div class="reviews">
        <div class="review">
            <div class="review-image">
                <img src="https://cdn.discordapp.com/avatars/1156663501201358858/6fbfa16684235cb10289187c5e9ab862.webp?size=128" alt="antoniojose__29">
            </div>
            <div class="review-content">
                <h3><i class="fa-regular fa-user"></i> antoniojose__29</h3>
                <P><i class="fa-solid fa-star"></i> Valoración: 10/10</P>
                <p>Ya tengo 2 servicios contratados con el , y volvere a hacerlo si se diera . Un tio 10 empeñado en su trabajo y sobre todo muy atento a tus preferencias!</p>
            </div>
        </div>

        <div class="review">
            <div class="review-image">
                <img src="https://cdn.discordapp.com/avatars/709128620429541418/a_6487bcc16f98c40aa4c9499ea9bc7bdb.webp?size=80" alt="elloketee">
            </div>
            <div class="review-content">
                <h3><i class="fa-regular fa-user"></i> elloketee</h3>
                <P><i class="fa-solid fa-star"></i> Valoración: 10/10</P>
                <p>Tiene muy buen trato con todo el mundo un chaval bastante majo y que a la hora de hacer las cosas las hace muy bien y muy profesional</p>
            </div>
        </div>

        <div class="review">
            <div class="review-image">
                <img src="https://cdn.discordapp.com/avatars/1147151981408960563/d4f9271e34b1dbf94f2b23cb0ef40677.webp?size=80" alt="dlopez16_10245">
            </div>
            <div class="review-content">
                <h3><i class="fa-regular fa-user"></i> dlopez16_10245</h3>
                <P><i class="fa-solid fa-star"></i> Valoración: 10/10</P>
                <p>Servicio rapido eficaz, bueno y atento a lo que hace y siempre buscando que hacer, lo cual habla muy bien de su trabajo</p>
            </div>
        </div>

        <div class="review">
            <div class="review-image">
                <img src="https://cdn.discordapp.com/avatars/409067996271869962/3c15a1dc456c7e2abe3b75fd5c943b9e.webp?size=128" alt="devagus">
            </div>
            <div class="review-content">
                <h3><i class="fa-regular fa-user"></i> devagus</h3>
                <P><i class="fa-solid fa-star"></i> Valoración: 10/10</P>
                <p>En desarrollo...</p>
            </div>
        </div>
    </div>
    <br>
    <!-- Aqui irá mas secciones de reseñas-->
     
    <br>
    <footer>
        <p>© 2024 Montero Developer</p>
    </footer>

    <!-- SCRIPTS -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
          const fadeInElements = document.querySelectorAll('.fade-in');
      
          const handleScroll = () => {
            fadeInElements.forEach((el) => {
              const rect = el.getBoundingClientRect();
              if (rect.top < window.innerHeight - 100 && rect.bottom > 0) {
                el.classList.add('visible'); // Activa la animación cuando el elemento está cerca de la vista
              }
            });
          };
      
          window.addEventListener('scroll', handleScroll);
          handleScroll(); // Llamar a la función al cargar para activar los elementos visibles
        });
      </script>
      <script>
        document.addEventListener('DOMContentLoaded', () => {
            const fadeInElements = document.querySelectorAll('.fade-on');

            const handleScroll = () => {
                fadeInElements.forEach((el) => {
                    const rect = el.getBoundingClientRect();
                    if (rect.top < window.innerHeight - 50 && rect.bottom > 0) {
                        el.style.transition = 'opacity 2.7s ease-out, transform 2.7s ease-out';
                        el.style.opacity = '1';
                        el.style.transform = 'translateX(0)';
                    }
                });
            };

            // Establecemos un estado inicial para los elementos
            fadeInElements.forEach((el) => {
                el.style.opacity = '0';
                el.style.transform = 'translateX(-50px)'; // Elemento inicia desplazado hacia abajo
            });

            window.addEventListener('scroll', handleScroll);
            handleScroll(); // Para activar inmediatamente los elementos que ya están en vista
        });

      </script>
      <script>
        // Deshabilitar clic derecho en toda la página
        document.addEventListener('contextmenu', function(event) {
          event.preventDefault();
        });
      </script>
      
      <script>
        // Deshabilitar el uso de teclas de acceso rápido
            document.onkeydown = function(e) {
            // Deshabilitar Ctrl + C, Ctrl + U, Ctrl + S, y F12
            if ((e.ctrlKey && (e.keyCode == 67 || e.keyCode == 85 || e.keyCode == 83)), e.keyCode == 123) { // 123 es F12
                e.preventDefault();
            }
        };
      </script>
      <!-- Script Nieve -->
      <script>
        const cantidadCopos = 50; // Número de copos de nieve
        const colores = ['#FFFFFF', '#E8F8F5', '#D5F5E3'];

        for (let i = 0; i < cantidadCopos; i++) {
            const copo = document.createElement('div');
            copo.classList.add('copo');
            copo.style.left = Math.random() * 100 + 'vw';
            copo.style.animationDuration = Math.random() * 3 + 2 + 's'; // Variación de la duración
            copo.style.opacity = Math.random(); // Transparencia
            copo.style.backgroundColor = colores[Math.floor(Math.random() * colores.length)];
            document.body.appendChild(copo);
        }

        // Eliminar copos después de salir de la pantalla
        setInterval(() => {
            const copos = document.querySelectorAll('.copo');
            copos.forEach(copo => {
                if (parseInt(copo.getBoundingClientRect().top, 10) > window.innerHeight) {
                    copo.remove();
                }
            });
        }, 1000);

    </script>
</body>
</html>
