<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{data["name"]}}</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/static/css/font-awesome.min.css" rel="stylesheet">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/aos.css') }}">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/bootstrap.min.css') }}">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/main.css') }}">

    <noscript>
      <style type="text/css">
        [data-aos] {
            opacity: 1 !important;
            transform: translate(0) scale(1) !important;
        }
      </style>
    </noscript>
  </head>
  <body id="top">
    <header>
      <div class="profile-page sidebar-collapse">
        <nav class="navbar navbar-expand-lg fixed-top navbar-transparent bg-primary" color-on-scroll="400">
          <div class="container">
           
              <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-bar bar1"></span><span class="navbar-toggler-bar bar2"></span><span class="navbar-toggler-bar bar3"></span></button>
            </div>
            <div class="collapse navbar-collapse justify-content-end" id="navigation">
              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link smooth-scroll" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link smooth-scroll" href="#skill">Skills</a></li>
                <li class="nav-item"><a class="nav-link smooth-scroll" href="#experience">Experience</a></li>
                <li class="nav-item"><a class="nav-link smooth-scroll" href="#project">Projects</a></li>
                <li class="nav-item"><a class="nav-link smooth-scroll" href="#education">Education</a></li>
                <li class="nav-item"><a class="nav-link smooth-scroll" href="#contact">Contact</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </header>
    <div class="page-content">
      <div>
<div class="profile-page">
  <div class="wrapper">
    <div class="page-header page-header-small" filter-color="green">
      <div class="page-header-image" data-parallax="true" style="background-image: url('static/images/cc-bg-1.jpg')"></div>
      <div class="container">
        <div class="content-center">
          <div class="cc-profile-image"><a href="#"><img src="{{data['image']}}" alt="Image"/></a></div>
          <div class="h2 title">{{data["name"]}}</div>
          <p class="category text-white">{{data["occupation"]}}</p>
          <a class="btn btn-primary smooth-scroll mr-2" href="#contact" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Hire Me</a>
          <a class="btn btn-primary" target="_blank" href="{{ data['resume'] }}" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Download CV</a>
        </div>
      </div>
      <div class="section">
        <div class="container">
          <div class="button-container">
            <a class="btn btn-default btn-round btn-lg btn-icon" target = "_blank" href="{{data['insta']}}" rel="tooltip" title="Follow me on Instagram"><i class="fa fa-instagram"></i></a>
            <a class="btn btn-default btn-round btn-lg btn-icon" target="_blank" href="{{data['twitter']}}" rel="tooltip" title="Follow me on Twitter"><i class="fa fa-twitter"></i></a>
            <a class="btn btn-default btn-round btn-lg btn-icon" target="_blank" href="{{data['git']}}" rel="tooltip" title="Follow me on Github"><i class="fa fa-github"></i></a>
            <a class="btn btn-default btn-round btn-lg btn-icon" target="_blank" href="{{data['linkedin']}}" rel="tooltip" title="Follow me on LinkedIn"><i class="fa fa-linkedin"></i></a></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section" id="about">
  <div class="container">
    <div class="card" data-aos="fade-up" data-aos-offset="10">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <div class="card-body">
            <div class="h4 mt-0 title">About</div>
            <p>{{data['about']}}</p>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="card-body">
            <div class="h4 mt-0 title">Basic Information</div>
            <div class="row">
              <div class="col-sm-4"><strong class="text-uppercase">Age:</strong></div>
              <div class="col-sm-8">{{data['age']}}</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">Email:</strong></div>
              <div class="col-sm-8">{{data['email']}}</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">Phone:</strong></div>
              <div class="col-sm-8">{{data['phone']}}</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">Address:</strong></div>
              <div class="col-sm-8">{{data['address']}}</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">Language:</strong></div>
              <div class="col-sm-8">{{data['language']}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section" id="skill">
  <div class="container">
    <div class="h4 text-center mb-4 title">Professional Skills</div>
    <div class="card" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
      <div class="card-body">
        <b>Programming Languages:</b>{{data['Programming']}}<br><br>
        <b>Tools:</b> {{data['tools']}}<br>
        <br>
        <b>Internet Technologies:</b> {{data['internet']}}<br><br>
        <b>Other:</b> {{data['other']}}
      </div>
    </div>
  </div>
</div>

<div class="section" id="experience">
  <div class="container cc-experience">
    <div class="h4 text-center mb-4 title">Work Experience</div>
    {% for i in data['work'] %}
    <div class="card">
      <div class="row">
        <div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
          <div class="card-body cc-experience-header">
            <p>{{i["time"]}}</p>
            <div class="h5">{{i["company"]}}</div>
          </div>
        </div>
        <div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
          <div class="card-body">
            <div class="h5">{{i["post"]}}</div>
            <p>
              {{i["info"]}}
              </p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
    </div>
  </div>
</div>

<div class="section" id="project">
  <div class="container cc-experience">
    <div class="h4 text-center mb-4 title">Projects</div>
    {% for i in data['projects'] %}
    <div class="card">
      <div class="row">
        <div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
          <div class="card-body cc-experience-header">
            <p>{{i["time"]}}</p>
            <div class="h5">{{i["name"]}}</div>
          </div>
        </div>
        <div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
          <div class="card-body">
            <p>
              {{i["info"]}}
              </p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
    </div>
  </div>
</div>

<div class="section" id="education">
  <div class="container cc-education">
    <div class="h4 text-center mb-4 title">Education</div>
    {% for i in data['education'] %}
    <div class="card">
      <div class="row">
        <div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
          <div class="card-body cc-education-header">
            <p>{{i["time"]}}</p>
            <div class="h5">{{i["name"]}}</div>
          </div>
        </div>
        <div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
          <div class="card-body">
            <div class="h5">{{i["course"]}}</div>
            <p class="category">{{i["collage"]}}</p>
            <p>{{i["info"]}}</p>
            <p>
              <b>Projects:</b><br>
              <ul>
              {% for j in i['projects'] %}
              <li>{{j}}</li>
              {% endfor %}
            </ul>
          </p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
    

<div class="section" id="contact">
  <div class="cc-contact-information" style="background-image: url('static/images/map.JPG')">
    <div class="container">
      <div class="cc-contact">
        <div class="row">
          <div class="col-md-9">
            <div class="card mb-0" data-aos="zoom-in">
              <div class="h4 text-center title">Contact Me</div>
              <div class="row">
                <div class="col-md-6">
                  <div class="card-body">
                    <form action="/send" method="POST">
                      <div class="p pb-3"><strong>Feel free to contact me </strong></div>
                      <div class="row mb-3">
                        <div class="col">
                          <div class="input-group"><span class="input-group-addon"><i class="fa fa-user-circle"></i></span>
                            <input class="form-control" type="text" name="name" placeholder="Name" required="required"/>
                          </div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col">
                          <div class="input-group"><span class="input-group-addon"><i class="fa fa-file-text"></i></span>
                            <input class="form-control" type="text" name="Subject" placeholder="Subject" required="required"/>
                          </div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col">
                          <div class="input-group"><span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input class="form-control" type="email" name="_replyto" placeholder="E-mail" required="required"/>
                          </div>
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col">
                          <div class="form-group">
                            <textarea class="form-control" name="message" placeholder="Your Message" required="required"></textarea>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col">
                        <button class="btn btn-primary" type="submit">Send</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card-body">
                    <p class="mb-0"><strong>Address </strong></p>
                    <p class="pb-2">{{data["address"]}}</p>
                    <p class="mb-0"><strong>Phone</strong></p>
                    <p class="pb-2">{{data["phone"]}}</p>
                    <p class="mb-0"><strong>Email</strong></p>
                    <p>{{data["email"]}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div></div>
    </div>
    <footer class="footer">
      <div class="container text-center">
        <a class="cc-facebook btn btn-link" target="_blank" href="{{data['insta']}}"><i class="fa fa-instagram fa-2x " aria-hidden="true"></i></a>
        <a class="cc-twitter btn btn-link " target="_blank" href="{{data['twitter']}}"><i class="fa fa-twitter fa-2x " aria-hidden="true"></i></a>
        <a class="cc-google-plus btn btn-link" target="_blank" href="{{data['git']}}"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
        <a class="cc-instagram btn btn-link" target="_blank" href="{{data['linkedin']}}"><i class="fa fa-linkedin fa-2x " aria-hidden="true"></i></a></div>
      <div class="h4 title text-center">{{data['name']}}</div>
      <div class="text-center text-muted">
        <p>&copy; Saigenix. All rights reserved.</p>
      </div>
    </footer>
    <script src="{{ url_for('static',filename='js/core/jquery.3.2.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/core/popper.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/core/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/now-ui-kit.js') }}"></script>
    <script src="{{ url_for('static',filename='js/aos.js') }}"></script>
    <script src="{{ url_for('static',filename='scripts/main.js') }}"></script>
  </body>
</html>