-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
337 lines (307 loc) · 17 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Varda's Portfolio Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Roboto+Slab:400,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="assets/1-removebg-preview.png" alt="logo">
<button id="navToggle" class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav id="navMenu" class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
<li class="nav__item"><a href="#education" class="nav__link">Education</a></li>
<li class="nav__item"><a href="#experience" class="nav__link">Experience</a></li>
<li class="nav__item"><a href="#projects" class="nav__link">Projects</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--Intro-->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Greetings, I am <strong>Varda Quraishi</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">Developer | Researcher | Prompt Engineer</p>
<img src="assets/me-profile.jpg" alt="profile image" class="intro__img">
</section>
<!--Education-->
<section class="my-education" id="education">
<h2 class="section__title section__title--education">What is my educational background</h2>
<div class="educations">
<div class="education">
<h3>High School</h3>
<p>Beacon House School System</p>
<p>KARACHI</p>
<p> June 2016</p>
<p>Cambridge International Examination</p>
<p>Physics, Chemistry, Biology, Maths</p>
</div>
<div class="education">
<h3>University</h3>
<p>COMSATS University, Islamabad</p>
<p>Spring-2018 till Spring-2022</p>
<p>Bachelor of Science in <strong>Computer Science</strong> COMSATS is ranked in one of the best universities in
Pakistan. At COMSATS I have been an active member of the <strong>Computer Science Society</strong> which is a deparmental
society at my university. I work as an <strong>HR consultant</strong> here, being a core member of the socities advisory body</p>
</div>
<div class="education">
<div class="education">
<h3>Middle School</h3>
<p>Beacon House School System</p>
<p>KARACHI</p>
<p> June 2014</p>
<p>Cambridge International Examination</p>
<p>O'levels passed with 8 A*'s & A's</p>
</div>
</div>
</div>
<a href="#certificate" class="btn">Awards & Certifications</a>
</section>
<!--About Me-->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am</h2>
<p class="section__subtitle section__subtitle--about">Unlocking Innovation Through Code and Curiosity</p>
<div class="about--me__body">
<p>Ready to learn new things with every sunshine. I was born in <strong>Karachi</strong> after completing high school
from my hometown. I opted for COMSATS in the federal capital. Despite of not having any IT background. Today, I can proudly say
that I am skilled in various programming languages. I have build web projects in <strong>react, javascript, typescript, next and mobile apps in react native.</strong></p>
<p>Currently, I am inquisitive about artificial intelligence, machine learning.</p>
<p>Recently, my curiosity has led me to explore the fascinating world of prompt engineering and ChatGPT. I am deeply intrigued by the possibilities of leveraging <strong>natural language processing and artificial intelligence</strong> to enhance user interactions and drive innovation in software development.
</p>
</div>
<img src="assets/Untitled design (2).png" alt="my image" class="about-me__img" >
</section>
<!--Experience-->
<section class="my-education" id="education">
<h2 class="section__title section__title--education">What is my Professional Experience</h2>
<div class="educations">
<div class="education">
<h3>SOFTWARE DEVELOPER</h3>
<p>Globewyze Inc. Canada</p>
<p>ISLAMABAD</p>
<p> MARCH 2022</p>
<p>During my tenure, I began as a <strong>React Native mobile app developer</strong> and subsequently expanded my skills to include <strong>web development.</strong> Along the way, I gained proficiency in technologies such as <strong>React, JavaScript, TypeScript, Redux, Saga, Next.js, HTML, and CSS.</strong> I utilized <strong>Git and Bitbucket</strong> for version control and <strong>Jira</strong> for efficient project management.I have worked on notable products such as Skillgigs, Swipefox, Wyzer, Millao, and RevRecycle. Employing prompt engineering skills, I focused on optimizing code performance, responsiveness, and user experience. Through collaborative efforts with cross-functional teams, we successfully designed and implemented innovative features and enhancements. Thorough testing and debugging were conducted to ensure software stability and reliability. I remained updated on emerging technologies and industry trends, integrating cutting-edge solutions into development projects. Additionally, I actively participated in code reviews, providing constructive feedback to improve code quality and maintain best practices.</p>
</div>
<div class="education">
<h3>SOFTWARE DEVELOPER</h3>
<p>Discret Digital Pvt Ltd</p>
<p>ISLAMABAD</p>
<p> DECEMBER 2021 - PRESENT </p>
<p>Here, I began as a <strong>Associate software developer</strong>. Worked on building react native mobile applications. The journey went on and gaining further skills and knowledge of hooks, components, props, styling, navigation and lifecycle methods moved me to the position of a <strong>Software Developer.</strong>at the company.Wrote efficient, reusable, and scalable code to implement desired features and functionality.Translated UI/UX designs into interactive and responsive mobile app interfaces. Collaborated with back-end developers and API teams to integrate mobile apps with server-side components, databases, and external APIs. Conducted thorough testing of mobile applications to identify and fix bugs, performance issues, and compatibility problems.</p>
</div>
</div>
</section>
<!--Projects-->
<section class="projects" id="projects">
<h2 class="section__title section__title--about">Projects</h2>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">Wyzer AIM</h3>
<div class="subheading my-3">Web Application</div>
<p>Loyalty based system that provide rewards, promotions, gift cards, online ordering and reporting.</p>
<div class="tech-stack">
<i class="fab fa-ts"></i>
<i class="fab fa-js"></i>
<i class="fab fa-react"></i>
<i class="fas fa-comments"></i>
<i class="fab fa-react"></i>
<i class="fab fa-npm"></i>
<i class="fab fa-yarn"></i>
<i class="fab fa-figma"></i>
<i class="fab fa-jira"></i>
<i class="fab fa-css3-alt"></i>
<i class="fas fa-network-wired"></i>
<i class="fas fa-mobile-alt"></i>
</div>
<a href="https://mywyzer.com/" target="_blank" class="btn my-2" style="background-color: var(--clr-accent);">Learn More</a>
</div>
<div class="resume-image" style="margin-bottom: 20px">
<img src="assets/wyzeraim.png" alt="BK-DALLAS by WYZERAIM">
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">SwipeFox</h3>
<div class="subheading my-3">Web Application PWA and Mobile Application</div>
<p>Application for finding travel nursing job. Health Care Sector.</p>
<div class="tech-stack">
<i class="fab fa-node"></i>
<i class="fas fa-dragon"></i>
<i class="fab fa-ts"></i>
<i class="fab fa-aws"></i>
<i class="fab fa-react"></i>
<i class="fab fa-js"></i>
<i class="fas fa-clock"></i>
<i class="fas fa-cogs"></i>
<i class="fas fa-robot"></i>
<i class="fab fa-postman"></i>
<i class="fas fa-database"></i>
<i class="fab fa-js-square"></i>
<i class="fab fa-aws"></i>
</div>
<a href="https://app.swipefox.health/offers" target="_blank" class="btn my-2" style="background-color: var(--clr-accent);">Learn More</a>
</div>
<div class="resume-image" style="margin-bottom: 20px">
<img src="assets/swipefoxpwa.png" alt="SwipeFox">
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">SkillGigs</h3>
<div class="subheading my-3">Web Application, React Native Mobile App</div>
<p>Getting in front of employers made simple and easy. Health Care and IT Sector.</p>
<div class="tech-stack">
<i class="fab fa-react"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-html5"></i>
<i class="fab fa-node"></i>
<i class="fas fa-dragon"></i>
<i class="fab fa-ts"></i>
<i class="fab fa-aws"></i>
<i class="fab fa-react"></i>
<i class="fab fa-js"></i>
<i class="fas fa-clock"></i>
<i class="fas fa-cogs"></i>
<i class="fas fa-robot"></i>
<i class="fab fa-postman"></i>
<i class="fas fa-database"></i>
<i class="fab fa-js-square"></i>
<i class="fab fa-aws"></i>
<i class="fab fa-react"></i>
<i class="fas fa-wind"></i>
</div>
<a href="https://skillgigs.com/" target="_blank" class="btn my-2" style="background-color: var(--clr-accent);">Learn More</a>
</div>
<div class="resume-image" style="margin-bottom: 20px;">
<img src="assets/skillgigs.png" alt="SkillGigs">
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">Millao</h3>
<div class="subheading my-3">Web Application</div>
<p>A marketplace for appointment based professionals. Developed web-app where customers can book single, group and queue appointment with service providers.A marketplace for appointment based</p>
<div class="tech-stack">
<i class="fab fa-postman"></i>
<i class="fas fa-database"></i>
<i class="fas fa-fire"></i>
<i class="fab fa-js"></i>
<i class="fab fa-react"></i>
</div>
<a href="https://www.millao.com/" target="_blank" class="btn my-2" style="background-color: var(--clr-accent);">Learn More</a>
</div>
<div class="resume-image" style="margin-bottom: 20px;">
<img src="assets/millao.png" alt="Millao">
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">RevRecycle</h3>
<div class="subheading my-3">Web Application</div>
<p>RevRecycle is developing a SaaS IoT based ERP+CRM platform for Graders and whole sellers, re-organizing the value chain in a unique way.</p>
<div class="tech-stack">
<i class="fab fa-ts"></i>
<i class="fab fa-js"></i>
<i class="fab fa-react"></i>
<i class="fas fa-comments"></i>
<i class="fab fa-react"></i>
<i class="fab fa-npm"></i>
<i class="fab fa-yarn"></i>
<i class="fab fa-figma"></i>
<i class="fab fa-jira"></i>
<i class="fab fa-css3-alt"></i>
<i class="fas fa-network-wired"></i>
<i class="fas fa-mobile-alt"></i>
</div>
<!-- <a href="https://www.meccadigital.io/" target="_blank" class="btn my-2" style="background-color: var(--clr-accent);">Learn More</a> -->
</div>
<div class="resume-image" style="margin-bottom: 20px;">
<img src="assets/revrecycle.jpeg" alt="Rev Recycle">
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">React Code Catalyzer</h3>
<div class="subheading my-3">Desktop Application</div>
<p>A drag and drop tool to build React Native applications</p>
<div class="tech-stack">
<i class="fab fa-js"></i>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fas fa-terminal"></i>
</div>
<a href="https://aspirepk.org/startup-showcase/e-commerce/seed-actively-developing-mvp-e-commerce/react-code-catalyzer/" target="_blank" class="btn my-2" style="background-color: var(--clr-accent);">Learn More</a>
</div>
<div class="resume-image" style="margin-bottom: 20px;">
<img src="assets/Screen4.png" alt="RCC">
</div>
</div>
</section>
<!--certificates-->
<section class="my-education" id="certificate">
<h2 class="section__title section__title--education">Awards & Certifications</h2>
<br>
<div>
<div>
<h3>REACT CODE CATALYZER - RCC</h3>
<p>Final Year Project - Drag N Drop tool to build React Native Mobile Applications.</p>
<p>COMSATS UNIVERSITY ISLAMABAD</p>
<p>Winner in the Open House, Cross Platform Application Category.</p>
<p>Incubated @SSBC, Student Start Up Business Center COMSATS.</p>
<p>Provincial Winner and National Runner Up @<a href="http://nibpk.org/nib-hosts/nib-provincial-host/federal-capital/winners/">National Idea Bank</a></p>
<p>Incubated @ICCBS, Technology Park University of Karachi.</p>
</div>
</div>
</section>
<!--footer-->
<footer class="footer" id="contact">
<a href="mailto:vardaquraishi@gmail.com" class="footer__link">vardaquraishi@gmail.com</a>
<ul class="social-list">
<li class="social-list__item"><a class="social-list__link" href="https://www.facebook.com/varda.quraishi"><i class="fab fa-facebook"></i></a></li>
<li class="social-list__item"><a class="social-list__link" href="https://www.linkedin.com/in/varda-q-18067188/"><i class="fab fa-linkedin"></i></a></li>
<li class="social-list__item"><a class="social-list__link" href="https://github.com/VardaQuraishi"><i class="fab fa-github"></i></a></li>
<li class="social-list__item"><a class="social-list__link" href="https://twitter.com/Varda_Quraishi"><i class="fab fa-twitter"></i></a></li>
<li class="social-list__item"><a class="social-list__link" href="https://medium.com/@vardaquraishi"><i class="fab fa-medium"></i></a></li>
</ul>
</footer>
<script src="js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-Pjr5ERvKXmN4D6h9Y3Ha1y6nlq7qyZoLvVaxqtuPXZ8=" crossorigin="anonymous"></script>
<script>
// Get the necessary elements
const navToggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('.nav');
const navLinks = document.querySelectorAll('.nav__link');
// Add a click event listener to the navToggle element
navToggle.addEventListener('click', function() {
// Toggle the 'show' class on the nav element
nav.classList.toggle('show');
});
// Add click event listeners to each nav link
navLinks.forEach(link => {
link.addEventListener('click', function(event) {
// Prevent the default link behavior
event.preventDefault();
// Close the menu by removing the 'show' class from the nav element
nav.classList.remove('show');
// Get the target section ID from the link's href attribute
const targetId = link.getAttribute('href');
// Scroll to the target section using smooth behavior
document.querySelector(targetId).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>