-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
355 lines (288 loc) · 15.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4G5DVR6FCK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4G5DVR6FCK');
</script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "lb9967r49a");
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mahipal</title>
<script src="https://kit.fontawesome.com/e674bba739.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<div class="navbar-title">
<h3 class="title-first-name">Mahipal</h3>
</div>
<button id="menu-toggle" class="menu-toggle">
<i class="fas fa-bars"></i>
</button>
<div class="navbar-menu-container">
<ul class="navbar-menu">
<li><a class="profile-card-active" href="#aboutme">About</a></li>
<li><a class="profile-card-active" href="#introduction">Works</a></li>
<li><a class="profile-card-active" href="#skill">Skills</a></li>
<li><a class="profile-card-active" href="#footer">Contacts</a></li>
</ul>
</div>
<div class="social-media-container">
<ul class="social-media">
<li><i class="fa-brands fa-linkedin-in"></i><a href="https://www.linkedin.com/in/mahipal975/" target="_blank">LinkedIn</a></li>
<li><i class="fa-brands fa-github"></i><a href="https://github.com/mukul975" target="_blank">Github</a></li>
<li><i class="fa-regular fa-envelope"></i><a href="mailto:mukuljangra5@gmail.com">Email</a></li>
</ul>
</div>
</section>
<section id="announcement-banner">
<p>Announcing our New Project: <strong>EmailGuard - Proactive Email Phishing Detection using Artificial Intelligence
</strong> - Check it out now!</p>
</section>
<section id="content-body">
<div class="body-part-1">
<div class="developer-intro">
<p>Front-End Developer</p>
<p>Security Enthusiast</p>
</div><br>
<h2><span id="greetingText">Stay safe from cyber</span></h2>
<script>
const greetings = [
'Stay safe from cyber','साइबर से सुरक्षित रहें','সাইবার থেকে নিরাপদ থাকুন','サイバーから安全に過ごしてください','Restez en sécurité contre le cyber','Mantente seguro del ciber','保持网络安全','Bleib sicher vor Cybergefahren', 'சைபர் ஆபத்திலிருந்து பாதுகாப்பாக இருங்கள்','Fanacht sábháilte ón gcibear','Manténgase seguro del ciber','Bleiben Sie sicher vor Cyber','Stai al sicuro dal cyber','שמור על עצמך בטוח מפני סייבר','Оставайтесь в безопасности от киберугроз','ابق آمناً من الخطر السيبراني','Hãy an toàn khỏi mối đe dọa mạng'];
let index = 0;
function changeGreeting() {
const greetingTextElement = document.getElementById('greetingText');
greetingTextElement.style.opacity = 0; // Fade out
setTimeout(() => {
greetingTextElement.innerHTML = greetings[index]; // Update greeting content
greetingTextElement.style.opacity = 1; // Fade in
index = (index + 1) % greetings.length;
}, 500); // Wait for fade out before updating greeting content
}
setInterval(changeGreeting, 5000); // 2 seconds interval (including fade in/out time)
</script>
<div class="body-title">
<!-- <h1>Talk is cheap<br>Show me the code</h1> -->
<h1>Cybersecurity Guardian<br>Front-End Maestro</h1>
<p>Crafting a Secure and User-Centric Digital Tomorrow</p>
<a href="https://www.linkedin.com/in/mahipal975/">LET'S Connect!</a>
</div>
<div class="body-tail">
<h1>7+
</h1>
<p>Certificatons<br>EXPERIENCE</p>
<h1>5+</h1>
<p>PROJECTS<br>COMPLETED</p>
</div>
</div>
<div class="body-part-2">
<div class="container">
<div class="svg-animation">
<img src="assets/cyber.svg" alt="Cyber SVG" class="responsive-svg">
</div>
</div>
</div>
</section>
<section id="aboutme">
<div class="body-part-2">
<div class="container">
<div class="svg-animation">
<img src="assets/who.svg" alt="Who SVG" class="responsive-svg">
</div>
</div>
</div>
<div class="body-part-1">
<div class="body-title">
<!-- <h1>Talk is cheap<br>Show me the code</h1> -->
<h1>Who Am I?</h1>
<p>Mahipal here, an Indian enthusiast in Berlin, passionate about programming and cybersecurity.<br>
Pursuing M.Sc. in Computer Science with a Cybersecurity focus at SRH Berlin University of Applied Science.<br>
Started with a Java Programming Internship, honed skills, and fell in love with web development using HTML, CSS, and JS.<br>
Explored image processing, wireless sensor networks, and even published findings in research projects.<br>
Certified in various domains, from Big Data to Ethical Hacking, building a well-rounded foundation.<br>
Beyond tech, I'm an adventure junkie - trekking and gaming are my go-tos.<br>
Staying current with the latest tech trends is a must for me.<br>
Fluent in Hindi and English, and have a basic grasp of German, facilitating global connections.<br>
Join me in my journey through front-end development and cybersecurity - let's learn and grow together!
</p>
<a href="https://www.linkedin.com/in/mahipal975/">LET'S Connect!</a>
</div>
</div>
</div>
</div>
</section>
<section id="introduction">
<div class="heading-container">
<h3 class="section-heading">Latest Projects</h3>
<p>Perfect solutions for digital experience</p>
</div>
<div class="cards-container">
<div class="cards">
<div class="design-card active">
<div>
<h3>An Enhanced Haze Removal: Using DCP and Enriched-Invariant Features</h3>
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<p>The project proposes an enhanced method for removing haze from images using Dark Channel Prior (DCP) and Enriched-Invariant Features. This approach aims to improve the accuracy and efficiency of existing haze removal techniques, particularly in situations where the visibility is severely impaired by haze.</p>
</div>
<div class="design-card">
<div>
<h3>EmailGuard - Proactive Email Phishing Detection using Artificial Intelligence</h3>
<i class="fa-solid fa-terminal"></i>
</div>
<p>Developed and implemented "EmailGuard," an AI-driven system for detecting phishing emails using 50 extensive features. The system leverages machine learning algorithms and natural language processing to analyze email content and metadata, distinguishing between legitimate and phishing emails. This project significantly enhanced cybersecurity measures, reduced phishing incidents, and improved the overall security posture of the organization.</p>
</div>
<div class="design-card">
<div>
<h3>Multicast Wireless Routing Protocol In Java Programming</h3>
<i class="fa-solid fa-code"></i>
</div>
<p>The Multicast Wireless Routing Protocol project in Java programming aims to develop a protocol for efficient data transmission over wireless networks using multicasting. The project involves implementing algorithms to optimize data transmission and minimize delays and packet losses.</p>
</div>
<div class="design-card">
<div>
<h3>Vampire Attacks Draining Life from Wireless Ad Hoc Sensor Networks</h3>
<i class="fa-solid fa-terminal"></i>
</div>
<p>"Vampire Attacks" is a Java-based application that simulates and analyzes the impact of vampire attacks on wireless sensor networks. This application explores the vulnerabilities of such networks and mimics the behavior of energy-draining malicious nodes.</p>
</div>
<div class="design-card">
<div>
<h3>
Pack India Packers and Movers Website Development Project
</h3>
<i class="fa-solid fa-terminal"></i>
</div>
<p>I successfully crafted a professional website for Pack India Packer and Movers, highlighting their top-tier relocation services. The site provides seamless user experience, valuable information, and easy client interaction, bolstering Pack India's online presence and their mission of smooth moving solutions.</p>
</div>
</div>
</div>
</div>
<div class="image-container">
<div class="body-part-2">
<div class="container">
<div class="svg-animation">
<img src="assets/project.svg" alt="Project SVG" class="responsive-svg">
</div>
</div>
</div>
</div>
</section>
<section id="skill">
<div class="heading-container">
<h3 class="section-heading">Skills</h3>
</div>
<div class="image-container">
<div class="body-part-2">
<div class="container">
<div class="svg-animation">
<img src="assets/skill.svg" alt="Skill SVG" class="responsive-svg">svg">
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards">
<div class="design-card active">
<div>
<h3>Programming</h3>
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<p>Java • Python • MATLAB • C++ • C </p>
</div>
<div class="design-card active">
<div>
<h3>Cybersecurity</h3>
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<p>Threat Detection • Network Security • Cybersecurity Architecture • Ethical Hacking • Social Engineering • Information Security Management System (ISMS) • IT Audit • IT Security Assessments • Penetration Testing</p>
</div>
<div class="design-card active">
<div>
<h3>AI & Machine Learning</h3>
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<p>Natural Language Processing (NLP) • Machine Learning • AI Model Training • Data Analysis • Feature Engineering</p>
</div>
<div class="design-card">
<div>
<h3>Web Development</h3>
<i class="fa-solid fa-code"></i>
</div>
<p>HTML • Cascading Style Sheets (CSS) • JavaScript • PHP • Full-Stack Development • Front-End Development</p>
</div>
<div class="design-card">
<div>
<h3>Others</h3>
<i class="fa-solid fa-terminal"></i>
</div>
<p>Google Cloud Platform (GCP) • Adobe Photoshop • Computer Science • Software Development • English • Project Management • Engineering • Communication • Training • Leadership • Marketing • Customer Service • Microsoft Office</p>
</div>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="footer-left">
<form name = 'contactus' netlify>
<h2>Let's make something amazing together</h2>
<div class="email-form">
<h2>Start by <span>saying hi</span></h2>
<input type="text" name="name" id="" placeholder="Your name">
<input type="email" name="email" id="" placeholder="Email Address">
<div>
<input type="text" name="Messgae" id="" placeholder="Messgae">
<button type="submit">Send</button>
</div>
</form>
</div>
<div class="footer-title">
<h3 class="title-first-name">
Mahipal
</h3>
<h3 class="title-last-name">
Jangra
</h3>
</div>
</div>
<div class="footer-right">
<div class="footer-email-intro">
<p>Information</p>
<h6>Berlin, Deustchland </h6>
<h3>contact@mahipal.tech</h3>
</div>
<div class="footer-nav-menu">
<ul class="footer-menu">
<li><a class="profile-card-active" href="#aboutme"> About </a></li>
<li><a class="profile-card-active" href="#introduction">Works</a></li>
<li><a class="profile-card-active" href="#skill">Skills</a></li>
</ul>
</div>
<div class="social-icons">
<a href="https://www.linkedin.com/in/mahipal975/" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<a href="https://github.com/mukul975" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.instagram.com/_mukul.jangra_/" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>