-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (345 loc) · 19.7 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
<!doctype html>
<html data-theme="light" lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CSSE420M1H"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag()
{
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-CSSE420M1H');
</script>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<meta content="en" http-equiv="Content-Language">
<meta content="index, follow" name="robots">
<meta content="I'm Ahmed Kinan Ghbash, a passionate web developer showcasing my skills and projects. Explore my portfolio to discover my expertise in HTML, CSS, JavaScript, React and more. Learn about my journey and passion for creating innovative web experiences."
name="description"/>
<meta content="web developer, portfolio, web design, web development, Ahmed Kinan Ghbash, HTML, CSS, JavaScript, React, front-end development, programming, web projects, developer portfolio, web developer portfolio"
name="keywords"/>
<meta content="Ahmed Kinan Ghbash" name="author">
<!-- Open Graph -->
<meta content="Ahmed Kinan Ghbash | A web development enthusiast." property="og:title">
<meta content="I'm Ahmed Kinan Ghbash, a passionate web developer showcasing my skills and projects. Explore my portfolio to discover my expertise in HTML, CSS, JavaScript, React and more. Learn about my journey and passion for creating innovative web experiences."
property="og:description">
<meta content="https://kinangh98.github.io/" property="og:url">
<meta content="website" property="og:type">
<meta content="https://kinangh98.github.io/pages-screenshots/index-social-media-image.jpg" property="og:image">
<!-- Twitter -->
<meta content="summary_large_image" name="twitter:card">
<meta content="Ahmed Kinan Ghbash | A web development enthusiast." name="twitter:title">
<meta content="I'm Ahmed Kinan Ghbash, a passionate web developer showcasing my skills and projects. Explore my portfolio to discover my expertise in HTML, CSS, JavaScript, React and more. Learn about my journey and passion for creating innovative web experiences."
name="twitter:description">
<meta content="https://kinangh98.github.io/pages-screenshots/index-social-media-image.jpg" name="twitter:image">
<meta content="https://kinangh98.github.io/" name="twitter:url">
<title>Ahmed Kinan Ghbash | A web development enthusiast.</title>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/8955b6fb14.js"></script>
<link href="styles.css" rel="stylesheet">
<link href="/styles/header-styles.css" rel="stylesheet">
<link href="/styles/hero-styles.css" rel="stylesheet">
<link href="/styles/introduction-styles.css" rel="stylesheet">
<link href="/styles/card-styles.css" rel="stylesheet">
<link href="/styles/footer-styles.css" rel="stylesheet">
<link href="/styles/theme-select-styles.css" rel="stylesheet">
<link href="/styles/buttons-styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:[email protected]&display=swap" rel="stylesheet">
<!-- Awake the chat-app and chart-hive websocket servers cuz it will take some time. -->
<script>
window.addEventListener('load', () =>
{
new WebSocket('wss://chat-app-websocket-server.onrender.com/');
new WebSocket('wss://chart-hive-server.onrender.com/');
});
</script>
</head>
<body>
<!-- Header -->
<header class="header fade-in">
<div class="mobile-header">
<a href="index.html" style="line-height: 0;">
<img alt="Website logo." class="logo"
src="images/my-logo.png"
width="45px"></a>
<button class="circularBtn" id="hamburgerBtn"><i
class="fa-solid fa-bars fa-flip-both"></i>
</button>
</div>
<div class="header-links">
<a class="header-link" href="#projects-header" onclick="closeSideBarOnMobile()">Projects</a>
<a class="header-link" href="mailto:[email protected]">Contact</a>
<a class="header-link"
href="https://www.canva.com/design/DAEQ9fb79b8/V5nJWy88hmShnBnUfleW2A/edit?utm_content=DAEQ9fb79b8&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton">About</a>
<div class="themeSelectWrapper">
<button class="circularBtn" id="themeButton" onclick="toggleSelectMenu()">
<i class="fa-solid fa-sun" id="themeIcon"></i>
</button>
<div class="themeOptions" id="themeOptions">
<div class="themeOption" data-icon="fa-solid fa-wand-magic-sparkles fa-shake" data-value="os"
onclick="selectTheme('os')">
<i class="fa-solid fa-wand-magic-sparkles"></i> System
</div>
<div class="themeOption" data-icon="fa-solid fa-sun fa-beat" data-value="light"
onclick="selectTheme('light')">
<i class="fa-solid fa-sun"></i> Light
</div>
<div class="themeOption" data-icon="fa-solid fa-moon fa-fade" data-value="dark"
onclick="selectTheme('dark')">
<i class="fa-solid fa-moon"></i> Dark
</div>
</div>
</div>
<div class="sideBarCloser" onpointerdown="toggleHamburgerMenu()"></div>
</div>
<div class="syrian-flag">
<img alt="The Syrian revolution flag." src="images/syrian-flag.svg"
title="Freedom has prevailed! ✊">
</div>
</header>
<!-- Hero Section (Bio)-->
<section style="display: flex; justify-content: center ; position: relative">
<div class="bio-container fade-in">
<div class="bio-description">
<h1>Hello I'm</h1>
<h1 style="color: #765995">Ahmed Kinan Ghbash</h1>
<h1>Front-End Developer</h1>
<p style="text-wrap: balance">
I specialize in crafting interactive, user-focused web experiences.
With a passion for detail and design, I bring ideas to life through clean and responsive code.
</p>
<div class="bio-buttons">
<a class="bio-cta contact-btn" href="mailto:[email protected]">Get In Touch</a>
<a class="bio-cta bio-cta-outline" href="#projects-header">View My Work</a>
</div>
</div>
<div class="profile-pic-container">
<svg viewBox="0 0 573.75 527.31">
<defs>
<style>
.cls-4 {
clip-path: url(#clip-path);
}</style>
<clipPath id="clip-path" transform="translate(-14.54 -0.79)">
<path class="cls-1"
d="M104.59,423.4c58.48,21.87,360.8,9,412.61-12.63s-96.84-71-101.75-117.19,105.56-110,72.28-160C381.85-25.54,152.54,96.64,99,121s66.43,108.18,67.36,158.59-120.22,122-61.75,143.85,360.8,9,412.61-12.63"/>
</clipPath>
</defs>
<path class="profile-pic-background-1"
d="M517.2,410.77c51.81-21.64-96.84-71-101.75-117.19s125-131.22,72.28-160S152.54,96.64,99,121s66.43,108.18,67.36,158.59-120.22,122-61.75,143.85c10.33,3.86,30.67,6.41,53.46,6.24,106.72-.78,316.49-1.06,359.15-18.87"
transform="translate(-14.54 -0.79)"/>
<path class="profile-pic-background-1" d="M104.59,423.4" transform="translate(-14.54 -0.79)"/>
<path class="profile-pic-background-2"
d="M362.6,3.26C296.73,26.58,46.8,255.09,17.94,310.91s134.09-8.8,171.54,27.28-12.79,202.44,53.13,189.16S556.56,317.9,585,258.51s-134.77-45-171.84-87.5S428.47-20.06,362.6,3.26,46.8,255.09,17.94,310.91"
transform="translate(-14.54 -0.79)"/>
<g class="cls-4">
<image transform="translate(99.31 61.63) scale(0.37)" xlink:href="./images/index-profile-pic.webp"/>
</g>
</svg>
</div>
</div>
<!-- Flying Shapes Decoration -->
<div class="flying-shapes">
<svg class="flying-shape shape-1" height="100" width="100">
<circle cx="50" cy="50" fill="rgba(118, 89, 149, 0.8)" r="5"/>
</svg>
<svg class="flying-shape shape-2" height="80" width="80">
<circle cx="40" cy="15" fill="rgba(118, 89, 149, 0.6)" r="15"/>
</svg>
<svg class="flying-shape shape-3" height="120" width="120">
<circle cx="60" cy="15" fill="rgba(118, 89, 149, 0.6)" r="5"/>
</svg>
<svg class="flying-shape shape-4" height="120" width="120">
<circle cx="50" cy="50" fill="rgba(118, 89, 149, 0.7)" r="5"/>
</svg>
<svg class="flying-shape shape-5" height="120" width="120">
<circle cx="50" cy="50" fill="rgba(118, 89, 149, 0.6)" r="10"/>
</svg>
<svg class="flying-shape shape-6" height="100" width="100">
<polygon fill="rgba(118, 89, 149, 0.6)" points="50,15 65,35 55,65 45,65 35,35"/>
</svg>
<svg class="flying-shape shape-7" height="120" width="120">
<circle cx="50" cy="50" fill="rgba(118, 89, 149, 0.3)" r="5"/>
</svg>
<svg class="flying-shape shape-8" height="100" width="100">
<line stroke="rgba(118, 89, 149, 0.7)" stroke-width="3" x1="10" x2="90" y1="10" y2="90"/>
</svg>
<svg class="flying-shape shape-9" height="120" width="120">
<circle cx="50" cy="50" fill="rgba(118, 89, 149, 0.4)" r="12"/>
</svg>
<svg class="flying-shape shape-10" height="100" width="100">
<polygon fill="rgba(118, 89, 149, 0.6)" points="50,15 65,35 55,65 45,65 35,35"/>
</svg>
</div>
</section>
<!-- Website Introduction-->
<section class="website-introduction fade-in">
<div class="website-introduction-cards">
<img alt="small-project-image" src="react-apps/chat-app/social-media-image.jpg">
<img alt="small-project-image" src="https://elite-rentals.vercel.app/images/social-media-image.jpg">
<img alt="small-project-image" src="pages-screenshots/green-login-page-social-media-image.jpg">
<img alt="small-project-image" src="images/intro-cards-images/react.jpg">
<img alt="small-project-image" src="pages-screenshots/mini-math-social-media-image.jpg">
<img alt="small-project-image" src="images/intro-cards-images/bootstrap.jpg">
</div>
<div style="text-align: center">
<h1 style="margin: 0; line-height: 2.4rem">Welcome To My Portfolio!</h1>
<p>Here, you can explore my latest projects, showcasing my skills in front-end development
and my journey in mastering new technologies.</p>
</div>
<div class="website-introduction-cards">
<img alt="small-project-image" src="react-apps/cart-ninja/social-media-image.jpg">
<img alt="small-project-image" src="images/intro-cards-images/font-awesome.png">
<img alt="small-project-image" src="react-apps/flex/social-media-image.jpg">
<img alt="small-project-image" src="react-apps/flow-note/social-media-image.jpg">
<img alt="small-project-image" src="images/intro-cards-images/supabase.webp">
<img alt="small-project-image" src="react-apps/messenger/social-media-image.jpg">
</div>
</section>
<h1 class="fade-in" id="projects-header">My Projects</h1>
<section class="cards-container">
<!-- Template Definition -->
<template id="card-template">
<div class="card fade-in" onclick="location.href='URL';">
<div class="card-image-container">
<img alt="IMAGE_ALT" class="card-image" src="IMAGE_SRC">
</div>
<div class="card-lower-part">
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<path d="M28,3.5H4.7C3.8,3.5,3,3.4,2.2,3C1.1,2.4,0.3,1.4,0.1,0H0v13.6v13.5V28c0,1.1,0.9,2,2,2h1.5h16.8H28 c1.1,0,2-0.9,2-2V5.5C30,4.4,29.1,3.5,28,3.5z"/>
</svg>
<h2 class="card-title">TITLE</h2>
<div class="card-tags"></div>
<p class="card-desc">DESCRIPTION</p>
<div class="card-links">
<a class="card-src-link" href="URL">Source Code</a>
<a class="card-cta" href="URL">View Page</a>
</div>
</div>
</div>
</template>
<!-- Elite Rentals-->
<card-component
desc="Elite Rentals is a car rental platform designed to provide a seamless experience for both administrators and customers. It features an intuitive UI, robust authentication, and dynamic pages for managing cars, bookings, and more."
img-alt="A screenshot of Elite Rentals, a car rentals app."
img-src="https://elite-rentals.vercel.app/images/social-media-image.jpg"
src-url="https://github.com/KinanGH98/elite-rentals"
tags="Next.js 15, TypeScript, Supabase, Stripe, Tailwind CSS, DaisyUI, Cloudflare Turnstile, Framer Motion, FilePond, Leaflet"
title="Elite Rentals"
url="https://elite-rentals.vercel.app/">
</card-component>
<!-- Chart Hive-->
<card-component
desc="Chart Hive is a robust data visualization tool that utilizes a custom API to generate dynamic, real-time charts using mock data. With customizable layouts and secure user authentication, Chart Hive provides a flexible and efficient solution for data-driven insights."
img-alt="A screenshot of Chart Hive, an online dashboard app."
img-src="https://kinangh98.github.io/chart-hive/social-media-image.jpg"
src-url="https://github.com/KinanGH98/chart-hive"
tags="Tremor Charts, Supabase Auth, Cloud Saved Preferences, Tailwind CSS, WebSocket, Node.js, Cloudflare Turnstile, Router, Framer Motion, React, Context"
title="Chart Hive"
url="https://kinangh98.github.io/chart-hive/">
</card-component>
<!-- Cart Ninja-->
<card-component
desc="An e-commerce platform offering easy product browsing, secure checkout with reCaptcha, and order confirmation emails. Store owners can manage inventory through a dedicated admin page."
img-alt="A screenshot of Cart Ninja, an online e-commerce app."
img-src="react-apps/cart-ninja/social-media-image.jpg"
src-url="https://github.com/KinanGH98/cart-ninja"
tags="Supabase, Bootstrap, Email Sending, Router, reCAPTCHA, Toasts, Search, React, Context"
title="Cart Ninja"
url="react-apps/cart-ninja/index.html">
</card-component>
<!-- Flex-->
<card-component
desc="Online real-time code editor for HTML, CSS, and JavaScript. Start building today."
img-alt="A screenshot of Flex, an online code editor app."
img-src="react-apps/flex/social-media-image.jpg"
src-url="https://github.com/KinanGH98/flex"
tags="React, Resizable Panes, Custom Hooks, Context"
title="Flex"
url="react-apps/flex/index.html">
</card-component>
<!-- To Do List-->
<card-component
desc="Don't let ideas fade. Capture notes, organize & keep thoughts flowing in a quick & playful way."
img-alt="A screenshot of Flow Note, a note-taking app."
img-src="react-apps/flow-note/social-media-image.jpg"
src-url="https://github.com/KinanGH98/flow-note"
tags="React, Local Storage, Framer Motion"
title="Flow Note"
url="react-apps/flow-note/index.html">
</card-component>
<!-- Chaty-->
<card-component
desc="Connect in real-time! Chat instantly with others or yourself in multiple tabs, (connecting to server might take a while)."
img-alt="A screenshot of Chaty, a real-time chat app."
img-src="react-apps/chat-app/social-media-image.jpg"
src-url="https://github.com/KinanGH98/chaty"
tags="React, WebSocket, Node.JS"
title="Chaty"
url="react-apps/chat-app/index.html">
</card-component>
<!-- Facebook Messenger Clone-->
<card-component desc="UI replica of the Facebook Messenger mobile app (Mockup)."
img-alt="A screenshot of a calculator screen."
img-src="react-apps/messenger/social-media-image.jpg"
src-url="https://github.com/KinanGH98/facebook-messenger-clone"
tags="React, Mockup, Router"
title="Facebook Messenger Clone"
url="react-apps/messenger/index.html">
</card-component>
<!-- Calculator-->
<card-component desc="Unlock basic math magic! This JavaScript calculator handles basic arithmetic."
img-alt="A screenshot of a calculator screen."
img-src="pages-screenshots/mini-math-social-media-image.jpg"
src-url="https://github.com/KinanGH98/KinanGH98.github.io/tree/main/calculator-page"
tags="Vanilla JS, Basic"
title="MiniMath"
url="calculator-page/calculator.html">
</card-component>
<!-- Green Login Page-->
<card-component desc="A verdant UI concept for a calm login experience. (UI prototype)"
img-alt="A screenshot of green sign in page."
img-src="pages-screenshots/green-login-page-social-media-image.jpg"
src-url="https://github.com/KinanGH98/KinanGH98.github.io/blob/main/green-login-page.html"
tags="Basic, Prototype"
title="Tranquil Login"
url="green-login-page.html">
</card-component>
</section>
<!-- CTA Section -->
<section class="cta-section fade-in">
<h1 style="margin: 0">Got a Project?</h1>
<p>Let's turn your ideas into reality. Reach out to get started!</p>
<a class="bio-cta contact-btn" href="mailto:[email protected]">Contact Me</a>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-links fade-in">
<a class="footer-link" href="mailto:[email protected]"><i class="fa-solid fa-envelope"></i></a>
<a class="footer-link" href="https://facebook.com/ahmedkinan.ghbash"><i
class="fa-brands fa-facebook"></i></a>
<a class="footer-link" href="https://github.com/KinanGH98/"><i class="fa-brands fa-github"></i></a>
<a class="footer-link" href="https://www.linkedin.com/in/kinan-ghbash/"><i
class="fa-brands fa-linkedin"></i></a>
</div>
<div class="footer-text fade-in">
<a href="index.html">
<img alt="Website logo." class="logo-full"
src="images/my-logo-full.svg"
width="300px"></a>
<br><br>
Made with HTML, CSS, and a sprinkle of JavaScript.
<br><br>
© Ahmed Kinan Ghbash 2024
</div>
</footer>
</body>
<script src="scripts/index-script.js"></script>
<script src="scripts/theme-manager.js"></script>
<script src="scripts/fade-in-manager.js"></script>
</html>