<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>

<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">nikola@petrov.nexus</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 a RIT student at FERI in Maribor, and I come from the lovely city of Ljubljana. 
          What truly 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>
          Being able to merge my technical knowledge with my passion for helping others is incredibly fulfilling for me.
          Throughout my studies, I have been inspired to develop innovative systems that can make a meaningful difference in society.
          I am driven by the belief that technology can be a powerful tool for improving lives.
        </p>

        <p>
          I am enthusiastic about 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 people's experiences and make a positive impact in the world.
        </p>
      </section>


      <!--
        - project
      -->

      <section class="service">

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

        <ul class="service-list">

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

            <div class="service-content-box">
              <a href="https://gitlab.com/school221/semester_4/projektna_naloga">
                <h4 class="h4 service-item-title">Car counter</h4>
              </a>

              <p class="service-item-text">
                Program that counts number of cars on the Slovenia highways. With the help of Pytorch and Python.
                Data is stored in a mongoDB database with Express.js and Node.js.<br>
                For displaying the data React.js is used.<br>
              </p>
            </div>
          </li>
          
          
          <li class="service-item">

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

            <div class="service-content-box">
              <a href="https://gitlab.com/school221/semester_4/razvoj_programskih_sistemov">
                <h4 class="h4 service-item-title">Games</h4>
              </a>
              <p class="service-item-text">
                Games for school project.<br>
                Roguelike_game is made with Unity and C#.<br>
                Tetris is made with WPF and C#.
              </p>
            </div>

          </li>
    

          
          <li class="service-item">

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

            <div class="service-content-box">
              <a href="https://gitlab.com/school221/semester_3/uporabniski_vmesniki/myapp">
                <h4 class="h4 service-item-title">Multimedia player</h4>
              </a>

              <p class="service-item-text">
                WPF application for playing videos and music.
              </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">
              <a href="https://gitlab.com/homep/arduino">
                <h4 class="h4 service-item-title">Arduino projects</h4>
              </a>
              <p class="service-item-text">
                Luc is a esp32 controlled light with a web site to control brightness. <br>
                Mesoreznica is a arduino pid controlled meet grinder. <br>
              </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">

          <li class="timeline-item">

            <h4 class="h4 timeline-item-title">(FERI) Faculty of Electrical Engineering and Computer Science, University of Maribor</h4>

            <span>01/10/2021 - CURRENT</span>

            <p class="timeline-text">
              Graduate engineer of computer science and information technology
            </p>

          </li>

          <li class="timeline-item">

            <h4 class="h4 timeline-item-title">(SŠTS Šiška) Secondary school of technical professions šiška</h4>

            <span>01/09/2016 - 07/07/2021</span>

            <p class="timeline-text">
              Electrotechnician
            </p>

          </li>

        </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">

          <li class="timeline-item">
            <h4 class="h4 timeline-item-title">LightAct [ Developer/IT ]</h4>
            <span>01/07/2022 - 01/09/2022</span>
            <p class="timeline-text">
              I helped maintaining data base, worked on the application (integrated a capture card and IP camera),
              assembled new server rack, installed new UTP/power connectors in the office. 
            </p>
          </li>

          <li class="timeline-item">
            <h4 class="h4 timeline-item-title">Institute 404 [ Mentor ]</h4>
            <span>08/06/2020 - 19/06/2020</span>
            <p class="timeline-text">
              I helped primary school children with their projects with soldering, laser cutting, 
              and building.
            </p>
          </li>

          <li class="timeline-item">
            <h4 class="h4 timeline-item-title">Hella Saturnos d.o.o. [ Maintenance technician ]</h4>
            <span>04/09/2018 - 18/01/2019</span>
            <p class="timeline-text">
              I maintained and repaired machines from plastic presses to personal stations.
            </p>
          </li>

          <li class="timeline-item">
            <h4 class="h4 timeline-item-title">Best Western Premier Hotel Slon [ Maintenance technician ]</h4>
            <span>01/03/2018 - 04/05/2018</span>
            <p class="timeline-text">
              I helped with setting up the conference/event rooms.
              I helped customers and fixed problems like replacing light bulbs, wall sockets, hair-dryers.
            </p>
          </li>

        </ol>

      </section>

    </article>


    <!--
      - #PORTFOLIO
    -->

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

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

      <section class="projects">

        <ul class="filter-list">

          <li class="filter-item">
            <button class="active" data-filter-btn>All</button>
          </li>

          <li class="filter-item">
            <button data-filter-btn>Web design</button>
          </li>

          <li class="filter-item">
            <button data-filter-btn>Applications</button>
          </li>

          <li class="filter-item">
            <button data-filter-btn>Web development</button>
          </li>

        </ul>

        <div class="filter-select-box">

          <button class="filter-select" data-select>

            <div class="select-value" data-select-value>Select category</div>

            <div class="select-icon">
              <ion-icon name="chevron-down"></ion-icon>
            </div>

          </button>

          <ul class="select-list">

            <li class="select-item">
              <button data-select-item>All</button>
            </li>

            <li class="select-item">
              <button data-select-item>Web design</button>
            </li>

            <li class="select-item">
              <button data-select-item>Applications</button>
            </li>

            <li class="select-item">
              <button data-select-item>Web development</button>
            </li>

          </ul>

        </div>

        <ul class="project-list">

          <li class="project-item  active" data-filter-item data-category="web development">
            <a href="#">

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

                <img src="/images/logo.png" alt="finance" loading="lazy">
              </figure>

              <h3 class="project-title">Finance</h3>

              <p class="project-category">Web development</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="web development">
            <a href="#">

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

                <img src="/images/logo.png" alt="orion" loading="lazy">
              </figure>

              <h3 class="project-title">Orion</h3>

              <p class="project-category">Web development</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="web design">
            <a href="#">

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

                <img src="/images/logo.png" alt="fundo" loading="lazy">
              </figure>

              <h3 class="project-title">Fundo</h3>

              <p class="project-category">Web design</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="applications">
            <a href="#">

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

                <img src="/images/logo.png" alt="brawlhalla" loading="lazy">
              </figure>

              <h3 class="project-title">Brawlhalla</h3>

              <p class="project-category">Applications</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="web design">
            <a href="#">

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

                <img src="/images/logo.png" alt="dsm." loading="lazy">
              </figure>

              <h3 class="project-title">DSM.</h3>

              <p class="project-category">Web design</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="web design">
            <a href="#">

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

                <img src="/images/logo.png" alt="MetaSpark" loading="lazy">
              </figure>

              <h3 class="project-title">MetaSpark</h3>

              <p class="project-category">Web design</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="web development">
            <a href="#">

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

                <img src="/images/logo.png" alt="summary" loading="lazy">
              </figure>

              <h3 class="project-title">Summary</h3>

              <p class="project-category">Web development</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="applications">
            <a href="#">

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

                <img src="/images/logo.png" alt="task manager" loading="lazy">
              </figure>

              <h3 class="project-title">Task Manager</h3>

              <p class="project-category">Applications</p>

            </a>
          </li>

          <li class="project-item  active" data-filter-item data-category="web development">
            <a href="#">

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

                <img src="/images/logo.png" alt="arrival" loading="lazy">
              </figure>

              <h3 class="project-title">Arrival</h3>

              <p class="project-category">Web development</p>

            </a>
          </li>

        </ul>

      </section>

    </article>

  </div>

</main>