-
Notifications
You must be signed in to change notification settings - Fork 0
/
hobbies.html
277 lines (263 loc) · 13.7 KB
/
hobbies.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
<!-- hobbies.html -->
<!DOCTYPE html>
<html lang="en" dir="auto" id="hobbies-html" data-bs-theme="dark">
<!-- BEGIN HEAD -->
<head>
<meta charset="UTF-8">
<!-- Make responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sk. Sameer Salam</title>
<meta name="description" content="Hobbies of Sk. Sameer Salam">
<!-- favicon -->
<link rel="icon" href="assets/icons/logo/dd-no-bg.png" type="image/png">
<!-- Website preview -->
<meta property="og:title" content="Sk. Sameer Salam">
<meta property="og:description" content="Hobbies of Sk. Sameer Salam">
<meta property="og:image" content="assets/img/sameer/thumbnail.jpg">
<!-- Embed Google fonts -->
<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=Handjet:wght@500&family=Press+Start+2P&family=Roboto&family=Tilt+Prism&family=Ubuntu&display=swap" rel="stylesheet">
<!-- STYLES -->
<!-- Include Bootstrap's CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<!-- Include navbar CSS -->
<link href="assets/css/navbar.css" rel="stylesheet">
<!-- Include style.css -->
<link href="assets/css/styles.css" rel="stylesheet">
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN NAVBAR -->
<nav class="navbar navbar-expand-sm fixed-top" data-bs-theme="dark">
<div class="container-fluid">
<!-- Button for Light/Dark Mode -->
<button type="button" class="icon btn px-3" id="themeBtn" >
<img id="themeIcon" src="assets/icons/themes/sun-fill.svg" alt="themeIcon" width="20">
</button>
<!-- Nav-brand -->
<a class="navbar-brand px-1 px-sm-2 px-md-3 px-lg-5 text-uppercase fw-semibold" href="index.html">Sk. Sameer Salam</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Nav-links -->
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav nav-underline d-flex flex-row ms-auto text-uppercase fw-semibold py-3">
<a id = "nav-about" class="nav-link px-lg-2" href="about.html">About</a>
<a id = "nav-projects" class="nav-link px-lg-2" href="projects.html">Projects</a>
<a id = "nav-hobbies" class="nav-link active px-lg-2" href="hobbies.html">Hobbies</a>
<a id = "nav-resume" class="nav-link px-lg-2" href="assets/Resume-Sameer.pdf">Resume</a>
</div>
</div>
</div>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN MAIN -->
<div class="container">
<!-- Page Heading -->
<div class="px-3" id="page-title"></div>
<!-- BEGIN Hobbies intro -->
<div id="bio" class="py-3">
<p class="container">
My biggest hobby is probably programming but below is a list of other hobbies that I enjoy 😊
</p>
</div>
<!-- END Hobbies intro -->
<div class="container pt-4">
<!-- BEGIN CAROUSEL -->
<div id="carousel-hobbies" class="carousel slide" data-bs-ride="carousel">
<!-- BEGIN INDICATORS -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-hobbies" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-hobbies" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-hobbies" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- END INDICATORS -->
<!-- BEGIN CARDS -->
<div class="carousel-inner">
<!-- BEGIN Hobby-1 -->
<div id="carousel-hobby1" class="carousel-item active">
<div id="card-hobby1" class="card shadow mb-5 bg-body-tertiary rounded">
<div class="row g-0">
<!-- IMAGE -->
<div class="col-md-4">
<img src="assets/img/sameer/gamezone.webp" class="img-fluid rounded-start" alt="Tutoring">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="container px-sm-5 py-xl-4">
<!-- Hobby name -->
<h5 class="card-title">
<a class="text-decoration-none fs-2">Tutoring</a>
</h5>
<!-- Begin Hobby description -->
<p class="card-text">
<figure>
<blockquote class="blockquote">
<p>"When we teach, we learn"</p>
</blockquote>
<figcaption class="blockquote-footer">
Roman philosopher <cite title="Source Title">Seneca</cite>
</figcaption>
</figure>
I have been teaching since I was in high school. I started it as a side-hustle to be independent and do my revison, but eventually I became passionate about it.
<br>Now I tutor <span class="fw-medium">science</span>, <span class="fw-medium">mathematics</span>, and <span class="fw-medium">computer science</span> students to prepare them for their class-X board exams.
</p>
<!-- End Hobby description -->
<!-- GitHub Tutorial -->
<div class="container text-end">
<a class="btn btn-outline-warning my-2 my-md-0 py-2" role="button" href="https://github.com/dampdigits/java-tutorial">
My Java Tutorial problems
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Hobby-1 -->
<!-- BEGIN Hobby-2 -->
<div id="carousel-hobby2" class="carousel-item">
<div id="card-hobby2" class="card shadow mb-5 bg-body-tertiary rounded">
<div class="row g-0">
<!-- IMAGE -->
<div class="col-md-4">
<img src="assets/img/art/rob.webp" class="img-fluid rounded-start" alt="Sketching">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="container px-sm-5 py-xl-4">
<!-- Hobby name -->
<h5 class="card-title">
<a class="text-decoration-none fs-2">Sketching and Graphic Designing</a>
</h5>
<br>
<!-- Hobby description -->
<p class="card-text pe-md-4">
Although I have never been trained, sketching and drawing is like my second nature. Recently I have also been creating some digital art, graphic designs, and comics! Inspired by my brother, I drew my first human face and figure when I was five, and to this day, most of my artwork features cool action figures.
</p>
<!-- Code Link -->
<div class="container text-end">
<a class="btn btn-outline-warning my-2 my-md-3 py-2 " role="button" >
Check out my creations
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Hobby-2 -->
<!-- BEGIN Hobby-3 -->
<div id="carousel-hobby3" class="carousel-item">
<div id="card-hobby3" class="card shadow mb-5 bg-body-tertiary rounded">
<div class="row g-0">
<!-- IMAGE -->
<div class="col-md-4">
<img src="assets/img/sameer/park-pic.webp" class="img-fluid rounded-start" alt="Sports-fitness">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="container px-sm-5 py-xl-4">
<!-- Hobby name -->
<h5 class="card-title">
<a class="text-decoration-none fs-2">Sports & Fitness</a>
</h5>
<br>
<!-- Hobby description -->
<p class="card-text">
To exercise, I prefer going to a park over a gym, there's something really strong about training in nature. I try to stay as active as possible, I suppose I'm health conscious or maybe I have some sort of body dysmorphia 😂.
<br>I like competing in sports like calisthenics, athletics, kabaddi and arm-wrestling.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Hobby-3 -->
</div>
<!-- END CARDS -->
<!-- BEGIN BUTTONS -->
<div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-hobbies" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-hobbies" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- END BUTTONS -->
</div>
<!-- END CAROUSEL -->
<a class="btn btn-success my-3 py-2" role="button" href="mailto:sameersalam730@gmail.com">Get in touch with me</a>
</div>
<!-- BEGIN HOBBIES -->
<!-- END HOBBIES -->
</div>
<!-- END MAIN -->
<!-- BEGIN FOOTER -->
<footer class="container text-center py-3">
<hr>
<div class="row justify-content-center py-md-2">
<div class="col-lg-4">
<!-- BEGIN SOCIAL MEDIA LINKS -->
<div class="py-3">
<!-- LinkedIn profile -->
<a class="text-decoration-none" href="https://www.linkedin.com/in/dampdigits">
<img class="icon social-icon" id="linkedInIcon" src="assets/icons/socials/linkedin.svg" alt="LinkedIn">
</a>
<!-- GitHub profile -->
<a class="text-decoration-none" href="https://www.github.com/dampdigits">
<img class="icon social-icon" id="githubIcon" src="assets/icons/socials/github.svg" alt="GitHub">
</a>
<!-- Leetcode profile -->
<a class="text-decoration-none" href="https://www.leetcode.com/dampdigits">
<img class="icon social-icon" id="leetcodeIcon" src="assets/icons/socials/leetcode.svg" alt="LeetCode">
</a>
<!-- Twitter profile -->
<a class="text-decoration-none" href="https://www.twitter.com/dampdigits">
<img class="icon social-icon" id="twitterIcon" src="assets/icons/socials/twitter.svg" alt="Twitter">
</a>
<!-- Threads profile -->
<a class="text-decoration-none" href="https://www.threads.net/@dampdigits">
<img class="icon social-icon" id="threadsIcon" src="assets/icons/socials/threads.svg" alt="Threads">
</a>
<!-- Instagram profile -->
<a class="text-decoration-none" href="https://www.instagram.com/dampdigits">
<img class="icon social-icon" id="instagramIcon" src="assets/icons/socials/instagram.svg" alt="Instagram">
</a>
<!-- Mail ID -->
<a class="text-decoration-none" href="mailto:sameersalam730@gmail.com">
<img class="icon social-icon" id="mailIcon" src="assets/icons/socials/mail.svg" alt="MailID">
</a>
</div>
<!-- END SOCIAL MEDIA LINKS -->
</div>
<div class="col-lg-5">
<div class="py-3">
© 2024
<a class="link-body-emphasis link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-50-hover text-reset" href="index.html"><span class="fw-semibold">Sk Sameer Salam</span></a>.
Made with love & passion.
</div>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- SCRIPTS -->
<!-- Include Bootstrap's javascript and dependencies-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<!-- Include js file to switch theme -->
<script src="assets/js/switchTheme.js"></script>
<!-- Include typewriter-javascript library -->
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<!-- Include about javascript -->
<script src="assets/js/hobbies.js"></script>
</body>
<!-- END HEAD -->
</html>