-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
388 lines (347 loc) · 19.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./public/styles/main.css">
<link rel="stylesheet" href="./public/styles/home.css">
<link rel="stylesheet" href="./public/styles/media-queries.css">
<link rel="icon" type="image/x-icon" href="./public/images/favicon.ico">
<title>Ishan Rastogi</title>
</head>
<body>
<div class="cert-gallery">
<div class="cert-display">
</div>
</div>
<!-- Introducing Me Section -->
<section class="about">
<div class="stripe top-stripe">
<img src="./public/graphics/emoji-avatar.gif" alt="">
</div>
<div class="text">
<h1 class="heading">Developer | Designer | Content Writer</h1>
<p>
Hi, I am <b> Ishan </b>. As a multi-talented professional with a passion for technology and creativity, I bring a unique blend of skills in web development, Python programming, UI/UX design, and content writing. With a deep understanding of the digital landscape, I strive to create innovative and user-centric solutions. In all my endeavors, I am a dedicated problem-solver and a lifelong learner. I thrive in collaborative environments where I can contribute my skills and learn from others.
</p>
</div>
</section>
<!-- Graphics Section -->
<section class="graphics">
<h1 class="heading"> "Adapt to be the BEST" </h1>
<img src="./public/graphics/home-graphic.png" alt="">
</section>
<!-- My Skills Section -->
<section class="skills">
<h1 class="heading">My Skills</h1>
<div class="container">
<article class="skill">
<i class="fa-brands fa-python icon"></i>
<h3> Python</h3>
<p>
I excel in Python programming. With proficiency in building GUI apps and games using Turtle, creating web APIs and performing web scraping, and constructing robust web servers, I harness the power of Python to transform ideas into functional and innovative solutions across various domains.
</p>
</article>
<article class="skill">
<i class="fa-solid fa-chart-line icon"></i>
<h3> Data Science & Machine Learning</h3>
<p>
Armed with a passion for extracting valuable insights from complex datasets, I leverage my expertise in statistical analysis, machine learning, and data visualization to uncover meaningful patterns and drive informed decision-making.
</p>
</article>
<article class="skill">
<i class="fa-solid fa-keyboard icon"></i>
<h3> Prompt Engineering</h3>
<p>
I can effectively guide and direct AI models to generate highly specific and contextually relevant outputs. My proficiency in harnessing the power of large language models allows me to create innovative and impactful solutions across various domains, leveraging the cutting-edge technology of today's AI landscape
</p>
</article>
<article class="skill">
<i class="fa-solid fa-globe icon"></i>
<h3> Web Development </h3>
<p>
Transforming ideas into dynamic and visually captivating websites, I utilize my expertise in HTML, CSS, JavaScript, and modern frameworks such as MERN Stack to create immersive online experiences that seamlessly blend aesthetics with functionality.
</p>
</article>
<!-- <article class="skill">
<i class="fa-solid fa-mobile icon"></i>
<h3> Mobile App Development </h3>
<p>
Developing elegant looking applications using Flutter with efficient and scalable server-side scripting and database management.
</p>
</article> -->
<article class="skill">
<i class="fa-solid fa-database icon"></i>
<h3> Database Management & SQL </h3>
<p>
With a strong command over Structured Query Language (SQL), I excel in database design, optimization, and data manipulation. By crafting complex queries I leverage SQL to efficiently manage and extract valuable insights from vast datasets.
</p>
</article>
<article class="skill">
<i class="fa-solid fa-pen-nib icon"></i>
<h3> Content Writing & Designing </h3>
<p>
With a passion for words and a keen eye for storytelling, I specialize in crafting compelling and engaging content. I also excel in content design and UI design. By seamlessly blending visually appealing aesthetics with user-centric experiences.
</p>
</article>
</div>
</section>
<!-- Projects Section -->
<section class="projects" >
<h1 class="heading"> Featured Projects</h1>
<div class="container">
<div class="left">
<img src="./public/graphics/projects-left-section-graphic.png" alt="">
<a href="https://github.com/Ishan2608" target="_blank" class="btn">View More</a>
</div>
<div class="right">
<article class="project">
<h3>
<a href="https://www.epidise.com/" target="_blank">
Epidise - Website
</a>
</h3>
<p>
A website for the Epidise company, built with elegance and professionalism. It provides users with a beautiful experience and gives them a clear idea what the startup is about.
</p>
</article>
<article class="project">
<h3>
<a href="https://github.com/Ishan2608/Rooms" target="_blank">
Rooms
</a>
</h3>
<p>
A fullstack chat application to share text, images and files messages to other users as well as groups. Enhanced security with Blocking and Unblocking functionality as well as handling messages from unknown users.
</p>
</article>
<article class="project">
<h3>
<a href="https://github.com/Ishan2608/CHM-and-Gann-Cycles" target="_blank">
CHM and Gann Cycle Analysis of Indian Stock Market
</a>
</h3>
<p>
A Data Engineering and Data Science project to get 20 years historical data of all stocks on the Indian Stock Market, and apply CHM and Gann Cycles methods to identify trading opportunities.
</p>
</article>
<article class="project">
<h3>
<a href="https://github.com/Ishan2608/SpaceGeek" target="_blank">
Space Geek
</a>
</h3>
<p>
A simple web application for space lovers to stay updated with past and upcoming space events, latest news, a solar system simulator, and an image library. It utilizes various API services to display its dynamic contents.
</p>
</article>
<article class="project">
<h3>
<a href="https://github.com/Ishan2608/Space_Invaders" target="_blank">
Space Invader Clone
</a>
</h3>
<p>
Using Python's "turtle" library, I have recreated the classic Space Invaders game, bringing nostalgia to life in a modern context. Players can embark on an exciting journey to defend the Earth by controlling a spaceship and battling against waves of descending alien invaders.
</p>
</article>
<article class="project">
<h3>
<a href="https://github.com/Ishan2608/Breakout_Game" target="_blank">
Breakout Game Clone
</a>
</h3>
<p>
I present a delightful clone of the classic Breakout game. Players will experience a thrilling challenge as they control a paddle to bounce a ball and break through a wall of colorful bricks.
</p>
</article>
<!--
<article class="project">
<h3>
<a href="https://github.com/Ishan2608/Typing_Speed_Test" target="_blank">
Desktop GUI App - Typing Speed Test
</a>
</h3>
<p>
I have developed an engaging desktop application that allows users to test and improve their typing speed. With a user-friendly interface, the application prompts users to type several displayed texts within a specified time limit.
</p>
</article> -->
</div>
</div>
</section>
<!-- Blogs Section -->
<section class="blogs">
<h1 class="heading">Featured Articles</h1>
<div class="container">
<div class="left">
<article class="blog">
<h3>
<a href="https://www.geeksforgeeks.org/build-gui-application-for-guess-indian-state-using-tkinter-python/" target="_blank">
GUI App - Guess the Name of Indian States
</a>
</h3>
<p>
A quiz game built using Python Turtle where the user has to guess the names of Indian states, which, if guessed correctly, are placed on the Indian map, and the user gets a list of missed states after the game is over.
</p>
</article>
<article class="blog">
<h3>
<a href="https://www.geeksforgeeks.org/create-breakout-game-using-python/" target="_blank">
Complete Guide to Build Breakout Game Clone using Python-Turtle
</a>
</h3>
<p>
Build a desktop game using the turtle library of Python. Get 5 lives to begin with, pause and resume the game whenever you want, keep track of your high score, and break bricks with different toughness.
</p>
</article>
<article class="blog">
<h3>
<a href="https://www.geeksforgeeks.org/image-colour-palette-generator-flask//" target="_blank">
Guide to Building Images's Color Palette Extractor
</a>
</h3>
<p>
Build a web application to where the user uploads an image and the application calculates the 10 most occurring colors used in it. Learn the step by step process to build it and make it your own.
</p>
</article>
<article class="blog">
<h3>
<a href="https://www.geeksforgeeks.org/how-is-blockchain-different-from-a-linked-list/" target="_blank">
Difference between Linked List and Blockchain
</a>
</h3>
<p>
In this insightful article, we delve into the intriguing world of data structures to highlight the contrasting features of linked lists and blockchains. By unraveling the fundamental principles and mechanisms behind each, we shed light on how these structures differ in terms of design, functionality, and real-world applications.
</p>
</article>
<article class="blog">
<h3>
<a href="https://www.geeksforgeeks.org/snowfall-animation-effect-using-css/" target="_blank">
Pure CSS - Snowfall Animation
</a>
</h3>
<p>
Experience the enchantment of a snowy landscape with this captivating frontend animation created purely with CSS. Watch as delicate snowflakes elegantly fall across the screen, bringing a touch of magic to your web page.
</p>
</article>
</div>
<div class="right">
<img src="./public/graphics/blogs-sections-right-graphic.gif" alt="">
<a href="https://auth.geeksforgeeks.org/user/ishanrastogi26/articles" target="_blank" class="btn">View More</a>
</div>
</div>
</section>
<!-- <section id="genAIImages">
<h1 class="heading">My GenAI Images</h1>
<div class="slider">
<div class="slider-img-container">
<img src="./public/images/for_slider/krishna1.jfif" alt="" class="AI-image">
</div>
<div class="slider-img-container">
<img src="./public/images/for_slider/Indian_Warrior.jpeg" alt="" class="AI-image">
</div>
<div class="slider-img-container center">
<img src="./public/images/for_slider/Samurai.jpg" alt="" class="AI-image">
</div>
<div class="slider-img-container">
<img src="./public/images/for_slider/panda 2.jpg" alt="" class="AI-image">
</div>
</div>
<button id="prevBtn" class="nav-btn">❮</button>
<button id="nextBtn" class="nav-btn">❯</button>
</section> -->
<section class="works">
<h1 class="heading">My Works and Experiences</h1>
<div class="container">
<article class="work">
<h3>GeeksforGeeks - Technical Content Writer</h3>
<div class="work-image">
<img src="./public/images/work/GfG-Technical-Content-Writer.png" alt="Technical Content Writer at GFG">
</div>
<p>
During my internship at Geeks for Geeks, a renowned technology platform, I had the opportunity to dive into the world of technical content writing. As a part of the team, I crafted comprehensive and user-friendly guides, empowering aspiring programmers to build various projects.
</p>
<a href="https://auth.geeksforgeeks.org/user/ishanrastogi26" target="_blank" class="btn">Learn More</a>
</article>
<article class="work">
<h3>Designing to Heart's Content</h3>
<div class="work-image">
<img src="./public/images/work/Canva 200 Design Milestone Badge Redesigned.gif" alt="Completed 200 Designs in Canva">
</div>
<p>
Recently, I was awarded a prestigious badge from Canva, recognizing my accomplishment of creating 200 designs on their platform. Leveraging Canva's versatile tools and extensive library, I have honed my skills in graphic design, creating visually appealing and impactful designs for various purposes.
</p>
<a href="./public/images/work/Canva 200 Design Milestone Badge Redesigned.gif" target="_blank" class="btn">View</a>
</article>
<article class="work">
<h3>Care for Air India - Content Designing</h3>
<div class="work-image">
<img src="./public/images/work/CFA-Content.png" alt="Content Team Certificate">
</div>
<p>
During my internship at Care for Air India, a dedicated organization focused on raising awareness about the growing issue of air pollution among young children, I had the privilege to be a part of their content creation team.
</p>
<a href="http://www.careforair.org/" target="_blank" class="btn">Learn More</a>
</article>
<article class="work">
<h3>Care for Air India - Presenting Views</h3>
<div class="work-image">
<img src="./public/images/work/CFA-Presenters.png" alt="Presenter Team Certificate">
</div>
<p>
As a presenter, I had the opportunity to deliver impactful presentations and engage with audiences, including school children, to educate them about the detrimental effects of air pollution and the importance of clean air. Through interactive sessions and engaging visuals, I played a pivotal role in spreading awareness, inspiring behavioral changes, and fostering a sense of environmental responsibility among the youth.
</p>
<a href="http://www.careforair.org/" target="_blank" class="btn">Learn More</a>
</article>
</div>
</section>
<footer>
<h1 class="heading">Contact Me</h1>
<div class="container">
<div class="left">
<img src="./public/images/myself-footer.jpg" alt="">
</div>
<div class="right">
<div class="wrapper">
<img src="./public/graphics/My Logo.png" alt="" class="logo">
</div>
<div class="wrapper">
<h3 class="tag-line">
"Lets learn, lets apply, lets work together and build something memorable."
</h3>
</div>
<div class="wrapper">
<div class="contacts">
<h3> <i class="fa-solid fa-location-dot"></i> Dehradun, India</h3>
<h3> <i class="fa-solid fa-phone"></i> +91 7906033209</h3>
<h3> <i class="fa-sharp fa-solid fa-envelopes-bulk"></i> ishanrastogi26@gmail.com</h3>
</div>
</div>
<div class="wrapper">
<div class="socials">
<a href="https://github.com/Ishan2608" target="_blank" title="GitHub">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/ishan-rastogi-672a5a195/" target="_blank" title="LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://twitter.com/ishanrastogi26" target="_blank" title="Twitter">
<i class="fa-brands fa-twitter"></i>
</a>
<!-- <a href="https://www.facebook.com/ishan.rastogi.501" target="_blank" title="Facebook">
<i class="fa-brands fa-facebook"></i>
</a> -->
<a href="https://contra.com/ishan_rastogi_vkt0frzy?utm_campaign=social_sharing&utm_medium=independent_share&utm_source=copy_link" target="_blank" title="Contra">
<i class="fa-solid fa-star"></i>
</a>
</div>
</div>
</div>
</div>
<div class="stripe bottom-stripe"></div>
</footer>
<script src="./public/js/slider.js"></script>
</body>
</html>