-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
315 lines (282 loc) · 14.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="Keywords" content="portfolio, web development, programming, examples, source code, demos">
<link rel="icon" href="./images/3dicon.avif" type="image/x-icon">
<title>Mehmet-Ali's portfolio</title>
<meta charset="utf-8">
<meta name="description" content="This website is a portfolio of me and my projects :)">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" />
<link href="./stylesheets/custom.min.css" rel="stylesheet">
</head>
<body>
<div class="progress-bar" id="myBar"></div>
<div class="has_borders">
<h1 id="greeting" class="greeting has_margin_bottom is_orange">Hello there!</h1>
</div>
<div id="hexagon_group">
<svg id="personal" class="personal" width="30%" height="30%" version="1.1" viewbox="0 0 346.41016151377545 400" xmlns="http://www.w3.org/2000/svg">
<path fill-opacity="1" stroke="orange" stroke-opacity="1" fill="orange" d="M173.20508075688772 0L346.41016151377545 100L346.41016151377545 300L173.20508075688772 400L0 300L0 100Z"></path>
<text x="26" y="140" stroke="black" stroke-opacity="1">I'm a software developer,</text>
<text x="26" y="180" stroke="black" stroke-opacity="1">started my IT journey by</text>
<text x="26" y="220" stroke="black" stroke-opacity="1">the age of 8 and speak</text>
<text x="26" y="260" stroke="black" stroke-opacity="1">German, English & Turkish.</text>
</svg>
<svg id="hero" class="hero" width="30%" height="30%" version="1.1" viewbox="0 0 346.41016151377545 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="image" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image xlink:href="./images/fly3.avif" preserveAspectRatio="none" width="1" height="1"/>
</pattern>
</defs>
<path fill-opacity="1" stroke="orange" stroke-opacity="1" fill="url(#image)" d="M173.20508075688772 0L346.41016151377545 100L346.41016151377545 300L173.20508075688772 400L0 300L0 100Z"></path>
<desc>
Flying me
</desc>
</svg>
<input type="checkbox" id="btnControl" />
<label class="btn" for="btnControl">
<svg id="accounts" class="accounts" width="30%" height="30%" version="1.1" viewbox="0 0 346.41016151377545 400" xmlns="http://www.w3.org/2000/svg">
<path class="dynamic-color" fill-opacity="1" stroke="orange" stroke-opacity="1" fill="orange" d="M173.20508075688772 0L346.41016151377545 100L346.41016151377545 300L173.20508075688772 400L0 300L0 100Z"></path>
<text x="125" y="120" stroke="black" stroke-opacity="1">
<a href="https://www.linkedin.com/in/mehmet-ali-asar-725252162" target="_blank">Linkedin🡕</a>
</text>
<text x="125" y="165" stroke="black" stroke-opacity="1">
<a href="https://gitlab.com/asar_ma" target="_blank">GitLab🡕</a>
</text>
<text x="125" y="210" stroke="black" stroke-opacity="1">
<a href="https://github.com/asarra" target="_blank">GitHub🡕</a>
</text>
<text x="125" y="255" stroke="black" stroke-opacity="1">
<a href="https://mehmet-ali.artstation.com/" target="_blank">Artstation🡕</a>
</text>
<text x="125" y="300" stroke="black" stroke-opacity="1">
<a href="mailto:mehmet-ali.asar@protonmail.com" target="_blank">Email🡕</a>
</text>
</svg>
</label>
</div>
<div class="has-text-centered">
<button id="to_skills_button" class="custom_button is-dark is-rounded">
<i class="fa-angle-double-down"></i>
</button>
</div>
<img loading="lazy" src="./images/spikes_pointing_down.svg" alt="Spikes pointing down"/>
<h1 class="svg_and_titletext is_orange" id="skills">
<img loading="lazy" class="resized_svg" src="./images/title_icon_left.svg" alt="Title icon left"/>
Skills
<img loading="lazy" class="resized_svg is_mirrored" src="./images/title_icon_left.svg" alt="Title icon right"/>
</h1>
<!-- video is private
<div class="video_glow is_video_centered_and_resized">
<div class="is_video_responsive_and_more">
<div id="skills_video" class="video">
<img loading="lazy" id="thumbnail" class="thumbnail" src="data:," alt="Video thumbnail"/>
<!--Brauche beim <img> src="data:,", damit w3 validiert-->
</div>
</div>
</div>
-->
<p id="skillset" style="border: 2px solid #FA0; border-radius: 15px" class="has_borders codearea is_orange video_glow is_video_centered_and_resized">
<span style="opacity: 50%">{"skillset": {</span>
<br>"Languages":<span class="is_white"> ["Python", "C#", ".NET", "SQL"]</span>,
<br>"Technologies":<span class="is_white"> ["gRPC", "CI", "git"]</span>,
<br>"OS exp":<span class="is_white"> ["Windows servers", "CentOS", "Ubuntu", "Arch", "Gentoo", "NixOS"]</span>,
<br>"Networking":<span class="is_white"> "Cisco certification CCNA"</span>
<br><span style="opacity: 50%">}}</span>
</p>
<div class="has-text-centered">
<button id="to_projects_button" class="custom_button is-dark is-rounded">
<i class="fa-angle-double-down"></i>
</button>
</div>
<img loading="lazy" src="./images/spikes_pointing_up.svg" alt="Spikes pointing up"/>
<h1 class="svg_and_titletext is_orange" id="projects">
<img loading="lazy" class="resized_svg" src="./images/title_icon_left.svg" alt="Title icon left"/>
Projects
<img loading="lazy" class="resized_svg is_mirrored" src="./images/title_icon_left.svg" alt="Title icon right"/>
</h1>
<div class="container">
<div class="child">
<a href="https://github.com/asarra/TerraChat" target="_blank">
<h4>TerraChat</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/terrachat.avif" alt="Chat window"/>
<p>
This was a <span class="is_orangered">group project</span> about a chat app and its infrastructure. My team and I did the GiMeToMVCWeb part where we used <span class="is_orangered">C#</span> and <span class="is_orangered">.Net</span>.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/NEAT-Racer" target="_blank">
<h4>AI experiment: NEAT-Racer</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/neat-racer.avif" alt="AI cars racing against each other"/>
<p>
I've made this <span class="is_orangered">AI</span> racer game. It uses NEAT and lots of Feed-Forward <span class="is_orangered">neural networks</span>.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/Synthrider---Live-Wallpaper-OpenGL-" target="_blank">
<h4>Live wallpaper: Synthrider</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/synthrider.avif" alt="Driver driving in a synhwavy and cosmic environment"/>
<p>
I did create this 3D live wallpaper to learn OpenGL. I used <span class="is_orangered">OpenGL, GLSL, C++</span>, stb_image, GLEW and GLFW.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/Nightcity" target="_blank">
<h4>3D(VR) world: Nightcity</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/vrworld.avif" alt="3D environment"/>
<p>
I did create this 3D world to meet my friends in VRChat. I used <span class="is_orangered">Blender, Unity</span> and the VRChat SDK 3 for Unity.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/The-Observing-Void" target="_blank">
<h4>AR experiment: Observing Void</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/ar.avif" alt="A creepy entity is watching you"/>
<p>
I made an <span class="is_orangered">AR</span> experiment where you can place a creepy object that observes you in your room. This experiment uses <span class="is_orangered">Google's WebXR and ThreeJS</span>.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/KatanaMod" target="_blank">
<h4>Minecraft mod: Katana</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/katana.avif" alt="The glowing katana"/>
<p>
I made a <span class="is_orangered">Minecraft mod</span> that creates a craftable Katana (sword type item), has a <span class="is_orangered">fragment shader</span> (to add emissiveness), a custom sweep animation and obviously a texture.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/3D-web-experiment-Streamer" target="_blank">
<h4>3D web experiment: Streamer</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="images/three.js.avif" alt="A 3D environment with a monitor that shows a real world application's content"/>
<p>
This is a 3D web experiment. It uses <span class="is_orangered">GLTF models and ThreeJS</span>.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/PM-Dungeon" target="_blank"><h4>Java game</h4></a>
<hr class="projects_hr">
<img loading="lazy" src="./images/pm-dungeon.avif" alt="Player in a dungeon full of monsters"/>
<p>
I've created a roguelike and 2D <span class="is_orangered">sprites based Java game</span> called PM-Dungeon with my team. This was a <span class="is_orangered">group assignment</span> at our university.
</p>
</div>
<div class="child">
<a href="https://gitlab.com/asar_ma/Custom_Webserver" target="_blank"><h4>Webserver & client</h4></a>
<hr class="projects_hr">
<img loading="lazy" src="./images/webserver.avif" alt="Traffic between cient and server and demo of the result"/>
<p>
I wrote a basic HTTP/1.1 server and client in <span class="is_orangered">Python</span> with static content.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/asarra.github.io" target="_blank">
<h4>This website</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/website.avif" alt="Repository overview"/>
<p>
Oh, and obviously, this website is hosted on <span class="is_orangered">GitHub</span>'s servers as you can tell by the domain and the repository is public.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/Server-monitoring" target="_blank">
<h4>Server monitor</h4>
</a>
<hr class="projects_hr">
<img loading="lazy" src="./images/server_monitor.avif" alt="WebApp that shows the server ressources and some server tools"/>
<p>
A server monitor that refreshes its content every second written in <span class="is_orangered">JavaScript, HTML, CSS and in PHP</span>.
</p>
</div>
<div class="child"><a href="https://gitlab.com/asar_ma/Custom_w0rm" target="_blank"><h4>w0rm. Why?</h4></a>
<hr class="projects_hr">
<p>
I have gotten into an <span class="is_orangered">optimization challenge</span> with someone from the USA. The person with the faster and smaller w0rm script would win. As you can tell, it was just for the fun of it and nothing serious.
<br>
Disclaimer: If you use this and harm anyone or anything, I'm not taking responsibility for that.
</p>
</div>
<div class="child"><a href="https://github.com/asarra/TransparentRemote" target="_blank"><h4>Virtual KVM Switch</h4></a>
<hr class="projects_hr">
<p>
I have created a "KVM switch" in <span class="is_orangered">Python</span>. I wanted to switch between Arch Linux and a Windows 10 VM (with GPU and SSD Passthrough) and did not want to buy an actual KVM switch for 80 Euro :)
</p>
</div>
<div id="shower" class="child">
<a id="libraries_showing_button" class="libraries_showing_button">
<h4>
Bot Libraries
</h4>
</a>
<hr class="projects_hr">
<p>
Click on the title to see the bot libraries!
</p>
</div>
<div class="child hider"><a href="https://gist.github.com/asarra/14065b34bf87b4378868de23117aed35" target="_blank"><h4>Instagram Bot library</h4></a>
<hr class="projects_hr">
<p>
It is capable of sending images and videos. It's written in <span class="is_orangered">Python</span>. Its main use is self-promotion on your own account.
</p>
</div>
<div class="child hider"><a href="https://gitlab.com/asar_ma/Custom_Facebook_Library" target="_blank"><h4>Facebook Bot library</h4></a>
<hr class="projects_hr">
<p>
It is capable of renewing tokens extracted from cookies, logging in, listening the FB servers for new notification, and sending messages by triggering the bot with specific key words.<br>
It is written in <span class="is_orangered">Python</span>.
</p>
</div>
<div class="child hider"><a href="https://gist.github.com/asarra/8a5da6b039801be293af50baeeaf1d2f" target="_blank"><h4>Discord Bot library</h4></a>
<hr class="projects_hr">
<p>
This Discord <span class="is_orangered">Python</span> library's development came to a stop once I was enrolled in college. It was able to send text messages.
</p>
</div>
<div class="child hider"><a href="https://gitlab.com/vthrift/thriftos_linos" target="_blank"><h4>LINE Bot library</h4></a>
<hr class="projects_hr">
<p>
I have created my own unofficial chat bot library that is written in <span class="is_orangered">Python</span>. It used be active on the social media platform LINE.
</p>
</div>
<div class="child hider"><a href="https://gist.github.com/asarra/dfc1351ac780f9dee135ac08b7f904c2" target="_blank"><h4>DevRant Bot library</h4></a>
<hr class="projects_hr">
<p>
This is a very ancient DevRant library I made from scratch in <span class="is_orangered">Python</span>.
</p>
</div>
<div class="child">
<a href="https://github.com/asarra/University-n-school-projects-experiences" target="_blank">
<h4>University and school projects experiences</h4>
</a>
<hr class="projects_hr">
<p>
This is a <span class="is_orangered">collection</span> of what I did during university and school times. IT related obviously.
</p>
</div>
</div>
<div id="cookie_banner" class="cookie_banner">
<p>This website uses cookies. By staying on this website you agree to have cookies stored in your browser.
<button id="cookie_banner_button" class="cookie_banner_button">
Alright
</button>
</p>
</div>
<script src="./libraries/custom.min.js"></script>
<!-- <script src="./libraries/video.js"></script> -->
</body>
</html>