-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
379 lines (347 loc) · 16.9 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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!DOCTYPE html>
<!-- Using multiple languages is possible, but the page is english only atm -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Title in the browser tab -->
<title>m.i.n.a.r.</title>
<!-- Description used when the site is added to favorites -->
<meta name="description" content="m.i.n.a.r. official site.">
<meta name="author" content="m.i.n.a.r." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- This attribute controls the Chrome action bar color on mobile devices -->
<meta name="theme-color" content="#000000">
<!-- Css files involved, including the local css and FontAwesome v5 -->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body>
<!-- Particles.js container used as a background. Removing it removes the particles -->
<div id="particles-js"></div>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header - a logo, a short sentence -->
<header id="header" class="alt">
<span class="logo"><img src="images/logo.svg" alt="" /></span>
<p>Developer, 3d printing passionate and designer</p>
<!-- A set of social media and quick links. Up to four links are supported -->
<ul class="icons">
<li><a href="https://github.com/m-i-n-a-r" target="_blank" class="fab fa-github fa-2x"></a></li>
<li><a href="https://www.linkedin.com/in/gianluca-conti-723926147/" target="_blank" class="fab fa-linkedin fa-2x"></a></li>
<li><a href="https://play.google.com/store/apps/dev?id=7720251761301594831" target="_blank" class="fab fa-google-play fa-2x"></a></li>
<li><a href="https://www.instagram.com/minar.tastic/" target="_blank" class="fab fa-instagram fa-2x"></a></li>
<!--<li><a href="https://www.youtube.com/channel/UChVxFCDNULWEiDqfrjuZ3Tw" target="_blank" class="fab fa-youtube fa-2x"></a></li>-->
</ul>
</section>
</header>
<!-- Nav - navbar of contents, used in the desktop version -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Who are you?</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#infos">Additional infos</a></li>
</ul>
</nav>
<!-- Main - the "white part" -->
<div id="main">
<!-- Introduction - an image and a bio -->
<section id="intro" class="main special">
<div class="spotlight">
<div class="content">
<header class="major">
<h2><b>WHO ARE YOU?</b></h2>
</header>
<p id="me"></p>
</div>
<span class="image"><img src="images/profile.png" alt="" /></span>
</div>
</section>
<!-- Skills - list of scopes and related skills -->
<section id="skills" class="main special">
<header class="major">
<h2><b>MY PERSONAL SKILLS</b></h2>
</header>
<!-- Other entries can be added to the list of scopes and to the list of skills
The icons are from FontAwesome v5: choose one from their site and type its name to use it -->
<h2><i class="fas fa-code"></i><b>Languages and frameworks</b></h2>
<ul class="features outline">
<li>Java</li>
<li>C</li>
<li>Javascript</li>
<li>Angular</li>
<li>Typescript</li>
<li>Python</li>
<li>Kotlin</li>
<li>Dart</li>
<li>Flutter</li>
<li>HTML/css</li>
<li>SQL</li>
<li>LUA</li>
<li>React</li>
<li>Gatsby</li>
<li>Liferay</li>
</ul>
<h2><i class="fas fa-laptop"></i><b>Softwares and platforms</b></h2>
<ul class="features outline">
<li>Android Studio</li>
<li>Visual Studio</li>
<li>Eclipse</li>
<li>Postman</li>
<li>Git/Sourcetree</li>
<li>Office suite</li>
<li>Adobe Suite</li>
<li>Inkscape</li>
<li>Sony Vegas</li>
<li>Linux OSes and bash</li>
<li>Windows and PowerShell</li>
<li>PostgreSQL</li>
<li>Fusion360</li>
<li>Simplify3D</li>
</ul>
<h2><i class="fas fa-suitcase"></i><b>Hardware and miscellanous</b></h2>
<ul class="features outline">
<li>Software architectures</li>
<li>3D printers maintenance</li>
<li>Pc repair and assembly</li>
<li>Kernel and rom compilation</li>
<li>Advanced Android using</li>
<li>3D modeling and processing</li>
<li>System administration</li>
<li>Social media management</li>
<li>Fluent english speaker</li>
<li>Logic and problem solving</li>
<li>Photographic skills</li>
<li>Creative design skills</li>
</ul>
</section>
<!-- Projects - small introduction, list of projects -->
<section id="projects" class="main special">
<header class="major">
<h2><b>MY WORKS</b></h2>
<p>I was part of some collaborations, and I worked alone on various different projects.<br />
Here's a list of my favorites!</p>
</header>
<!-- A small description, an image and a link. Nothing more. Other entries can be added -->
<div class="spotlight">
<div class="content">
<header class="major">
<h3><b>Pip-Boy Watchface</b></h3>
</header>
<div>
<span class="image-small"><img src="images/pipboy.png" alt="" /></span>
<p>
This watchface was started back in 2015 as a personal project. It uses LUA scripting and a set of graphic
resources, personally recreated in Photoshop. I gradually improved it, and today it has around 25k
paid downloads. I'm still working on it!
</p>
</div>
<a href="https://play.google.com/store/apps/details?id=minar.wmwatch.pipboy" class="button small" target="_blank">Learn
More</a>
</div>
</div>
<div class="spotlight">
<div class="content">
<header class="major">
<h3><b>Birday - Birthday Manager</b></h3>
</header>
<div>
<span class="image-small"><img src="images/birday.png" alt="" /></span>
<p>
Another free time app, written in Kotlin this time. Basically, it's an open source event manager, and it's available
free. It uses a Room database and the MVVM design pattern, providing an automatic import of birthdays from Google Contacts.
The code is available on Github for improvements and translations (currently almost 20 translations).
</p>
</div>
<a href="https://play.google.com/store/apps/details?id=com.minar.birday" class="button small" target="_blank">Learn
More</a>
</div>
</div>
<div class="spotlight">
<div class="content">
<header class="major">
<h3><b>QR Wallet - Green Pass, tickets</b></h3>
</header>
<div>
<span class="image-small"><img src="images/qrwallet.png" alt="" /></span>
<p>
A Flutter app to manage any QR code or barcode easily.
It has a specific Green Pass feature, to display every detail. It works completely offline of course,
and also features a privacy mode and a nice design.
It's available free with ads, and ads can be removed for no additional cost by watching a 20 seconds
video ad once a week.
</p>
</div>
<a href="https://play.google.com/store/apps/details?id=com.exos.qrwallet" class="button small" target="_blank">Learn
More</a>
</div>
</div>
<div class="spotlight">
<div class="content">
<header class="major">
<h3><b>Randomix - Decision Maker</b></h3>
</header>
<div>
<span class="image-small"><img src="images/randomix.png" alt="" /></span>
<p>
An app coded during my free time. Basically, it's an open source random decisor, and it's available
free. It uses a lot of animated vector drawables, an interesting Android resource type. following the latest principles of Material Design.
The code is available on Github for improvements and translations.
</p>
</div>
<a href="https://play.google.com/store/apps/details?id=com.minar.randomix" class="button small" target="_blank">Learn
More</a>
</div>
</div>
<div class="spotlight">
<div class="content">
<header class="major">
<h3><b>Escape Earth - NASA Hackaton 2018</b></h3>
</header>
<div>
<span class="image-small"><img src="images/escapeearth.png" alt="" /></span>
<p>
This is a project created during the NASA Space Apps Challenge (20-21 October 2018).
It's a cross platform application developed using the Flutter Framework. What I did was
working on the initial idea, on the code and on the UI. Furthermore, I made the pitch video
and PowerPoint presentation.
</p>
</div>
<a href="https://github.com/simonesestito/escape_earth" class="button small" target="_blank">Learn More</a>
</div>
</div>
<!-- Image-less project entry. Used for the site itself, but can be duplicated -->
<div class="spotlight">
<div class="content-short">
<h3><b>This Portfolio Site!</b></h3>
<p class="short">
This site itself is one of my projects! I decided to Upload the souce
on Github, to be used as a base for other developers. You can find it
<a href="https://github.com/m-i-n-a-r/sparky-portfolio" target="_blank">here</a>!
You will also find informations about hosting services and domains!
</p>
</div>
</div>
</section>
<!-- Fun facts (not an actual section, but it's useful sometimes) -->
<section id="funfacts" class="main special">
<h3><b>Fun facts!</b></h3>
<ul class="facts">
<li>I like to dress elegantly, every time is possible.</li>
<li>I'm part of different groups of developers, especially on Telegram. Here I found some real friends.</li>
<li>I can recognize almost any car model I see, and I especially like japanese sport cars.</li>
<li>Even if I'm not a boy anymore, I often use my free time to play videogames.</li>
<li>I collect a lot of things, from coins to stamps to caps.</li>
<li>I'm a tech addicted, but also an environment addicted. So I avoid to buy things continuously.</li>
<li>My nickname, minar, comes from a trading card game, and was my first Xbox gamertag back in 2005.</li>
<li>I used to have a 5000 subscribers YouTube channel. It has been terminated for a reason I never understood.</li>
<li>I listen to music of all genres, and I particularly like electronic and classical music.</li>
<li>I prefer cats over dogs and mountain over sea.</li>
</ul>
</section>
<!-- More infos - statistics and a personal goal -->
<section id="infos" class="main special">
<header class="major">
<h2><b>SOME NUMBER, AND MY GOAL</b></h2>
<p>All I want is to use my natural attitudes to improve a little piece of world.
Work and ambitions are important, but only if you can share your progresses with
someone you love.</p>
</header>
<!-- Some statistics, to highlight particular numbers. Other numbers can be added to the list -->
<ul class="statistics">
<li class="style1">
<span class="icon fas fa-download"></span>
<strong>+150.000</strong> Play Store downloads
</li>
<li class="style2">
<span class="icon fas fa-money-bill"></span>
<strong>40.000</strong> Play Store paid downloads
</li>
<li class="style1">
<span class="icon fas fa-calendar-check"></span>
<strong id="experience"></strong> Years of experience
</li>
<li class="style2">
<span class="icon fas fa-star"></span>
<strong>~300</strong> Github<br>stars
</li>
<li class="style1">
<span class="icon fas fa-gem"></span>
<strong>+1.000</strong> Animations and icons created
</li>
</ul>
</section>
</div>
<!-- Footer - contacts and another short text -->
<footer id="footer">
<section>
<h2>Why contact me?</h2>
<!-- A final message for the viewer -->
<p>You can contact me for various reasons, and I'll do my best to answer you.
You can do it to ask for assistance with my apps, to suggest improvements, or to give
a feedback. I'll also consider offers, eventually!</p>
</section>
<section>
<h2>How to contact me:</h2>
<!-- Some contact informations. Other informations can be added -->
<dl class="alt">
<dt>Email</dt>
<dd><a href="mailto:minar.tastic@gmail.com?Subject=Request">minar.tastic@gmail.com</a></dd>
<dt>City</dt>
<dd>Rome, Italy</dd>
<dt>Social</dt>
<dd>
<ul class="icons">
<li><a href="https://github.com/m-i-n-a-r" target="_blank" class="fab fa-github"></a></li>
<li><a href="https://www.linkedin.com/in/gianluca-conti-723926147/" target="_blank" class="fab fa-linkedin"></a></li>
<li><a href="https://play.google.com/store/apps/dev?id=7720251761301594831" target="_blank" class="fab fa-google-play"></a></li>
<li><a href="https://www.instagram.com/minar.tastic/" target="_blank" class="fab fa-instagram"></a></li>
</ul>
</dd>
</dl>
</section>
<p class="copyright">Copyright © <span id="year"></span> Gianluca Conti</p>
</footer>
</div>
<!-- Scripts - some arent't used, but could be useful -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
<script>
// Variables to change to correctly generate the initial description and other informations
birthYear = 1995; // Year of birth
birthMonth = 2; // Month of birth, without leading zero
birthDay = 23; // Day of birth, without leading zero
experienceStart = 2011; // Year from which the experience starts (e.g. when I wrote my first line of code)
date = new Date();
year = date.getFullYear();
experience = year - experienceStart;
// Assign the years of experience in the statistics
document.getElementById('experience').innerHTML = experience;
// Assign the current year to the copyright line
document.getElementById('year').innerHTML = year;
if ((date.getMonth() + 1 < birthMonth && date.getDate() <= birthDay) || date.getMonth() < birthMonth)
year--;
age = year - birthYear;
// The initial description. It is meant to be modified freely
me = "I'm a " + age + " years old guy, I have many interests and hobbies and a great " +
"propension to <b>create</b>. I worked on software for different platforms and operating systems, " +
"graphic design, 3d printing and modeling, videomaking, photography, AI, music and more. I also like " +
"videogames, cars, sports and philosophy. I became interested in computer science relatively late, " +
"at 16, and I started modding games and mobile phones and creating icons and animations. The <b>patience</b> " +
"is probably my best quality, and I know how to find the informations to solve the problems I face " +
"during my work, usually! Just to mention, I'm a <b>computer engineer</b>, and I can work both " +
"alone or in a team.";
// Assign the description to the correct html element, given its id
document.getElementById('me').innerHTML = me;
</script>
</body>
</html>