-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathprojects.html
394 lines (363 loc) · 19.2 KB
/
projects.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Affan - Developer Portfolio</title>
<link rel="stylesheet" href="style.css" class="rel" />
<link rel="icon" href="assests/icon.png" class="rel" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" class="rel" />
</head>
<body>
<!-- <div id="preloader"></div> -->
<header>
<nav class="navbar">
<div class="namelogo">
<img src="assests/affan1.jpg">
<div class="left"> Affan's Portfolio</div>
</div>
<div class="right">
<ul class="navbar-menu">
<li><a href="index.html">Home</a></li>
<li>
<a href="services.html">Services</a>
</li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="navbar-toggle">
<button id="menu-toggle"><i class="fa-solid fa-list"></i></button>
</div>
</nav>
</header>
<main>
<section>
<h1 class="heading">Latest Projects</h1>
</section>
<section class="con-video">
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/wanderlust.mp4" alt="simon" controls poster="assests/wanderlustpic.jpg">
</div>
<div class="secondSec" id="project-details">
<h2>🏠 WanderLust - Holidays Homes</h2><br>Web Application Major Project<br><br>
<p>I have successfully designed and implemented a <b>Full-Stack Airbnb clone</b>, which replicates the core
functionality of the Airbnb platform. This project encompasses various components, including a user-friendly
front-end interface, a dynamic back-end server, and a robust database system and also implemented Map API
features to locate the rental homes with <b>MVC Framework</b> and many more please read on github for more
details.</p>
<div class="buttons">
<button class="source-btn"><a
href="https://wanderlust-projectaffan.onrender.com/listings">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/WanderLust">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/nohate.mp4" alt="simon" controls poster="assests/nohate.png">
</div>
<div class="secondSec" id="project-details">
<h2>💬 Nohate – Full Stack Social Awareness Platform</h2><br>
<p>
Nohate is a responsive web app built entirely by myself using HTML, CSS, JavaScript, Locomotive JS, and GSAP
for smooth animations. It uses Firebase for real-time database and authentication. A live dashboard panel,
similar to a CRM, is integrated through H-Panel, allowing admins to monitor users, manage content, and
ensure a hate-free environment. The app promotes safe and respectful online interactions with a sleek UI and
real-time updates.
</p>
<div class="buttons">
<button class="source-btn"><a href="https://nohate.vercel.app/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/NoHate">Source</a></button>
</div>
</div>
</div>
<div style="margin-bottom: 140px;"></div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/Simon.mp4" alt="simon" controls poster="assests/simon_ss.png">
</div>
<div class="secondSec" id="project-details">
<h2>🎨 Simon Says Game</h2><br>
<p>I have made this Simon Says Game by using HTML, CSS AND JAVASCRIPT this is one of my Front-end Web
Development project, bascially here i developed my javaScript concepts and it is responsive for all devices
</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/Simon-Says_Game/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/Simon-Says_Game">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/weather_app.mp4" alt="simon" controls poster="assests/weatherapp.jpg">
</div>
<div class="secondSec" id="project-details">
<h2>🌈 WeatherApp</h2><br>
<p>I've developed a sleek and user-friendly weather app using <strong>React</strong>, from a reliable weather
API.It's provides accurate and up-to-date weather information, allowing users to effortlessly check
forecasts, current conditions. The intuitive design ensures a seamless user experience, making it easy for
anyone to stay informed about the weather with just a few clicks.</p>
<div class="buttons">
<button class="source-btn"><a href="https://weatherapp-affan.netlify.app/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/WeatherApp">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/amzon-clone.mp4" alt="simon" controls poster="assests/amazon.png">
</div>
<div class="secondSec" id="project-details">
<h2>🛒 Amazon</h2><br><p>Welcome to the Amazon Clone, a meticulously crafted
Front-end project that mirrors the renowned Amazon shopping experience. This endeavor represents a
harmonious blend of HTML, CSS, JavaScript, and Bootstrap, meticulously orchestrated to deliver a seamless
and responsive website design.</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/e-commerce/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/e-commerce">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<!-- video autoplay -->
<video loop src="assests/ProVideo/spotify.mp4" alt="" controls poster="assests/newspotfy.png">
</div>
<div class="secondSec">
<h2>🎧 Spotify Web Player</h2><br>
<p>I have made this Spotify Web Player by using HTML & CSS, this is one of my best Front-end Web Development
project, intention is to understand that how project built and works to enhance web developments skills and
one special is thing is that this is Responsive to all devices.</p>
<div class="buttons">
<button class="source-btn"><a href="https://spotify-delta.netlify.app/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/Spotify_Web_Player">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/CineFlex.mp4" alt="simon" controls poster="assests/screenshot.png">
</div>
<div class="secondSec" id="project-details">
<h2>🎬 CineFlex</h2><br>
<p>I crafted a CineFlex clone for my frontend project, leveraging HTML and CSS. The project mirrors the visual
style of CineFlex, demonstrating my proficiency in web development. It encompasses a thoughtfully designed
layout, responsive elements, and meticulous styling, showcasing my ability to recreate a popular interface
using fundamental web technologies.</p>
<div class="buttons" style="z-index: 10;">
<button class="source-btn"><a href="https://affancoder.github.io/CineFlex/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/CineFlex">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<!-- video autoplay -->
<video loop src="assests/ProVideo/spotify-harry.mp4" alt="" controls poster="assests/spo.jpg">
</div>
<div class="secondSec">
<h2>🎵 Music Web Player</h2><br>
<p>This Functional Music Player web project is developed using HTML, CSS & JavaScript that emulates the core
functionalities of the popular music streaming service, Spotify. It provides users with an immersive music
listening experience and a user-friendly interface. The project aims to showcase web development skills</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/Music_Player/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/Music_Player">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/disasater_mangement.mp4" alt="simon" controls
poster="assests/NationalPreparedness.png">
</div>
<div class="secondSec">
<h2>🌪️ Disaster Management</h2><br>
<p>This is one part of project which i have made for internal hackathon using <b>React</b> and
<b>Tailwindcss</b> in just two days along learning with Tailwindcss design for improvment of my Frontend Web
Development skills.
</p>
<div class="buttons">
<button class="source-btn"><a href="https://response-disaster.onrender.com/">Visit</a></button>
<button class="source-btn"><a
href="https://github.com/affancoder/Disaster_managemnet-Response">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/portfolio_website.mp4" alt="simon" controls poster="assests/hireweb.gif">
</div>
<div class="secondSec">
<h2>👨💻 Portfolio Website</h2><br>
<p>This is my self made personal Portfolio Website without took any guidence from any tutorial even not
inspiring from others design for improvment of my Frontend Web Development skills. Here, you can see i don't
use any Framework to bulid, website is build from core of my knowlegde</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/Portfolio_Website/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/Portfolio_Website">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/ExploreAway.mp4" alt="simon" controls poster="assests/thumb.jpg">
</div>
<div class="secondSec">
<h2>✈️ ExploreAway : Tourist Website</h2><br>
<p>Welcome to ExploreAway, a meticulously crafted tourist website designed to elevate your travel experience
to new heights! Developed with passion and precision, this platform is your go-to destination for
discovering the world's most captivating destinations, hidden gems, and unforgettable experiences.</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/ExploreAway/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/ExploreAway">Source</a></button>
</div>
</div>
</div>
<hr>
<div>
<h1 style="text-align: center; height: 130px;">Tiny Fun Projects</h1>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/railwayproject.mp4" alt="simon" controls poster="assests/rail.jpg">
</div>
<div class="secondSec">
<h2>🚂 Railway Reservation System</h2><br>
<p>I developed a railway reservation system frontend project in just 10 minutes using AI with ChatGPT. From
generating code snippets to fetching complete code, AI streamlined the entire process. The project is now
live, showcasing the power and efficiency of AI in rapid development.</p>
<div class="buttons">
<button class="source-btn"><a href="https://railway-reservation-system-grp3.vercel.app/">Visit</a></button>
<button class="source-btn"><a
href="https://github.com/affancoder/Railway-Reservation-System">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/bmw.mp4" alt="simon" controls poster="assests/bmw.jpg">
</div>
<div class="secondSec">
<h2>🚗 BMW Logo</h2><br>
<p>I have made this BMW logo design using HTML and CSS just for practiced bcoz i found this tiny project very
intersting and building concepts of border,various margin, nth-child curving the text and most important the
z-index to put text on the border of all these properties of CSS and using perfect container tags in HTML.
</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/BMW_Logo/">visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/BMW_Logo">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/audi_logo.mp4" alt="simon" controls poster="assests/audi.jpg">
</div>
<div class="secondSec">
<h2>🚘 Audi Logo</h2><br>
<p>I have made this AUDI logo design using HTML and CSS just for practiced bcoz i found this tiny project very
intersting and building concepts of border,various,z-index margin and many more tiny necessary details of
all these properties of CSS and the most important it is responsive to all devices</p>
<div class="buttons">
<button class="source-btn"><a href="https://affancoder.github.io/Audi_Logo/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/Audi_Logo">Source</a></button>
</div>
</div>
</div>
<div class="content">
<div class="firstSec">
<video loop src="assests/ProVideo/animated_login.mp4" alt="simon" controls poster="assests/ani.jpg">
</div>
<div class="secondSec">
<h2>✨ Animated Login Page</h2><br>
<p>I have made this Animated Login Page design using HTML and CSS just for practiced bcoz i found this tiny
project very intersting and building concepts of animation properties and values of CSS.</p>
<div class="buttons">
<button class="source-btn"><a href="https://aesthetic-login-page.netlify.app/">Visit</a></button>
<button class="source-btn"><a href="https://github.com/affancoder/Animated-Login_Page">Source</a></button>
</div>
</div>
</div>
</section>
</main>
<!-- SLIDE TO TOP -->
<button id="scrollToTop" class="fixed-btn scroll-top">
<i class="fa-solid fa-arrow-up"></i>
</button>
<!-- Chatbot Button -->
<section id="chatbotContainer">
<div class="chatbot-icon" onclick="toggleChatbot()">💬</div>
<!-- Chatbot Container -->
<div class="chatbot-container">
<div class="chatbot-header">
Chatbot
<span class="close-btn" onclick="toggleChatbot()">×</span>
</div>
<div class="chatbot-messages" id="chatbotMessages">
<div class="bot-message">Hello! How can I help you? 😊</div>
</div>
<div class="chatbot-input">
<input type="text" id="userInput" placeholder="Type a message..." onkeypress="handleKeyPress(event)" />
<button onclick="sendMessage()">➤</button>
</div>
</div>
</section>
<footer>
<div class="footer">
<div class="footer-container">
<!-- Branding Section with Social Media Links -->
<div class="footer-section footer-brand">
<h3>Affan's Developer Portfolio</h3>
<p>Turning ideas into reality, one line of code at a time.</p>
<div class="footer-social">
<ul>
<li><a href="https://www.instagram.com/mr_affan15/" target="_blank"><i
class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://github.com/affancoder" target="_blank"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.youtube.com/@mr_affan15/featured" target="_blank"><i
class="fa-brands fa-youtube"></i></a></li>
<li><a href="https://www.linkedin.com/in/mdaffanasghar/" target="_blank"><i
class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://www.hackerrank.com/profile/mdaffancoder" target="_blank"><i
class="fa-brands fa-hackerrank"></i></a></li>
<li><a href="https://discord.com/channels/@me" target="_blank"><i class="fa-brands fa-discord"></i></a>
</li>
</ul>
</div>
</div>
<!-- Quick Links Section -->
<div class="footer-section footer-links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
<li><a href="services.html"><i class="fa fa-cogs"></i> Services</a></li>
<li><a href="projects.html"><i class="fa fa-briefcase"></i> Projects</a></li>
<li><a href="about.html"><i class="fa fa-user"></i> About</a></li>
<li><a href="contact.html"><i class="fa fa-envelope"></i> Contact</a></li>
</ul>
</div>
<!-- Contact Information Section -->
<div class="footer-section footer-contact">
<h4>Contact</h4>
<p><i class="fa fa-phone"></i> +91 93398 28230</p>
<p><i class="fa fa-envelope"></i> affanasgar8@gmail.com</p>
<p><i class="fa fa-map-marker"></i> Kankinara, Kolkata, West Bengal</p>
</div>
</div>
<div class="footer-bottom">
<p>Copyright © affansportfolio.com | All rights reserved</p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<script src="app.js"></script>
</body>
</html>