-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
382 lines (333 loc) · 25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>ZiyadCodes' Portfolio</title>
</head>
<body>
<div id="selected-project-holder" visible="false">
</div>
<h1 id="welcome-text">Hello!</h1>
<h3 id="intro-text">My name is Ziyad Edris. I started coding in 2019 and started by making
small Unity games, then I tried everything, Python (Pygame), C++ (SFML), Assembly (x86), Ethical Hacking
(Disassembling), MicroPython (Raspberry PI Pico), Chrome extensions (You Shield), SaaS Website (no frameworks)
and more. Here are some of my favourite projects:
</h3>
<div id="skills-holder">
<div class="skill" style="--expanded-height: 39.9vw;">
<div class="filter">
<h2>Web Development</h2>
<img class="dropdown-arrow" src="Resources/Arrow.png">
</div>
<div class="projects-holder">
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/YouShield1.png" visible="false">
<img src="Resources/YouShield2.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h3>
<pre style="height:15.5vw"><h1>YouShield</h1>
A chrome extension to end binge watching. 361 weekly active users as of Nov 9th 2024. 12 reviews, all 5 stars. <a href="https://chromewebstore.google.com/detail/youshield-remove-youtube/iohilpdcenclcjbjbebbjgpiimobkpje?hl=en-GB&authuser=1">Check it out.</a>
<!-- I made this chrome extension because I found myself wasting too much time watching useless things on youtube, so I made it hide the video recommendations in the homepage and on the right of the videos being watched and stop me from scrolling through youtube shorts, it allows only one short. -->
<!-- This is version two, I have version one on my github page, it had a menu where the user would choose how much time they want to have on youtube everyday, but I realized that there are useful tutorials or things that are not a waste of time, and I found it not very effective so I decided to make version two. -->
<!-- <h2>Challenges</h2> -->
<!-- I didn't have any previous experience with chrome extension or any kind of extension so I had to learn a lot of new things like the manifest.json. I also had to understand a lot more about HTML to be able to tell the extensions what elements to delete or modify. -->
<!-- But other than that it was more of just searching for the things to remove and finding a correct stable way to remove them. Like when I told the extension to remove the video recommendations on the right when a video is being watched it also deleted the all of the video when I opened the page of any channel and I realized that both elements had the same id -->
<!-- <h2>Technical Details</h2> -->
<!-- I used HTML, and JavaScript for this without any external libraries -->
<!-- <h2>Extra</h2> -->
<!-- I was planning to make another extension called InstaShield but I didn't see much installs of YouShield in the chrome web store and I didn't feel like it will be very useful, because it would have only worked if you used instagram on the browser, which I don't think very much people do, or waste time doing at least. -->
</pre></h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/KalemGPT1.png" visible="false">
<img src="Resources/KalemGPT2.png" visible="false">
<img src="Resources/KalemGPT3.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h3>
<pre style="height:15.5vw"><h1>KalemGPT</h1>
A chatbot website that uses ChatGPT 3.5 in the backend. I wanted to learn how to use the OpenAI api. Bought a domain for it for a year and multiple people used it from different contires. Stopped it because the api free trial ended.
<!-- This is a SaaS (Software as a Service) tool with the main purpose of allowing users mainly from Egypt to access ChatGPT, becuase making a ChatGPT account with an account that is known to have been made in Egypt doesn't work, so this tool is an alternative. -->
<!-- It is in the arabic language, which is the most popular language in Egypt. -->
<!-- It uses the OpenAI api and sends the users inputs to the api and recieves chatgpt-3.5 answers from it. -->
<!-- 47 anonymous conversations were made on this website. -->
<!-- <h2>Challenges</h2> -->
<!-- I didn't have any previous experience with using any api or with making a whole website so I spent a lot of time understanding and trying things and I didn't have any experience with domains, hosting and how hosting tools work so that also caused some more pain and suffering. -->
<!-- The most thing I suffered of was the backend, I didn't even know what the backend meant, (it's the server part of a website, I'll explain), I ended up using google's cloud functions, so the users click a button which sends what they wrote in the prompt to the cloud function, the function talks to the api and sends the answer to the client. This took me wayyyy too much time, maybe 2 weeks, most of the time just not understanding why the function is not working, the main reason it took me so long is because testing the code I wrote took 3 minutes, so if I wrote 1 letter wrong I would waste 6 minutes, and just forget everything I was doing or thinking about causing me to make more simple mistakes. -->
<!-- I knew that the free trial OpenAI gave me in the api was enough for atleast maybe 1000 questions and answers and if that runs out I would just use another account, and if that runs out I would just pay for the api it would be worth it at this point. But then ChatGPT decreased the freetrial to much less close to fourth and most the prompts the users input were in Arabic which turned out to be more expensive than English and the free tial turned out to also be just 3 months and I made my account before starting this project by like a 2 months so it ran out and the website started giving errors because the free trial ran out and I still haven't made a different account and told the website to use it yet, and I don't know if I will. -->
<!-- <h2>Technical Details</h2> -->
<!-- I used HTML, CSS, and JavaScript for this and I used Google's Cloud Functions for the backend and Namecheap and Cpanel for hosting and domain -->
<!-- <h2>Extra</h2> -->
<!-- Brought me a step closer. -->
</pre></h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/BizWebless1.png" visible="false">
<img src="Resources/BizWebless2.png" visible="false">
<img src="Resources/BizWebless3.png" visible="false">
<img src="Resources/BizWebless4.png" visible="false">
<img src="Resources/BizWebless5.png" visible="false">
<img src="Resources/BizWebless6.png" visible="false">
<img src="Resources/BizWebless7.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h3>
<pre style="height:15.5vw"><h1>BizWebless</h1>
A SaaS tool to help web designers find local clients. Uses google maps in the backend.
<!-- This is my second SaaS (Software as a Service) tool made for web designers and web design agencies to help them find nearby clients with bad or no websites, in a certain radius from a chosen location on the map and a chosen category (coffee, gym, etc.). The website allows them to sort the found businesses by rating, number of ratings, an average between the ratings and number of ratings, if the bussiness has a website or not, website performance or website SEO (Search Engine Optimization (how likely it is to appear on a google search)). -->
<!-- I made a landing page for this tool with the aim of making facebook ads and making it send people to it. It makes people input their email to spin a wheel to win an offer when the tool is launched. I made this to be able to verify how useful and wanted this tool is, and if it's worth making. I haven't made the facebook ads yet. I have made 95% percent of this tool, I just need to make the facebook ads. -->
<!-- <h2>Challenges</h2> -->
<!-- I also used google's cloud functions in this project (suffered from it in my project KalemGPT). Because it is pretty cheap, I still suffered, but this time I was more efficient, I did learn from my mistakes and use firebase realtime database(To store collected emails and login ids) instead of google cloud realtime database and I used firebase authentication to allow users to make accounts. -->
<!-- <h2>Technical Details</h2> -->
<!-- I used HTML, CSS, and JavaScript for this, I used Google's Cloud Functions and the Firebase Realtime Database for making accounts and talking to the Yelp api -->
<!-- <h2>Extra</h2> -->
<!-- I learnt at this point that verifying a project before making it is important and intend to do that from now on before starting my next project. -->
</pre></h3>
</div>
</div>
</div>
<div class="skill" style="--expanded-height: 176vw;">
<div class="filter">
<h2>Desktop Application Development</h2>
<img class="dropdown-arrow" src="Resources/Arrow.png">
</div>
<div class="projects-holder">
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/20-20-201.png" visible="false">
<img src="Resources/20-20-202.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h3>
<pre><h1>20-20-20</h1>
Every 20 minutes look for 20 seconds at something 20 feet away.
<!-- I don't remember how I found out about this 20 20 20 rule but it means, every 20 minutes look for 20 seconds at something 20 feet away, and my parents would always tell me that the amount of time I spend on my laptop is unhealthy, so I made an app for the 20-20-20 rule. -->
<!-- The app makes a small box in the middle of the screen that counts down for 3 seconds as a warning before the 20 second full screen box appears, on top of every app until it finishes. -->
<!-- Pressing ESC skips the 20 second countdown. -->
<!-- I compiled the app to an exe file to allow it to work for people without having to install python. -->
<!-- <h2>Challenges</h2> -->
<!-- I used python and pygame which I was very experienced with at the time I made this, so I didn't stuggle in anything except making the 20 second countdown appear on top of everything, which was new to me, but wasn't a big deal. -->
<!-- <h2>Technical Details</h2> -->
<!-- I used Python and the library Pygame to create a window and draw things on it. -->
<!-- <h2>Extra</h2> -->
<!-- I really liked this app and I always have it running. I also send it to any programmer I know or anyone who does a lot of work on their computer. -->
</pre></h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/2DRaycastingExperiment1.png" visible="false">
<img src="Resources/2DRaycastingExperiment2.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h3>
<pre><h1>2D Raycasting Experiment</h1>
I wanted to understand to understand sin and cos and atan and be one step closer to being able to understand physics engines.
<!-- I was really amazed by how 3D raycasting can make really beutiful renders of realistic looking things, showing the reflections and shadows amazings. So I made this 2D experiment hoping to later make a 3D one. -->
<!-- I draw a lot of lines (rays) in a 360 degree radius around the character (The blue circle) and if a ray hits a wall and the rays before or after it also hit a wall I draw the part of the wall between the two rays -->
<!-- <h2>Challenges</h2> -->
<!-- I also used google's cloud functions in this project (suffered from it in my project KalemGPT). Because it is pretty cheap, I still suffered, but this time I was more efficient, I did learn from my mistakes and use firebase realtime database(To store collected emails and login ids) instead of google cloud realtime database and I used firebase authentication to allow users to make accounts. -->
<!-- <h2>Technical Details</h2> -->
<!-- I used HTML, CSS, and JavaScript for this, I used Google's Cloud Functions and the Firebase Realtime Database for making accounts and talking to the Yelp api -->
<!-- <h2>Extra</h2> -->
<!-- I learnt at this point that verifying a project before making it is important and intend to do that from now on before starting any big project. -->
</pre></h3>
<!-- <h3>In this project I wanted to understand how to make 2d raycasting to understand sin and cos and -->
<!-- atan and be one step closer to being able to understand physics engines</h3> -->
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/AIPong1.png" visible="false">
<img src="Resources/AIPong2.png" visible="false">
<img src="Resources/AIPong3.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>AI Pong</h1>
<h3>I wanted to understand AI so I decided to make AI learn to play pong using a python library
called neat</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/Aimbot1.png" visible="false">
<img src="Resources/Aimbot2.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h3>
<pre><h1>Aimbot</h1>
Learning how to process what's on the screen to move the mouse and click targets. As quickly as possible.
<!-- I decided to make a bot to destroy this <a href="http://www.aimbooster.com">aimbooster website</a> because I wanted to learn how to automate mouse movement depending on what's on the screen and because it's cool -->
<!-- <h2>Challenges</h2> -->
<!-- I faced a lot of weird unexpected challenges though, one of them was that the bot would click 2 times on most targets (in the image with 50% accuracy), even if the game said that it's running on 60 fps and I set the bot to run on 30, it clicks on most targets two times, so it seems like the game checks for clicks at around 5 frames per second, but if I make the bot run on 5 fps it would be too slow, especially because I need 1 frame for every target to wait for it to dissapear because I don't want to click it multiple times and finding out what the diameter of the sphere is would be too slow because the diamater gets bigger then smaller over 3 seconds -->
<!-- So, I decided to find out the maximum size of any circle, around 70 pixels and whenever the bot clicks at any point it excludes a 140px by 140px square in the next frame with that point as it's center, the square is 140 by 140 because the bot doesn't know where in the circle it clicked, center, right, bottom, etc. (And the result is in the other image) (the accuracy was 100% but pressing the button to take the screenshot got identified as a click) -->
<!-- When I run the bot with 10 targets per second it seems to be doing good at the start but then random drop frames start happening and the fps gets worse as the bot fails to click more and more targets until targets get removed after being clicked by 1 second and all of my pain and suffering turn out to be useless. -->
<!-- <h2>Technical Details</h2> -->
<!-- I used python for this project and I used the libraries: win32api for clicking, win32con for mouse event values and pyautogui for taking screenshots -->
<!-- <h2>Extra</h2> -->
<!-- Note that the images have a lot of unclicked circles in them because I have to stop the bot to take a screenshot -->
</pre>
</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/AWhatsappBot.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>A Whatsapp Bot</h1>
<h3>A whatsapp bot that takes a list of messages and sends them to a selected person, I learned how
to parse html to be able to select certain elements and use them</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/BezierCurves.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Bezier Curves</h1>
<h3>A Program to experiment with bezier curves, understand how they work and learn more maths to be
able to understand technical things better</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/Chess.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Chess</h1>
<h3>Chess!</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/ClothSimulation.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Cloth Simulation</h1>
<h3>A cloth simulation to better understand and maneuver physics engines, You start and stop the
simulation, you can add points and lines and remove lines</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/ControlledSacrifice.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Controlled Sacrifice</h1>
<h3>A 2D platformer made in a game jam, with 8 levels, whenever you lose a life you need to choose a
debuff, half gun damage, lose equipped gun, things like this, when all of the 9 debuffs are used
you lose</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/Multiplayerrps.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Multiplayer rps</h1>
<h3>Rock Paper Scissors but multiplayer, this teached me a lot about networking, but it's
multiplayer for players on the same network</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/MyOwnIDE.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>My Own IDE</h1>
<h3>This is an unfinished attempt at making my own IDE</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/AStar.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>A*</h1>
<h3>The A* pathfinding algorithm to understand pathfinding and improve my technical thinking</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/ServerTest.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Server Test</h1>
<h3>An experiment to try to make my laptop run my server and make anyone be able to connect to it
</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/SrotingAlgorithms.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>Sorting Algorithms</h1>
<h3>4 sorting algorithms to understand how to optimize things and improve my technical thinking</h3>
</div>
<div class="project">
<div class="project-images-holder">
<div>
<img src="Resources/SrotingAlgorithms.png" visible="false">
</div>
<img class="prev-btn" src="Resources/Arrow.png">
<img class="next-btn" src="Resources/Arrow.png">
</div>
<h1>The Welcomer</h1>
<h3>The Wecomer, the app designed to welcome you everyday with everything you need<br><br>You can
change the wallpaper in seconds from a very large library of fantastic wallpapers and you can
have your own list of useful websites. Just all of the handy things that are just missing for no
reason.<br><br>Also you can customize everything in this app</h3>
</div>
</div>
</div>
</div>
<h3 id="intro-text">Some projects I didn't include here are at <a href="https://ziyadcodes.itch.io/">My itch.io page</a> or <a href="https://github.com/ZXTube">My Github page</a> check them out as well.</h3>
<script src="index.js"></script>
</body>
</html>