-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (160 loc) · 7.52 KB
/
index.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!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 Mitrovic Portfolio</title>
<!-- box icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<!-- custom css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- header design -->
<header class="header">
<a href="" class="logo">Portfolio</a>
<i class="bx bx-menu" id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- home section design -->
<section class="home" id="home">
<div class="home-content">
<h3>Hello, It's Me</h3>
<h1>Nikola Mitrović</h1>
<h3>And I'm a <span class="multiple-text">Frontend Developer</span></h3>
<p>Welcome to my portfolio! I am beginner web developer and UI/UX designer. Take a look at my projects to see how I can bring your ideas to life.</p>
<div class="social-media">
<a href="https://twitter.com/nikolaa_m4" target="_blank"><i class="bx bxl-twitter"></i></a>
<a href="https://dribbble.com/JoNieRv" target="_blank"><i class="bx bxl-dribbble"></i></a>
<a href="https://github.com/NikolaM4" target="_blank"><i class="bx bxl-github"></i></a>
<a href="https://www.behance.net/JoNieRv" target="_blank"><i class="bx bxl-behance"></i></a>
<a href="https://www.linkedin.com/in/nikola-mitrovic-137793255/" target="_blank"><i class="bx bxl-linkedin"></i></a>
</div>
<a href="#about" class="btn">Read More</a>
</div>
<div class="home-img">
<img src="src/Home Section IMG.jpg" alt="Home image" />
</div>
</section>
<!-- about section design -->
<section class="about" id="about">
<div class="about-img">
<img src="src/Home Section IMG.jpg" id="about-img" alt="About Image" />
</div>
<div class="about-content">
<h2 class="heading">About <span>Me</span></h2>
<h3>Frontend Developer</h3>
<p>
Hello, I'm Nikola, a web developer and UI/UX designer based in Bosnia and Herzegovina. I'm a recent high school graduate and have been freelancing for 1 year, creating
beautiful and user-friendly websites and digital products. <br />
I'm always eager to learn and improve my skills, and I'm excited to see where my career in web development and UI/UX design will take me. Take a look at my portfolio to
see some of the projects I've worked on, and let's connect and create something great together.
</p>
<a href="#services" class="btn">My Services</a>
</div>
</section>
<!-- services section design -->
<section class="services" id="services">
<h2 class="heading">Our <span>Services</span></h2>
<div class="services-container">
<div class="services-box">
<i class="bx bx-code-alt"></i>
<h3>Web Development</h3>
<p>
I use HTML5, CSS3, JavaScript, and popular frameworks like Bootstrap and Sass. I am also familiar with React and Redux, and comfortable with Git and npm. With these
skills, I can create responsive and visually appealing designs, as well as dynamic and interactive user experiences.
</p>
<a href="#portfolio" class="btn">See Projects</a>
</div>
<div class="services-box">
<i class="bx bxs-pencil"></i>
<h3>UI/UX Design</h3>
<p>
With strong UI/UX design skills and proficiency in Figma, Adobe XD, Photoshop, and Illustrator, I create user-friendly solutions for simple components to complex web
apps that meet both user and business needs.
</p>
<a href="https://dribbble.com/JoNieRv" class="btn" target="_blank">See Projects</a>
</div>
</div>
</section>
<!-- portfolio section design -->
<section class="portfolio" id="portfolio">
<h2 class="heading">Latest <span>Project</span></h2>
<div class="portfolio-container">
<div class="portfolio-box">
<img src="src/Mapty IMG.png" alt="Mapty Img" />
<div class="portfolio-layer">
<h4>Mapty</h4>
<p>
Mapty is web application where user can keep track of their running and cycling workouts. Leaflet API is used for rendering map and browser cache is used saving
information about workouts.
</p>
<a href="https://mapty-nikolam.netlify.app/" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="src/Forkify IMG.png" alt="Forkify Img" />
<div class="portfolio-layer">
<h4>Forkify</h4>
<p>
Forkify is web application for food recipes. It has features of searching recipes from Forkify API, updating ingredients by changing servings, adding own recipes and
also bookmarking recipes which user likes. Project was created using MVC architecture.
</p>
<a href="https://forkify-nikolam.netlify.app/" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="src/Today I Learned IMG.png" alt="Today I Learned Img" />
<div class="portfolio-layer">
<h4>Today I Learned</h4>
<p>
Today I Learned is web application for learning new interesting facts. It has features to share new fact, rate other facts and show facts by category . It was created
using React and Supabase database.
</p>
<a href="https://today-i-learned-nikolam.netlify.app/" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
</div>
</section>
<!-- contact section design -->
<section class="contact" id="contact">
<h2 class="heading">Contact <span>Me!</span></h2>
<form class="form">
<div class="input-box">
<input type="text" placeholder="Full Name" id="name" required />
<input type="email" placeholder="Email Adress" id="email" required />
</div>
<div class="input-box">
<input type="number" placeholder="Mobile Number" id="phone-number" />
<input type="text" placeholder="Email Subject" id="email-subject" required />
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="Your Message" id="message" class="message" required></textarea>
<input type="submit" value="Send Message" class="btn" />
</form>
</section>
<!-- footer design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2023 by Nikola Mitrović | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#home"><i class="bx bx-up-arrow-alt"></i></a>
</div>
</footer>
<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- typed js -->
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<!-- smtpjs -->
<script src="https://smtpjs.com/v3/smtp.js"></script>
<!-- custom js -->
<script src="js/script.js"></script>
</body>
</html>