-
Notifications
You must be signed in to change notification settings - Fork 0
/
about-me.html
145 lines (125 loc) · 7.77 KB
/
about-me.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
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
255 x 453
-->
<meta charset="UTF-8">
<title>Front-End Developer | Martin Angjic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="./src/images/main_logo.png" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:400,400i,600,700&subset=latin-ext" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700|Titillium+Web:400,400i,600,600i&subset=latin-ext"
rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="dist/styles_sass.css">
</head>
<body id="about-me-page" class="about-me">
<div class="loader">
<div class="logo main animate-loader">MA</div>
</div>
<header>
<div class="grid center header-wrapper">
<a href="/">
<div class="logo main">MA</div>
</a>
<div class="menu-content">
<nav>
<ul class="navigation-list">
<li class="navigation-item">
<a class="link navigation-link" href="/projects.html">PROJECTS</a>
</li>
<li class="navigation-item active">
<a class="link navigation-link" href="/about-me.html">ABOUT ME</a>
</li>
<li class="navigation-item">
<a class="link navigation-link" href="/contact.html">CONTACT</a>
</li>
</ul>
</nav>
</div>
<div class="mobile-menu-icon-wrapper">
<a class="mobile-menu-icon">
<div class="mobile-menu-line"></div>
<div class="mobile-menu-line"></div>
<div class="mobile-menu-line"></div>
</a>
</div>
</div>
</header>
<div class="bg-picture" style="background-image: url('/src/images/1_Hu3vQJOIihS2IKbyjgnhFg.png')"></div>
<main class="grid center">
<div class="easy-overlay"></div>
<h2 class="big-text about-me center">Just a little bit <span class="brighter">about me...</span></h2>
<div class="text-container center">
<h3 class="medium-text about-me center"><span class="special">Hello, I'm</span> <span class="brighter">Martin Angjić.</span></h3>
<p class="text">I've been interested in web development since my student days at Zagreb University of Applied Sciences (TVZ)
and later I got an opportunity to become a front-end developer. So, here I am, with more than two years of
creating web pages and apps under my belt.</p>
<p class="text">First of all, I consider myself a really good professional. Of course, I don’t mind having friends and good company
at work, but professionalism should be number one.</p>
<h3 class="medium-text in-text">Design <i>slicing</i></a>
</h3>
<p class="text">My strongest weapon is creating front-end from mockup designs (aka <span class="brighter">PSD-to-HTML/slicing</span>),
but I don’t hesitate creating designs myself (like this page you are looking at), or cooperate with UI/UX
designer in creating. I'm very good at <span class="brighter">CSS(3)</span> and I am using JS only for more
advanced stuff. All my pages and apps are mobile responsive, and as of later I am using total mobile first
approach.
</p>
<p class="text"><span class="highlighted">I like clean-cut and tenable code.</span> To name everything with the right name and
sort it in as many files as necessary. That’s why I like to use <span class="brighter">SCSS</span> and
<span class="brighter">Webpack</span>. My colleagues know that if they want me in a good mood, inline element
CSS code is not an option…
</p>
<h3 class="medium-text in-text">JavaScript development</a>
</h3>
<p class="text">Developing way which I enjoy the most is <span class="brighter"><em>Vanilla (JS)</em></span> (with the help of
Webpack, Babel and some light libraries), or in <span class="brighter">ReactJS</span>, depending on the project
needs. I think external libraries should be used only if you really need them – eg. if I need simple modal
screen, I won’t include whole JQuery, I’ll rather develop it myself and hence have more control of what’s
happening. On the other side, of course I won’t be reinventing the wheel – I’ll use Zenscroll for scroll
animation, or Dragdealer for dragging elements, and so on. If needed, I can use <span class="brighter">JQuery</span> too, as I have a lot of experience with it.
</p>
<p class="text">Furthermore, I am good at programming. My final work at college was written in Java, and after that I used that
language for a year as an Android developer. After learning Java I mastered JavaScript well too. Also, if
needed, I can occasionally get my hands dirty at back-end, as I know programming paradigms.
</p>
<div class="technologies-in-text">
<img class="technologies-image trio" src="./src/images/web-trifecta.png" />
<img class="technologies-image sass" src="./src/images/sass.svg" />
<img class="technologies-image react" src="./src/images/react.svg" />
<img class="technologies-image jquery" src="./src/images/jquery.svg" />
<img class="technologies-image webpack" src="./src/images/webpack.png" />
</div>
<p class="text"><span class="highlighted">My next move?</span> To learn SVG and master it, and to start building projects with
CSS Grid.
</p>
<h3 class="medium-text in-text">P.S.</a>
</h3>
<p class="text">At the end of the day, <span class="highlighted">web and its appearance are my passion</span>. I love beautiful
web pages, cool animations and smooth transitions. Neat and wonderful pages, with clean-cut and wonderful
code, make me one really happy developer.
</p>
<p class="text">In my free time, I’m doing fitness and running Chelsea Croatia Supporters' Club, which I’m vice-president of
(and it counts about 250 members from around the Croatia!).
</p>
<h3 class="medium-text contact-me">Like what you see? You can always <a href="/contact.html" class="special link-in-text">contact me!</a></h3>
</div>
</main>
<footer>
<div class="grid center">
<div class="logo footer">MA</div>
<p class="neutral-text footer">Handmade by me © 2017.</p>
<div class="social-list">
<a class="social-icon" href="https://www.facebook.com/martin.angjic" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a class="social-icon" href="https://www.linkedin.com/in/martin-angji%C4%87-7b9410b8/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
</footer>
<script>
if (localStorage.getItem("firstTimeLoading")) {
document.body.classList.add('loading-done');
}
</script>
<script src="dist/bundle.js"></script>
</body>