index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
  <title>Angel Avendaño Cruz</title>
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico" />
  <link rel="stylesheet" href="./index.css">
  <!--  Animate CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <!-- Font Awesome icons (free version)-->
  <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
  <!-- Google fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-container">
  <nav class="nav">
    <ul class="nav-list">
      <li class=""><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
    </ul>
  </nav>
  <section class="home" id="home">
    <article class="home-article">
      <figure>
        <img class="avatar"
             src="https://avatars.githubusercontent.com/u/6280066?v=4" alt="">
      </figure>
      <div class="titles light">
        <h1 class="title">Hi, I'm Ángel Avendaño Cruz</h1>
        <h3 class="sub-title">Web Developer</h3>
      </div>
    </article>
  </section>
  <section class="section-container about" id="about">
    <div class="titles soft-black adjust-padding-mobile">
      <h2 class="title">I'm Ángel</h2>
      <h3 class="sub-title">Fontend / Backend Developer</h3>
    </div>
    <article class="about-article-description adjust-padding-mobile">
      <ul class="about-social-contact">
        <li><a href="https://github.com/AngAven" target="_blank"><img src="./assets/images/skills/github.svg" alt=""></a></li>
        <li><a href="https://www.linkedin.com/in/angelavendanocruz" target="_blank"><img
          src="./assets/images/skills/linkedin.svg" alt=""></a></li>
        <li><a href="https://twitter.com/MadAngel22" target="_blank"><img src="./assets/images/skills/twitter.svg" alt=""></a></li>
      </ul>
      <div class="about-description">
        <p>
          I am a Web Developer who likes to develop FrontEnd and Backend applications, I like to collaborate with different type of professions, mainly financial and entrepreneurs.
        </p>
        <br>
        <p>
          I chose this programming life to help people with web tools which can solve their problems.
        </p>
      </div>
    </article>
    <article class="about-article-card adjust-padding-mobile">
      <figure class="card-image hide-element-mobile">
        <img src="./assets/images/card.png" alt="">
      </figure>
      <div class="card-download-cv">
        <a target="_blank"
           href="https://raw.githubusercontent.com/AngAven/angelavendanocruz/main/assets/images/cv/angel_avendano_cruz.pdf"><button>Download CV</button></a>
      </div>
    </article>
    <aside class="about-aside-extra-info">
      <ul class="aside-extra-info-list">
        <li class="aside-extra-info-item">
          <span class="fas fa-envelope soft-black"></span>
          <span class="soft-black hide-element-mobile">Email:</span>
          angel.aven.c@gmail.com
        </li>
        <li class="aside-extra-info-item">
          <span class="fas fa-mobile soft-black"></span>
          <span class="soft-black hide-element-mobile">Phone:</span>
          +52 55 3418-4620
        </li>
        <li class="aside-extra-info-item">
          <span class="fas fa-calendar-alt soft-black"></span>
          <span class="soft-black hide-element-mobile">Date of birth:</span>
          22 Feb 1991
        </li>
        <li class="aside-extra-info-item">
          <span class="fas fa-map-marked soft-black"></span>
          <span class="soft-black hide-element-mobile">Location:</span>
          Edo. Mex, México
        </li>
      </ul>
    </aside>
  </section>
  <section class="section-container skills" id="skills">
    <div class="titles soft-black adjusted-titles padding-1rem adjust-padding-mobile">
      <h2 class="title">Skills</h2>
      <h3 class="sub-title">Technologies / Years of experience</h3>
    </div>
    <div class="skills-section-items adjust-padding-mobile">
      <ul class="skills-item">
        <li><figure class="skills-icon"><img src="./assets/images/skills/html5.svg" alt="">
          <span>HTML / +5 </span></figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/css3.svg" alt=""> <span>CSS / +5</span>
        </figure>
        </li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/javascript.svg" alt=""> <span>JavaScript /
          +5</span>
        </figure>
        </li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/git.svg" alt=""> <span>Git / +5</span>
        </figure>
        </li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/react.svg" alt=""> <span>React / +2</span>
        </figure>
        </li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/node-dot-js.svg" alt=""> <span>Node /
          +2</span>
        </figure>
        </li>
      </ul>
      <ul class="skills-item">
        <li><figure class="skills-icon"><img src="./assets/images/skills/linux.svg" alt=""> <span>Unix / +5</span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/centos.svg" alt=""> <span>CentOS / +4 </span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/postgresql.svg" alt=""> <span>PostgreSQL /
          +4</span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/docker.svg" alt=""> <span>Docker / +3 </span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/digitalocean.svg" alt=""> <span>Digital Ocean /
          +3</span>  </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/linode.svg" alt=""> <span>Linode / +1 </span>
        </figure></li>
      </ul>
      <ul class="skills-item">
        <li><figure class="skills-icon"><img src="./assets/images/skills/github.svg" alt=""> <span>GitHub / +5 </span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/npm.svg" alt=""> <span>npm / +3</span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/webpack.svg" alt=""> <span>WebPack / +1
        </span>
        </figure></li>
        <li><figure class="skills-icon"><img src="./assets/images/skills/figma.svg" alt=""> <span> Figma / +1 </span>
        </figure></li>
      </ul>
    </div>
  </section>
  <section class="section-container portfolio" id="portfolio">
    <div class="titles soft-black adjusted-titles">
      <h2 class="title">Portfolio</h2>
      <!--      <h2 class="sub-title">Technologies / Years of experience</h2>-->
    </div>
    <article class="portfolio-article">
      <div class="portfolio-article-item pointer item-1">
        <div class="description">
          <h4>Ventanilla Huixquilucan</h4>
          <h5>Government</h5>
        </div>
      </div>
      <div class="portfolio-article-item pointer item-2">
        <div class="description">
          <h4>Poder Judicial</h4>
          <h5>Government</h5>
        </div>
      </div>
      <div class="portfolio-article-item pointer item-3">
        <div class="description">
          <h4>Ventanilla Naucalpan</h4>
          <h5>Government</h5>
        </div>
      </div>
      <div class="portfolio-article-item pointer item-4">
        <div class="description">
          <h4>Co2scan</h4>
          <h5>Hackaton</h5>
        </div>
      </div>
      <div class="portfolio-article-item pointer item-6">
        <div class="description">
          <h4>Constitución de empresas</h4>
          <h5>Government / SAT</h5>
        </div>
      </div>
      <div class="portfolio-article-item pointer item-5">
        <div class="description">
          <h4>Data Visualization</h4>
          <h5>Politics / Government</h5>
        </div>
      </div>
    </article>
  </section>
</div>

<a class="btn hide-element" href="#open-modal">👋</a>

<div id="open-modal" class="modal-window">
  <div class="modal-container">
    <a href="#" title="Close" class="modal-close">Close</a>
    <div class="scrollable">
      <div class="insert-modal-content"></div>
    </div>
    <div class="loader"></div>
  </div>
</div>

<script src="./index.js"></script>
</body>
</html>