<!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">
    <title>Rayan Ziani | Portfolio</title>
    <link rel="icon" href="assets/img/propic.png">

    <!-- Primary Meta Tags -->
    <meta name="title" content="Rayan Ziani | Portfolio">
    <meta name="description" content="Welcome to Rayan Ziani's portfolio. Explore my projects, skills, and professional experience in web development and design.">
    <meta name="keywords" content="Rayan Ziani, Portfolio, Web Development, Design">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://your-domain.com">
    <meta property="og:title" content="Rayan Ziani | Portfolio">
    <meta property="og:description" content="Welcome to Rayan Ziani's portfolio. Explore my projects, skills, and professional experience in web development and design.">
    <meta property="og:image" content="https://your-domain.com/assets/img/preview.jpg">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://your-domain.com">
    <meta property="twitter:title" content="Rayan Ziani | Portfolio">
    <meta property="twitter:description" content="Welcome to Rayan Ziani's portfolio. Explore my projects, skills, and professional experience in web development and design.">
    <meta property="twitter:image" content="https://your-domain.com/assets/img/preview.jpg">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" class="stylesheet">
</head>

<body>

    <!--=== Header ===-->
    <header id="header" class="header">
        <div class="container">
            <nav class="nav">
                <a href="index.html" class="nav__brand">
                    <svg class="toplogosvg" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400">
                        <g id="svgg">
                            <path id="path0" d="M182.000 75.181 C 163.327 77.828,140.244 87.687,123.780 100.050 C 56.051 150.902,56.139 250.205,123.957 301.250 C 130.612 306.259,132.910 307.627,144.800 313.654 C 227.294 355.474,327.235 293.311,327.195 200.205 C 327.163 124.258,257.708 64.452,182.000 75.181 M217.647 94.037 C 299.340 107.278,337.171 207.484,283.758 269.154 L 279.917 273.590 252.810 246.234 C 226.893 220.079,224.754 217.624,227.847 217.581 C 228.591 217.571,231.276 216.708,233.813 215.665 C 281.299 196.137,276.942 131.406,227.216 117.655 C 221.553 116.089,219.190 116.000,183.173 116.000 L 145.114 116.000 142.515 113.319 L 139.917 110.638 141.834 109.382 C 162.618 95.764,191.826 89.852,217.647 94.037 M131.573 133.573 L 139.516 141.546 181.158 141.773 L 222.800 142.000 226.280 143.857 C 243.032 152.797,246.695 173.347,233.829 186.213 C 226.877 193.165,220.906 194.400,194.253 194.400 L 174.400 194.400 174.400 177.600 L 174.400 160.800 157.200 160.800 L 140.000 160.800 140.000 220.000 L 140.000 279.200 157.200 279.200 L 174.400 279.200 174.400 249.200 L 174.400 219.200 182.364 219.200 L 190.327 219.200 204.125 232.600 C 237.531 265.042,260.809 288.373,260.550 289.155 C 260.395 289.620,257.599 291.584,254.335 293.520 C 198.674 326.533,125.172 301.766,100.068 241.538 C 84.370 203.877,92.388 157.419,119.491 129.000 C 123.553 124.741,122.302 124.267,131.573 133.573 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path>
                        </g>
                    </svg>
                    ZIANI<span>Rayan</span>
                </a>
                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#hero" class="nav__link">Home</a>
                        </li>
                        <li class="nav__item">
                            <a href="#about" class="nav__link">Skills</a>
                        </li>
                        <li class="nav__item">
                            <a href="#qualification" class="nav__link">Qualification</a>
                        </li>
                        <li class="nav__item">
                            <a href="#project" class="nav__link">Projects</a>
                        </li>
                        <li class="nav__item">
                            <a href="#roadmap" class="nav__link">Roadmap</a>
                        </li>
                        <li class="nav__item">
                            <a href="#contact" class="nav__link">Contact</a>
                        </li>
                    </ul>
                </div>
                <div class="nav__toggle">
                    <i id="nav-toggle" class="ri-menu-3-line"></i>
                </div>
            </nav>
        </div>
    </header>
    <!--=== main ===-->
    <main class="main">
        <!--= Hero ==-->
        <section id="hero" class="hero">
            <div class="container">
                <div class="d-grid hero__wrapper">
                    <div class="hero__content">
                        <h1 class="hero__title" id="typing-animation">Hello, I am Rayan ZIANI,<br>Full-Stack Developper.</h1>
                        
                        <p class="hero__description">Welcome to my portfolio ! I am a full-stack developper currently in 3rd year with the aim of continuing for 5 years as a work-study student in this field. I'm passionate about programming and like to try out new technologies. I'm actively looking for an opportunity to join a company as an apprentice, where I can contribute my skills and develop in an environment that values hard work and gives me responsibilities and challenges. My aim is to work in a positive and encouraging environment where I can bring real added value to my employer while developing my professional skills.
                        </p>
                        <div class="hero__info">
                            <div class="hero__info-wrapper">
                                <a href="#contact"><i class="fa fa-envelope"></i></a>
                                <a target="_blank" href="https://github.com/RayanZiani"><i class="fa-brands fa-github"></i></a>
                                <a target="_blank" href="https://www.linkedin.com/in/rayan-ziani/"><i class="fa-brands fa-linkedin"></i></a>
                                <!-- <p class="hero__info-number">03+</p>
                                <h2 class="hero__info-title">Years<br>Experience</h2>  -->
                            </div>
                            
                        </div>
                    </div>
                    <img src="#" alt="Rayanw" class="hero__img">
                </div>
            </div>
        </section>




        <section id="about" class="section project">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Skills</h2>
                    <span class="section__subtitle"><i class="fa fa-code" aria-hidden="true" style="font-size: 24px;"></i>
                </span></div>
                <!--
                <div class="about">
                    <div class="about__content">
                        <h3 class="about__title">Test title <i class="fa fa-laptop" aria-hidden="true" style="font-size: 24px;"></i> ***</h3>
                        <p class="about__description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, adipisci!</p>
                        <br>
                        <a href="https://github.com/RayanZiani" class="btn btn--primary">See More</a>
                    </div>
                </div>
                -->
                <br>
                <br>
                

                <div class="d-grid project__wrapper">
                    <!--= skills 1 =-->
                    <div class="project__content">
                        <h4 class="project__title default-cursor"><i class="fa fa-pencil-square" aria-hidden="true" style="font-size: 17px; color:#676767 ;"></i> Programming Languages</h4>
                        <ul class="skills__list">
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Python</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Machine Learning & AI projects</li>
                                        <li>- Small automation programs</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>PHP</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Basic backend development for school projects</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>C++</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Kernel-level programming</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Verilog</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Custom PCIe device driver programming</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>JavaScript</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Basic web development with HTML/CSS</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Rust</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Development of a Monero cryptocurrency wallet</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <!--= skills 2 =-->
                    <div class="project__content">
                        <h4 class="project__title default-cursor"><i class="fa fa-wrench" aria-hidden="true" style="font-size: 17px; color:#676767 ;"></i> Framework & Libraries</h4>
                        <ul class="skills__list">
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Vite.js</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Building React applications</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Bootstrap</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Quick responsive design for school projects</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Knockout.js</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- MVVM architecture for HCL internship module</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>React.js</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Various frontend web development projects</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <!--= skills 3 =-->
                    <div class="project__content">
                        <h4 class="project__title default-cursor"><i class="fa fa-code" aria-hidden="true" style="font-size: 17px; color:#676767 ;"></i> DataMarkup & Standards</h4>
                        <ul class="skills__list">
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>HTML5</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Foundation of all early web projects</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>CSS3</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Design and frontend styling for early projects</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <!--= skills 4 =-->
                    <div class="project__content">
                        <h4 class="project__title default-cursor"><i class="fa fa-bolt" aria-hidden="true" style="font-size: 17px; color:#676767 ;"></i> Hard Skills</h4>
                        <ul class="skills__list">
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>IDA Pro</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Learning basics of software reverse engineering</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Xilinx Vivado</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- FPGA development for pentesting purposes</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Adobe Creative Suite</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Visual content creation (GFX/VFX/SFX and 3D)</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Wireshark</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Network packet analysis for protocol understanding</li>
                                        <li>- Network traffic monitoring and debugging</li>
                                    </ul>
                                </div>
                            </li>
                            
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>Burp Suite</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Web application security testing</li>
                                        <li>- Security assessment of personal projects</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <!--= skills 5 =-->
                    <div class="project__content">
                        <h4 class="project__title default-cursor"><i class="fa fa-database" aria-hidden="true" style="font-size: 17px; color:#676767 ;"></i> DataBase</h4>
                        <ul class="skills__list">
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>MySQL</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Simple databases for school projects</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="skills__item">
                                <div class="skills__header">
                                    <i class="ri-arrow-right-s-fill"></i>
                                    <span>MongoDB</span>
                                </div>
                                <div class="skills__details">
                                    <ul>
                                        <li>- Large-scale databases for personal projects</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
            </div>
        </section>




      



        <!--=== Qualification ===-->
        <section id="qualification" class="section qualification">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Qualification</h2>
                    <span class="section__subtitle"><i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 24px;"></i>
                    <span class="section__subtitle"></span>
                </span></div>
                <!--= Experience =-->
                <div class="qualification__wrapper">
                    <h3 class="qualification__name">
                        <i class="ri-booklet-fill"></i>
                        Education / Experience
                    </h3>
                    <div class="d-grid qualification__content">
                        <div class="qualification__item">
                            <h3 class="qualification__title">3rd Year DevOps Fullstack - Lyon EPSI</h3>
                            <p class="qualification__description">Bachelor in Computing Science
                            </p>
                            <span class="qualification__date"><i class="fa fa-calendar" aria-hidden="true"></i><span> 2024 - 2025 </span></span>
                        </div>
                        <div class="qualification__item">
                            <h3 class="qualification__title">BTS SNIR - Lyon ORT</h3>
                            <p class="qualification__description">BTS Digital Systems option IT and Networks
                            </p>
                            <span class="qualification__date"><i class="fa fa-calendar" aria-hidden="true"></i><span> 2022 - 2024 </span></span>
                        </div>
                        <div class="qualification__item">
                            <h3 class="qualification__title">6 Weeks Internships - HCL</h3>
                            <p class="qualification__description">R&D (Research&Development) - Developed a module for hospital software.</p>
                                <span class="qualification__date"><i class="fa fa-calendar" aria-hidden="true"></i><span> 2023 </span></span>
                        </div>
                    </div>
                </div>
                <!--= Certification =-->
                <div class="qualification__wrapper">
                    <h3 class="qualification__name">
                        <i class="ri-draft-line"></i>
                        Certification
                    </h3>
                    <div class="d-grid qualification__content">
                        <!-- Education 1-->
                        <div class="qualification__item">
                            <h3 class="qualification__title">PIX - PIX CERTIFICATE </h3>
                            <p class="qualification__description">The Pix certificate is recognized by France Compétences as a vocational training certificate after a minimum score of 120.
                                <br>Code no: P-BMQ7RDCT
                                    <br>
                                    <br>
                                    
                                    <a target="_blank" href="assets/pdf/attestation-pix-20240308.pdf" class="btn btn--primary">View certificate </a>
                            </p>
                            <span class="qualification__date"><i class="fa fa-calendar" aria-hidden="true"></i><span> MARCH 2024 </span></span>
                        </div>
                        <!-- Education 2-->
                        
                    </div>
                </div>
                <div class="qualification__footer">
                    <p class="qualification__footer-text">See my full resume <i class="fa fa-file-text" aria-hidden="true" style="font-size: 17px;"></i></p>
                    <a href="assets/pdf/RayanZiani-CV_French.pdf" class="btn btn--primary" target="_blank">View CV</a>
                </div>
            </div>
        </section>

     

        <!--=================== Projects ====================-->
        <section id="project" class="section project">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Projects</h2>
                  <span class="section__subtitle"><i class="fa fa-cogs" aria-hidden="true" style="font-size: 24px;"></i>
                </span></div>
                <div class="d-grid project__wrapper">
                    <!--============== project 1 =============-->
                    <div class="project__content">
                        <img src="assets/img/2.png" alt="Oven Control Project" class="project__img"> 
                        
                        <h3 class="project__title">PISEO - OVEN CONTROL</h3>
                        <p class="project__description">Web (php) and python-based control of the oven. 
                            TCP Modbus read and write requests.
                            Custom API.</p>
                            <a class="btn btn--primary">View Project </a>
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <div id="projectModal" class="modal">
                <div class="modal__content">
                    <span class="modal__close">&times;</span>
                    <div class="modal__header">
                        <h2>PISEO - OVEN CONTROL</h2>
                    </div>
                    <div class="modal__body">
                        <img src="assets/img/2.png" alt="Oven Control Project" class="modal__img">
                        <div class="modal__info">
                            <div class="modal__section">
                                <h3><i class="fa fa-info-circle"></i> Project Overview</h3>
                                <p>A comprehensive oven control system integrating web technologies with industrial hardware control, featuring robust data handling across different endianness architectures.</p>
                            </div>
                            
                            <div class="modal__section">
                                <h3><i class="fa fa-cogs"></i> Technical Stack</h3>
                                <ul>
                                    <li><strong>Backend:</strong> PHP, Python</li>
                                    <li><strong>Communication:</strong> TCP Modbus Protocol</li>
                                    <li><strong>Integration:</strong> Custom API Development</li>
                                    <li><strong>Interface:</strong> Web-based Control Panel</li>
                                </ul>
                            </div>
            
                            <div class="modal__section">
                                <h3><i class="fa fa-microchip"></i> Protocol Implementation</h3>
                                <ul>
                                    <li>TCP Modbus frame handling for both little-endian and big-endian architectures</li>
                                    <li>Automated endianness detection and conversion</li>
                                    <li>Robust error handling for data integrity across different systems</li>
                                </ul>
                            </div>
            
                            <div class="modal__section">
                                <h3><i class="fa fa-tasks"></i> Key Features</h3>
                                <ul>
                                    <li>Real-time oven temperature monitoring</li>
                                    <li>Remote control capabilities</li>
                                    <li>TCP Modbus integration with endianness handling</li>
                                    <li>Custom API for system integration</li>
                                    <li>User-friendly web interface</li>
                                    <li>Cross-platform data consistency</li>
                                </ul>
                            </div>
            
                            <div class="modal__section">
                                <h3><i class="fa fa-code"></i> Technical Details</h3>
                                <ul>
                                    <li>Implemented byte-order handling for TCP Modbus frames in both little-endian and big-endian formats</li>
                                    <li>Optimized data transfer with proper endianness conversion</li>
                                    <li>Buffer management for different data types and alignments</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="modal__footer">
                        <a href="#" class="btn btn--primary">View Documentation</a>
                        <a href="#" class="btn btn--secondary">View Source Code</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="roadmap" class="section roadmap">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Portfolio Roadmap</h2>
                    <span class="section__subtitle"><i class="fa fa-road" aria-hidden="true" style="font-size: 24px;"></i></span>
                </div>
                <div class="roadmap__wrapper">
                    <div class="roadmap__item">
                        <div class="roadmap__year">2022</div>
                        <div class="roadmap__content expandable">
                            <div class="roadmap__header">
                                <h3>Initial Creation</h3>
                                <p class="roadmap__brief">First version of the portfolio website created from scratch</p>
                                <span class="roadmap__expand-hint">Click to see details</span>
                            </div>
                            <div class="roadmap__details">
                                <ul>
                                    <li>Basic HTML/CSS structure creation</li>
                                    <li>Core functionality implementation</li>
                                    <li>Initial design concepts</li>
                                </ul>
                            </div>
                            <div class="roadmap__status roadmap__status--completed">
                                <i class="fa fa-check-circle"></i> Completed
                            </div>
                        </div>
                    </div>
                    
                    <div class="roadmap__item">
                        <div class="roadmap__year">2023</div>
                        <div class="roadmap__content expandable">
                            <div class="roadmap__header">
                                <h3>Design & Deployment</h3>
                                <p class="roadmap__brief">Implementation of color schemes, hosting setup, and visual improvements</p>
                                <span class="roadmap__expand-hint">Click to see details</span>
                            </div>
                            <div class="roadmap__details">
                                <ul>
                                    <li>Color scheme implementation</li>
                                    <li>Hosting setup and configuration</li>
                                    <li>Visual enhancements and refinements</li>
                                </ul>
                            </div>
                            <div class="roadmap__status roadmap__status--completed">
                                <i class="fa fa-check-circle"></i> Completed
                            </div>
                        </div>
                    </div>
                    
                    <div class="roadmap__item">
                        <div class="roadmap__year">2024</div>
                        <div class="roadmap__content expandable">
                            <div class="roadmap__header">
                                <h3>Maintenance & Planning</h3>
                                <p class="roadmap__brief">Basic updates and preparation for future redesign</p>
                                <span class="roadmap__expand-hint">Click to see details</span>
                            </div>
                            <div class="roadmap__details">
                                <ul>
                                    <li>Projects portfolio update</li>
                                    <li>Skills section enhancement</li>
                                    <li>Implementation of development roadmap for clearer objectives</li>
                                    <li>Groundwork preparation for 2025 redesign</li>
                                </ul>
                            </div>
                            <div class="roadmap__status roadmap__status--current">
                                <i class="fa fa-clock-o"></i> Current Phase
                            </div>
                        </div>
                    </div>
                    
                    <div class="roadmap__item">
                        <div class="roadmap__year">2025</div>
                        <div class="roadmap__content expandable">
                            <div class="roadmap__header">
                                <h3>React Migration</h3>
                                <p class="roadmap__brief">Planned migration to React for improved performance and future scalability</p>
                                <span class="roadmap__expand-hint">Click to see details</span>
                            </div>
                            <div class="roadmap__details">
                                <ul>
                                    <li>Complete React.js migration</li>
                                    <li>Multi-language support:
                                        <ul>
                                            <li>French (FR)</li>
                                            <li>English (EN)</li>
                                            <li>Arabic (AR)</li>
                                            <li>Spanish (ES)</li>
                                        </ul>
                                    </li>
                                    <li>Complete graphic redesign</li>
                                    <li>Enhanced user experience</li>
                                </ul>
                            </div>
                            <div class="roadmap__status roadmap__status--planned">
                                <i class="fa fa-hourglass-half"></i> Planned
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="section contact">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Contact</h2>
                    <span class="section__subtitle"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 24px;"></i></span>
                </div>
                <div class="d-grid contact__wrapper">
                    <div class="contact__content">
                        <h2 class="contact__title">Let's Connect!</h2>
                        <p class="contact__description">
                            Looking for a passionate full-stack developer for your next project? Whether it's for a work-study opportunity, collaboration, or just to discuss technology, I'm always excited to connect with new people!<br><br>
                            Drop me a message using the form, and I'll get back to you within 24-48 hours. You can also reach out directly via LinkedIn or check out my projects on GitHub.
                        </p>
                        <div class="contact__social">
                            <a href="https://www.linkedin.com/in/rayan-ziani/" target="_blank" class="contact__social-link">
                                <i class="fa-brands fa-linkedin"></i> LinkedIn
                            </a>
                            <a href="https://github.com/RayanZiani" target="_blank" class="contact__social-link">
                                <i class="fa-brands fa-github"></i> GitHub
                            </a>
                        </div>
                    </div>
        
                    <div class="contact__form">
                        <form action="https://formsubmit.co/rayan_ziani.web@yahoo.com" method="POST" id="contactForm">
                            <input type="text" name="_honey" style="display: none;">
                            <input type="hidden" name="_captcha" value="false">
                            <input type="hidden" name="_next" value="https://rayanziani.com/thanks.html">
                            
                            <div class="form-group">
                                <input type="text" name="name" placeholder="Your Name" required>
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" placeholder="Your Email" required>
                            </div>
                            <div class="form-group">
                                <textarea name="message" placeholder="Your Message" required></textarea>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn--primary">Send Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>


    </main>
    <!--=================== footer ====================-->
    <footer id="footer" class="footer">
        <div class="container">

            <p class="footer__copyright">© Portfolio | 2022 - <script type="text/javascript">document.write(new Date().getFullYear());</script> Rayan Ziani All Rights Reserved</p>
        </div>
    </footer>

    <!--=== SwiperJS ===-->
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

    <!--== ScrollReveal ===-->
    <script src="https://unpkg.com/scrollreveal"></script>

    <!--== ./JS ===-->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/sec.js"></script>

    <script>

    </script>
</body>

</html>

