-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
364 lines (350 loc) · 15.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My Portfolio" />
<link
href="https://api.fontshare.com/v2/css?f[]=general-sans@500,600,400,700&display=swap"
rel="stylesheet"
/>
<title>EK | Portfolio</title>
</head>
<body>
<header class="header container">
<nav>
<ul class="header__menu">
<!-- Naming convention: Pam -->
<li>
<a class="header__link" href="#about">About</a>
</li>
<li>
<a class="header__link" href="#featured">Work</a>
</li>
<li>
<a class="header__link" href="#contact">Contact</a>
</li>
<li class="header__line"></li>
<li>
<button id="theme-toggle" class="header__sun">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
/>
</svg>
</button>
</li>
<li>
<a class="header_resume btn" href="#">Resume</a>
</li>
</ul>
<button class="header__bars">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clip-rule="evenodd"
/>
</svg>
</button>
</nav>
</header>
<!-- Mobile Navigation -->
<div class="mobile-nav">
<nav>
<ul class="mobile-nav__menu">
<li><a class="mobile-nav__link" href="#about">About</a></li>
<li><a class="mobile-nav__link" href="#featured">Work</a></li>
<li><a class="mobile-nav__link" href="#contact">Contact</a></li>
<li class="mobile-nav__line"></li>
<li>
<button id="theme-toggle" class="mobile-nav__sun">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
/>
</svg>
</button>
</li>
<li>
<a class="mobile-nav__btn btn" href="#">Resume</a>
</li>
</ul>
</nav>
</div>
<!-- End of Mobile Navigation -->
<main>
<section class="hero container">
<img class="hero__img" src="/hero.png" alt="Profile Picture" />
<h2 class="hero__subtitle">Hi, I'm EK 👋</h2>
<h1 class="hero__title">
Front-End <br />
Web Developer.
</h1>
<p class="hero__description">
A passionate <strong>Frontend / Fullstack-Jamstack</strong> web
developer and <strong>UI/UX</strong>
enthusiast specialized in building stunning pixel-perfect interactive
websites/applications.
</p>
<a class="hero__btn btn" href="#ReachOut">Reach out</a>
</section>
<section id="about" class="about container section">
<div class="about__content">
<h2 class="about__title">About</h2>
<p class="about__description">
Hello there! I'm EK Nayeem, a
<strong>Frontend / Fullstack-Jamstack</strong> web developer. I wake
up in the morning, grab a cup of timmies coffee, open up my laptop
and build things that live on the web all day, everyday.
</p>
<p class="about__description">
People who know me say I'm obsessed, that's fair, I am very driven
and love learning new things.
</p>
<hr class="about__hr" />
<h3 class="about__subtitle">Technologies</h3>
<div class="about__ul-container">
<ul class="about__ul">
<li class="about__list">JavaScript(ES6+)</li>
<li class="about__list">CSS</li>
<li class="about__list">HTML</li>
</ul>
<ul class="about__ul">
<li class="about__list">ReactJS</li>
<li class="about__list">NextJS</li>
<li class="about__list">TailwindCSS</li>
</ul>
</div>
</div>
<div class="about__img-wrapper">
<img class="about__img" src="/billu.jpg" alt="Profile Picture" />
</div>
</section>
<section id="featured" class="featured container section">
<h3 class="featured__subtitle">Featured Project by STD.</h3>
<div class="featured__wrapper">
<h2 class="featured__title">Slaying The Dragon</h2>
<a class="featured__link" href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M19.902 4.098a3.75 3.75 0 00-5.304 0l-4.5 4.5a3.75 3.75 0 001.035 6.037.75.75 0 01-.646 1.353 5.25 5.25 0 01-1.449-8.45l4.5-4.5a5.25 5.25 0 117.424 7.424l-1.757 1.757a.75.75 0 11-1.06-1.06l1.757-1.757a3.75 3.75 0 000-5.304zm-7.389 4.267a.75.75 0 011-.353 5.25 5.25 0 011.449 8.45l-4.5 4.5a5.25 5.25 0 11-7.424-7.424l1.757-1.757a.75.75 0 111.06 1.06l-1.757 1.757a3.75 3.75 0 105.304 5.304l4.5-4.5a3.75 3.75 0 00-1.035-6.037.75.75 0 01-.354-1z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<p class="featured__description">
Cillum voluptate tempor cillum culpa cupidatat labore voluptate
ullamco voluptate culpa sunt nulla non. Ad cupidatat dolore quis amet
pariatur consectetur ullamco. Officia quis id velit duis cupidatat
sunt deserunt do aliquip nulla laboris.
</p>
<div class="featured__info-container">
<div>
<h3 class="featured__label">Tech Stack</h3>
<ul class="featured__tech-stack">
<li class="featured__info">TailwindCSS</li>
<li class="featured__info">ReackJS</li>
<li class="featured__info">React-Hook-Form</li>
<li class="featured__info">NextJS</li>
<li class="featured__info">Axios</li>
<li class="featured__info">Superbase</li>
<li class="featured__info">Stripe</li>
</ul>
</div>
<div>
<h3 class="featured__label">Project Type</h3>
<p class="featured__info">Fullstack-Jamstack</p>
</div>
<div>
<h3 class="featured__label">Timeline</h3>
<p class="featured__info">December 2022 - Present</p>
</div>
</div>
<div class="featured__img-container">
<div class="featured__img-wrapper">
<img src="/slayingthedragon.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="/courses.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="/features.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="/pricing.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="faq.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="blog.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="signin.png" alt="#" />
</div>
<div class="featured__img-wrapper">
<img src="app.png" alt="#" />
</div>
</div>
</section>
<section class="work container section">
<h3 class="work__title">Projects</h3>
<p class="work__description">
Mollit pariatur tempor nisi dolor non consequat magna cupidatat
reprehenderit. Aliquip excepteur ullamco aliquip magna est et commodo
deserunt ipsum.
</p>
<div class="work__container">
<!-- Project 1 -->
<h3 class="work__project-title">Wax Motif</h3>
<div class="work__img-wrapper work__image1">
<img src="/waxmoney.png" alt="wax-motif website" />
</div>
<div class="work__project work__content1">
<h3 class="work__project-subtitle">Wax Motif</h3>
<p class="work__project-description-1">
Labore magna ut non labore Lorem nisi culpa sint et quis sint.
Enim pariatur deserunt do ad exercitation.
</p>
<p class="work__project-description-2">
Ea ut non cupidatat consequat sint elit ipsum culpa dolor cillum
commodo. Do esse excepteur cillum deserunt duis incididunt. Eu
tempor ullamco aliqua consectetur incididunt anim dolor sunt
laboris adipisicing cupidatat sint.
</p>
<a class="work__project-btn btn" href="#">Website</a>
</div>
<!-- Project 2 -->
<h3 class="work__project-title">Draze Force</h3>
<div class="work__img-wrapper work__image2">
<img src="/drazeforce.png" alt="draze-force website" />
</div>
<div class="work__project work__content2">
<h3 class="work__project-subtitle">Draze Force</h3>
<p class="work__project-description-1">
Sunt sint labore officia irure. Dolore pariatur nisi deserunt sunt
exercitation excepteur do reprehenderit fugiat Lorem sint ut.
</p>
<p class="work__project-description-2">
Mollit ipsum mollit magna occaecat eiusmod sint fugiat est non
adipisicing esse fugiat deserunt minim. Enim occaecat velit eu non
amet nostrud officia duis.
</p>
<a class="work__project-btn btn" href="#">Website</a>
</div>
<!-- Project 3 -->
<h3 class="work__project-title">Artren</h3>
<div class="work__img-wrapper work__image3">
<img src="/artren.png" alt="draze-force website" />
</div>
<div class="work__project work__content3">
<h3 class="work__project-subtitle">Artren</h3>
<p class="work__project-description-1">
Aliquip eu ad est reprehenderit veniam irure exercitation in velit
enim ipsum.
</p>
<p class="work__project-description-2">
Elit est amet quis incididunt officia velit eiusmod do amet. Sint
non qui nulla sit ex cillum non pariatur velit proident ut aliqua
fugiat incididunt id minim.
</p>
<a class="work__project-btn btn" href="#">Website</a>
</div>
<!-- Project 4 -->
<h3 class="work__project-title">Platform Pro</h3>
<div class="work__img-wrapper work__image4">
<img src="/platformpro.png" alt="draze-force website" />
</div>
<div class="work__project work__content4">
<h3 class="work__project-subtitle">Platform Pro</h3>
<p class="work__project-description-1">
Labore magna ut non labore Lorem nisi culpa sint et quis sint.
Enim pariatur deserunt do ad exercitation.
</p>
<p class="work__project-description-2">
Ea ut non cupidatat consequat sint elit ipsum culpa dolor cillum
commodo. Do esse excepteur cillum deserunt duis incididunt. Eu
tempor ullamco aliqua consectetur incididunt anim dolor sunt
laboris adipisicing cupidatat sint.
</p>
<a class="work__project-btn btn" href="#">Website</a>
</div>
<!-- Project 5 -->
<h3 class="work__project-title">Wallys Vegan</h3>
<div class="work__img-wrapper work__image5">
<img src="/wallysvegan.png" alt="draze-force website" />
</div>
<div class="work__project work__content5">
<h3 class="work__project-subtitle">Wallys Vegan</h3>
<p class="work__project-description-1">
Sunt sint labore officia irure. Dolore pariatur nisi deserunt sunt
exercitation excepteur do reprehenderit fugiat Lorem sint ut.
</p>
<p class="work__project-description-2">
Mollit ipsum mollit magna occaecat eiusmod sint fugiat est non
adipisicing esse fugiat deserunt minim. Enim occaecat velit eu non
amet nostrud officia duis.
</p>
<a class="work__project-btn btn" href="#">Website</a>
</div>
<!-- Project 6 -->
<h3 class="work__project-title">Old Portfolio</h3>
<div class="work__img-wrapper work__image6">
<img src="/portfolio.png" alt="draze-force website" />
</div>
<div class="work__project work__content6">
<h3 class="work__project-subtitle">Old Portfolio</h3>
<p class="work__project-description-1">
Aliquip eu ad est reprehenderit veniam irure exercitation in velit
enim ipsum.
</p>
<p class="work__project-description-2">
Elit est amet quis incididunt officia velit eiusmod do amet. Sint
non qui nulla sit ex cillum non pariatur velit proident ut aliqua
fugiat incididunt id minim.
</p>
<a class="work__project-btn btn" href="#">Website</a>
</div>
</div>
</section>
<section id="contact" class="contact container section">
<h2 class="contact__title">Get In Contact</h2>
<p class="contact__description">
Whether you are starting a project, have business inquiries or just
want to say hi, my inbox is always open so feel free to reach out and
I will get back to you as soon as possible.
</p>
<a
class="contact__btn btn"
href="mailto:ek.nayeem.dev@gmail.com"
target="_blank"
>Reach Out</a
>
</section>
</main>
<footer class="footer container section">
<h3 class="footer__title">~ EK Nayeem ~</h3>
</footer>
<script type="module" src="./src/main.js"></script>
</body>
</html>