-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathportfolio.html
More file actions
547 lines (477 loc) · 31.1 KB
/
portfolio.html
File metadata and controls
547 lines (477 loc) · 31.1 KB
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
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firoz Khan | Projects</title>
<link rel="icon" href="https://firozkhan.in/assets/img/fk_logo.jpg", type="image/jpg">
<link rel="stylesheet" href="assets/css/style.css">
<meta name="description" content="I'm Firoz Khan, a passionate full stack web developer specializing in responsive websites, modern UI/UX, and powerful backend development. Check out my projects and skills.">
<meta name="keywords" content="Firoz Khan, web developer, portfolio, frontend, backend, full stack, HTML, CSS, JavaScript, PHP, React, Node.js, developer in India">
<meta name="author" content="Firoz Khan">
<!-- Canonical URL -->
<link rel="canonical" href="https://firozkhan.in/">
<!-- Open Graph (for Facebook, LinkedIn, etc.) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://firozkhan.in/">
<meta property="og:title" content="Firoz Khan | Full Stack Web Developer Portfolio">
<meta property="og:description" content="Explore the web development portfolio of Firoz Khan – frontend & backend developer with experience in modern tech stack.">
<meta property="og:image" content="https://firozkhan.in/assets/preview.png"> <!-- Replace with actual preview image path -->
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://firozkhan.in/">
<meta name="twitter:title" content="Firoz Khan | Full Stack Web Developer Portfolio">
<meta name="twitter:description" content="Hi, I'm Firoz Khan – a creative and skilled full stack web developer. View my portfolio, skills, and projects.">
<meta name="twitter:image" content="https://firozkhan.in/assets/preview.png"> <!-- Replace with actual preview image path -->
<!-----swiper css----->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<!---custom icons-->
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!--========== Ionicons =============-->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap-made.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<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", "scp2esmraz");
</script>
</head>
<body class="dark-mode">
<!-- header design -->
<header class="header">
<a href="#" class="logo">Portfolio
<img src="assets/img/fk_logo.jpg" alt="">
</a>
<nav class="navbar">
<hr id="indicator">
<a href="index.html#home">Home</a>
<a href="index.html#about">About</a>
<a href="index.html#services">Service</a>
<a href="#portfolio" class="active">Projects</a>
<a href="index.html#testimonials">Testimonial</a>
<a href="index.html#contact">Contact</a>
</nav>
<div class="bx bx-moon" id="darkMode-icon"></div>
<div class="bx bx-menu" id="menu-icon"></div>
<div class="color-switcher">
<div class="switcher-btn">
<i class="fas fa-cog"></i>
</div>
<h3>select color</h3>
<div class="theme-buttons-container">
<span class="theme-buttons" data-color="#754ef9" style="background: #754ef9;"></span>
<span class="theme-buttons" data-color="#17ff3e" style="background: #00e426;"></span>
<span class="theme-buttons" data-color="#ffc312" style="background: #ffc312;"></span>
<span class="theme-buttons" data-color="#06ff93" style="background: #06ff93;"></span>
<!-- <span class="theme-buttons" data-color="#ff1900" style="background: #ff1900;"></span> -->
<!-- <span class="theme-buttons" data-color="#e84393" style="background: #e84393;"></span> -->
<span class="theme-buttons" data-color="#ff4757" style="background: #ff4757;"></span>
<!-- <span class="theme-buttons" data-color="#ffc312" style="background: #ffc312;"></span> -->
<span class="theme-buttons" data-color="#17c0eb" style="background: #17c0eb;"></span>
</div>
<!-- Add a color picker input -->
<h3>Or Pick a Custom Color:</h3>
<div id="colorContainer">
<input type="color" id="colorPicker" value="#000000">
<p id="colorCode">Color Code: #000000</p>
</div>
</div>
</header>
<!--portfolio section design-->
<section class="portfolio" id="portfolio">
<h2 class="heading">My <span>Projects</span></h2>
<div class="search-container">
<input type="text" placeholder="Search project...">
<button><ion-icon name="search-outline"></ion-icon></button>
</div>
<div class="portfolio-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">SnapStudio</p>
<img src="assets/img/portfolio/Snapstudio.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Snapstudio.png');">
<p class="title">Details</p>
<p>Snap Studio, a user-friendly photography website with advanced editing tools, a competitive pricing chart, and a comprehensive feedback system. Features include image zoom, downloads, and client information for enhanced user experience.</p>
<a href="https://snapstudio9711.lovestoblog.com/index.php" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Chat Application</p>
<img src="assets/img/portfolio/Chat_App_img.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Chat_App_img.png');">
<p class="title">Details</p>
<p>Introducing a versatile Chat Application with real-time messaging, group chats, and secure media sharing, designed for a seamless user experience.</p>
<a href="https://chatapp9711.kesug.com/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Ai chatbot</p>
<img src="assets/img/portfolio/Ai chatbot.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Ai chatbot.png');">
<p class="title">Details</p>
<p>An intelligent chatbot that answers all your questions, assists developers with code, and analyzes images for content insights. Effortlessly handles queries and image analysis, enhancing productivity and interaction.</p>
<a href="https://firoz-ai.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Image Compressor & Converter</p>
<img src="assets/img/portfolio/image-compressor.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/image-compressor.png');">
<p class="title">Details</p>
<p>Developed open source Image Compressor and formate Converter.</p>
<a href="https://image-compressor-548.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Profile Card</p>
<img src="assets/img/portfolio/profile_card.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/profile_card.png');">
<p class="title">Details</p>
<p>The Profile Card is a modern and stylish representation of who you are, offering a snapshot of your key details in a visually appealing format.</p>
<a href="https://firozprofilek.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Shape Generator</p>
<img src="assets/img/portfolio/Shape generator.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Shape generator.png');">
<p class="title">Details</p>
<p>Create any type of shapes manually.</p>
<a href="https://shape-generator-by-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Responsive Dashboard</p>
<img src="assets/img/portfolio/dashboard.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/dashboard.png');">
<p class="title">Details</p>
<p>This dashboard offers a clean, intuitive interface that tracks course progress, statistics, and weekly tasks, ensuring efficient learning and organization. The design prioritizes user experience with easy navigation and clear visual data representation.</p>
<a href="https://firozk-dashboard.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Login/Signup form</p>
<img src="assets/img/portfolio/signup-project.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/signup-project.png');">
<p class="title">Details</p>
<p>Your gateway to a personalized and protected experience. Sign in to access exclusive features, manage your account, and enjoy a seamless interaction with our platform.</p>
<a href="https://fk-forms.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Email and Password Validation</p>
<img src="assets/img/portfolio/password and email validation.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/password and email validation.png');">
<p class="title">Details</p>
<p>Developed a real-time Email & Password Validation Form using HTML, CSS, and JavaScript. It verifies email formats and checks password strength based on essential security criteria. The interactive UI provides instant feedback, ensuring a smooth user experience while promoting strong credentials.</p>
<a href="https://signup-validation-by-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">To Do List</p>
<img src="assets/img/portfolio/to do list.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/to do list.png');">
<p class="title">Details</p>
<p>Created this interactive To-Do List using HTML, CSS, and JavaScript with a sleek neumorphic UI. It allows users to add, complete, and delete tasks effortlessly, with a smooth strikethrough effect for completed items. A simple yet stylish productivity tool!</p>
<a href="https://todolistbyfiroz.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Weather App</p>
<img src="assets/img/portfolio/weather app.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/weather app.png');">
<p class="title">Details</p>
<p>A real-time Weather App using HTML, CSS, JavaScript, and the OpenWeather API. It allows users to search any location or fetch the current location's weather, displaying temperature, humidity, wind speed, and conditions with a sleek UI.</p>
<a href="https://firoz-weather-app.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Memory Game</p>
<img src="assets/img/portfolio/memory game.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/memory game.png');">
<p class="title">Details</p>
<p>Test your memory with this engaging 3D card-matching game! Flip the cards to reveal pairs of iconic programming and design logos. Watch them flip in stunning 3D as you search for matches. Can you find all the pairs before time runs out?</p>
<a href="https://memory-game-by-firoz.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Realistic Calculator</p>
<img src="assets/img/portfolio/realistic Calculator.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/realistic Calculator.png');">
<p class="title">Details</p>
<p>Experience the thrill of realistic 3D card-flipping with every keypress on this sleek calculator. Buttons spring to life with immersive animations as you calculate. Enjoy a visually stunning and satisfying mathematical journey.</p>
<a href="https://firozk-calculator.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">CRUD Application</p>
<img src="assets/img/portfolio/crud app.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/crud app.png');">
<p class="title">Details</p>
<p>This simple CRUD app allows users to manage a list of users. It provides the ability to add new users, delete existing users, and edit the details of existing users. The interface is straightforward, displaying user data in a table with "Edit" and "Delete" actions for each entry. The app offers basic user management functionality.</p>
<a href="https://user-crud23.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Analog Clock</p>
<img src="assets/img/portfolio/analog clock.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/analog clock.png');">
<p class="title">Details</p>
<p>Developed a clean and minimalist analog clock interface. Accurate timekeeping is achieved through JavaScript's `Date` object. The design prioritizes simplicity and readability, offering a visually appealing time display.</p>
<a href="https://fk-clock.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Coffee Site</p>
<img src="assets/img/portfolio/coffee site.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/coffee site.png');">
<p class="title">Details</p>
<p>Clean, modern website design for a coffee company. Visually appealing imagery and intuitive navigation enhance the user experience. Features include online ordering and contact information. Built with html, CSS and JS.</p>
<a href="https://coffee-site-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Softech Site</p>
<img src="assets/img/portfolio/softech site.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/softech site.png');">
<p class="title">Details</p>
<p>Clean, modern website design for an electrical company. Visually appealing imagery and intuitive navigation enhance the user experience. Features include online product searching and contact information. Built with html, CSS and JS.</p>
<a href="https://softechcontrolsolution.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Ping Pong Gamee</p>
<img src="assets/img/portfolio/Ping Pong game.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Ping Pong game.png');">
<p class="title">Details</p>
<p>A simple yet engaging ping pong game built with HTML, CSS, JavaScript. Players can compete against another player or the computer. Features include pause functionality and adjustable difficulty.</p>
<a href="https://ping-pong-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Snake Gamee</p>
<img src="assets/img/portfolio/Snake game.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Snake game.png');">
<p class="title">Details</p>
<p>A classic Snake game recreation built from scratch. The player controls a snake to eat food and grow, avoiding collisions with its own body and the walls. Includes scoring and high score tracking. A fun and challenging test of reflexes and strategy.</p>
<a href="https://snake-game-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Playable Piano</p>
<img src="assets/img/portfolio/piano.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/piano.png');">
<p class="title">Details</p>
<p>Developed a playable on-screen piano using HTML, CSS, and JavaScript. Features include volume control and an option to show/hide keyboard letter mappings for easy use. A fun and functional project demonstrating interactive web development skills.</p>
<a href="https://piano-by-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Image Slider</p>
<img src="assets/img/portfolio/Image Slider.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Image Slider.png');">
<p class="title">Details</p>
<p>Developed a Page Slider using HTML, CSS, and JavaScript. Features include Move to next page and previous page through animations. A functional project demonstrating interactive web development skills.</p>
<a href="https://image-slider-fk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">QR code Generator</p>
<img src="assets/img/portfolio/qr-generator.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/qr-generator.png');">
<p class="title">Details</p>
<p>Generate Your personal QR code with any deta.</p>
<a href="https://firozkcode.github.io/QR-code-generator/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Contact Me Form</p>
<img src="assets/img/portfolio/contact form.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/contact form.png');">
<p class="title">Details</p>
<p>Developed a contact from to Connect others in just one step.</p>
<a href="https://contactfirozk.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Todo App</p>
<img src="assets/img/portfolio/Todo App.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/Todo App.png');">
<p class="title">Details</p>
<p>Developed a contact from to Connect others in just one step.</p>
<a href="https://todo-app-548.netlify.app/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Speech To Text</p>
<img src="assets/img/portfolio/speech to text.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/speech to text.png');">
<p class="title">Details</p>
<p>Developed a speech to Text Tool for faster and accurate typing.</p>
<a href="https://firozkcode.github.io/speech-to-text/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">Speech To Text</p>
<img src="assets/img/portfolio/space x homepage.png" alt="Front Side Image" id="productImage" loading="lazy">
<p class="hover">Hover Me</p>
</div>
<div class="flip-card-back" style="background-image: url('assets/img/portfolio/space x homepage.png');">
<p class="title">Details</p>
<p>Developed a Space theme POrtfolio Homepage.</p>
<a href="https://firozkcode.github.io/Home-page-designs/Projects/space%20galaxy%20home%20page/" title="Live Demo"><ion-icon name="eye"></ion-icon></a>
</div>
</div>
</div>
</div>
</section>
<!----Footer design---->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2024 By <a href="https://firozfk.great-site.net/">Firoz Khan</a> | All Rights Reserved</p>
</div>
<!-- <div class="footer-iconTop">
<a href="#home"><i class='bx bx-up-arrow-circle' ></i></a>
</div> -->
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="assets/js/script.js"></script>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
(function(){if(!window.chatbase||window.chatbase("getState")!=="initialized"){window.chatbase=(...arguments)=>{if(!window.chatbase.q){window.chatbase.q=[]}window.chatbase.q.push(arguments)};window.chatbase=new Proxy(window.chatbase,{get(target,prop){if(prop==="q"){return target.q}return(...args)=>target(prop,...args)}})}const onLoad=function(){const script=document.createElement("script");script.src="https://www.chatbase.co/embed.min.js";script.id="-OQoTGcIXAX-SFcwt8lMQ";script.domain="www.chatbase.co";document.body.appendChild(script)};if(document.readyState==="complete"){onLoad()}else{window.addEventListener("load",onLoad)}})();
</script>
</body>
</html>