index.html

<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Casey Cleto</title>
    <link rel="stylesheet" href="portfolio.css">
</head>
<body>
    <!-- MENU ENCABEZADO -->
    <div class="contenedor-header">
        <header>
            <div class="logo">
                <a href="#">Casey</a>
            </div>
            <nav id="nav">
                <ul>
                    <li><a href="#inicio" onclick="seleccionar()">MENU</a></li>
                    <li><a href="#sobremi" onclick="seleccionar()">ABOUT ME</a></li>
                    <li><a href="#skills" onclick="seleccionar()">SKILLS</a></li>
                    <li><a href="#curriculum" onclick="seleccionar()">EXPERIENCE</a></li>
                    <li><a href="#portfolio" onclick="seleccionar()">PROJECTS</a></li>
                    <li><a href="#contacto" onclick="seleccionar()">CONTACT ME</a></li>
                </ul>
            </nav>
            <div class="nav-responsive" onclick="mostrarOcultarMenu()">
                <i class="fa-solid fa-bars"></i>
            </div>
        </header>
    </div>

    <!-- SECCION INICIO -->
    <section id="inicio" class="inicio">
        <div class="contenido-banner">
            <div class="contenedor-img">
            </div>
            <img src="https://github.com/caaseey/CCportfolio/blob/main/img/caseyfoto.jpg?raw=true" alt="">
            <h1>CASEY CLETO</h1>
            <h2>Computer Science student - Passionate about programming</h2>
            <div class="redes">
                <a href="https://github.com/caaseey"><i class="fa-brands fa-github"></i></a>
                <a href="https://www.linkedin.com/in/casey-cleto-belen-166033307/"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
        </div>
    </section>

    <!-- SECCION SOBRE MI -->
    <section id="sobremi" class="sobremi">
        <div class="contenido-seccion">
            <h2>About me</h2>
            <p><span>Hi, I am Casey Cleto.</span> A computer science student currently taking a higher vocational training in Cross Platform Application Development. I have a strong foundation in programming and web development, having previously completed my studies in a lower vocational training in IT. With a passion for technology and a commitment to continuous learning, I aim to enhance my skills in coding and design. I enjoy collaborating on projects that involve creativity and problem-solving, I am enthusiastic about the opportunities ahead in backend web development.</p>
            <div class="fila">
                <!-- datos personales -->
                <div class="col">
                    <h3>Personal data</h3>
                    <ul>
                        <li>
                            <strong>Birthday</strong>
                            21-11-2006
                        </li>
                        <li>
                        <li>
                            <strong>Address</strong>
                            Barcelona, Spain 08001
                        </li>
                        <li>
                            <strong>Profile</strong>
                            <span>Computer Science student</span>
                        </li>
                    </ul>
                </div>

                <!-- intereses -->
                <div class="col">
                    <h3>Hobbies</h3>
                    <div class="contenedor-intereses">
                        <div class="interes">
                            <i class="fa-solid fa-gamepad"></i>
                            <span>GAMES</span>
                        </div>
                        <div class="interes">
                            <i class="fa-solid fa-headphones"></i>
                            <span>MUSIC</span>
                        </div>
                        <div class="interes">
                            <i class="fa-solid fa-plane"></i>
                            <span>TRAVEL</span>
                        </div>
                        <div class="interes">
                            <i class="fa-solid fa-person-hiking"></i>
                            <span>SPORT</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex; justify-content: center;">
                <button style="margin-right: 1px;">
                    <a class="textodownload" href="CV_es.pdf" download>
                        Currículum en Español <i class="fa-solid fa-download"></i>
                        <span class="overlay"></span>
                    </a>
                </button>  
                <button>
                    <a class="textodownload" href="CV_en.pdf" download>
                        Resume in English <i class="fa-solid fa-download"></i>
                        <span class="overlay"></span>
                    </a>
                </button>
            </div>            
    </section>
                    
    <!-- SECCION SKILLS -->
    <section class="skills" id="skills">
        <div class="contenido-seccion">
            <h2>Skills</h2>
            <div class="fila">
                <!-- Technical Skill -->
                <div class="col">
                    <h3>Technical Skills</h3>
                    <div class="skill">
                        <span>Collaborative tools</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Open-Source Operating Systems</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>HTML & CSS</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Networks</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Java</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Professional Skills -->
                <div class="col">
                    <h3>Professional Skills</h3>
                    <div class="skill">
                        <span>Initiative</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Ability to lead</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Cooperation</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Responsibility</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                    <div class="skill">
                        <span>Prioritization</span>
                        <div class="barra-skill">
                            <div class="progreso">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SECCION CURRICULUM -->
    <section id="curriculum" class="curriculum">
        <div class="contenido-seccion">
            <h2>Experience</h2>
            <div class="fila">
                <div class="col izquierda">
                    <h3>Academic data</h3>
                    <div class="item izq">
                        <h4>Higher vocational training in Cross Platform Application Development</h4>
                        <span class="casa">STUCOM Pelai</span>
                        <span class="fecha">September 2024 - June 2026</span>
                        <p>The CFGS in Multiplatform Application Development covers computer systems, databases, and programming with Java and PHP. It covers interface design, mobile application and game development with Dart and Flutter, and programming of multiplatform services with C# and Unity, along with the implementation of ERP systems.</p>
                        <div class="conectori">
                            <div class="circuloi"></div>
                        </div>
                    </div>
                    <div class="item izq">
                        <h4>Lower vocational training in Microcomputer Systems and Networks</h4>
                        <span class="casa">STUCOM Pelai</span>
                        <span class="fecha">September 2022 - June 2024</span>
                        <p>I have skills in the installation and maintenance of operating systems, networks and microcomputer equipment, as well as technical assistance, automation with Arduino and user-level programming.</p>
                        <div class="conectori">
                            <div class="circuloi"></div>
                        </div>
                    </div>
                    <div class="item izq">
                        <h4>Compulsory Secondary Education</h4>
                        <span class="casa">Mare de Déu del Roser</span>
                        <span class="fecha">September 2018 - June 2022</span>
                        <p>During my time in compulsory secondary education, I acquired a solid education in various subjects, which allowed me to develop essential skills for my academic and professional future. In addition, I participated in SMIX, an initiative that encouraged teamwork and the development of creative projects, contributing to my personal and professional growth.</p>
                        <div class="conectori">
                            <div class="circuloi"></div>
                        </div>
                    </div>
                </div>

                <div class="col derecha">
                    <h3>Work Experience</h3>
                    <div class="item der">
                        <h4>Technical Assistant - Motherboard Repair</h4>
                        <span class="casa">Gigabyte Technology</span>
                        <span class="fecha">February 2024 - June 2024</span>
                        <p>My responsibilities included diagnosing and analyzing motherboard issues, repairing damaged electronic components, updating firmware and BIOS, and collaborating with the technical team to resolve issues and provide effective solutions.</p>
                        <div class="conectord">
                            <div class="circulod"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SECCION PORTFOLIO -->
    <section id="portfolio" class="portfolio">
        <div class="contenido-seccion">
            <h2>PROJECTS</h2>
            <div class="galeria">
                <div class="proyecto">
                    <img src="https://github.com/caaseey/CCportfolio/blob/main/img/robot.png?raw=true" alt="">
                    <div class="overlay">
                        <h3>Development of an Autonomous Cleaning Robot with Arduino</h3>
                    </div>
                </div>
                <div class="proyecto">
                    <img src="https://github.com/caaseey/CCportfolio/blob/main/img/erasmus.png?raw=true" alt="">
                    <div class="overlay">
                        <h3>Web Development at Baba Balloons Erasmus Experience</h3>
                    </div>
                </div>
                <div class="proyecto">
                    <img src="https://github.com/caaseey/CCportfolio/blob/main/img/cableado.png?raw=true" alt="">
                    <div class="overlay">
                        <h3>IDAS (Simulated Company)</h3>
                    </div>
                </div>
                <div class="proyecto">
                    <img src="https://github.com/caaseey/CCportfolio/blob/main/img/gigabyte.png?raw=true" alt="">
                    <div class="overlay">
                        <h3>Gigabyte RMA Experience Motherboard Repair Technician</h3>
                    </div>
                </div>
                <div class="proyecto">
                    <img src="img/cc.png" alt="">
                    <div class="overlay">
                        <h3>Future projects</h3>
                    </div>
                </div>
                <div class="proyecto">
                    <img src="img/cc.png" alt="">
                    <div class="overlay">
                        <h3>Future Projects</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

<!-- SECCION CONTACTO -->
<section id="contacto" class="contacto">
    <div class="contenido-seccion">
        <h2>CONTACT ME</h2>
        <div class="fila">
            <!-- Mapa -->
            <div class="col">
                <div class="info">
                    <ul>
                        <li>
                            <i class="fa-solid fa-location-dot"></i>
                            Barcelona, Spain 08001
                        </li>
                        <li>
                            <i class="fa-solid fa-mobile-screen"></i>
                            +34 634 16 38 85
                        </li>
                        <li>
                            <i class="fa-solid fa-envelope"></i>
                            griercaseycletobelen@gmail.com
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


    <!-- footer -->
    <footer>
        <a href="#inicio" class="arriba">
            <i class="fa-solid fa-angles-up"></i>
        </a>
        <div class="redes">
            <a href="https://github.com/caaseey"><i class="fa-brands fa-github"></i></a>
            <a href="https://www.linkedin.com/in/casey-cleto-belen-166033307/"><i class="fa-brands fa-linkedin-in"></i></a>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>