<!doctype html>
<html lang="en" data-bs-theme="dark">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Nikola Petrov</title>

  <script defer src="/assets/main/2_0/js/script.js"></script>
  <link rel="stylesheet" href="/assets/main/2_0/css/style.css">
  <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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <script defer type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script defer nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>

<body>
  <main>
    <aside class="sidebar" data-sidebar>
      <div class="sidebar-info">
        <figure class="avatar-box">
          <img src="/images/Jaz.jpg" alt="Nikola Petrov" width="80">
        </figure>

        <div class="info-content">
          <h1 class="name" title="Nikola Petrov">Nikola Petrov</h1>

          <p class="title">RIT Student</p>
        </div>

        <button class="info_more-btn" data-sidebar-btn>
          <span>Show Contacts</span>

          <ion-icon name="chevron-down"></ion-icon>
        </button>

      </div>

      <div class="sidebar-info_more">

        <div class="separator"></div>

        <ul class="contacts-list">

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="mail-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Email</p>

              <a href="mailto:nikola@petrov.nexus" class="contact-link">nikolape7@gmail.com</a>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="phone-portrait-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Phone</p>

              <a href="tel:0038670749506" class="contact-link">070749506</a>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="calendar-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Birthday</p>

              <time datetime="2000-11-01">November, 2000</time>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="location-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Location</p>

              <address>Ljubljana, Slovenia</address>
            </div>

          </li>

        </ul>

        <div class="separator"></div>

        <ul class="social-list">

          <li class="social-item">
            <a href="https://gitlab.com/nikolape7" title="GitLab" class="social-link">
              <ion-icon name="logo-gitlab"></ion-icon>
            </a>
          </li>

          <li class="social-item">
            <a href="/doc/CV.pdf" title="CV" class="social-link">
              <p>CV</p>
            </a>
          </li>

          <li class="social-item">
            <a href="/doc/Certificate.pdf" title="Certificate" class="social-link">
              <ion-icon name="document-text-outline"></ion-icon>
            </a>
          </li>

          <!-- <li class="social-item">
          <a href="#" class="social-link">
            <ion-icon name="logo-gitlab"></ion-icon>
          </a>
        </li> -->
        </ul>

      </div>

    </aside>

    <!--
    - #main-content
  -->

    <div class="main-content">

      <!--
      - #NAVBAR
    -->

      <nav class="navbar">

        <ul class="navbar-list">

          <li class="navbar-item">
            <button class="navbar-link active" data-nav-link>About</button>
          </li>

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Resume</button>
          </li>


          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Portfolio</button>
          </li>
        </ul>

      </nav>

      <!--
      - #ABOUT
    -->

      <article class="about active" data-page="about">

        <header>
          <h2 class="h2 article-title">About me</h2>
        </header>

        <section class="about-text">
          <p>
            I am currently an RIT student at FERI in Maribor and come from the beautiful city of Ljubljana.
            What really excites me is the opportunity to build systems that have a direct and positive impact on
            people's
            lives.
            I find great satisfaction in using my skills to create practical solutions that address real-world
            challenges.
          </p>

          <p>
            I am excited by the potential of my work and the opportunities that lie ahead.
            With my dedication and expertise, I am determined to contribute to the development of solutions that enhance
            the people's experiences and make a positive difference in the world.
          </p>
        </section>


        <!--
        - project
      -->

        <section class="service">

          <h3 class="h3 service-title">Interests</h3>

          <ul class="service-list">


            <li class="service-item">
              <div class="service-icon-box">
                <ion-icon name="server-outline"></ion-icon>
              </div>

              <div class="service-content-box">

                <h4 class="h4 service-item-title">Backend programming</h4>
                <p class="service-item-text">
                  Backend programming focuses on server-side development, handling data storage, processing, and
                  business
                  logic to support the functionality of web and mobile applications
                </p>
              </div>
            </li>


            <li class="service-item">

              <div class="service-icon-box">
                <ion-icon name="hardware-chip-outline"></ion-icon>
              </div>

              <div class="service-content-box">

                <h4 class="h4 service-item-title">Embedded systems</h4>

                <p class="service-item-text">
                  Embedded systems are specialized computing devices integrated into everyday products, performing
                  dedicated functions with real-time constraints.
                </p>
              </div>

            </li>

            <li class="service-item">

              <div class="service-icon-box">
                <ion-icon name="desktop-outline"></ion-icon>
              </div>

              <div class="service-content-box">
                <h4 class="h4 service-item-title">Application programming</h4>
                <p class="service-item-text">
                  Application programming involves writing code to create software applications that perform specific
                  tasks or functions.
                </p>
              </div>

            </li>


          </ul>

        </section>

      </article>

      <!--
      - #RESUME
    -->

      <article class="resume" data-page="resume">

        <header>
          <h2 class="h2 article-title">Resume</h2>
        </header>

        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="book-outline"></ion-icon>
            </div>

            <h3 class="h3">Education</h3>
          </div>

          <ol class="timeline-list">
            {{#each education}}
            <li class="timeline-item">
              <h4 class="h4 timeline-item-title">{{title}}</h4>
              <span>{{time}}</span>
              <p class="timeline-text">{{des}}</p>
            </li>
            {{/each}}
          </ol>

        </section>

        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="book-outline"></ion-icon>
            </div>

            <h3 class="h3">Experience</h3>
          </div>

          <ol class="timeline-list">
            {{#each experience}}
            <li class="timeline-item">
              <h4 class="h4 timeline-item-title">{{title}} [ {{company}} ]</h4>
              <span>{{time}}</span>
              <p class="timeline-text">
                {{des}}
              </p>
            </li>
            {{/each}}

          </ol>

        </section>

      </article>


      <!--
      - #PORTFOLIO
    -->

      <article class="portfolio" data-page="portfolio">

        <header>
          <h2 class="h2 article-title">Portfolio</h2>
        </header>

        <section class="projects">

          <ul class="project-list">

            {{#each project}}
            <li class="project-item active">
              <a href="{{link}}">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="{{img}}" loading="lazy">
                </figure>

                <h3 class="project-title">{{title}}</h3>

                <p class="project-category">{{des}}</p>

              </a>
            </li>
            {{/each}}
          </ul>

        </section>

      </article>

    </div>

  </main>

</body>

</html>