-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
153 lines (148 loc) · 8.71 KB
/
index.html
File metadata and controls
153 lines (148 loc) · 8.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Vladimir Nikolic - web developer | portfolio</title>
<meta name="description" content="Front End Developer Vladimir Nikolic">
<meta name="keywords" content="desing, web, coding, music, pixel perfect">
<meta name="author" content="Vladimir Nikolic">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<div class="logo"></div>
<nav>
<ul id="toggle">
<li><a class="active" href="#home">HOME</a></li>
<li><a href="#about">ABOUT ME</a></li>
<li><a href="#tools">TOOLS</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<div id="hamburger" class="hamburger"><span></span> <span></span> <span></span></div>
</nav>
</header>
<section id="home" class="home parallax">
<div class="home_greeting" >
<h1 class="header-text wow fadeIn" data-wow-delay="0.1s">VLADIMIR NIKOLIC</h1><br>
<h3 class="typewriter">I am a Front End Developer</h3>
</div>
</section>
<section id="about" class="about ">
<h2>ABOUT</h2>
<div class="about_me ">
<div class="about_image_one about-image wow fadeInRight"></div>
<section class="about_text_left about-text ">
<h3><i class="fa fa-grav" aria-hidden="true"></i>WHO I AM</h3>
<p>Hello, my name is Vladimir Nikolic. I am Frontend Developer from Belgrade. I'm a happy family guy, bacon addicted, who loves science and technology in general. Mostly, I try to learn everything I can. In my opinion, getting your hands
dirty is the best way to learn a new skill.</p>
</section>
</div>
<div class="about_me">
<div class="about_image_two about-image wow fadeInLeft"></div>
<section class="about_text_right about-text">
<h3><i class="fa fa-magic" aria-hidden="true"></i>WHAT I DO</h3>
<p>Most of my coding experience were built upon the JavaScript, but I have played in the past with some other things like C++,CSS, HTML, SASS. A year ago I started to play with Node.js to take the rust off my Javascript skills, and I'm still
loving it. I find the process of shaping an online identity through engaging user interaction fascinating.</p>
</section>
</div>
<div class="about_me">
<div class="about_image_three about-image wow fadeInRight"></div>
<section class="about_text_left about-text">
<h3><i class="fa fa-font-awesome" aria-hidden="true"></i>NEAT FACTS</h3>
<p>I'm open minded to new technologies, but fullstack web development and distributed systems are the two things that have grabbed my attention recently. I'm a hard worker, committed and self learner. Definitely, I'm not a <b>guru jedi rockstar ninja</b>,
but I always get my stuff done.</p>
</section>
</div>
</section>
<section id="tools" class="tools">
<h2>TOOLS</h2>
<div class="skill-container">
<div class="skill-set ">
<article class="skill wow fadeIn" data-wow-delay="0.1s">
<h3>Front End Development</h3>
<p>Using HTML, CSS (Sass) & JavaScript (jQuery) to build responsive websites, web apps & hybrid mobile apps that look good..</p>
</article>
<article class="skill wow fadeIn" data-wow-delay="0.3s">
<h3>WordPress Development</h3>
<p>Using content management systems (mostly Wordpress) to build effective marketing & ecommerce websites.</p>
</article>
<article class="skill wow fadeIn" data-wow-delay="0.4s">
<h3>Responsive Web Development</h3>
<p>A responsive site will always fit the size of the screen it’s viewed on offering all users a great experience.</p>
</article>
</div>
<blockquote class="review wow zoomIn" data-wow-delay="0.6s">
The force is strong with Vladimir, He is the real deal. He designed and developed the kickstarter material for our new deathstar campaign. The amazing work he did for us is as real as this review.
<div class="round ">
<img src="images/darth-vader.jpg" alt="dart_vader">
</div>
<cite>Darth Vader</cite>
</blockquote>
</div>
</section>
<section id="portfolio" class="portfolio">
<h2>PORTFOLIO</h2>
<div class="case-study-gallery" data-wow-delay="0.8s">
<div class="case-study study1 wow fadeInLeft">
<figure></figure>
<div class="case-study__overlay">
<h2 class="case-study__title">BearCamp</h2><a href="https://bearcamp.herokuapp.com/" class="case-study__link" target="_blank">VISIT</a></div>
</div>
<div class="case-study study2 wow fadeInRight">
<figure></figure>
<div class="case-study__overlay">
<h2 class="case-study__title">MiraCle</h2><a href="http://miracle-travel.life/" class="case-study__link" target="_blank">VISIT</a></div>
</div>
<div class="case-study study3 wow fadeInLeft">
<figure></figure>
<div class="case-study__overlay">
<h2 class="case-study__title">Caffe Igraonica Mia</h2><a href="http://mia.co.rs/" class="case-study__link" target="_blank">VISIT</a></div>
</div>
<div class="case-study study4 wow fadeInRight">
<figure></figure>
<div class="case-study__overlay">
<h2 class="case-study__title">Handschlag</h2><a href="https://github.com/vladimir1412/bearcamp" class="case-study__link" target="_blank">GITHUB</a></div>
</div>
<div class="case-study study5 wow fadeInLeft">
<figure></figure>
<div class="case-study__overlay">
<h2 class="case-study__title">Color Game</h2><a href="http://colorgame.eu.pn/" class="case-study__link" target="_blank">VISIT</a></div>
</div>
<div class="case-study study6 wow fadeInRight">
<figure></figure>
<div class="case-study__overlay ">
<h2 class="case-study__title">Old Personal Website</h2><a href="http://vladimir-blog.ovh" class="case-study__link" target="_blank">VISIT</a></div>
</div>
</div>
</section>
<section id="contact" class="contact">
<form action="https://formspree.io/vladimir.nikolic123@gmail.com" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<label for="name">name*</label><br>
<input id="name" class="input" name="name" type="text" value="" size="30" required><br>
</div>
<div class="row">
<label for="email">email</label><br>
<input id="email" class="input" name="vladimir" type="text" value="" size="30" required><br>
</div>
<div class="row">
<label for="message">message*</label><br>
<textarea id="message" class="input" name="message" rows="7" cols="30" required></textarea><br>
</div>
<input class="button" id="submit_button" type="submit" value="Send email">
</div>
</form>
</section>
<footer>
<div class="social_media"><a href="https://www.facebook.com/vladimir.nikolic123" class="box" id="facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> </a><a href="https://twitter.com/vladimir1412199" class="box" id="twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="https://github.com/vladimir1412" class="box" id="github" target="_blank"><i class="fa fa-github-alt" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/vladimir-nikolic-84a52383/" class="box" id="linkedin" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</footer>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/wow.min.js" async></script>
<script src="js/scripts.js" async></script>
</body>
</html>