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