-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
263 lines (245 loc) · 19.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
<!doctype html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hey there, I'm Karthik Venkataraman, a user experience designer. Check out my recent works, case studies and blogs here.">
<meta name="theme-color" content="#f6f6f6">
<meta property="og:title" content="Portfolio | Karthik Venkataraman">
<meta property="og:description" content="Hey there, I'm Karthik Venkataraman, a user experience designer. Check out my recent works, case studies and blogs here.">
<meta property="og:image" content="https://www.karthikvenkataraman.in/assets/images/banner.jpg">
<meta property="og:url" content="https://www.karthikvenkataraman.in">
<meta name="twitter:card" content="summary_large_image">
<title>Portfolio | Karthik Venkataraman</title>
<link rel="icon" href="/assets/images/favicon.png" type="image/png">
<!-- Preloads -->
<link rel="preload" href="/assets/fonts/portfolioicons.woff" as="font" type="font/woff" crossorigin>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&display=swap">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div class="layout" role="document">
<header>
<!-- Outaded Page Info -->
<!-- <section class="alert alert-warning px-sm-5 p-3 text-center">
The website content is out of date, but it will be updated soon with new projects and accomplishments. If you'd like to learn more about my recent projects, please contact me via <a class="alert-link" href="mailto:karthik.venkataraman96@gmail.com?subject=About%20Recent%20Projects"><u>Email</u></a> or <a class="alert-link" href="https://www.linkedin.com/in/k17n/" target="_blank" rel="noopener noreferrer"><u>LinkedIn</u></a>.
</section> -->
<nav class="navbar navbar-expand-lg site-navbar pt-4">
<div class="container">
<a class="navbar-brand" href="/">
<span class="sr-only">Go to Home Page</span>
<div class="d-flex justify-content-center align-items-center" data-tilt data-tilt-scale="1.25" data-tilt-speed="300" data-tilt-transition="true">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
<path fill-rule="evenodd" d="M38 0a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h36zm-1.825 13h-9.32c-.25 0-.476.058-.677.175-.5.284-.827.76-.977 1.428l-1.153 13.03c-.017.267.125.36.426.276.134-.033.31-.125.526-.276s.426-.355.626-.614.31-.49.326-.69l1.002-11.4h4.06l-1.128 12.704c-.017.267.125.36.426.276.134-.033.31-.125.526-.276s.426-.36.626-.626.31-.493.326-.677l1.002-11.4h1.98c.184 0 .464-.134.84-.4s.63-.6.764-1.027c.117-.334.05-.5-.2-.5zm-16.162 0h-8.82c-.25 0-.476.058-.677.175-.5.284-.827.76-.977 1.428l-.326 3.834c-1.253.234-2.326.677-3.22 1.328s-1.52 1.34-1.88 2.067-.53 1.424-.514 2.092c.067 2.673 1.996 4.01 5.788 4.01 1.12 0 2.113-.276 2.982-.827 1.704-1.102 2.714-2.8 3.032-5.06l.226-1.78c1.77.25 3.003.714 3.696 1.39s.898 1.49.614 2.443-.54 1.487-.764 1.604-.497.192-.814.226c-.785.084-1.695-.092-2.73-.526l-.053-.02c-.13-.036-.31.01-.536.133a2.68 2.68 0 0 0-.727.601c-.226.26-.372.5-.438.727s-.033.363.1.413c1.203.518 2.238.727 3.107.626.518-.067 1.107-.28 1.766-.64s1.25-.923 1.766-1.69.902-1.57 1.153-2.405c.434-1.47.17-2.606-.79-3.408s-2.66-1.303-5.1-1.503l.326-3.307H18.6c.184 0 .464-.134.84-.4s.63-.6.764-1.027c.117-.334.05-.5-.2-.5zM8.688 20.28c1.403-.242 3.14-.305 5.212-.188l-.752 4.6-.05.137c-.11.305-.204.502-.277.59-.334.4-1.01.6-2.03.6-3.458 0-5.212-1.16-5.262-3.483l-.005-.165c-.008-.64.12-1.053.38-1.238.45-.334 1.378-.622 2.78-.864zm5.713-5.35l-.276 3.207c-1.153-.017-2.188.008-3.107.075l.276-3.282z" />
</svg>
</div>
</a>
<!-- Theme Switcher for XS Devices -->
<div class="ml-auto mr-3 mt-2 theme-switcher theme-switcher--xs">
<span class="icon-sun theme-switcher__btn" data-theme-option="light"></span>
<span class="icon-dark theme-switcher__btn" data-theme-option="dark"></span>
</div>
<!-- Site Navigation Toggler -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#siteNavigation" aria-controls="siteNavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon icon-menu d-flex justify-content-center align-items-center"></span>
</button>
<!-- Site Navigation -->
<div class="collapse navbar-collapse" id="siteNavigation">
<ul class="navbar-nav ml-sm-auto">
<li class="nav-item active">
<a class="nav-link px-lg-3" href="/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="/projects/">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="/blog/">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="/about/">About</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link px-lg-3" href="/assets/documents/CV-Karthik-V-Meenaakshisundaram.pdf" target="_blank">Resume</a>
</li> -->
</ul>
</div>
</div>
</nav>
</header>
<main class="main" tabindex="-1">
<section id="hero" class="hero container d-flex justify-content-center align-items-center mt-5 mt-sm-0">
<div class="text-center d-flex flex-column align-items-center">
<h1 class="hero__jumbotron">"Because great design simplifies a very complicated world.”</h1>
<p class="hero__lead">- Platon, Photographer</p>
<p class="hero__lead mt-5">Hey there, I'm <span class="hero__lead--name">Karthik Venkataraman</span>, a user experience designer trying to resolve problems and design solutions that benefit humanity as they navigate through physical and digital spaces with time.</p>
</div>
</section>
<div id="works" class="mb-5">
<section id="projects" class="section mb-5 mt-5 mt-sm-0 container">
<div class="section__label">Featured Projects</div>
<div class="project-widget">
<div class="row">
<div class="col-sm-6 project-widget__image-container">
<img class="img-fluid" src="/assets/images/projects/ethics-of-xr/ethics-of-xr-banner.jpg" alt="A kid using a VR device">
</div>
<div class="col-sm-6 p-4 p-sm-5">
<h2 class="project-widget__title mt-sm-5 mb-3">The Ethics of Extended Realities</h2>
<p class="project-widget__description">A comprehensive review of ethics in Extended Reality (XR) technologies, exploring issues and proposing solutions across various domains.</p>
<a class="btn rounded-0 project-widget__action" href="/projects/ethics-of-xr/">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 d-flex">
<div class="project-widget">
<div class="row">
<div class="project-widget__image-container">
<img class="img-fluid" src="/assets/images/projects/travelU/travelU-banner.jpg" alt="A duty free shop in an airport">
</div>
<div class="p-4">
<h2 class="project-widget__title mb-3">Envisioning Heinemann's Future Travel Companion</h2>
<p class="project-widget__description">Learn how we created TravelU, a futuristic travel companion that won the Reply Challenge 2022 "Customer Experience" category.</p>
<a class="btn rounded-0 project-widget__action" href="/projects/travelU/">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 d-flex">
<div class="project-widget">
<div class="row">
<div class="project-widget__image-container">
<img class="img-fluid" src="/assets/images/projects/design-for-awareness/design-for-awareness-banner.jpg" alt="An EV car user reaching out to a charger">
</div>
<div class="p-4">
<h2 class="project-widget__title mb-3">Design for Awareness</h2>
<p class="project-widget__description">A conceptual investigation into how design can raise awareness among EV users and encourage them to regulate their charging habits.</p>
<a class="btn rounded-0 project-widget__action" href="/projects/design-for-awareness/">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 d-flex">
<div class="project-widget d-flex justify-content-center align-items-center flex-fill position-relative my-0 my-sm-4">
<a type="button" class="btn rounded-0 shadow-none stretched-link project-widget__view-all" href="/projects/">
<span>View All Projects</span>
<i class="icon-arrow-forward align-middle d-inline-block"></i>
</a>
</div>
</div>
</div>
</section>
<section id="blog" class="section mb-5 mt-5 mt-sm-0 container">
<div class="section__label">Blog</div>
<div class="row mt-3">
<div class="col-sm-6">
<div class="p-4 bg--secondary">
<h2 class="project-widget__title mb-3">Spendely - An expense manager for International Students</h2>
<p class="project-widget__description">A conceptual app designed for international students to manage their expense efficiently.</p>
<a type="button" class="btn rounded-0 project-widget__action" href="/blog/spendeley-expense-manager/" target="_blank" rel="noopener noreferrer">Read More</a>
</div>
</div>
<!-- <div class="col-sm-4">
<div class="p-4 bg--secondary">
<h2 class="project-widget__title mb-3">Know Your Vote - Election Information Portal</h2>
<p class="project-widget__description">Read the story of how we built a comprehensive glossary of User Experience (UX) terms and definitions for UX professionals.</p>
<a type="button" class="btn rounded-0 project-widget__action" href="/projects/know-your-vote/">Read More</a>
</div>
</div> -->
<div class="col-sm-6 d-flex">
<div class="p-4 bg--secondary d-flex justify-content-center align-items-center flex-fill position-relative my-4 my-sm-0">
<a type="button" class="btn rounded-0 shadow-none stretched-link project-widget__view-all" href="/blog/" target="_blank" rel="noopener noreferrer">
<span>View All Blog Posts</span>
<i class="icon-arrow-forward align-middle d-inline-block"></i>
</a>
</div>
</div>
</div>
</section>
<section id="devExperiments" class="section mb-5 mt-5 mt-sm-0 container">
<div class="section__label">Dev Experiments</div>
<div class="row justify-content-center mt-2 dev-deck">
<a class="rounded-lg p-1 m-2 p-sm-3 m-sm-3 bg--secondary d-flex flex-column justify-content-center align-items-center dev-deck__item dev-deck__item--1" href="https://link-previewer.netlify.app/" target="_blank" rel="noopener noreferrer">
<img class="dev-deck__item__image" src="/assets/images/app-logos/link-previewer-logo.svg" alt="Logo of Link Previwer">
<p class="sr-only text--primary">Link Previewer</p>
</a>
<a class="rounded-lg p-1 m-2 p-sm-3 m-sm-3 bg--secondary d-flex flex-column justify-content-center align-items-center dev-deck__item dev-deck__item--2" href="https://uxwiki.netlify.app/" target="_blank" rel="noopener noreferrer">
<img class="dev-deck__item__image w-75" src="/assets/images/app-logos/ux-wiki-logo.svg" alt="Logo of UXwiku">
<p class="sr-only text--primary">UXwiki</p>
</a>
<a class="rounded-lg p-1 m-2 p-sm-3 m-sm-3 bg--secondary d-flex flex-column justify-content-center align-items-center dev-deck__item dev-deck__item--3" href="https://uxquotes.netlify.app/" target="_blank" rel="noopener noreferrer">
<img class="dev-deck__item__image" src="/assets/images/app-logos/ux-quotes-logo.svg" alt="Logo of UX Quotes">
<p class="sr-only text--primary">UX Quotes</p>
</a>
<a class="rounded-lg p-1 m-2 p-sm-3 m-sm-3 bg--secondary d-flex flex-column justify-content-center align-items-center dev-deck__item dev-deck__item--4" href="https://codepen.io/k17n" target="_blank" rel="noopener noreferrer">
<img class="dev-deck__item__image" src="/assets/images/app-logos/codepen-icon.svg" alt="Logo of Codepen">
<p class="sr-only text--primary">Codepen</p>
</a>
</div>
</section>
<section id="dribbble" class="section mb-5 mt-5 mt-sm-0 container">
<div class="section__label">Design Explorations</div>
<div id="dribbbleShots" class="dribble-shots mt-2 mt-sm-4"></div>
<div class="d-flex justify-content-center">
<div id="dribbbleLoader" class="spinner-border text-muted my-5"></div>
</div>
</section>
</div>
</main>
<footer>
<div class="footer py-4 d-flex flex-column justify-content-center align-items-center text-center">
<h2 class="px-3">Wanna talk about design? Let's get in touch!</h2>
<div id="socialMediaChannels" class="footer__icons d-flex justify-content-center align-items-center mt-2 mb-3">
<a class="social-icon" href="https://www.linkedin.com/in/k17n/" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Linkedin Profile</span><i class="icon-linkedin"></i></a>
<a class="social-icon" href="https://twitter.com/k17n_" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Twitter Profile</span><i class="icon-twitter"></i></a>
<a class="social-icon" href="https://www.instagram.com/ux_monk/" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Instagram Profile</span><i class="icon-instagram"></i></a>
<a class="social-icon" href="https://dribbble.com/k17n" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Dribbble Profile</span><i class="icon-dribbble"></i></a>
<a class="social-icon" href="https://www.behance.net/k17n" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Behance Profile</span><i class="icon-behance"></i></a>
<a class="social-icon" href="https://github.com/k17n" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Github Profile</span><i class="icon-github"></i></a>
<a class="social-icon" href="https://codepen.io/k17n" target="_blank" rel="noopener noreferrer"><span class="sr-only">View Codepen Profile</span><i class="icon-codepen"></i></a>
</div>
<div class="footer__divider"> </div>
<p class="footer__disclaimer mt-3 mb-0">I designed and coded this website from scratch. © <time id="copyrightYear"></time></p>
</div>
</footer>
</div>
<!-- Theme Switcher for GT-XS Devices -->
<div class="theme-switcher theme-switcher--gt-xs">
<span id="lightThemeSwitch" class="theme-switcher__label" data-theme-option="light">L<br>I<br>G<br>H<br>T</span>
<span id="darkThemeSwitch" class="theme-switcher__label" data-theme-option="dark">D<br>A<br>R<br>K</span>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js" async></script>
<script src="/assets/js/main.js"></script>
<script>
////// DRIBBBLE ///////
var accessToken = "2d96d6d6600a9161ccb7991e27df3bd04002432cb9e34244ace4480cba6574b5" // Set the Access Token
var fetchLimit = 9 //Fetch only latest 9 shots
// Call Dribble v2 API
$.ajax({
url: 'https://api.dribbble.com/v2/user/shots?access_token=' + accessToken + '&per_page=' + fetchLimit,
dataType: 'json',
type: 'GET',
success: function (data) {
if (data.length > 0) {
$.each(data.reverse(), function (i, val) {
$('#dribbbleShots').prepend(
'<a class="shot" target="_blank" href="' + val.html_url + '" title="' + val.title + '" rel="noopener"><div class="title">' + val.title + '</div><img src="' + val.images.normal + '" loading="lazy" alt="' + val.title + '"/></a>'
)
})
}
else {
$('#dribbbleShots').append('<p>Sorry, No shots yet</p>');
}
},
complete: function () {
$('#dribbbleLoader').hide();
}
});
</script>
</body>
</html>