-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (232 loc) · 12.1 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_blank">
<title>Marko Burazin's portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- included only navbar from bootstrap -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" media="screen and (min-width:500px)" href="css/over500.css">
<link rel="stylesheet" media="screen and (min-width:768px)" href="css/over768.css">
<link href="https://fonts.googleapis.com/css?family=Lato%7cNunito:200,300,400%7cCabin" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<header class="profile-heading">
<div class="container">
<div class="row heading">
<div class="col-xs-2 logo">
<!-- Udacity logo -->
<img class="logo-img" src="img/udacity.svg" alt="Udacity logo">
</div>
<div class="col-xs-10 title">
<h1>Marko Burazin</h1>
<p class="lead"><Full Stack Developer/></p>
</div>
</div>
</div>
</header>
<!-- Bootstrap's navbar -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Hamburger icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#portfolio-navbar-collapsable" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collapsable group of links -->
<div class="collapse navbar-collapse" id="portfolio-navbar-collapsable">
<ul class="nav navbar-nav">
<li><a href="#id-featured-work" target="_self">Featured Work</a></li>
<li><a href="#id-skills" target="_self">Skills and Technologies</a></li>
<li><a href="#id-about-me" target="_self">About Marko</a></li>
</ul>
</div>
</div><!-- end .container -->
</nav>
<main class="container">
<aside class="row">
<div class="col-xs-12">
<picture>
<source media="(min-width: 768px)" srcset="img/hero_large.jpg 1x, img/hero_large_2x.jpg 2x">
<source media="(min-width: 500px)" srcset="img/hero_medium.jpg 1x, img/hero_medium_2x.jpg 2x">
<img class="hero-img"
srcset="img/hero_small.jpg 1x, img/hero_small_2x.jpg 2x"
src="img/hero_medium_2x.jpg" alt="Main image showing MAC desktop computer">
</picture>
</div>
</aside>
<!-- Section showcasing my work -->
<section class="featured-work" id="id-featured-work">
<div class="row">
<div class="col-xs-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row featured-projects">
<article class="col-xs-12 col-sm-6 col-lg-4 project">
<img class="project-img"
srcset="img/resume-300.png 300w, img/resume-500.png 500w, img/resume-1000.png 1000w"
sizes="(max-width: 499px) 90vw, (max-width: 767px) calc(0.9*50vw), calc(0.9*33vw)"
src="img/resume-1000.png" alt="Resume project snapshot">
<h3>Personal Resume</h3>
<p class="project-link"><a class="web-link" href="https://mburazin.github.io/frontend-nanodegree-resume">Visit online version</a></p>
</article>
<article class="col-xs-12 col-sm-6 col-lg-4 project">
<img class="project-img"
srcset="img/arcade_game-300.png 300w, img/arcade_game-500.png 500w, img/arcade_game-1000.png 1000w"
sizes="(max-width: 499px) 90vw, (max-width: 767px) calc(0.9*50vw), calc(0.9*33vw)"
src="img/arcade_game-1000.png" alt="Arcade Game project snapshot">
<h3>Arcade game</h3>
<p class="project-link"><a class="web-link" href="https://mburazin.github.io/frontend-nanodegree-arcade-game/">Visit online version</a></p>
</article>
<article class="col-xs-12 col-sm-6 col-lg-4 project">
<img class="project-img"
srcset="img/web_performance-300.png 300w, img/web_performance-500.png 500w, img/web_performance-1000.png 1000w"
sizes="(max-width: 499px) 90vw, (max-width: 767px) calc(0.9*50vw), calc(0.9*33vw)"
src="img/web_performance-1000.png" alt="Web performance project snapshot">
<h3>Web Performance Optimization</h3>
<p class="project-link"><a class="web-link" href="https://github.com/mburazin/frontend-nanodegree-mobile-portfolio">Visit GitHub page</a></p>
</article>
</div>
<div class="row featured-projects">
<article class="col-xs-12 col-sm-6 col-lg-4 project">
<img class="project-img"
srcset="img/neighbourhood_map-300.png 300w, img/neighbourhood_map-500.png 500w, img/neighbourhood_map-1000.png 1000w"
sizes="(max-width: 499px) 90vw, (max-width: 767px) calc(0.9*50vw), calc(0.9*33vw)"
src="img/neighbourhood_map-1000.png" alt="Neighbourhood Map project snapshot">
<h3>Neighbourhood Map</h3>
<p class="project-link"><a class="web-link" href="https://mburazin.github.io/neighborhood-map/">Visit online version</a></p>
</article>
<article class="col-xs-12 col-sm-6 col-lg-4 project">
<img class="project-img"
srcset="img/feedreader_testing-300.png 300w, img/feedreader_testing-500.png 500w, img/feedreader_testing-1000.png 1000w"
sizes="(max-width: 499px) 90vw, (max-width: 767px) calc(0.9*50vw), calc(0.9*33vw)"
src="img/feedreader_testing-1000.png" alt="Feedreader Testing project snapshot">
<h3>Feedreader testing</h3>
<p class="project-link"><a class="web-link" href="https://github.com/mburazin/frontend-nanodegree-feedreader">Visit Github page</a></p>
</article>
</div>
</section>
<!-- The whole "skills" section contains inline svgs (logo images),
for the purpose of avoiding latency (extra HTTP requests) -->
<section class="skills" id="id-skills">
<div class="row">
<div class="col-xs-12">
<h2>Skills and technologies</h2>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3 logo-item">
<!-- HTML5 logo -->
<img class="skills-logo" src="img/html5_logo.svg" alt="HTML5 logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- CSS3 logo -->
<img class="skills-logo" src="img/css3_logo.svg" alt="CSS3 logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- Javascript logo -->
<img class="skills-logo" src="img/js_logo.svg" alt="Javascript logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- Erlang logo -->
<img class="skills-logo" src="img/erlang_logo.svg" alt="Erlang logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- PHP logo -->
<img class="skills-logo" src="img/go_logo.png" alt="GO logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- C language logo -->
<img class="skills-logo" src="img/c_logo.svg" alt="C Language logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- GIT logo -->
<img class="skills-logo" src="img/git_logo.svg" alt="GIT logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- PostgreSQL logo -->
<img class="skills-logo" src="img/postgresql_logo.png" alt="PostgreSQL logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- Docker logo -->
<img class="skills-logo" src="img/docker_logo.png" alt="Docker logo">
</div>
<div class="col-xs-6 col-md-3 logo-item">
<!-- Strongswan logo -->
<img class="skills-logo" src="img/strongswan_logo.png" alt="Strongswan logo">
</div>
</div>
</section>
<!-- Section containing stuff about me -->
<section class="about-me" id="id-about-me">
<div class="row">
<div class="col-xs-12">
<h2>About Marko</h2>
</div>
</div>
<article class="row">
<div class="col-xs-12">
<div class="about-photo">
<img class="about-img"
srcset="img/me_naturalpools-260.png 260w, img/me_naturalpools-420.png 420w, img/me_naturalpools-580.png 580w"
sizes="(max-width: 499px) 90vw, 30vw"
src="img/me_naturalpools-580.png" alt="Photo showing Marko Burazin on the beach">
</div>
<div class="about-text">
<!-- TODO: Change this text to a short description of me and
my experience as a software developer -->
<h4>A few words about me</h4>
<p>I am a software developer with 10 years of working experience currently working at Ericsson in Stockholm, Sweden.<br>
During my working years I have acquired a wide variety of skills and knowledge on working with server based applications, networking, testing and troubleshooting. I code during my working hours and I love coding in my free time as well. One of my passions is also web development, which I pursue and explore in my free time, after work, during weekends and even holidays :-).<br>
In my working hours I generally work with backend services, so recently to gather more experience with frontend development, I decided to take the online project-based learning program at Udacity, which I have completed and earned a Front-End Web Developer Nanodegree certificate.<br>
My view is always learn, never give up and grind the hours to hone your skills, whatever you do and pursue in life.</p>
<p>Apart from coding, one of my life pursuits is also practicing a Chinese martial art called Tai chi chuan in which effort, consistency, devotion and ability to adapt to changes are the most important virtues in order to keep growing one's skill. That same principle is something I apply to all aspects of my life, including software development.</p>
<p>My motto is embrace the change, because it is the only thing that is ever constant.</p>
</div>
</div>
</article>
</section>
</main> <!-- main container end -->
<footer class="profile-footer">
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="footer-social">
<li class="footer-social-item">
<!-- Github logo -->
<a class="footer-link" href="https://github.com/mburazin">
<img class="footer-logo" src="img/github_logo.png" alt="Github logo">
</a>
</li>
<li class="footer-social-item">
<!-- Gmail logo -->
<a class="footer-link" href="mailto:[email protected]">
<img class="footer-logo" src="img/gmail_logo.svg" alt="Gmail logo">
</a>
</li>
<li class="footer-social-item">
<!-- Facebook logo -->
<a class="footer-link" href="https://facebook.com/mburazin">
<img class="footer-logo" src="img/facebook_logo.svg" alt="Facebook logo">
</a>
</li>
</ul>
</div>
<div class="col-xs-12">
<p class="copyright">© Copyright and Made by Marko Burazin</p>
</div>
</div>
</div> <!-- footer container end -->
</footer>
</body>
</html>