-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
421 lines (369 loc) · 16.6 KB
/
about.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
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | EasySorting</title>
<meta name="keywords"
content="about easy sorting, arun neupane, arundada9000, about sorting , sorting visualized , about arun neupane, sorting , quick sort , bubble sort, insertion sort, merge sort, radix sort, shell sort, sorting algorithms" />
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/information.png" type="image/x-icon">
<link rel="manifest" href="./manifest.json">
<!-- For ios -->
<link rel="apple-touch-icon" href="./images/sort.png">
<meta name="apple-mobile-web-app-status-bar" content="1338BE">
<style>
.container p {
text-align: justify;
}
body {
font-family: roboto, sans-serif, Arial, Helvetica;
background-color: #121212;
color: #e0e0e0;
margin: 0;
padding: 0;
}
header {
background-color: #1e1e1e;
padding: 20px;
text-align: center;
}
header h1 {
color: #0c49e4;
font-size: 2.8rem;
margin: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.container header h1 {
text-align: center;
border: none;
}
section {
margin-bottom: 30px;
padding: 20px;
border-left: 5px solid #e41abb;
background: #1c1c1c;
border-radius: 5px;
}
h2 {
font-size: 1.8rem;
color: #0c49e4;
margin-bottom: 10px;
}
p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
ul,
.details ul {
padding-left: 20px;
list-style-type: square;
margin: 0.7rem 0;
}
ul li,
.details ul li {
margin-bottom: 0.5rem;
}
.acknowledgment-list li {
margin-bottom: 12px;
}
.container a {
color: #f1c40f;
text-decoration: none;
margin: 0 0.5rem;
}
.container a:hover {
color: #ff02c4;
}
.about-projects-container {
display: flex;
gap: 10px;
align-items: center;
margin: 0;
padding: 0;
}
.about-projects-container img {
width: 20px;
height: 20px;
}
.happy {
width: 100%;
justify-content: center;
color: #e807a8;
font-size: 2rem;
background: linear-gradient(90deg, #f2ff00, #037bf4);
border-radius: 10px;
}
.happy img {
width: 2rem;
height: 2rem;
}
@media(max-width: 768px) {
.happy {
font-size: 1.5rem;
}
.happy img {
width: 1.5rem;
height: 1.5rem;
}
}
@media(max-width: 362px) {
.happy {
font-size: 1rem;
}
.happy img {
width: 1rem;
height: 1rem;
}
}
</style>
</head>
<body>
<nav>
<div class="menu-toggle" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-links">
<a href="./index.html">Home</a>
<a href="./bubbleSort.html">Bubble <span class="sort-text">Sort</span></a>
<a href="./selectionSort.html">Selection <span class="sort-text">Sort</span></a>
<a href="./insertionSort.html">Insertion <span class="sort-text">Sort</span></a>
<a href="./mergeSort.html">Merge <span class="sort-text">Sort</span></a>
<a href="./quickSort.html">Quick <span class="sort-text">Sort</span></a>
<a href="./heapSort.html">Heap <span class="sort-text">Sort</span></a>
<a href="./radixSort.html">Radix <span class="sort-text">Sort</span></a>
<a href="./shellSort.html">Shell <span class="sort-text">Sort</span></a>
<a href="./summary.html">Summary</a>
<a id="install-button-mobile">Install</a>
</div>
</nav>
<div class="cursor big"></div>
<div class="cursor small"></div>
<div id="context-menu" class="hidden">
<ul>
<li onclick="window.location.reload(true);">Refresh</li>
<li onclick="window.open('./contact.html','_self')">
Contact
</li>
<li>
Share
<ul class="submenu">
<li class="submenu-item">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://easysorting.netlify.app"e=Hey%20check%20out%20this%20sorting%20algorithm%20visualizer"
target="_blank" rel="noopener">
<img src="./images/svg-icons/facebook.svg" alt="Facebook" class="icon">
</a>
</li>
<li class="submenu-item">
<a href="https://www.instagram.com" target="_blank" rel="noopener">
<img src="./images/svg-icons/instagram.svg" alt="Instagram" class="icon">
</a>
</li>
<li class="submenu-item">
<a href="https://wa.me/?text=Hey%20check%20out%20this%20sorting%20algorithm%20visualizer%20-%20https://easysorting.netlify.app"
target="_blank" rel="noopener">
<img src="./images/svg-icons/whatsapp.svg" alt="Whatsapp" class="icon">
</a>
</li>
<li class="submenu-item">
<a href="https://t.me/share/url?url=https://easysorting.netlify.app&text=Hey%20check%20out%20this%20sorting%20algorithm%20visualizer"
target="_blank" rel="noopener">
<img src="./images/svg-icons/telegram.svg" alt="Telegram" class="icon">
</a>
</li>
</ul>
</li>
<li>
Follow me
<ul class="submenu">
<li class="submenu-item">
<a href="https://www.facebook.com/arunneupane9000/" target="_blank" rel="noopener">
<img src="./images/svg-icons/facebook.svg" alt="Facebook" class="icon">
</a>
</li>
<li class="submenu-item">
<a href="https://www.instagram.com/arundada9000" target="_blank" rel="noopener">
<img src="./images/svg-icons/instagram.svg" alt="Instagram" class="icon">
</a>
</li>
<li class="submenu-item">
<a href="https://www.github.com/arundada9000" target="_blank" rel="noopener">
<img src="./images/svg-icons/github.svg" alt="Telegram" class="icon">
</a>
</li>
<li class="submenu-item">
<a href="https://www.youtube.com/@code_with_ease" target="_blank" rel="noopener">
<img src="./images/svg-icons/youtube.svg" alt="Youtube" class="icon">
</a>
</li>
</ul>
</li>
<li onclick="window.open('./feedback.html','_self')">
Feedback
</li>
<li id="installButton">Install</li>
</ul>
</div>
<div class="progress-bar-container">
<div class="progress-bar"></div>
</div>
<main class="container">
<header>
<div class="header-container scroll-animate">
<h1>About EasySorting</h1>
</div>
</header>
<!-- About Me Section -->
<section class="about-me ">
<h2 class="scroll-animate">About Me</h2>
<p class="scroll-animate">Hello! I’m Arun Neupane, a <span id="age">20</span>-year-old from Parbat, Nepal.
I am currently pursuing
a
Bachelor's of
Science in Computer Science and Information Technology. My interests lie in cybersecurity, software
development, and exploring new emerging technologies.</p>
</section>
<!-- How This Works Section -->
<section class="how-it-works">
<h2 class="scroll-animate">How EasySorting Works</h2>
<p class="scroll-animate">EasySorting is a platform created to help users understand sorting algorithms
better through real-time
visualizations. The website is built using simple HTML, CSS, and vanilla JavaScript, and includes:</p>
<div class="details scroll-animate">
<ul>
<li>8 sorting algorithm pages</li>
<li>1 index (home) page</li>
<li>1 contact page</li>
<li>1 about page</li>
<li>1 summary page</li>
<li>1 CSS file</li>
<li>1 JS file</li>
<li>Images folder for assets</li>
</ul>
</div>
<p class="scroll-animate">Each page provides a unique interface to help users visualize sorting algorithms
step-by-step. The site
includes a custom gradient scrollbar, a responsive navigation bar, and an overall smooth and
user-friendly design for a great experience on any device.</p>
</section>
<!-- Acknowledgments Section -->
<section class="acknowledgments">
<h2 class=" scroll-animate">Acknowledgments</h2>
<p class=" scroll-animate">This project would not have been possible without the support from the following
resources and
individuals:</p>
<ul class="acknowledgment-list scroll-animate">
<li><strong><a href="https://chatgpt.com/" target="_blank" rel="noopener">AI (ChatGPT):</a> </strong>
Design ideas, coding improvements, and provided pseudo code and code
for sorting algorithms in various languages.</li>
<li><strong> <a href="https://gemini.google.com/app" target="_blank" rel="noopener">AI
(Gemini:)</a></strong> Assisted with
structuring
the code, design ideas, and enhancing code
quality.</li>
<li><strong>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">Mozilla Developer:</a>
</strong> Provided detailed guidance when AI resources were insufficient.
</li>
<li><strong>YouTube (
<a href="https://www.youtube.com/@GateSmashers" target="_blank" rel="noopener">Gate Smashers</a>
/
<a href="https://www.youtube.com/@THEGATEHUB" target="_blank" rel="noopener">The Gatehub</a>
):</strong> Simplified explanations of sorting
algorithms.</li>
<li><strong>
<a href="https://www.facebook.com/shailesh.nowhish" rel="noopener" target="_blank">Mr. Shailesh
Mishra:</a>
</strong> Offered invaluable feedback, helping to refine the website's
professionalism and polish.</li>
</ul>
<p class=" scroll-animate">Special thanks to the following resources for their high-quality icons used
throughout the site:</p>
<ul class="acknowledgment-list scroll-animate">
<li><strong><a href="https://www.iconfinder.com/" rel="noopener"
target="_blank">Iconfinder</a>:</strong> Provided the social media icons.</li>
<li><strong><a href="https://iconscout.com/" rel="noopener" target="_blank">Iconscout</a>:</strong>
Supplied all sorting icons used on the
website.</li>
<li><strong><a href="https://www.flaticon.com/" rel="noopener" target="_blank">Flaticon</a>:</strong>
Contributed
additional icons, including
animated ones.</li>
</ul>
</section>
<!-- Personal Message Section -->
<section class="personal-message scroll-animate">
<h2>Personal Message</h2>
<p>Sorting algorithms play a fundamental role in computer science, yet I struggled to fully grasp them when
I first learned about them. This inspired me to create EasySorting as a visual learning aid, where
anyone can experience sorting algorithms in action and gain a deeper understanding of each step.</p>
<p>I truly hope this site helps make sorting algorithms clearer and aids in building your problem-solving
skills. Please feel free to share your feedback, as I’m constantly working to improve and expand this
resource. Let’s keep learning and growing together!</p>
</section>
<!-- Collaboration Invite Section -->
<section class="collaboration-invite">
<h2 class=" scroll-animate">Let’s Collaborate</h2>
<p class=" scroll-animate">If you’re interested in collaborating on future projects, I’d love to connect!
Together, we can create
something impactful. Reach out anytime—let’s build something great together! Some of my other works
include : <br> <a href="https://allunitconverter.netlify.app/" target="_blank" rel="noopener"
class="about-projects-container">
<img src="./images/converter.webp" alt="All unit converter">
All unit
Converter
</a> <br> <a href="https://easyqrcreate.netlify.app" rel="noopener" target="_blank"
class="about-projects-container">
<img src="./images/qr-code.png" alt="Qr code Generator">
Qr
Scanner
and Generator
</a>
<br> <a href="https://pseudorandom.netlify.app" target="_blank" rel="noopener"
class="about-projects-container">
<img src="./images/squiggle.png" alt="Random number Generator">
Random number
Generator</a>
</p>
<p class="happy scroll-animate about-projects-container">
<img src="./images/happiness.png" alt="Happy Emoji">
<strong>Happy Learning!</strong>
</p>
</section>
</main>
<button id="backToTopBtn" title="Go to top">↑</button>
<footer class="site-footer">
<div class="footer-container">
<p class="footer-title">Sorting Visualizer</p>
<div class="footer-links">
<a href="https://github.com/arundada9000/Sorting" target="_blank" rel="noopener">Source Code</a> |
<a href="https://arunneupane.netlify.app/" target="_blank" rel="noopener">Portfolio</a> |
<a href="./contact.html">Contact</a>
</div>
<p class="footer-info">© <span id="year">2020</span> Sorting Visualizer. All rights reserved.</p>
<p class="footer-credit">Made with ❤️ by Arun Neupane</p>
<p class="footer-credit">For Learning and Development</p>
</div>
</footer>
<div class="dummy-btn language-selector inside-code-container language-copy-button" id="dummy-btn">Dummy button
</div>
<button id="dummy-btn1" data-language="c">Dummy button</button>
<button id="dummy-btn2" data-language="javascript">Dummy btn 3</button>
<script src="./app.js"></script>
<script>
const fastBtn = document.querySelector(".dummy-btn");
const skipBtn = document.querySelector(".dummy-btn");
const inputBox = document.querySelector(".dummy-btn");
let date = new Date();
document.getElementById("age").textContent = date.getFullYear() - 2004;
</script>
<script src="script.js"></script>
</body>
</html>