portfolio/index.html at main · darakhshanda/portfolio · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Darakhshanda Sadia| Software Developer</title>
    <!-- Bootstrap CSS Link -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <!-- Custom CSS Link -->
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>

  <body>
    <!-- Bootstrap JS Script-->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <a class="navbar-brand" href="index.html">Darakhshanda Sadia</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="index.html"
                >Home</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- header -->
    <header id="hero" class="container">
      <!-- section with hero image -->
      <section class="row">
        <!-- text-center class used to centre all text inside column -->
        <div class="col-12 text-center">
          <h1 class="display-4 my-4">Darakhshanda Sadia</h1>
          <!-- mb-5 gives extra margin spacing under subheading -->
          <h2 class="display-6 mb-5">Software Developer</h2>
          <p>
            Hello! I'm Darakhshanda, a
            <strong>passionate and creative Software Developer</strong>
            dedicated to building engaging, user-friendly websites and
            applications. With a keen eye for design and a love for coding,
            <strong
              >I translate complex ideas into smooth, accessible digital
              experiences.</strong
            >
            Eager to collaborate and grow, I'm on the lookout for opportunities
            to innovate and excel.
          </p>
          <!-- mb-5 gives extra margin spacing under lead text -->
          <p class="lead mb-5">Let's create something amazing together!</p>
          <!-- Button trigger modal -->
          <button
            type="button"
            class="btn btn-primary mb-5 sharp-corners custom-button"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
          >
            Subscribe to my newsletter!
          </button>
        </div>
      </section>
    </header>
    <section>
      <!-- Modal -->
      <div
        class="modal fade sharp-corners"
        id="exampleModal"
        tabindex="-1"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">Subscribe</h1>

              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">
              <form class="row g-3">
                <p>
                  Join my newsletter for the latest updates on my projetcs,
                  coding tips, and industry insights delivered straight to your
                  inbox.
                </p>
                <div class="col-lg-6">
                  <label for="full-name" class="form-label">Full name</label>
                  <input type="text" class="form-control" id="full-name" />
                </div>
                <div class="col-lg-6">
                  <label for="exampleFormControlInput1" class="form-label"
                    >Email address</label
                  >
                  <input
                    type="email"
                    class="form-control"
                    id="exampleFormControlInput1"
                    placeholder="name@example.com"
                  />
                </div>
                <div class="modal-footer col-12 md-4">
                  <button
                    type="button"
                    class="btn btn-primary custom-button"
                    data-bs-dismiss="modal"
                  >
                    Sign up!
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- main content -->
    <main>
      <!-- About section links to #about href in navbar -->
      <section id="about" class="container">
        <div class="row">
          <!-- my-4 used to add top and bottom margin to heading -->
          <div class="col-12 text-center my-4">
            <h2 class="display-5">About Darakhshanda</h2>
          </div>
          <!-- mb-4 used to add margin under image -->
          <div class="col-12 col-md-6 mb-4">
            <!-- img-fluid class makes the image responsive to its container -->
            <img
              src="assets/images/Darakhshanda Sadia.jpg"
              class="img-fluid"
              alt="Darakhshanda Sadia"
            />
          </div>
          <!-- mb-4 used to add margin under text -->
          <div class="col-12 col-md-6 mb-4">
            <p>
              As a dedicated software developer, I specialise in crafting
              seamless, dynamic user interfaces that prioritize user engagement
              and functionality. With a keen interest in web aesthetics and
              usability, I've developed a robust skill set in HTML, CSS,
              JavaScript, and Bootstrap, ensuring responsive and visually
              appealing designs.
            </p>
            <p>
              My approach combines meticulous attention to detail with a
              relentless pursuit of user-centric solutions, making me a reliable
              contributor to any web development team.
            </p>
            <p>
              I am on the lookout for opportunities to leverage my skills in a
              dynamic environment, aiming to contribute to meaningful projects
              and grow as part of a forward-thinking team.
            </p>
          </div>
        </div>
      </section>
      <!-- portfolio section starts here -->
      <section id="portfolio" class="container pb-4">
        <div class="row">
          <!-- my-4 used to add top and bottom margin to heading -->
          <div class="col-12 text-center my-4">
            <h2 class="display-5">Portfolio</h2>
          </div>
          <!-- cols for cards -->
          <div class="col-12 col-md-6">
            <div class="card mb-3 sharp-corners">
              <img
                src="assets/images/wags-and-walks.webp"
                class="card-img-top"
                alt="A man walking several dogs early in the morning"
              />
              <div class="card-body">
                <h3 class="card-title">Wags & Walks</h3>
                <p class="card-text">
                  A platform for a dog walking service designed to fit the busy
                  lifestyles of pet owners. Focused on promoting a healthy life
                  for dogs, this site showcases convenient scheduling options
                  and services.
                </p>
                <a href="#" class="btn btn-outline-secondary">Visit site</a>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="card mb-3 sharp-corners">
              <img
                src="assets/images/we-wellness.webp"
                class="card-img-top"
                alt="A spa with candles towels and natural material"
              />
              <div class="card-body">
                <h3 class="card-title">We Wellness</h3>
                <p class="card-text">
                  A comprehensive platform offering a wide range of wellness
                  services and high-end products. From yoga classes to
                  nutritional guidance, users can find everything they need to
                  nurture their body, mind, and spirit.
                </p>
                <a href="#" class="btn btn-outline-secondary">Visit site</a>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="card mb-3 sharp-corners">
              <img
                src="assets/images/math-wiz.webp"
                class="card-img-top"
                alt="A child practicing math at a computer"
              />
              <div class="card-body">
                <h3 class="card-title">Math Wiz</h3>
                <p class="card-text">
                  An interactive website dedicated to helping kids master
                  mathematics through games and challenges. Designed with young
                  learners in mind, this platform turns complex problems into
                  engaging activities.
                </p>
                <a href="#" class="btn btn-outline-secondary">Visit site</a>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="card mb-3 sharp-corners">
              <img
                src="assets/images/bmi-calculator.webp"
                class="card-img-top"
                alt="Weighing scales seen from the first person view of the person standing on the scales"
              />
              <div class="card-body">
                <h3 class="card-title">BMI Calculator</h3>
                <p class="card-text">
                  Promoting a healthier lifestyle with an easy-to-use BMI
                  Calculator. Designed to provide quick health assessments, this
                  tool helps users understand and manage their body mass index
                  with just a few clicks.
                </p>
                <a href="#" class="btn btn-outline-secondary">Visit site</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- Contact section-->
    <footer id="contact" class="container">
      <div class="row justify-content-center">
        <div class="col-12 text-center my-4">
          <h2 class="display-5">Contact Me</h2>
          <p class="mt-4">
            Got questions or ideas? I'd love to hear from you! Whether you're
            interested in collaboration, have inquiries about my projects, or
            wish to request a copy of my CV, please don't hesitate to get in
            touch. I'm always open to discussing new opportunities and how we
            can work together to create something amazing!
          </p>
        </div>
        <div class="col-12 col-md-10 col-lg-8">
          <!-- Add your form here -->
          <form class="row g-3 col-12 col-md-10 col-lg-8 sharp-corners">
            <div class="col-md-6 col-12 col-md-10 col-lg-8">
              <label for="full-name1" class="form-label">Full name</label>
              <input type="text" class="form-control" id="full-name1" />
            </div>
            <div class="col-12 col-md-10 col-lg-8">
              <label for="phone-number" class="form-label">Phone number</label>
              <input
                type="text"
                class="form-control"
                id="phone-number"
                placeholder="country code(+44)123456789"
              />
            </div>
            <div class="mb-3 col-12 col-md-10 col-lg-8">
              <label for="exampleFormControlInput" class="form-label"
                >Email address</label
              >
              <input
                type="email"
                class="form-control"
                id="FormControlInput"
                placeholder="name@example.com"
              />
            </div>
            <div class="mb-3 col-12 col-md-10 col-lg-8">
              <label for="exampleFormControlTextarea1" class="form-label"
                >Example textarea</label
              >
              <textarea
                class="form-control"
                id="FormControlTextarea"
                rows="3"
              ></textarea>
            </div>

            <div class="col-12">
              <button type="submit" class="btn btn-primary mb-3 custom-button">
                Send
              </button>
            </div>
          </form>
        </div>
      </div>
    </footer>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>