-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (189 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yash | Design Portfolio</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="./images/Hero/yash.svg" type="image/x-icon">
<meta name="description" content="Design portfolio showcasing the projects I led as a UX lead">
</head>
<body class="geologica">
<header>
<a href="#main" class="skip">Skip to main content</a>
</header>
<main class="hero">
<img class="logo" src="./images/Hero/yash.svg" alt="yash logo" width="65px">
<h1>Hi I'm Yash <span class="wave">👋</span>, I build Elegant & <span class="brand">Accessible</span> design
solutions for brands &
products</h1>
<div class="braille clipper">
<img src="./images/Hero/braille.png" alt="Accessible solutions build for everyone"
title="Accessible solutions build for everyone">
</div>
</main>
<section>
<h2 id="main">- projects & tools -</h2>
<div class="cards">
<a href="./projects/figma-play.html">
<article>
<img src="./images/Icons/Figma.svg" alt="Figma" height="70px">
<p>Don't just Prototype, Solve Client's needs!</p>
</article>
</a>
<a href="./projects/acessibility.html">
<article>
<img src="./images/Icons/Accessibility.svg" alt="Accessibility" height="70px">
<p>Create Solutions on the web without forgetting proper contrast levels!</p>
</article>
</a>
<a href="./projects/liquid-galaxy.html">
<article>
<img src="./images/Icons/LiquidGalaxy.svg" alt="Liquid Galaxy" height="70px">
<p>A Google 20% project: Liquid Galaxy Redesign</p>
</article>
</a>
<a href="./projects/journey-blog.html">
<article>
<img src="./images/Icons/Journey.svg" alt="Journey" height="70px">
<p>A timeline blog of my Journey so far</p>
</article>
</a>
</div>
</section>
<section id="projects">
<h2 class="projects">- designs -</h2>
<article data-label="chrome">
<img loading="lazy" src="./images/Screens/Chrome.png" alt="Built in AI generated captions for Chrome"
width="250px">
<h2>Chrome Built-in AI</h2>
<p>Built explainers for multi-modalities in Chrome, specifically for auto-captions on the web. Created
Chrome extensions to prototype and proposed code solutions, with feedback and support from Google and
W3C.<br><br><span class="web">Web</span><span class="user-research">User
research</span> <span class="api">API</span> <span class="bleeding-edge">Bleeding-edge</span>
</p>
<a href="./projects/chromeai.html" class="button">View Chrome AI ↗</a>
</article>
<article data-label="stonetekk">
<h2>StoneTEKK</h2>
<p>A complete stone industry management system that integrates real-time inventory tracking,
e-commerce, AR, & advanced defect-based pricing to modernize and streamline the
traditionally fragmented stone industry. As Lead UXE, I enhanced the user experience with
gamification, progress indicators, and AR features, collaborating with a multidisciplinary team to
deliver an impactful solution.<br><br><span class="web">Web</span><span class="mobile">Mobile</span>
<span class="html">HTML</span> <span class="css">CSS</span> <span class="js">JavaScript</span> <span
class="ts">TypeScript</span> <span class="maps">Maps API</span> <span class="ui-ux">UI/UX
tools</span> <span class="user-research">User
research</span> <span class="usability-testing">Usability testing</span><span
class="react">React</span><span class="contact-picker">Contact Picker API</span>
</p>
<img loading="lazy" src="./images/Screens/Product detail.png"
alt="Organizing the stone industry UX solution" width="250px">
<a href="./projects/stonetekk.html" class="button">View StoneTEKK ↗</a>
</article>
<article data-label="wrkble">
<img loading="lazy" src="./images/Screens/New all courses page.png" alt="Wrkble: online learning platform"
width="550px">
<h2>Wrkble</h2>
<p>An e-learning platform connecting theory to practice with real-world GitHub projects. As UX Engineer
Lead, I designed user-centric features, led a redesign, and boosted course sales
by 500%.<br><br><span class="web">Web</span><span class="mobile">Mobile</span>
<span class="ux-design">UX Design</span>
<span class="prototyping">Prototyping</span>
<span class="usability-testing">Usability Testing</span>
<span class="accessibility">Accessibility</span>
<span class="html">HTML</span> <span class="css">CSS</span> <span class="js">JavaScript</span> <span
class="ts">TypeScript</span> <span class="svelte">Svelte</span>
<span class="postgres">Postgres</span>
<span class="github">GitHub</span>
</p>
<a href="./projects/wrkble.html" class="button">View Wrkble ↗</a>
</article>
<article data-label="learnerly">
<h2>Learnerly</h2>
<p>A customizable e-learning platform that enables creators to launch branded course websites without rigid
fees. As UXE Lead, I led design strategy and created the user experience while collaborating with
developers to build a flexible, low-risk platform.
<br><br><span class="web">Web</span><span class="mobile">Mobile</span>
<span class="figma">Figma</span> <span class="html">HTML</span> <span class="css">CSS</span> <span
class="js">JavaScript</span> <span class="ts">TypeScript</span> <span class="svelte">Svelte</span>
<span class="postgres">Postgres</span>
</p>
<img loading="lazy" src="./images/Screens/Dashboard.png"
alt="Learnerly: A Website Generator to power Course content creators" width="250px">
<a href="./projects/learnerly.html" class="button">View Learnerly ↗</a>
</article>
<article data-label="artekk">
<img loading="lazy" src="./images/Screens/Fashion.png" alt="Augmented Reality solution" width="250px">
<h2>ARTekk</h2>
<p>An immersive Augmented Reality (AR) platform offering virtual try-ons and interactive product
experiences across 12 verticals, including fashion, furniture, and cosmetics. I led the UX engineering
team, designing web components and a design system to enhance user interaction.<br><br><span
class="web">Web</span><span class="mobile">Mobile</span>
<span class="html">HTML</span> <span class="css">CSS</span> <span class="js">JavaScript</span> <span
class="web-components">Web-Components</span><span class="webxr">WebXR</span> <span
class="figma">Figma</span>
</p>
<a href="./projects/artekk.html" class="button">View ARTekk ↗</a>
</article>
<article data-label="pokemon">
<h2>Pokémon</h2>
<p>The challenge was to provide clear, engaging, and accurate information about Community Day events to over
500k Pokémon Go trainers. As Lead Designer and Developer of Design Tools at Pokédex100, I created
bi-weekly infographics, developed design tools to streamline the process, ensured consistent branding,
and collaborated with a team to enhance community engagement.<br><br><span
class="graphic">Graphic</span>
<span class="html">HTML</span>
<span class="css">CSS</span>
<span class="js">JavaScript</span>
<span class="material">Material 3</span>
<span class="figma">Figma</span>
<span class="blender">Blender</span>
<span class="photoshop">Adobe Photoshop</span>
<span class="sketch">Sketch</span>
<span class="illustrator">Adobe Illustrator</span>
</p>
<img loading="lazy" src="./images/Screens/Greninja_Commday.png" alt="Pokémon: tools and infographics"
width="550px">
<a href="./projects/pokemon.html" class="button">View Pokémon ↗</a>
</article>
<article data-label="kandikosmos">
<img loading="lazy" src="./images/Screens/Home.png" alt="Kandi Kosmos Social Media Platform" width="250px">
<h2>Kandi Kosmos</h2>
<p>A social media app designed to enhance the kandi festival experience by digitally
connecting participants and tracking beads with QR codes, geographic mapping, and social media
integration. I led the UX design and developed a Figma plugin and web component for generating random
bead colors and patterns, ensuring seamless integration of QR codes, social media features, and
geographical tracking. <br><br><span class="web">Web</span><span class="mobile">Mobile</span>
<span class="html">HTML</span> <span class="css">CSS</span> <span class="js">JavaScript</span> <span
class="ts">TypeScript</span> <span class="svelte">Svelte</span> <span
class="postgres">Postgres</span> <span class="maps">Maps API</span> <span class="figma">Figma</span>
<span class="cesium">Cesium</span> <span class="web-components">Web Components</span>
</p>
<a href="./projects/kandikosmos.html" class="button">View Kandi Kosmos ↗</a>
</article>
</section>
<footer>
<div>
<a href="https://github.com/yashrajbharti" target="_blank">
<img src="./images/Social/github.svg" alt="" height="16px">
Github
</a>
<a href="https://www.linkedin.com/in/yash-raj-bharti-5693b6183/" target="_blank">
<img src="./images/Social/linkedin.svg" alt="" height="16px">
LinkedIn
</a>
<a href="https://yashrajbharti.github.io/portfolio/" target="_blank">
<img src="./images/Social/dev.svg" alt="" height="16px">
Dev Portfolio
</a>
<a href="mailto:[email protected]" target="_blank">
<img src="./images/Social/email.svg" alt="" height="16px">
Email
</a>
</div>
<span>@design portfolio by yash</span>
</footer>
<script type="module" src="./js/main.js"></script>
</body>
</html>