-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
383 lines (364 loc) · 17.8 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
380
381
382
383
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="manifest" href="/manifest.webmanifest"/>
<link rel="preconnect"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap"/>
<link rel="stylesheet" href="/stylesheet.css"/>
<meta http-equiv="last-modified" content="Wed, 14 Oct 2020 09:07:00 GMT+2 "/>
<meta http-equiv="cache-control" content="Private"/>
<meta http-equiv="Expires" content="31536000"/>
<meta name="application-name" content="Eray Rafet"/>
<meta name="author" content="Eray Rafet"/>
<meta name="description" content="Eray Rafet — Minimalist by heart, tech nerd all the time."/>
<meta name="google-site-verification" content="8P9GC5U1H5NYVYXDnQUEpSJkh_cIsrJwwcU03NFThPU"/>
<meta name="keywords" content="eray rafet, black pixel, black pixel theme, poco f1, pocophone f1, poco mods, eray's mods, eray's blog"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="referrer" content="origin-when-crossorigin"/>
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"/>
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"/>
<meta name="title" content="Eray's Blog"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:creator" content="@eray_rafet"/>
<meta name="twitter:site" content="@eray_rafet"/>
<meta name="viewport" content="initial-scale=1, shrink-to-fit=yes, width=device-width"/>
<meta property="og:description" content="Tech, life, and other fancy hacks."/>
<meta property="og:image" content="https://erayrafet.github.io/og_image.png"/>
<meta property="og:image:height" content="600"/>
<meta property="og:image:width" content="600"/>
<meta property="og:title" content="Eray Rafet — Minimalist by heart, tech nerd all the time."/>
<meta property="og:type" content="website"/>
<script src="register-sw.js"></script>
<script src="sw.js"></script>
<title>Eray's Blog</title>
<style>
@media screen and (max-width: 600px) {
img.avatar { margin: 1em auto; width: 45%; }
img.gallery { width: 75%; }
}
@media screen and (min-width: 600px) {
img.avatar { float: right; margin: 2em 1.25em; width: 25%; }
img.gallery { width: 50%; }
}
@media screen and (min-width: 1200px) {
.grid { grid-template-columns: 1fr 1fr; } /*Two columns*/
img.avatar { float: right; margin: 3em; width: 20%; }
img.gallery { width: 25%; }
}
@media screen and (min-width: 1800px) {
.grid { grid-template-columns: 1fr 1fr 1fr; } /*Three columns*/
img.avatar { float: right; margin: 6em; width: 10%; }
img.gallery { width: 10%; }
}
.box {
min-width: -webkit-fill-available; /*Maximize width*/
min-width: -moz-available; /*Firefox fix*/
padding: 0.15em 1.5em 1em;
}
.button-right {
margin: 2em 0;
}
.gallery-item {
margin: 2em auto 0;
}
.grid {
align-items: normal; /*Maximize box height*/
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
justify-items: center;
margin: 1em 0;
}
h3 {
padding: 0;
}
img.avatar {
border-radius: 50%;
}
img.avatar:hover, img.gallery:hover {
transform: scale3d(1.05, 1.05, 1.05);
}
p.list-home {
margin: 0.8em 2.5em;
}
.container-title {
user-select: none;
}
</style>
</head>
<body>
<div class="container-title">
<a href="/"><h1>Eray's Blog</h1></a>
</div>
<div class="tab"><div class="tab-wiggle">
<button class="tablinks" id="default" onclick="tab(event, 'blog')">Blog</button>
<button class="tablinks" onclick="tab(event, 'projects')">Projects</button>
<button class="tablinks" onclick="tab(event, 'mygadgets')">My gadgets</button>
<button class="tablinks" onclick="tab(event, 'about')">About me</button>
<button class="tablinks" onclick="tab(event, 'support')">Support links</button>
<button class="tablinks" onclick="tab(event, 'contacts')">Contact details</button>
<button class="tablinks" onclick="tab(event, 'photos')">Photos</button>
</div></div>
<!Blog post cards go here>
<div id="blog" class="tabcontent">
<div class="grid">
<div class="box"><a href="/articles/the-best-pwas-on-the-internet.html"><h3>The best PWAs on the Internet</h3>
<p>Covering the basis on Progressive Web Apps, plus a few tips.</p><div class="date">Publishing date: June 22, 2020</div><div class="date">Last update: September 1, 2020</div></a></div>
<div class="box"><a href="/articles/ways-to-minimize-distractions-and-boost-productivity-while-working.html"><h3>Ways to minimize distractions and boost productivity while working</h3>
<p>Key methods for limiting distractions and avoiding focus loss.</p><div class="date">Publishing date: July 16, 2020</div></a></div>
<div class="box"><a href="/articles/top-free-and-speedy-DNS-services-for-home-users-tested-and-the-reason-you-should-use-one.html"><h3>Top free, secure, and speedy DNS services for home users tested and the reason you should use one</h3>
<p>Fast and free DNS services for privacy-conscious users.</p><div class="date">Publishing date: June 25, 2020</div></a></div>
</div>
</div>
<!From here and on is everything else>
<div id="photos" class="tabcontent">
<!images have a resolution of 384x384px>
<div class="card">
<div class="gallery-item">
<!avif to webp fallback for Edge & Firefox>
<a href="/photos/profile_photo_3_high_res.avif">
<picture>
<source srcset="./photos/profile_photo_3.webp" type="image/webp">
<img class ="gallery" alt="Profile photo" loading=lazy src="./photos/profile_photo_3.avif">
</img>
</picture>
</a>
<div class="caption">July, 2021</div>
</div>
<div class="gallery-item">
<!avif to webp fallback for Edge & Firefox>
<a href="/photos/profile_photo_2_high_res.avif">
<picture>
<source srcset="./photos/profile_photo_2.webp" type="image/webp">
<img class ="gallery" alt="Profile photo" loading=lazy src="./photos/profile_photo_2.avif">
</img>
</picture>
</a>
<div class="caption">December, 2020</div>
</div>
<div class="gallery-item">
<a href="/photos/profile_photo_1_high_res.webp">
<img class="gallery" alt="Profile photo" loading=lazy src="./photos/profile_photo_1.webp"></img>
</a>
<div class="caption">July, 2020</div>
</div>
</div>
</div>
<div id="mygadgets" class="tabcontent">
<div class="card">
<ul>
<li.clean><b>Computing devices:</b>
<ul>
<li><a href="https://support.hp.com/bg-en/document/c06194936">HP Pavilion 13-an0007nu ultrabook running Windows 10 Home</a></li>
<li>Samsung NC110 netbook modded & upgraded with an SSD that's booting <a href="https://www.neverware.com/freedownload">CloudReady</a></li>
<li>Xiaomi POCOPHONE F1 on Android 11 (<a href="https://download.pixelexperience.org/">Pixel Experience 11 custom ROM</a>)</li>
</ul>
<li.clean><b>Accessories:</b>
<ul>
<li><a href="https://www.sony.com/electronics/headband-headphones/mdr-xb550ap">Sony MDR-XB550AP blue headphones</a></li>
<li><a href="https://www.hama.com/00052377/hama-m2140-bluetooth-mouse-black#technical-details">Hama M2140 Bluetooth mouse</a></li>
<li><a href="http://www.orico.cc/usmobile/product/detail/id/3508">ORICO 2588C3-G2 2.5 inch Type-C 10Gbps hard drive enclosure</a></li>
</ul>
<li.clean><b>Home networking device: </b><a href="https://www.tp-link.com/uk/home-networking/wifi-router/archer-c50/">TP-Link Archer C50 V4 Wi-Fi 5 router</a> + <a href="https://www.quad9.net/">Quad9 DNS</a>
</li>
</ul>
</div>
</div>
<div id="about" class="tabcontent"><div class="card">
<a href="/photos/profile_photo_3_high_res.avif">
<picture>
<source srcset="./photos/profile_photo_3.webp" type="image/webp">
<img class ="avatar" alt="Profile photo" loading=lazy src="./photos/profile_photo_3.avif">
</img>
</picture>
</a>
<ul><li.clean><b>Name: </b>Eray Rafet</li></ul>
<ul><li.clean><b>Age: </b>22</li></ul>
<ul><li.clean><b>Country of residence: </b>Bulgaria</li></ul>
<ul><li.clean><b>Languages and proficiency:</b>
<ul>
<li>Bulgarian - native</li>
<li>English - advanced</li>
<li>Turkish - native</li>
</ul>
</ul>
<ul><li.clean><b>Education: </b><a href=http://pgssht.weebly.com>High School for Agriculture and Food Technology</a> (2014 - 2018)</li></ul>
<ul><li.clean><b>Current occupation:</b> Freelance TV/Computer/Smartphone Technician</li></ul>
<ul><li.clean><b>Previous position:</b> Freelance Content Writer/Editor for <a href="https://www.testingcatalog.com/">TestingCatalog.com</a> (July 2018 - May 2020)</li></ul>
<ul><li.clean><b>Skills:</b>
<ul>
<li>Content writing/editing/proofreading (technology-related)</li>
<li>Basic HTML & CSS</li>
<li>IT support</li>
<li>Software testing & QA</li>
<li>Phone/computer/laptop troubleshooting & OS repairs (installation, setup, etc.)</li>
<li>Translation</li>
</ul>
</ul>
<ul><li.clean><b>Interests:</b>
<ul>
<li>Web technologies & development (especially CSS & PWAs)</li>
<li>UI design</li>
<li>Mobile and desktop operating systems: Android, Chrome OS, Linux, and Windows</li>
<li>PC hardware (building, troubleshooting, repairs, maintenance)</li>
<li>X86 server platforms</li>
<li>ARM SBCs</li>
<li>Networking gear (setup and maintenance)</li>
</ul>
</ul>
<ul><li.clean><b>Hobbies:</b>
<ul>
<li>Jogging</li>
<li>Listening to loud Pop/EDM tunes</li>
<li>Binge-watching TV shows</li>
<li>Watching tech videos on YouTube</li>
<li>Installing updates</li>
<li>Cooking</li>
</ul>
</ul>
<div class="footer"><p>"Less is more."</p></div>
</div></div>
<div id="contacts" class="tabcontent"><div class="card">
<ul>
<li>
<b>Discord: </b>
<a href="https://discordapp.com/channels/@me/537728789170487357">erayrafet#2733</a>
</li>
<li>
<b>Email: </b>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>
<b>GitHub: </b>
<a href="https://github.com/erayrafet">erayrafet</a>
</li>
<li>
<b>LinkedIn: </b>
<a href="https://www.linkedin.com/in/eray-rafet-927157174/">Eray Rafet</a>
</li>
<li>
<b>Telegram: </b>
<a href="https://t.me/erayrafet">@erayrafet</a>
</li>
<li>
<b>Twitter: </b>
<a href="https://twitter.com/eray_rafet">@eray_rafet</a>
</li>
</ul>
<div class="footer"><p>Please, feel free to reach out to me at any given time in case you have an inquiry, or a job offer to make.</p></div>
</div></div>
<div id="projects" class="tabcontent">
<div class="card">
<ul>
<li.clean>
<b>Black Pixel browser themes</b>
</li>
<p.inset>Black Pixel is an open-source theme made especially for Google Chrome, but supports Microsoft's new Chromium-based Edge browser as well. It combines the almighty black color with white text/icons and my favorite <b style="color:#1a73e8">#1a73e8 blue</b> color (used throughout this website and all my other projects) from Google's past iterations of their Material Design Color Palette.<br>The Mozilla Firefox edition carries over the same color palette, but with a few enhancements to accommodate the differences in UI layout. You can find the source code on <a href="https://github.com/erayrafet/Black-Pixel-Theme">GitHub</a>.
</p>
<ul>
<li>
<a href="https://chrome.google.com/webstore/detail/black-pixel/nfpfolfbmhaemdcmejphhdhjbpmjgknc">Black Pixel for Google Chrome, Chrome OS, and Microsoft Edge</a>
</li>
<li>
<a href="https://addons.mozilla.org/en-US/firefox/addon/black-pixel/">Black Pixel for Mozilla Firefox</a>
</li>
</ul>
<ul>
<li.clean>
<b>
Black Pixel for Files, formerly Files UWP</a>
</b>
<p>For the first time ever, BP for Files carries over my tried and true mantra of distraction-free UI/UX to one of the best community-devloped apps, based on Microsoft Windows' UWP app framework.</p>
</li.clean>
<li>
<a href="https://github.com/files-community/Custom-themes/blob/main/CustomThemesPackage/Black%20Pixel.xaml">Get Black Pixel for Files from GitHub</a>
</li>
<li>
<a href="https://www.microsoft.com/store/productId/9N20KQ61LSFQ">Themes for Files on the Microsoft Store</a>
</li>
<p class="list-home">BP ships as part of the official themes package for Files.</p>
<li>
<a href="https://files-community.github.io/">Files website</a>
</li>
</ul>
<ul>
<li.clean>
<b>
Black Pixel theme for Telegram's official Android app</a>
</b>
</li>
<p>With Black Pixel for Telegram, my one and only goal is to keep the same minimal UI language style I've grown to love because of Google - absent of dividers and distractions, with a sprinkle of vibrant colors here and there, whilst making it easier to focus on the important things first and foremost.
</p>
<li>
<a href="https://t.me/addtheme/blackpixel3">Apply Black Pixel for Telegram</a>
</li>
<li.clean>
<b>
erayrafet.github.io
</b>
</li>
<p>Started as a learning platform, this is my first ever web page / bio. Since last year, I've managed to develop my CSS skills to a degree where I feel confident that I can become a front-end web developer / UI designer sometime in the distant future.
</p>
<li>
<a href="https://github.com/erayrafet/erayrafet.github.io">Inspect the source code of the site on GitHub</a>
</li>
<li.clean>
<b>Text Writer</b>
</li>
<a class="button-right" href="/writer.html">Try now</a>
<p>This is a very minimal text writing tool with title and content sections, part of this web app (for now.)
</p>
<li.clean>
<b>
Eray's Mods Telegram channel</a>
</b>
</li>
<p>As I own a Xiaomi POCOPHONE F1, there I mostly do share my self-made Magisk modules, boot logos, and themes for it, aside from general phone stuff every now and then.
</p>
<li>
<a href="https://t.me/poco_mods">Follow Eray's Mods</a>
</li>
</ul>
</div>
</div>
<div id="support" class="tabcontent"><div class="card">
<ul>
<li>
<b>LBRY: </b>
<a href="https://lbry.tv/@erayrafet">Eray Rafet</a>
</li>
<li>
<b>PayPal: </b>
<a href="https://www.paypal.me/erayrafet">Eray Mustafov</a>
</li>
</ul>
</div></div>
<div class="pledge">
<div class="scrollable-text-index">This site has no ads, so please show your support by making a small donation and do note that I am available for hire.</div>
</div>
<div class="footer">
<p>® 2022 Eray Rafet Mustafa</p>
<p>All rights reserved.</p>
</div>
<script>
function tab(evt, tab) {
var i, tabcontent, tablinks
tabcontent = document.getElementsByClassName('tabcontent')
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
}
tablinks = document.getElementsByClassName('tablinks')
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace('active', '')
}
document.getElementById(tab).style.display = 'inline'
evt.currentTarget.className += ' active'
}
document.getElementById('default').click()
</script>
</body>
</html>