673 lines
18 KiB
Handlebars
673 lines
18 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nikola Petrov</title>
|
|
|
|
<!--
|
|
- favicon
|
|
-->
|
|
<link rel="shortcut icon" href="/images/logo.ico" type="image/x-icon">
|
|
|
|
<!--
|
|
- custom css link
|
|
-->
|
|
<link rel="stylesheet" href="/css/new.css">
|
|
|
|
<!--
|
|
- google font link
|
|
-->
|
|
<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">
|
|
|
|
<!--
|
|
- custom js link
|
|
-->
|
|
<script defer src="/js/new.js"></script>
|
|
|
|
<!--
|
|
- ionicon link
|
|
-->
|
|
<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
|
|
-->
|
|
|
|
<main>
|
|
|
|
<!--
|
|
- #SIDEBAR
|
|
-->
|
|
|
|
<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:nikolape7@gmail.com" 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="#" class="social-link">
|
|
<ion-icon name="logo-gitlab"></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'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
|
|
I enjoy
|
|
turning complex problems into simple, beautiful and intuitive designs.
|
|
</p>
|
|
|
|
<p>
|
|
My job is to build your website so that it is functional and user-friendly but at the same time attractive.
|
|
Moreover, I
|
|
add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
|
|
across your
|
|
message and identity in the most creative way. I created web design for many famous brand companies.
|
|
</p>
|
|
</section>
|
|
|
|
|
|
<!--
|
|
- service
|
|
-->
|
|
|
|
<section class="service">
|
|
|
|
<h3 class="h3 service-title">What i'm doing</h3>
|
|
|
|
<ul class="service-list">
|
|
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<img src="/images/icon-design.svg
|
|
" alt="design icon" width="40">
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">Web design</h4>
|
|
|
|
<p class="service-item-text">
|
|
The most modern and high-quality design made at a professional level.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<img src="/images/icon-dev.svg" alt="Web development icon" width="40">
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">Web development</h4>
|
|
|
|
<p class="service-item-text">
|
|
High-quality development of sites at the professional level.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<img src="/images/icon-app.svg" alt="mobile app icon" width="40">
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">Mobile apps</h4>
|
|
|
|
<p class="service-item-text">
|
|
Professional development of applications for iOS and Android.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<img src="/images/icon-photo.svg" alt="camera icon" width="40">
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">Photography</h4>
|
|
|
|
<p class="service-item-text">
|
|
I make high-quality photos of any category at a professional level.
|
|
</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">University school of the arts</h4>
|
|
|
|
<span>2007 — 2008</span>
|
|
|
|
<p class="timeline-text">
|
|
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
|
quas molestias
|
|
exceptur.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">New york academy of art</h4>
|
|
|
|
<span>2006 — 2007</span>
|
|
|
|
<p class="timeline-text">
|
|
Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est
|
|
omnis..
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">High school of art and design</h4>
|
|
|
|
<span>2002 — 2004</span>
|
|
|
|
<p class="timeline-text">
|
|
Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur
|
|
magni dolores
|
|
eos.
|
|
</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">Creative director</h4>
|
|
|
|
<span>2015 — Present</span>
|
|
|
|
<p class="timeline-text">
|
|
Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
|
|
molestias
|
|
exceptur.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Art director</h4>
|
|
|
|
<span>2013 — 2015</span>
|
|
|
|
<p class="timeline-text">
|
|
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
|
quas molestias
|
|
exceptur.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Web designer</h4>
|
|
|
|
<span>2010 — 2013</span>
|
|
|
|
<p class="timeline-text">
|
|
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
|
quas molestias
|
|
exceptur.
|
|
</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-selecct-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/project-1.jpg" 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/project-2.png" alt="orizon" loading="lazy">
|
|
</figure>
|
|
|
|
<h3 class="project-title">Orizon</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/project-3.jpg" 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/project-4.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/project-5.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/project-6.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/project-7.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/project-8.jpg" 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/project-9.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>
|
|
|
|
</body>
|
|
|
|
</html> |