-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
278 lines (251 loc) · 18.9 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Hi this is Aayush Saini">
<meta name="keywords" content="aayush, saini, aayushsaini, aayushsaini_, aayushsaini1, designer, uiux, product designer, delhi, 3D artist, design, aayushsaini.me">
<!--android tab color-->
<meta name="theme-color" content="#fff">
<!--Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/favicons/site.webmanifest">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!--Custom Fonts-->
<!--Plus Jakarta Display-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-10SPPYFFQX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-10SPPYFFQX');
</script>
<!-- <script type="text/javascript" src="script.js"></script> -->
<title>Aayush Saini - Product Designer | 3D Artist</title>
</head>
<body>
<div class="container-fluid !justify overflow-hidden">
<div class="container">
<nav class="navbar fixed-top navbar-expand-md navbar-light" id="navbar-full">
<div class="container" data-aos="fade-down" data-aos-easing="ease-out" data-aos-duration="400">
<ul class="navbar-nav" id="nav-brand">
<li class="social-icons nav-item mr-4">
<a href="https://linkedin.com/in/aayushsaini" target="_blank" rel="noreferrer" alt="aayush saini linkedin profile">
<i class="fa fa-linkedin fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons nav-item mr-4">
<a href="https://behance.net/aayushsaini" target="_blank" rel="noreferrer" alt="aayush saini behance profile">
<i class="fa fa-behance fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons nav-item mr-4">
<a href="https://dribbble.com/aayushsaini" target="_blank" rel="noreferrer" alt="aayush saini dribbble profile">
<i class="fa fa-dribbble fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons nav-item mr-4">
<a href="https://instagram.com/aayush.jpeg" target="_blank" rel="noreferrer" alt="aayush saini instagram profile">
<i class="fa fa-instagram fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons nav-item mr-4">
<a href="https://twitter.com/aayushsaini_" target="_blank" rel="noreferrer" alt="aayush saini twitter profile">
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fa fa-bars fa-lg" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
<div class="navbar-nav" id="my-links">
<ul class=" navbar-nav">
<li class="nav-item ml-4">
<a class="left-anim nav-link" href="#work">Work</a>
</li>
<li class="nav-item ml-4">
<a class="left-anim nav-link" href="#about-me">About Me</a>
</li>
<li class="nav-item ml-4">
<a class="left-anim nav-link" href="mailto:[email protected]">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="main text-center">
<section class="hero col text-center mx-auto" id="hero">
<img class="my-4" id="hero-image" src="assets/Aayush-dp.webp" alt="aayush saini caricature">
<div class="hero-content col-lg-8 col-md-9 mx-auto">
<h4 class="mb-3" id="greetings">Hey! I'm Aayush <span id="emoji">👋</span></h4>
<div class="hero-heading">
<h1><b>Product Designer during day,</b></h1>
<h1><b> 3D Artist by Night!</b></h1>
</div>
<p class="body-text col-lg-6 col-md-9 mx-auto my-4">An engineer turned self-taught designer based out of Delhi, India. I believe in creating user experience focused user interfaces, being an engineering student helps me to create user interfaces which are efficient from the development
point of view.</p>
<div class="text-center">
<ul class="social list-group list-group-horizontal mx-auto justify-content-center">
<li class="social-icons">
<a href="https://linkedin.com/in/aayushsaini" target="_blank" rel="noreferrer" alt="aayush saini linkedin profile">
<i class="fa fa-linkedin fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons">
<a href="https://behance.net/aayushsaini" target="_blank" rel="noreferrer" alt="aayush saini behance profile">
<i class="fa fa-behance fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons">
<a href="https://dribbble.com/aayushsaini" target="_blank" rel="noreferrer" alt="aayush saini dribbble profile">
<i class="fa fa-dribbble fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons">
<a href="https://instagram.com/aayush.jpeg" target="_blank" rel="noreferrer" alt="aayush saini instagram profile">
<i class="fa fa-instagram fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="social-icons">
<a href="https://twitter.com/aayushsaini_" target="_blank" rel="noreferrer" alt="aayush saini on twitter">
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<a class="my-btn btn btn-primary btn-lg btn-dark" href="https://linkedin.com/in/aayushsaini" target="_blank" rel="noreferrer" role="button" alt="connect with me on linkedin">Connect with me</a>
<!-- <a class="btn btn-primary btn-sm" role="button" onclick="darkMode()">Dark</a> -->
</div>
</section>
<section class="work text-center mx-auto" id="work">
<div class="col">
<h2 class="heading mb-5" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400"><b>Get a glimpse of what I do best</b></h2>
<!--Case study-->
<div class="case-study row justify-center mx-auto col-lg-10" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<img class="my-thumbnail col-lg-5 col-md-10 mx-md-auto mb-4" src="assets/case-study/stamurai.webp" alt="Stamurai App Case Study">
<div class="content text-left col-lg-5 col-md-10 ml-lg-2 mt-lg-auto mx-auto my-auto">
<h3>Stamurai - An interactive Speech therapy App</h3>
<p class="body-text col">Stamurai is a speech therapy app for people who stutter. Stamurai provides you with an affordable alternative for a speech therapy session.</p>
<a class="left" href="https://www.behance.net/gallery/103055007/Stamurai-App-UI-UX-Case-Study" target="_blank" rel="noreferrer">
<button class="btn secondary-cta p-0" alt="view full case study">View Full Case Study
<i class="fas fa-arrow-right fa-lg ml-2"></i>
</button>
</a>
</div>
</div>
<div class="case-study row justify-center mx-auto col-lg-10" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<img class="my-thumbnail col-lg-5 col-md-10 mx-md-auto mb-4" src="assets/case-study/hirebl.webp" alt="Hirebl App design">
<div class="content text-left col-lg-5 col-md-10 ml-lg-4 mt-lg-auto mx-auto my-auto">
<h3>Career Development and Learning Platform</h3>
<p class="body-text col">Hirebl is a career development and learning platform specifically targeting tier 2 & 3 city students and aspirants.</p>
<a class="left" href="https://www.behance.net/gallery/93756257/Hirebl-UIUX-Case-study" target="_blank" rel="noreferrer">
<button class="btn secondary-cta p-0" alt="view full case study">View Full Case Study
<i class="fas fa-arrow-right fa-lg ml-2"></i>
</button>
</a>
</div>
</div>
<div class="case-study row justify-center mx-auto col-lg-10" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400" id="last-case-study">
<img class="my-thumbnail col-lg-5 col-md-10 mx-md-auto mb-4" src="assets/case-study/metro.webp" alt="Delhi metro website Redesign">
<div class="content text-left col-lg-5 col-md-10 ml-lg-4 mt-lg-auto mx-auto my-auto">
<h3>Delhi Metro Website Redesign</h3>
<p class="body-text col">A better web experience for Delhi Metro's official website</p>
<a class="left" href="https://www.behance.net/gallery/90395809/Delhi-Metro-Website-Redesign-UI-UX-Case-study" target="_blank" rel="noreferrer">
<button class="btn secondary-cta pl-0" alt="view full case study">View Full Case Study
<i class="fas fa-arrow-right fa-lg ml-2"></i>
</button>
</a>
</div>
</div>
<div>
<a class="btn btn-sm btn-dark my-btn col-lg-2" href="https://behance.net/aayushsaini" rel="noreferrer" role="button" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">View More</a>
</div>
</div>
</section>
<section class="clients" id="clients" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<h2 class="heading mb-5"><b>Companies I've worked with</b></h2>
<div class="text-center">
<a href="https://instagram.com/ecellmsit" target="_blank" rel="noreferrer" alt="ecell msit on instagram">
<img class="client-logo image-fluid col mx-3 mt-3" src="assets/logo/ecell-logo.png" alt="eCell MSIT">
</a>
<a href="https://wearetechtonic.com" target="_blank" rel="noreferrer" alt="techtonic enterprises website">
<img class="client-logo image-fluid col mx-3 mt-3" src="assets/logo/techtonic-logo.png" alt="Techntonic Enterprises Pvt. Ltd.">
</a>
<a href="https://stamurai.com" target="_blank" rel="noreferrer" alt="stamurai website">
<img class="client-logo image-fluid col mx-3 mt-3" src="assets/logo/stamurai-logo.png" alt="Stamurai - Speech therapy for stuttering">
</a>
<a href="https://mountain.studio" target="_blank" rel="noreferrer" alt="mountain studio website">
<img class="client-logo image-fluid col mx-3 mt-3" src="assets/logo/mountain-logo.png" alt="Mountain Studio">
</a>
<a href="https://buidllabs.io" target="_blank" rel="noreferrer" alt="buidl labs website">
<img class="client-logo image-fluid col mx-3 mt-3" src="assets/logo/buidl-logo.png" alt="Buidl Labs">
</a>
</div>
</section>
<section class="artwork my-5" id="artwork">
<h2 class="heading mb-5" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400"><b>3D Artworks</b></h2>
<div class="row col-lg-10 mx-auto">
<div class="col-lg-4">
<img class="image-fluid mb-4 artwork-tall" src="assets/Artwork/1xdribbble.webp" alt="3d artwork" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<img class="image-fluid mb-4 artwork-wide" src="assets/Artwork/2xdribbble.webp" alt="3d artwork" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
</div>
<div class="col">
<img class="image-fluid mb-4 artwork-wide" src="assets/Artwork/AS_major.webp" alt="3d artwork" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<img class="image-fluid mb-4 artwork-tall" src="assets/Artwork/wood-man-volume.webp" alt="3d artwork" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
</div>
<div class="col">
<img class="image-fluid mb-4 artwork-tall" src="assets/Artwork/pxel4a-setup.webp" alt="3d artwork" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<img class="image-fluid mb-4 artwork-wide" src="assets/Artwork/geometry_4x4.webp" alt="3d artwork" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
</div>
<div>
<a class="btn btn-sm btn-dark my-btn col-lg-2 mt-4" href="https://instagram.com/aayush.jpeg" rel="noreferrer" role="button" alt="view more artworks on instagram" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">View More</a>
</div>
</div>
</section>
<section class="about-me text-center mx-auto" id="about-me" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="400">
<h2 class="heading my-5"><b>About Me</b></h2>
<div class="row justify-center col-lg-10 mx-auto mb-5">
<img class="my-thumbnail col-lg-6 col-md-10 mx-md-auto" id="my-image" src="assets/AayushSaini-UglyPhoto.webp" alt="">
<div class="content text-left col-lg-5 col-md-10 mb-sm-4 mt-sm-4 mx-auto my-auto">
<article class="body-text col">
<p>That weird guy in the photo is me, an engineer by education, a designer by profession and an artist by passion. Currently, I'm a final year student at MSIT, Delhi. You can find me capturing actions of the streets of Delhi.</p>
<p>My design journey started with Adobe Photoshop 7.0's cracked version (yeah, sorry Adobe) but after some time B.tech happened, then I tried my hands on programming (that too with JAVA!!!).</p>
<p>It took me 437 errors to realise that I should try something else, then I discovered the field of Product design and life is bug-less since then and yes my parents think that my work is to create random rectangles on screen.</p>
</article>
</div>
</div>
</section>
<div class="footer">
<p class="bugs"><a href="https://github.com/aayushsaini1" target="_blank" rel="noreferrer" alt="aayush saini github profile">Made with 🐛 Bugs by Aayush</a></p>
</div>
</div>
</div>
<!--font awesome and animate on scroll-->
<script src="https://kit.fontawesome.com/f725adb2cf.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper.js and Bootstrap JS
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-t6I8D5dJmMXjCsRLhSzCltuhNZg6P10kE0m0nAncLUjH6GeYLhRU1zfLoW3QNQDF" crossorigin="anonymous"></script>
-->
</body>
</html>