-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
404 lines (397 loc) · 14.5 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
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="author" content="Bharati Subramanian" />
<meta name="description" content="Portfolio website of Bharati Subramanian" />
<meta name="keywords" content="portfolio, personal website, Bharati Subramanian" />
<link rel="stylesheet" href="./css/styles.css" />
<title>Bharati Subramanian</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700&family=Ubuntu&display=swap"
rel="stylesheet"
/>
<link
rel="shortcut icon"
href="./images/favicon_io/favicon.ico"
type="image/x-icon"
/>
<script
src="https://kit.fontawesome.com/8af1815f18.js"
crossorigin="anonymous"
></script>
</head>
<body class="light-theme">
<div id="body-wrapper">
<!-- HEADER -->
<header class="header container">
<!-- NAVBAR -->
<nav
class="navbar flex-container flex-row justify-space-between align-center"
>
<!-- LOGO -->
<a href="/" class="logo-link"
><h1
class="logo flex-container flex-row justify-center align-center"
>
BS
</h1></a
>
<button class="display-none navlinks-toggle">
<span class="hamburger"></span>
</button>
<!-- NAVLINKS -->
<ul
class="navlinks flex-container flex-row justify-center align-center"
>
<li>
<a href="/" class="active-link navlink">Home</a>
</li>
<li>
<a href="./projects/" class="navlink">Projects</a>
</li>
<li>
<a href="./blogs/" class="navlink">Blogs</a>
</li>
</ul>
<!-- THEME TOGGLE -->
<label class="theme-toggler" for="theme-checkbox">
<input
type="checkbox"
name="theme-checkbox"
id="theme-checkbox"
/>
<h1
class="theme-toggle flex-container flex-row justify-center align-center"
>
<i class="fa-solid fa-moon"></i>
</h1>
</label>
</nav>
<!-- SHOWCASE -->
<section
class="showcase flex-container justify-center align-center flex-column"
>
<img
src="./images/bharati1.jpg"
alt="Picture of Bharati Smiling with palm on her cheek"
class="hero-image"
/>
<article
class="text-content flex-container flex-column align-start justify-center"
>
<h1 class="hero-text">
Hi, I am
<strong class="hero-name"
>Bharati Subramanian</strong
>
</h1>
<p class="lead-text">
I like to build responsive and user-friendly apps.
</p>
<div
class="buttons-container showcase-buttons flex-container align-center justify-center"
>
<!-- RESUME LINK -->
<a
href="https://drive.google.com/file/d/1nxx3YCfUshwIz7zLX4BSkfndJdUTJnX5/view?usp=sharing"
target="_blank"
class="btn btn-primary"
>Download Resume</a
>
<a href="#about" class="btn btn-secondary"
>About Me</a
>
</div>
</article>
</section>
</header>
<main class="main">
<!-- ABOUT -->
<section
class="about container flex-container flex-column align-center justify-center"
id="about"
>
<article class="about-container">
<h2 class="section-head">About me</h2>
<p class="section-lead lead-text">
Front-End Developer
</p>
<img
src="./images/bharati.jpg"
alt="Picture of Bharati smiling"
class="section-image"
/>
<p class="section-text">
I'm a Computer Applications graduate working as an
Associate Analyst at Deloitte. <br />
I am a frontend developer who is currently exploring
and developing Fullstack applications using React,
JavaScript/ TypeScript, Express, Node.js and
MongoDB.
<br /><br />
I also enjoy problem-solving and have invested quite
some time to strengthen my ability in the domain.
I've explored techniques to choose the best possible
data structures and apply algorithms for solving
problems on coding platforms such as LeetCode. I
enjoy web designing and would love to learn and gain
experience in UI/UX designing too.
<br /><br />
Apart from tech, you will see me reading books,
singing, or drinking coffee and tea!
</p>
</article>
</section>
<!-- SKILLS -->
<section
id="skills"
class="skills container flex-container flex-column align-center justify-center"
>
<h2 class="section-head">Skills</h2>
<article
class="skills-container flex-container justify-center align-center"
>
<ul class="skill-list">
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-html5"></i>
</span>
<span class="skill-title">HTML5</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-css3-alt"></i>
</span>
<span class="skill-title">CSS3</span>
</li>
<li class="skill-list-item">
<span
class="skill-icon skill-sass"
title="TailwindCSS"
>
<svg
viewBox="0 0 50 30"
class="text-slate-900 dark:text-white w-auto h-5"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z"
></path>
</svg>
</span>
<span class="skill-title">Tailwind CSS</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-bootstrap"></i>
</span>
<span class="skill-title">Bootstrap</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-js"></i>
</span>
<span class="skill-title">JavaScript</span>
</li>
<li class="skill-list-item">
<span class="skill-icon react-icon">
<i class="fa-brands fa-react"></i>
</span>
<span class="skill-title">React</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<svg
fill="#000000"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
width="250px"
height="250px"
>
<path
d="M 24 2 C 16.832 2 11 10.292328 11 20.486328 C 11 25.752514 12.564938 30.494647 15.060547 33.859375 A 3.5 3.5 0 0 0 18.5 38 A 3.5 3.5 0 1 0 18.5 31 A 3.5 3.5 0 0 0 17.931641 31.050781 C 16.143565 28.387233 15 24.611465 15 20.486328 C 15 12.633328 19.122 6 24 6 C 28.119 6 31.689125 10.7375 32.703125 16.9375 C 34.125125 17.3455 35.541688 17.897453 36.929688 18.564453 C 36.251687 9.2704531 30.712 2 24 2 z M 22.5 17 A 3.5 3.5 0 1 0 22.5 24 A 3.5 3.5 0 0 0 25.640625 22.041016 C 28.890379 21.837485 32.64609 22.840116 36.113281 24.917969 C 42.973281 29.030969 46.703812 36.223047 44.257812 40.623047 C 43.453812 42.069047 42.005359 43.108953 40.068359 43.626953 C 37.279359 44.372953 33.859234 43.993672 30.490234 42.638672 C 29.421234 43.632672 28.245891 44.565828 26.962891 45.423828 C 30.290891 47.104828 33.8105 47.996094 37.0625 47.996094 C 38.4725 47.996094 39.833516 47.830234 41.103516 47.490234 C 44.110516 46.685234 46.410906 44.982406 47.753906 42.566406 C 51.337906 36.117406 47.127922 26.858281 38.169922 21.488281 C 33.907448 18.931871 29.185543 17.753815 25.035156 18.09375 A 3.5 3.5 0 0 0 22.5 17 z M 9.1601562 23.324219 C 2.0791563 28.795219 -0.95795312 36.799406 2.2480469 42.566406 C 3.5910469 44.982406 5.8914375 46.685234 8.8984375 47.490234 C 10.169438 47.830234 11.527453 47.996094 12.939453 47.996094 C 16.739453 47.996094 20.910031 46.789672 24.707031 44.513672 C 28.954867 41.96696 32.09575 38.543722 33.876953 34.962891 C 35.628054 34.772138 37 33.301038 37 31.5 C 37 29.57 35.43 28 33.5 28 C 31.57 28 30 29.57 30 31.5 C 30 32.040225 30.132082 32.546629 30.351562 33.003906 C 28.907628 35.978686 26.213448 38.945387 22.650391 41.082031 C 18.354391 43.658031 13.599641 44.609953 9.9316406 43.626953 C 7.9956406 43.108953 6.5481406 42.069047 5.7441406 40.623047 C 3.8101406 37.143047 5.7462969 31.923469 10.029297 27.855469 C 9.6182969 26.415469 9.3241562 24.899219 9.1601562 23.324219 z"
/>
</svg>
</span>
<span class="skill-title">Redux</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-java"></i>
</span>
<span class="skill-title">Java</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-github"></i>
</span>
<span class="skill-title">GitHub</span>
</li>
<li class="skill-list-item">
<span class="skill-icon">
<i class="fa-brands fa-git"></i>
</span>
<span class="skill-title">Git</span>
</li>
</ul>
</article>
<p class="skills-others section-text">
A few other notable technologies I have worked with are:
<span
title="Systems, Applications & Products in Data Processing"
>SAP</span
>, <span>C</span>, <span>C++</span>,
<span>Python</span>. My work with these technologies
have been limited, and I am still a beginner. But I look
forward to work in length with them in the future.
</p>
</section>
<!-- PROJECTS -->
<section class="projects container" id="projects">
<h2 class="section-head">Projects</h2>
<article
class="content flex-container flex-row-reverse align-center justify-center"
>
<div class="flex-item image-content">
<img
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1960&q=200"
alt=""
class="project-image"
/>
</div>
<div class="flex-item text-content">
<p class="section-text">
I love to build and develop challenging, new
applications. The best means to become better at
programming is by developing applications that
translate theory into something live and
working. In addition, this practice also adds to
confidence, enhances code quality, and
encourages documenting your journey.
<br /><br />
I'm currently improving my HTML, CSS,
JavaScript, and ReactJS skills by developing
front-end applications.
</p>
<div
class="buttons-container flex-container justify-center align-start project-buttons"
>
<a href="./projects/" class="btn btn-primary"
>My Projects</a
>
<a
href="https://www.github.com/bharati-21"
target="_blank"
class="btn btn-secondary"
>Browse GitHub
<i class="fa-brands fa-github"></i
></a>
</div>
</div>
</article>
</section>
<!-- BLOGS -->
<section class="blogs container" id="blogs">
<h2 class="section-head">Blogs</h2>
<article
class="content flex-container flex-row align-center justify-center"
>
<div class="flex-item image-content">
<img
src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=200"
alt=""
class="blog-image"
/>
</div>
<div class="flex-item text-content">
<p class="section-text">
I also try to document my journey and learnings
through blog posts. I often try to write blog
posts on topics that I find difficult to grasp.
The writing process allows me to work on my
presentation skills and filter content to
highlight only the relevant concepts.
<br /><br />
Blog writing, I feel, is the classic case of
"learning by teaching"! The abundance of
research behind a blog post adds to a tremendous
amount of knowledge and learning how to convert
thoughts, theory, and knowledge into describable
words.
</p>
<div
class="buttons-container flex-container justify-center align-start project-buttons"
>
<a href="./blogs/" class="btn btn-primary"
>My Blog Posts</a
>
<a
href="https://dev.to/bharati21"
target="_blank"
class="btn btn-secondary"
>Browse Dev <i class="fa-brands fa-dev"></i
></a>
</div>
</div>
</article>
</section>
</main>
</div>
<!-- FOOTER -->
<footer class="footer container" id="footer">
<div
class="footer-container flex-container justify-space-between flex-row align-center"
>
<p class="flex-item author">
<a href="/">Bharati Subramanian</a>
</p>
<ul
class="social-links flex-container flex-row align-center justify-center"
>
<li class="flex-item social-link">
<a href="https://github.com/bharati-21" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li class="social-link">
<a
href="https://www.linkedin.com/in/bharati-subramanian-29734b152/"
target="_blank"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li class="social-link">
<a
href="https://twitter.com/_bhaaratii"
target="_blank"
>
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li class="social-link">
<a href="https://dev.to/bharati21" target="_blank">
<i class="fa-brands fa-dev"></i>
</a>
</li>
<li>
<a
href="mailto:bharatisharada@gmail.com"
target="_blank"
>
<i class="fa-solid fa-envelope"></i>
</a>
</li>
</ul>
</div>
</footer>
<script src="./script.js"></script>
</body>
</html>