<!DOCTYPE html> 
<html lang="en"> <!-- Index PORTFOLIO-->
    <head> 
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="shortcut icon" href="/assets/img/IsotipoMatriz.png" type="icon">
        <title>Portfolio | iago </title>
        <meta name="description" content="Portfolio | iago">
        <meta name="author" content="Eduardo Iago">
        <meta name="copyright" content="All rights reserved,2024. Iago">
        <meta name="keywords" content="Iago, designer, developer, programmer">
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://eiportfolio.vercel.app">
        <meta property="og:title" content="Portfolio | iago">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.min.css" integrity="sha512-/VYneElp5u4puMaIp/4ibGxlTd2MV3kuUIroR3NSQjS2h9XKQNebRQiyyoQKeiGE9mRdjSCIZf9pb7AVJ8DhCg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <div class="preloader"> <!-- // PRELOADER // -->
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
        </div>

        <main class="main" id="main">
            <header> <!-- // HEADER // -->
                <nav class="headernav">
                    <div class="logo">
                        <a href="#home">
                            <img src="/assets/img//IsotipoWhite.png" alt="isotipo" height="50" width="50"/>
                        </a>
                    </div>
                    <div class="navigation">
                        <a href="#about">ABOUT ME</a>
                        <a href="#projects">PROJECTS</a>
                        <a href="#contact">CONTACT</a>
                    </div>
                </nav>
            </header>

            <div class="container" id="home">
                <section class="hero"> <!-- // FIRST PANEL // -->
                    <div class="content">
                        <h5 style="margin-right: auto;">I AM</h5>
                        <h1 class="titleName"><span>IAGO</span></h1>
                        <h5 style="margin-left: auto;"><span class="auto-type"></span></h5>
                    </div>
                    <div class="left-sidebar"> 
                        <a href="https://www.linkedin.com/in/eduardo-iago/"><i class="ri-linkedin-fill"></i></a>
                        <a href="https://www.github.com/Eduardoiago"><i class="ri-github-fill"></i></a>
                        <a href="https://www.behance.net/Eduardoiago"><i class="ri-behance-fill"></i></a>
                        <a href="https://www.instagram.com/iag.x/"><i class="ri-instagram-line"></i></a>
                    </div>
                    <div class="right-sidebar">
                        <span>SCROLL</span>
                        <div class="bar"></div>
                    </div>
                </section>

                <section class="interfaceAbout" id="about"> <!-- // ABOUT // -->
                    <img class="imageAbout" src="/assets/img/BackgroundAbout.png" alt="imageAbout">
                    <div class="aboutContainer" id="aboutContainer">
                        <div class="aboutTitle">
                            <h1>ABOUT ME</h1>
                        </div>
                        <div class="sobre">
                            <p>
                                Hi, I'm Eduardo Iago. I've been working with design for over six years, creating visual identities for companies. Digital, vector and print. Developing logos, isotypes, imagotypes, branding, social media, advertisements, flyers, invitations, banners. I've been working as a front-end developer for two years, developing UI/UX projects and websites using HTML, CSS, JavaScript, React and Typescript.
                            </p>
                        </div>
                        <div class="languages">
                            <h4 class="textLanguages">Tech Stack</h4>
                            <div class="languagesTools">
                                <img aling="center" alt="GNUbash" height="40" width="40" src="https://user-images.githubusercontent.com/25181517/192158606-7c2ef6bd-6e04-47cf-b5bc-da2797cb5bda.png"/> 
                                <img aling="center" alt="python" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg"/> 
                                <img aling="center" alt="javascript" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg"/> 
                                <img aling="center" alt="angular" height="40" width="40" src="https://user-images.githubusercontent.com/25181517/183890595-779a7e64-3f43-4634-bad2-eceef4e80268.png"/>
                                <img aling="center" alt="react" height="40" width="40" src="https://user-images.githubusercontent.com/25181517/183897015-94a058a6-b86e-4e42-a37f-bf92061753e5.png"/>
                                <img aling="center" alt="typescript" height="40" width="40" src="https://raw.githubusercontent.com/teamedwardforever/Readme-Generator/71f25dd8b98329b168142a6b782a107b75eab178/svg/Skills/Languages/typescript-original.svg"/>
                                <img aling="center" alt="html" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg"/> 
                                <img aling="center" alt="css" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg"/> 
                                <img aling="center" alt="git" height="40" width="40" src="https://raw.githubusercontent.com/teamedwardforever/Readme-Generator/71f25dd8b98329b168142a6b782a107b75eab178/svg/Skills/Other/git-scm-icon.svg"/>
                            </div>
                        </div>
                        <div class="languages">
                            <h4 class="textLanguages">Design</h4>
                            <div class="languagesTools">
                                <img aling="center" alt="photoshop" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/photoshop/photoshop-original.svg"/>
                                <img aling="center" alt="lightroom" height="40" width="40" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Adobe_Photoshop_Lightroom_CC_logo.svg"/>
                                <img aling="center" alt="illustrator" height="40" width="40" src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg"/>
                                <img aling="center" alt="aftereffects" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/aftereffects/aftereffects-original.svg"/>
                                <img aling="center" alt="blender" height="40" width="40" src="https://cdn.icon-icons.com/icons2/3053/PNG/512/blender_alt_macos_bigsur_icon_189483.png"/> 
                                <img aling="center" alt="figma" height="40" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/figma/figma-original.svg"/>
                            </div>
                        </div>
                    </div>
                </section>
                
                <section id="skills-section">
                    <div class="skill-card">
                        <div class="icon">
                            <i class="ri-shapes-line"></i>
                        </div>
                        <h3>Visual Identity</h3>
                        <p>Creating and developing impactful and striking visual identities for brands and companies.</p>
                    </div><br>
                    <div class="skill-card">
                        <div class="icon">
                            <i class="ri-pen-nib-fill"></i>
                        </div>
                        <h3>Graphic Design</h3>
                        <p>Creative graphic designs, from illustrations to high-quality advertising materials.</p>
                    </div><br>
                    <div class="skill-card">
                        <div class="icon">
                            <i class="ri-code-s-slash-fill"></i>
                        </div>
                        <h3>Web Development</h3>
                        <p>Development of websites, landing pages, one pages, portfolios and other web applications.</p>
                    </div><br>
                    <div class="skill-card">
                        <div class="icon">
                            <i class="ri-layout-masonry-fill"></i>
                        </div>
                        <h3>UI & Responsive Design</h3>
                        <p>Creating intuitive and responsive interfaces for a great experience on all devices.</p>
                    </div><br>
                </section>

                <section class="interfaceProjects" id="projects"> <!-- // PROJECTS // -->
                    <div class="painelProjects">
                        <a href="/projects/Hobbie.html">
                            <div class="item hobbie"></div>
                        </a>
                        <a href="/projects/ui-ux.html">
                            <div class="item ui"></div>
                        </a>
                        <a href="/projects/tools.html">
                            <div class="item backend"></div>
                        </a>
                        <a href="/projects/front-end.html">
                            <div class="item frontend"></div>
                        </a>
                        <a href="/projects/logotipos.html">
                            <div class="item logos"></div>
                        </a>
                        <a href="/projects/media.html">
                            <div class="item media"></div>
                        </a>
                        <a href="/projects/artwork.html">
                            <div class="item coverart"></div>
                        </a>
                        
                        <button id="prev"><i class="ri-arrow-left-double-line"></i></button>
                        <button id="next"><i class="ri-arrow-right-double-line"></i></button>
                    </div>
                </section>

                <section class="interfaceContact" id="contact"> <!-- // CONTACT // -->
                    <form action="https://api.staticforms.xyz/submit" method="POST" class="form-flex">
                        <input type="hidden" name="accessKey" value="a2105f65-143a-4807-b538-aeead57b0d55">
                        <input type="hidden" name="redirectTo" value="https://eiportfolio.vercel.app">
                        <div class="containerAbout">
                            <h2 class="titleContact">Send me a message!</h2>
                            <p class="pContact">Let's talk about your next project! I'm here to turn your ideas into reality.</p>
                            <div class="row100">
                                <div class="col">
                                    <div class="input-box">
                                        <input type="text" name="name" required="required">
                                        <span class="text">Name</span>
                                        <span class="line"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row100">
                                <div class="col">
                                    <div class="input-box">
                                        <input type="text" name="subject" required="required">
                                        <span class="text">Phone</span>
                                        <span class="line"></span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-box">
                                        <input type="text" name="email" required="required">
                                        <span class="text">Email</span>
                                        <span class="line"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row100">
                                <div class="col">
                                    <div class="input-box textarea">
                                        <textarea name="message" required="required"></textarea>
                                        <span class="text">Write your message here...</span>
                                        <span class="line"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row100">
                                <div class="col">
                                    <button class="env-btn" type="submit" value="Enviar">Send message</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
                
                <section class="stats-section"> <!-- // PROJECTS STATS // -->
                    <div class="stat-box">
                        <h3>Years of Experience</h3>
                        <span class="stat-number">+5</span>
                    </div>
                    <div class="stat-box">
                      <h3>Satisfied Clients</h3>
                      <span class="stat-number">+60</span>
                    </div>
                    <div class="stat-box">
                        <h3>Completed Projects</h3>
                        <span class="stat-number">76</span>
                    </div>
                </section>

                <footer class="footer"> <!-- // FOOTER // -->
                    <div class="footer-container">
                        <div class="footerLogo">
                            <a href="/index.html">
                                <img src="/assets/img//IsotipoWhite.png" alt="isotipo" height="80" width="80"/>
                            </a>
                        </div>
                        <div class="footer-social"> 
                            <a href="https://www.linkedin.com/in/eduardo-iago/"><i class="ri-linkedin-fill"></i></a>
                            <a href="https://www.github.com/Eduardoiago"><i class="ri-github-fill"></i></a>
                            <a href="https://www.behance.net/Eduardoiago"><i class="ri-behance-fill"></i></a>
                            <a href="https://www.instagram.com/iag.x/"><i class="ri-instagram-line"></i></a>
                            <a href="https://wa.me/558182029869"><i class="ri-whatsapp-line"></i></a>
                            <a href="https://www.youtube.com/@eideveloper"><i class="ri-youtube-fill"></i></a>
                        </div>
                        <div class="footer-nav">
                            <a href="#home"><strong>Home</strong></a>
                            <a href="#projects"><strong>Projects</strong></a>
                            <a href="/services.html"><strong>Services</strong></a>
                            <a href="#contact"><strong>Contact</strong></a>
                        </div>
                        <br>
                        <div class="footer-copyright">
                            <p>&copy; 2024 | Eduardo Iago. All rights reserved.</p>
                        </div>
                    </div>
                </footer>
            </div>
        </main>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
        <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
        <script src="/js/preload.js" async defer></script>
        <script src="/js/autotype.js" async defer></script>
        <script src="/js/exhibition.js" async defer></script>
    </body>
</html>