-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (237 loc) · 13.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfolio</title>
<link rel="icon" href="./img/brandico.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand"><a class="navbar-item" href="/"><i class="icon is-large"><img src="./img/brandico.svg"> </i>
</a><a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true">
</span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</a></div>
<div class="navbar-menu is-shadowless" id="navMenu">
<div class="navbar-start"></div>
<!-- <div class="navbar-end"><a class="navbar-item has-text-weight-normal" href="/mentorship">Mentorship</a> -->
<div class="navbar-item"><a class="button is-primary is-outlined is-rounded has-text-weight-normal"
href="mailto:ajmalshahabudeen@gmail.com">Contact Me </a></div>
</div>
</div>
</div>
</nav>
<section class="hero is-white has-text-centered">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column">
<h1 class="title is-spaced is-size-1-desktop is-size-2-tablet is-size-3-mobile">Designer, Frontend Developer
& Backend Developer</h1>
<h2 class="subtitle is-size-4-tablet">I design and code beautifully simple things, and I love what I do.
</h2><img class="avatar" src="../img/mf-avatar.svg">
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container"><img class="is-bottom" src="../img/hero-devices.svg"></div>
</div>
</section>
<section class="section is-medium is-primary has-text-centered is-long">
<div class="container">
<div class="columns is-centered">
<div class="column is-three-fifths">
<h1 class="title is-spaced is-size-3-desktop is-size-4-mobile">Hi, I’m Ajmal. Nice to meet you.</h1>
<h2 class="subtitle is-size-5-desktop has-text-weight-normal">Since beginning my journey as a freelance
developer over 2 years ago, I've done remote work for agencies, consulted for startups, and collaborated
with talented people to create digital products for both business and consumer use. I'm quietly confident,
naturally curious, and perpetually working on improving my chops one design problem at a time.</h2>
</div>
</div>
</div>
</section>
<section class="section skills has-text-centered">
<div class="container is-narrow">
<div class="box">
<div class="content">
<div class="columns is-centered">
<div class="column"><span class="fa-stack fa-2x"><i
class="fa-solid fa-circle fa-stack-2x has-text-success"></i><i
class="fa-light fa-layer-plus fa-stack-1x has-text-dark"></i></span>
<h1 class="title is-size-4 is-spaced">Designer</h1>
<p>I value simple content structure, clean design patterns, and thoughtful interactions.</p>
<p class="list-title has-text-primary has-text-weight-normal">Things I enjoy designing:</p>
<p>UX, UI, Web, Apps, Logos</p>
<p class="list-title has-text-primary has-text-weight-normal">Design Tools:</p>
<ul>
<li>Affinity Designer</li>
<li>Figma</li>
<li>Font Awesome</li>
<li>Pen & Paper</li>
<li>Sketch</li>
<li>Webflow</li>
</ul>
</div>
<div class="column"><span class="fa-stack fa-2x"><i
class="fa-solid fa-circle fa-stack-2x has-text-success"></i><i
class="fa-light fa-square-terminal fa-stack-1x has-text-dark"></i></span>
<h1 class="title is-size-4 is-spaced">Frontend Developer</h1>
<p>I like to code things from scratch, and enjoy bringing ideas to life in the browser.</p>
<p class="list-title has-text-primary has-text-weight-normal">Languages I speak:</p>
<p>HTML, Pug, Slim, CSS, Sass, Git</p>
<p class="list-title has-text-primary has-text-weight-normal">Dev Tools:</p>
<ul>
<li>Atom</li>
<li>Bitbucket</li>
<li>Bootstrap</li>
<li>Bulma</li>
<li>Codekit</li>
<li>Github</li>
<li>Surge</li>
<li>Terminal</li>
<li>VsCode</li>
</ul>
</div>
<div class="column"><span class="fa-stack fa-2x"><i
class="fa-solid fa-circle fa-stack-2x has-text-success"></i><i
class="fa-light fa-book fa-stack-1x has-text-dark"></i></span>
<h1 class="title is-size-4 is-spaced">Backend Developer</h1>
<p>I care about the backbone of a system, and creating a scalable and efficient system.</p>
<p class="list-title has-text-primary has-text-weight-normal">Languages I write:</p>
<p>Python(Django), Javascript(NodeJS) </p>
<p class="list-title has-text-primary has-text-weight-normal">Deployment Tools:</p>
<ul>
<li>Ansible</li>
<li>AWS</li>
<li>Azure</li>
<li>Docker</li>
<li>Google Cloud</li>
<li>Linux</li>
<li>Windows</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section clients is-medium is-white has-text-centered has-border-top">
<div class="container is-narrow">
<div class="columns is-centered">
<div class="column is-half">
<h1 class="title is-size-3-desktop is-size-4-tablet is-size-5-mobile">I'm proud to have collaborated with some
awesome companies:</h1>
</div>
</div>
<div class="client-grid">
<div class="columns is-multiline is-mobile">
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/brototype.svg"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/Avodha.com.svg"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="./img/logos/Gtech.svg"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/domain7.svg"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/designlab.png"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/chronicled.svg"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/bldrs.png"></figure>
</div>
<div class="column is-half-mobile is-one-quarter-tablet">
<figure class="image is-2x1"><img class="client-logo" src="../img/logos/serpmetrics.svg"></figure>
</div>
</div>
</div>
</div>
</section>
<section class="section call-to-action is-primary has-text-centered">
<div class="container is-narrow">
<div class="box">
<div class="columns level">
<div class="column level-item">
<h1 class="title">Start a project</h1>
</div>
<div class="column level-item">
<p>Interested in working together? We should queue up a time to chat. I’ll buy the coffee.</p>
</div>
<div class="column level-item"><a
class="button is-success is-outlined is-rounded is-medium has-text-weight-normal"
href="mailto:ajmalshahabudeen@gmail.com"><span class="icon"><i
class="fa-regular fa-hand-horns"></i></span><span>Let's do this</span></a></div>
</div>
</div>
</div>
</section>
<footer class="section is-primary is-small has-text-centered">
<div class="container is-narrow"><a class="logo has-text-white" href="/"><i class="fak fa-mf-logo fa-4x"></i></a>
<div class="columns is-centered">
<div class="column is-one-third">
<h1 class="title is-size-4-touch has-text-weight-normal">Living, learning, & leveling up one day at a
time.</h1>
</div>
</div>
<div class="social-icons">
<p class="field">
<a class="button is-medium" href="https://twitter.com/ajmal_pro" target="_blank"><span
class="icon is-small"><svg class="svg-inline--fa fa-twitter fa-fw" aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor"
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
</path>
</svg><i class="fab fa-twitter fa-fw"></i></span></a>
<!-- <a class="button is-medium" href="#" target="_blank"><span
class="icon is-small"><i class="fab fa-dribbble fa-fw"></i></span></a> -->
<a class="button is-medium" href="https://linkedin.com/in/ajmalshahabudeen/" target="_blank"><span
class="icon is-small"><img height="32" width="32" src="https://cdn.simpleicons.org/linkedin/ffff"><i class="fab fa-linkedin-in fa-fw"></i></span></a>
<!-- <a class="button is-medium" href="#" target="_blank"><span
class="icon is-small"><svg class="svg-inline--fa fa-linkedin-in fa-fw" aria-hidden="true"
focusable="false" data-prefix="fab" data-icon="linkedin-in" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
</path>
</svg><i class="fak fa-indie-hackers fa-fw"></i></span></a> -->
<a class="button is-medium" href="https://github.com/ajmalshahabudeen" target="_blank"><span
class="icon is-small"><img height="32" width="32" src="https://cdn.simpleicons.org/github/ffff" />
<i class="fab fa-product-hunt fa-fw"></i></span></a>
<a class="button is-medium" href="mailto:ajmalshahabudeen@gmail.com"><span class="icon is-small"><svg
class="svg-inline--fa fa-envelope fa-fw" aria-hidden="true" focusable="false" data-prefix="far"
data-icon="envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg="">
<path fill="currentColor"
d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z">
</path>
</svg><i class="far fa-envelope fa-fw"></i></span></a>
</p>
</div>
<div class="copyright">Handcrafted by me<span class="icon has-white-text" style="vertical-align:middle;"><i
class="far fa-copyright"></i></span>twentytwentythree</div>
<div class="made-by-bulma"><a href="https://bulma.io"><img
src="https://bulma.io/images/made-with-bulma--white.png" alt="Made with Bulma" width="163" height="31"></a>
</div>
</div>
</footer>
<script src="./src.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous">
</script>
</body>
</html>
<!-- <img height="32" width="32" src="https://unpkg.com/simple-icons@v8/icons/[ICON SLUG].svg" /> -->