-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
234 lines (202 loc) · 14.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Last Published: May 4 2020
May the force be with you!
/\
/**\
/*👁*\
/__**__\
What hast thou seen?
-->
<!-- Meta tags -->
<title>Kumar Rohit Chandra - UI/UX Designer</title>
<meta charset="utf-8">
<meta name="description" content="Portfolio Website">
<meta name="keywords" content="kumar rohit chandra, krrohitch, kumar rohit, rohit, noida, designer, ui ux, ui designer, ux designer, product designer, front end developer, engineer, internship, internshala, do your thng, dyt, nibble computer society, ncs, figma">
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="UI/UX designer & front-end developer with a hands-on experience of 2.5 years. Building modern, functional and engaging experiences that create an impact.">
<meta name="author" content="@krrohitch">
<meta name="theme-color" content="#692DB7"/>
<meta itemprop="name" content="Kumar Rohit Chandra, UI/UX Designer"/>
<meta itemprop="description" content="UI/UX designer & front-end developer with a hands-on experience of 2.5 years. Building modern, functional and engaging experiences that create an impact."/>
<meta itemprop="image" content="http://krrohitch.github.io/images/card.png"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@krrohitch"/>
<meta name="twitter:title" content="Kumar Rohit Chandra, UI/UX Designer"/>
<meta name="twitter:description" content="UI/UX designer & front-end developer with a hands-on experience of 2.5 years. Building modern, functional and engaging experiences that create an impact."/>
<meta name="twitter:creator" content="@krrohitch"/>
<meta name="twitter:image:src" content="http://krrohitch.github.io/images/card.png"/>
<meta property="og:title" content="Kumar Rohit Chandra, UI/UX Designer" />
<meta property="og:type" content="portfolio">
<meta property="og:url" content="http://krrohitch.github.io"/>
<meta property="og:image" content="http://krrohitch.github.io/images/card.png" />
<meta property="og:description" content="UI/UX designer & front-end developer with a hands-on experience of 2.5 years. Building modern, functional and engaging experiences that create an impact." />
<meta property="og:site_name" content="Kumar Rohit Chandra, UI/UX Designer"/>
<link href="css/style.css" type="text/css" rel="stylesheet">
<link id="favicon" rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
</head>
<body onload="preloader()" id="top">
<div>
<!-- Preloader animation -->
<div id="preloader">
<img class="loader" src="images/r-logo.svg" alt="Rohit - Logo">
</div>
<div id="container">
<!-- Navigation bar -->
<nav>
<div id="left-nav">
<a href="https://krrohitch.github.io/" title="Kumar Rohit Chandra, UI/UX Designer">
<img class="r-logo" src="images/r-logo.svg" alt="Rohit - Logo">
</a>
</div>
<div class="menu">
<div id="btn-menu" onclick="openMenu()"></div>
<div id="right-nav">
<div id="btn-close" onclick="closeMenu()"></div>
<a class="nav" href="krrohitch-resume.pdf" target="_blank" rel="noopener" title="Rohit - Resume" onclick="closeMenu()">Resume</a>
<a class="nav" href="#projects" onclick="closeMenu()">Work</a>
<a class="nav" href="#about" onclick="closeMenu()">About</a>
<a class="nav" href="#contact" onclick="closeMenu()">Contact</a>
</div>
</div>
</nav>
<!-- Hero section -->
<section id="hero">
<h1>Hello! I'm <span>Kumar Rohit Chandra</span></h1>
<p>I’m a UI/UX designer & front-end developer, creating digital experiences and the systems that scale them. I <b>believe in design</b> being a metaphor for simplifying lives. Currently designing for developer community at <a class="link" href="http://devfolio.co/" target="_blank" rel="noopener" title="Devfolio - Website">Devfolio</a></p>
</section>
<!-- Projects section -->
<section id="projects">
<h2 class="heading">Projects</h2>
<div class="proj-container">
<a href="#" data-modal="modal-is" alt="Internshala" class="proj-box" id="proj-is">
<h3>Internshala</h3>
<h5>App Design · Design System</h5>
</a>
<a href="#" data-modal="modal-dyt" alt="Do Your Thng" class="proj-box" id="proj-dyt">
<h3>Do Your Thng</h3>
<h5>Product Design · Design System</h5>
</a>
<a href="#" data-modal="modal-ncs" alt="Nibble Computer Society" class="proj-box" id="proj-ncs">
<h3>Nibble Computer Society</h3>
<h5>UI/UX Design · Brand Strategy</h5>
</a>
<a href="#" data-modal="modal-cryp" alt="Cryptorai" class="proj-box" id="proj-cryp">
<h3>Cryptorai Inc.</h3>
<h5>UI/UX Design</h5>
</a>
</div>
</section>
<!-- About section -->
<section id="about">
<h2 class="heading">About Me</h2>
<img src="images/img-rohit.png" alt="Rohit - Profile Image">
<p>A self-taught designer with a knack for attention to detail & analysis in design. I love Atomic Design, Inter font and 8 point grids. Figma is my go-to tool for converting ideas to interfaces.</p>
<p>Currently, I am in my final year at JSS Noida, pursuing B.Tech in Electrical Engineering. I value engineering as a methodology to explore and find out solution for real-world problems. It is the foundation to my design thinking.</p>
<p>Beyond design, I have an affinity for <a class="link" href="https://www.youtube.com/user/everyframeapainting" target="_blank" rel="noopener" title="Every Frame a Painting - YouTube Channel">cinema</a>; dissecting its many layers from story to cinematography. I appreciate all genres of <a class="link" href="https://open.spotify.com/user/sugnpep4e2g4kxr3qrwv3q6ga" target="_blank" rel="noopener" title="Rohit - Spotify Profile">music</a>, but I loop back to Rock and R&B every once a while. I like to study <a class="link" href="http://philosophizethis.org/" target="_blank" rel="noopener" title="Philosophize This! – Podcast Website">philosophy</a>, explore conspiracies and watch <a class="link" href="https://www.youtube.com/results?search_query=krrohitch" target="_blank" rel="noopener" title="Rohit - YouTube Playlists">video essays</a>.</p>
</section>
<!-- Contact section -->
<section id="contact">
<h2 class="heading">Get in Touch</h2>
<p>I'm always interested in working on new products. Thinking about hiring me or would like to discuss a project?</p>
<a class="btn mail" href="mailto:krrohitch@gmail.com">Email me</a>
<div class="social">
<a class="nav" href="https://www.linkedin.com/in/krrohitch/" target="_blank" rel="noopener" title="LinkedIn profile">LinkedIn</a>
<a class="nav" href="https://dribbble.com/krrohitch" target="_blank" rel="noopener" title="Dribble portfolio">Dribbble</a>
<a class="nav" href="https://www.behance.net/krrohitch" target="_blank" rel="noopener" title="Behance portfolio">Behance</a>
<a class="nav" href="https://medium.com/@krrohitch" target="_blank" rel="noopener" title="Medium profile">Medium</a>
</div>
</section>
</div>
<!-- Modals -->
<div class="modal" id="modal-is">
<div class="proj-full">
<img class="proj-cover" src="images/cover-is.png" alt="Internshala">
<section>
<a class="fab close-proj" data-modal="modal-is" href="#proj-is"><img src="images/x.svg" alt="Close icon"></a>
<div class="proj-title">
<h5>Internshala</h5>
<h3>Improving how students find & apply to internships with a better experience</h3>
</div>
<p><a class="link" href="https://internshala.com/" target="_blank" rel="noopener" title="Internshala - Website">Internshala</a> is the largest internships & training platform in India, which helps students get internships in various profiles and locations. It connects 6 million+ students with 100 thousand+ companies / startups.</p>
<p>As a UI/UX Design intern, I worked with the lead designer, engineers, product managers, and other designers. We built the <b>Internshala design system</b> and redesigned the <b>Android app</b>, to help students with their <b>internship search experience</b>.</p>
<h4>Building a design system</h4>
<p>We designed an inclusive system that defines digital experiences, consistency and identity for Internshala. Based on <a class="link" href="https://atomicdesign.bradfrost.com/" target="_blank" rel="noopener" title="Atomic Design - Brad Frost">Brad Frost’s Atomic Design</a>, we built a comprehensive style guide & component library.</p>
<p>The design system would be implemented to all products from Internshala, including trainings and a new job platform. It helped the whole team by making visual design <b>consistent and scalable</b> and developing new features faster.</p>
<img class="proj-img" src="images/img-is01.png" alt="Internshala - Design System">
<h4>Redesigning the Internshala app</h4>
<p>I designed the complete end-to-end experience for the <a class="link" href="https://play.google.com/store/apps/details?id=com.internshala.app&hl=en_IN" target="_blank" rel="noopener" title="Internshala App - Play Store">Internshala app</a>, based on the new design system. It was focused on clear information, intuitive interactions and unified experience.</p>
<p>Also, I collaborated with engineers for developer hand-offs & finalizing. I conducted a sample user testing with a group of students to identify opportunities and validate the solution.</p>
<img class="proj-img" src="images/img-is02.png" alt="Internshala - Android App">
</section>
</div>
</div>
<div class="modal" id="modal-dyt">
<div class="proj-full">
<img class="proj-cover" src="images/cover-dyt.png" alt="Do Your Thng">
<section>
<a class="fab close-proj" data-modal="modal-dyt" href="#proj-dyt"><img src="images/x.svg" alt="Close icon"></a>
<div class="proj-title">
<h5>Do Your Thng</h5>
<h3>Engaging & educating young users to earn from their social media</h3>
</div>
<p><a class="link" href="https://doyourthng.com/" target="_blank" rel="noopener" title="Do Your Thng - Website">Do Your Thng</a> is a shared economy platform for digital profiles. It helps social media users to support and promote the initiatives they love to get rewarded in return.</p>
<p>As a product design intern, I redesigned the app to <b>boost user engagement</b>, establish identity, <a class="link" href="https://www.toptal.com/designers/ui/gamification-design" target="_blank" rel="noopener" title="Gamification Design - Stian Sandsgaard">incentivise rewards</a> and create clarity through interface. I worked remotely in regular collaboration with a product manager and a designer.</p>
<h4>Setting the tone with a styleguide</h4>
<p>I developed a visual language and styleguide to make designing layouts faster and more coherent. With this, we were able to define constraints and take a lean approach.</p>
<img class="proj-img" src="images/img-dyt01.png" alt="Do Your Thng - Design System">
<h4>Designing delightful interfaces</h4>
<p>I designed information architecture and high-fidelity prototypes for the app. I updated the user flow for a transparent system structure which was easily recognisable.</p>
<img class="proj-img" src="images/img-dyt02.png" alt="Do Your Thng - User flow">
<p>I designed high-fidelity prototypes for onboarding, account, login/signup, and a new digest section. The redesigned app increased the conversation rates by 16%, which helped bring in more campaigns and initiatives onboard.</p>
<p>Later, I worked on admin dashboards for brands & campaign creators. Designed information architecture and wireframes through for better tracking & managing experience.</p>
<img class="proj-img" src="images/img-dyt03.png" alt="Do Your Thng - iOS App">
</section>
</div>
</div>
<div class="modal" id="modal-ncs">
<div class="proj-full">
<img class="proj-cover" src="images/cover-ncs.png" alt="Internshala">
<section>
<a class="fab close-proj" data-modal="modal-ncs" href="#proj-ncs"><img src="images/x.svg" alt="Close icon"></a>
<div class="proj-title">
<h5>Nibble Computer Society</h5>
<h3>Building college community into a peer-to-peer learning experience</h3>
</div>
<p><a class="link" href="http://hackncs.com/" target="_blank" rel="noopener" title="Nibble Computer Society - Website">Nibble Computer Society</a> is a college society in JSSATE Noida, where a group of students come together to learn and improve their technical skills. Together we built digital projects to help college students and faculties.</p>
<p>As a part of NCS, I <b>designed creatives & interactions</b> for several projects, college fest, online games and platforms. We held daily labs after our classes to work on such projects.</p>
<p>As a Creative Head in the final year, I headed the design club at NCS. I <b>mentored students,</b> sharing my learnings in UI/UX design, graphic design, animation and front-end development.</p>
</section>
</div>
</div>
<div class="modal" id="modal-cryp"><div class="proj-full">
<img class="proj-cover" src="images/cover-cryp.png" alt="Internshala">
<section>
<a class="fab close-proj" data-modal="modal-cryp" href="#proj-cryp"><img src="images/x.svg" alt="Close icon"></a>
<div class="proj-title">
<h5>Cryptorai</h5>
<h3>Simplifying cryptocurrency assets & market tracking for all</h3>
</div>
<p><a class="link" href="https://www.cryptorai.com/" target="_blank" rel="noopener" title="Cryptorai - Website">Cryptorai</a> is a comprehensive cryptocurrency portfolio tracker and market data application. It aggregates portfolio info from all the major exchanges at one place and provides real-time updates, to make better trading decisions.</p>
<p>As a UI/UX Design intern, I designed information architecture, user flow, wireframes and prototypes for Crytorai app and web-app, across multiple versions. We started with Material Design and later moved to a new extensive styleguide.</p>
</section>
</div></div>
<!-- Scroll up button -->
<a class="fab" id="scroll-top" href="#top" onclick="scrollTop"><img src="images/arrow-up.svg" alt="Arrow up icon"></a>
<!-- End -->
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-143758189-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-143758189-1');
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<!-- Fin. -->