-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
353 lines (265 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<!-- Case study css -->
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<!-- Spacemono font from fonts.google.com -->
<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=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Main CSS file -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Shubham Yadav | Product Designer</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png"/>
</head>
<body>
<!-- Navbar -->
<div class="abcd fixed-top">
<div class="container-fluid ">
<header>
<nav class="container-fluid navbar navbar-expand-md navbar-dark">
<a href="#" class="navbar-brand">
<img src="assets/images/image1.svg" alt="everyone" width="54" height="54" class="d-inline-block align-center sayhi">
<span class="hidden">Shubham Yadav</span>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="false"
aria-lable="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="navbar-nav ms-auto text-center">
<li>
<a class="nav-link" href="#work">Work</a>
</li>
<li>
<a class="nav-link" href="#people">People</a>
</li>
<li>
<a class="nav-link" href="#contact">Contact</a>
</li>
<!-- <li>
<a class="nav-link" href="#">About</a>
</li> -->
</ul>
</div>
</nav>
</header>
</div>
</div>
<div class="xyz">
<div class="container-fluid">
<div>
<div class="a1">
<p class="name">Hello, I’m Shubham</p>
<h1 class="heading">a product designer with <br> quick hands on illustration <br> and animation</h1>
<a class="button-outside" href="assets/Shubham+Resume.pdf" target="blank">
<button class="resume qwerty">Download Resume
</button>
</a>
</div>
<div class="a2">
<div>
<img class="photo" src="assets/images/mainvector.png" alt="mainherovector">
</div>
</div>
</div>
</div>
</div>
<!-- Second Part Start -->
<div class="section2">
<div class="container-fluid">
<div class="beechme">
<h1 class="sectionmaster" id="work">WORK</h1>
<p class="detail">I’m passioante about my work solving user problems keeping business goals in mind. <br>I joined the Designers Tribe back in 2017 when I was pursuing my college degree.</p>
</div>
<div class="case-study">
<div class="slider">
<!-- <div class="slider__item">
<div class="slider_item_wrapper card1">
<div class="what">
<p class="tag">PRODUCT DESIGNER | ONLINE PSB LOANS</p>
<p class="study">Building the National Subsidy Portal of India</p>
<p class="tag"> With the motto to make Bharat Aatmanirbhar, Government of India came up with the plan of subsidies along with loan</p>
<a class="button-outside" href="assets/Shubham+Resume.pdf" target="blank">
<button class="resume qwerty"><span class="icon-notion-logo"></span>  View Case Study</button>
</a>
</div>
<div>
<img src="assets/images/casestudy1.png" alt="trying">
</div>
</div>
</div> -->
<!-- <div class="slider__item">
<div class="slider_item_wrapper card2">
<div class="what">
<p class="tag">PRODUCT DESIGNER | ONLINE PSB LOANS</p>
<p class="study">Redesigning India's Largest Digital Lending Platform</p>
<p class="tag">The redesigned website aims at better understanding of loan processes and products with an elegent interface </p>
<a class="button-outside" href="assets/Shubham+Resume.pdf" target="blank">
<button class="resume qwerty"><span class="icon-notion-logo"></span>  View Case Study</button>
</a>
</div>
<div>
<img src="assets/images/casestudy2.png" alt="trying">
</div>
</div>
</div> -->
<div class="slider__item">
<div class="slider_item_wrapper card3">
<div class="what">
<p class="tag">PRODUCT DESIGNER | ONLINE PSB LOANS</p>
<p class="study">Simplifying lives with Borrower Journey</p>
<p class="tag">Solving the pain points & redesigning the borrower journey for India's Largest Digital Lending Platform</p>
<a class="button-outside" href="https://www.notion.so/Simplifying-lives-with-Borrower-Journey-2-0-96fd2d067c804660a129ab3b409353bb" target="blank">
<button class="resume qwerty"><span class="icon-notion-logo"></span>  View Case Study</button>
</a>
</div>
<div>
<img src="assets/images/Borrower-journey.png" alt="trying">
</div>
</div>
</div>
<div class="slider__item">
<div class="slider_item_wrapper card4">
<div class="what">
<p class="tag">PRODUCT DESIGNER | ONLINE PSB LOANS</p>
<p class="study">Super Clean & Efficient Bankers' Interface</p>
<p class="tag">The revamped portal aims for better and efficient work life of a banker</p>
<a class="button-outside" href="https://www.notion.so/Clean-Efficient-Bankers-Interface-3bad9c8e531340c799aed24c85b421b8" target="blank">
<button class="resume qwerty"><span class="icon-notion-logo"></span>  View Case Study</button>
</a>
</div>
<div>
<img src="assets/images/Banker_Interface.png" alt="trying">
</div>
</div>
</div>
<div class="slider__item">
<div class="slider_item_wrapper card5">
<div class="what">
<p class="tag">PRODUCT DESIGNER | ONLINE PSB LOANS</p>
<p class="study">PSB59 Mobile Application for Borrowers</p>
<p class="tag">Now one can apply and manage loan application from mobile also</p>
<a class="button-outside" href="https://www.notion.so/PSB59-Mobile-Application-for-Borrowers-aae6db6e384143749885d6c5fff6dda4" target="blank">
<button class="resume qwerty"><span class="icon-notion-logo"></span>  View Case Study</button>
</a>
</div>
<div>
<img src="assets/images/Mobile_Application.png" alt="trying">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Third Part Start -->
<div class="section3">
<div class="container-fluid">
<div class="beechme">
<h1 class="sectionmaster" id="people">PEOPLE</h1>
<p class="detail">From the very beginning till now, they are the best part about the journey</p>
</div>
<div class="case-study">
<div class="slider1">
<div class="slider__item">
<div class="slider_item_wrapper1 card11">
<div class="testimonial">
<div class="who">
<div class="person-image person1"></div>
<div class="person-details">
<p class="naam">Manishanker Sharma</p>
<p class="position">DESIGN LEAD AT ONLINE PSB LOANS LIMITED</p>
</div>
</div>
<p class="tag comment">I have worked with Shubham on multiple projects and organisations. The best quilty about him is you can trust him to the fullest.
He would be the easiest person you can work with.
He has a strong sense of ownership and goes extra miles to make a project sucess.
He's a very verstile designer with a full range of design skills and shines in creating isometric illustrations.
I have seen him working on really complex project, with tight deadline and absurd requirements and never seen anyone handling all these thing more graciously then him.</p>
</div>
<div>
<img src="assets/images/relation.png" alt="trying">
</div>
</div>
</div>
<div class="slider__item">
<div class="slider_item_wrapper1 card12">
<div class="testimonial">
<div class="who">
<div class="person-image person2"></div>
<div class="person-details">
<p class="naam">Sanjay Yadav</p>
<p class="position">PRODUCT MANAGER AT ONLINE PSB LOANS LIMITED</p>
</div>
</div>
<p class="tag comment">I have worked with Shubham closely on a single project and his discipline, determination and consistency towards work is rare.
His understanding of product and good sense of UI made his work more enjoyable. <br>   <br>   </p>
</div>
<div>
<img src="assets/images/relation2.png" alt="trying">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fourth Part Start -->
<div class="section3">
<div class="container-fluid">
<div class="beechme">
<h1 class="sectionmaster" id="contact">LET'S CONNECT</h1>
<!-- <p class="detail">and discuss next great products</p> -->
<img src="assets/images/connecttry.svg" alt="connectillustration">
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container-fluid">
<div class="social-links">
<a class="button-outside" href="mailto:[email protected]" target="blank">
<button class="resume qwerty"><span class="icon-Gmail"></span>  Gmail</button>
</a>
<a class="button-outside" href="https://www.linkedin.com/in/yadavshubham2199/" target="blank">
<button class="resume qwerty"><span class="icon-Linkedin"></span>  Linkedin</button>
</a>
<a class="button-outside" href="https://dribbble.com/yadavshubham2199" target="blank">
<button class="resume qwerty"><span class="icon-Dribbble"></span>  Dribbble</button>
</a>
<a class="button-outside" href="https://www.behance.net/yadavshubham2199" target="blank">
<button class="resume qwerty"><span class="icon-Behance"></span>  Behance</button>
</a>
<a class="button-outside" href="https://www.instagram.com/yadavshubham2199/" target="blank">
<button class="resume qwerty"><span class="icon-Instagram"></span>  Instagram</button>
</a>
<a class="button-outside" href="tel:8295796995" target="blank">
<button class="resume qwerty"><span class="icon-Phone"></span>  +91 8295796995</button>
</a>
</div>
</div>
</div>
<!-- Made with love -->
<!-- Bootstrap js and popper -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript" src="shubham.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
</body>
</html>