forked from varughese/varughese.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
334 lines (310 loc) · 16.6 KB
/
about.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Markazi+Text|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004784">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<title>Mat Varughese | About Me</title>
</head>
<body class="about">
<div class="main-block">
<div class="header">
<h1><span class="go-home-link">
<a title="Go Home" href="/index.html">
<i class="fas fa-long-arrow-alt-left"></i>
</a>
</span>About Me</h1>
</div>
<div class="info">
<blockquote class="blockquote text-left mb-4">
<p class="mb-0">“You can’t connect the dots looking forward; you can only connect them looking backwards. So you
have to trust that the dots will somehow connect in your future. You have to trust in something – your gut,
destiny, life, karma, whatever. Because believing that the dots will connect down the road will give you the
confidence to follow your heart even when it leads you off the well worn path; and that will make all the
difference.”</p>
<footer class="blockquote-footer text-right">Steve Jobs in
<cite title="Steve Jobs Commencement Speech">
<a href="https://www.youtube.com/watch?v=UF8uR6Z6KLc">Stanford '05 Commencement Speech</a>
</cite>
</footer>
</blockquote>
<p>
This quote in Steve Jobs' commencement speech compares life choices to dots. In this timeline below I tried to show
how my own "dots" connect.</p>
<!-- <p> Want <span id="more-detail">more</span> detail? Click <button onclick="toggleMoreDetail()" class="btn btn-xs btn-primary">here</button>. -->
</p>
</div>
<div class="shadow-holder"></div>
<div class="timeline-wrapper">
<ul class="timeline">
<!-- Item 1 -->
<!-- <li class="timeline-item">
<div class=" portfolio-card has-logo direction-r">
<div class="portfolio-card-body flag-wrapper">
<h5 class="portfolio-card-title flag">
<span class="flag flag-shadow">
Alpine Mechanical Services
</span>
</h5>
<p class="card-text">A description of all the lectures and courses I have taken and my final
degree?
</p>
<img class="work-logo" title="Interactive Multimedia Group, my first job" src="images/img.png"></img>
<div class="tags">
<span class="badge badge-pill badge-danger">Work</span>
<span class="badge badge-pill badge-info">MEAN</span>
<span class="badge badge-pill badge-warning">Lunr</span>
</div>
</div>
</div>
</li> -->
<!-- Item 2 -->
<!-- <li class="timeline-item">
<div class=" portfolio-card has-logo direction-l">
<div class="portfolio-card-body flag-wrapper">
<h5 class="portfolio-card-title flag">
<span class="flag flag-shadow">
Alpine Mechanical Services
</span>
<span class="date">JUN 15</span>
</h5>
<p class="card-text">A description of all the lectures and courses I have taken and my final
degree?
</p>
<img class="work-logo" title="Interactive Multimedia Group, my first job" src="images/img.png"></img>
<div class="tags">
<span class="badge badge-pill badge-danger">Work</span>
<span class="badge badge-pill badge-info">MEAN</span>
<span class="badge badge-pill badge-warning">Lunr</span>
</div>
</div>
</div>
</li> -->
</ul>
</div>
</div>
<script>
var $timeline = document.querySelector(".timeline");
var $toggleWord = document.querySelector("#more-detail");
var dots = [{
title: "Interactive Multimedia Group",
date: new Date("July 30, 2015"),
logo: { src: "images/img.png" },
short: "Worked at local web dev / computer repair shop while in highschool",
text: "In high school I was job hunting (without much success since I was like 15). I saw an on Craiglist for a JavaScript developer. It seemed sketchy but I decided to apply. Turned out to be a great descision. I worked here for about three years and was extremely confused in the beginning. I did not realize it at the time, but I was learning really valuable skills that would benefit me a lot.",
tags: [{text: "Work"}]
}, {
title: "PSP, iPods, Pranks",
date: new Date("December 10, 2008"),
text: "Spent a month figuring out how to transfer photos onto my PSP. Learned how to jailbreak iPods. Watched random YouTube videos about technology. Wrote a .bat script that ejected the CD drive at random intervals to prank my older brothers. (That is what they get for never letting me play Super Nintendo with them)",
tags: [{text: "Elementary School"}]
}, {
title: "HTML for Dummies",
date: new Date("July 30, 2009"),
short: "Introduced to coding by this book and Codeacademy",
text: "I got this book from the library and went through it. Had no idea what I was doing but it was fun typing stuff into NotePad and seeing things change. Eventually I would go on CodeAcademy and learn the basics of Javascript.",
tags: [{text: "Elementary School"}]
},{
title: "AP Computer Science",
date: new Date("May 3, 2016"),
text: "Learned Java in this class and loved it. It was about this time I realized I wanted to major in CS (over engineering or math).",
tags: [{text: "High School"}]
},{
title: "Rejections",
date: new Date("March 31, 2017"),
text: "I was rejected by CMU, waitlisted by Penn and Cornell. I spent a lot of time on my essays to apply to those schools. Even though I am not sure if I would have attended if I got accepted (dependent on finacial aid) the rejections hurt. I emailed the guy I interviewed for Penn and he told me, \"At the end of the day, what you get out of your undergraduate experience is wholly up to you.\" <i>Wholly up to you</i>. For some reason this phrase stuck without me throughout the years. It took me some time to believe it, but now I truly do.",
tags: [{text: "High School"}]
}, {
title: "University of Pittsburgh",
date: new Date("May 1, 2017"),
short: "Chose to go to Pitt! #H2P",
text: "I had to decide between Temple and Pitt. Decided to move across the state and go to Pitt. Pretty sure I made the right choice. But I don't think there was \"right\" choice.",
tags: [{text: "High School"}]
},{
title: "Kent State Hackathon",
date: new Date("Oct 1, 2017"),
text: "This was my first hackathon. I was expecting to be judged on technical aspects. Instead, it was all about your idea and how you can pitch it. I did not really like that and felt it promoted bad code (and also I thought promoting staying up all night was weird). Still, free food and met people so it was chill.",
tags: [{text: "College"}, {text: "Hackathon"}]
},{
title: "JPMorgan Code for Good Hackathon",
date: new Date("Nov 1, 2017"),
short: "Won a hackathon sponsored by JP and offered internship",
text: "I applied to this thing in September and forgot about it. End of October I got an email that invited me to fly out to Delaware. Free flight and free food? Why not. I went and used my previous hackathon expierence and web-dev skills from my old job to help the team get the win. This hackathon was a little more organized and had focus on actual code as well compared to Kent. It restored my faith in hackathons. I also met people from across the country that I am still friends with.",
tags: [{text: "College"}, {text: "Hackathon"}]
},{
title: "Pitt CSC",
date: new Date("April 1, 2018"),
short: "I received lots of help in my life and became VP of CS club to pay it forward.",
logo: { src: "images/pitt.svg", css: "pitt-logo-gold-bg" },
text: "When I first came to Pitt I asked a lot of advice from the Pitt CSC (CS Club) Vice President. At the end of the semester he did not run so I decided I could pay it forward and help out the club by becoming an officer. Now I am the VP",
tags: [{text: "College"}, {text: "Club"}]
},{
title: "Eagles won Super Bowl",
date: new Date("Feb 4, 2018"),
text: "GOOOOOOOOOOOO BIRRRRRRDS!",
tags: [{text: "College"}, {text: "Philly"}]
},{
title: "JPMorgan Chase & Co",
date: new Date("June 4, 2018"),
logo: { src: "images/jp.png" },
short: "Worked in Houston on Data team",
text: "Traveled to Houston for the summer. I was not a fan of the corporate feel, cubicles, and layers of bureaucracy. Or Houston. My biggest gripe was the super slow machines we were given. But, the other interns were awesome and my team had many smart engineers. Another intern on my team mentioned a company called Stripe to me. I checked its website out briefly and it seemed cool.",
tags: [{text: "Summer"}, {text: "Work"}]
},{
title: "TA & Peer Tutor",
date: new Date("Aug 30, 2018"),
logo: { src: "images/cathy.png" },
short: "Turns out, this is a great way to practice explaining code and communicating your thoughts. Which is great for interviews (and life!)",
text: "I've always enjoyed teaching. I decided to become a teaching assistant and tutor to make a little cash to pay for groceries. Turns out, it is a great way to practice explaining code and communicating your thoughts. Which is great for interviews (and life!)",
tags: [{text: "College"}, {text: "Work"}]
}, {
title: "Made this Website",
date: new Date("June 30, 2018"),
short: "Lowkey, I think this website got me my Google internship",
text: "Decided I should make a website since I knew how. I did not feel like it and I doubted it would make any difference. However, during my Google interview, the interviewer mentioned my website and seemed impressed with it. So I am glad I made it!",
tags: [{text: "College"}, {text: "Side Project"}]
}, {
title: "Google",
date: new Date("May 30, 2019"),
logo: { src: "images/google.png" },
short: "Worked on Google Sheets in NYC!",
text: "Ever since I was started programming I was interested on how to do it at the highest level. Naturally, I thought Google was the way to do it so it was a goal of mine. Once I got there I was pretty amazed. It was probably the first time I was surrounded by other programmers. I learned a lot and had a great time.",
tags: [{text: "Work"}, {text: "New York"}]
}, {
title: "Stripe?",
date: new Date("Sept 30, 2019"),
logo: { src: "images/stripe.png" },
short: "In the fall of 2019 I took a semester off from school to work at some payments company called Stripe",
text: "During my on-site at Stripe I fell in love with the place. I did not know how to pick between Google or Stripe for my summer internship. (I was pretty shocked I even had both options) Ended up asking my Stripe recruiter if I could delay it to the fall. She was chill about it and I decided to do it. Was it a good choice? Guess we will have to wait to find out. (Update: it was)",
tags: [{text: "Work"}, {text: "San Francisco"}]
}, {
title: "Google (Pt 2)",
date: new Date("May 1, 2020"),
logo: { src: "images/google.png" },
text: "I thought interning in Seattle would be a great way to spend my last summer beforre I graduated. (Then Covid happened) I worked on software to improve the supply chain for Google's data centers.",
tags: [{text: "Work"}, {text: "Seattle"}]
}, {
title: "Graduated Pitt",
date: new Date("May 5, 2020"),
short: "Hail to Pitt!",
text: "Time flies. I remember thinking when I was in high school if Pitt would be the right place for me. Looking back, I think I would have made the most out of anywhere I went. Pitt was great and I am glad to have made a lot of close friends and great memories there."
}, {
title: "Stripe",
date: new Date("August 31, 2020"),
logo: { src: "images/stripe.png" },
short: "Joined as a New Grad on the Docs Product team at Stripe",
text: "It is gonna be a lot of fun"
}
].sort(function(a, b) { return b.date.getTime() - a.date.getTime(); });
var options = {
short: true,
startRight: true
};
dots.forEach(appendTimelineItem);
function toggleMoreDetail() {
$timeline.innerHTML = "";
options.short = !options.short;
options.startRight = !options.startRight;
$toggleWord.textContent = $toggleWord.textContent == "less" ? "more" : "less";
dots.forEach(appendTimelineItem);
}
function appendTimelineItem(item, index) {
if(options.short && !item.short) return;
/*
<li class="timeline-item">
<div class="portfolio-card direction-r">
<div class="portfolio-card-body flag-wrapper">
<h5 class="portfolio-card-title flag">
<span class="flag flag-shadow">{{title}}</span>
<span class="date">JUL 15</span>
</h5>
<p class="card-text">{{text}}</p>
<div class="tags">{{tags}}</div>
</div>
</div>
</li>
*/
/* <li class="timeline-item"> */
var timelineItem = document.createElement("li");
timelineItem.classList.add("timeline-item");
/* <div class="portfolio-card direction-r"> */
var portfolioCard = document.createElement("div");
portfolioCard.classList.add("portfolio-card");
var isDirLeft = item.direction ? item.direction.toLowerCase().indexOf("l") > -1 : index%2==0;
if(options.startRight) isDirLeft = !isDirLeft;
var direction = isDirLeft ? "direction-l" : "direction-r";
portfolioCard.classList.add(direction);
/* <div class="portfolio-card-body flag-wrapper"> */
var portfolioCardBody = document.createElement("div");
portfolioCardBody.classList.add("portfolio-card-body");
portfolioCardBody.classList.add("flag-wrapper");
/* <h5 class="portfolio-card-title flag"> */
var portfolioCardTitle = document.createElement("h5");
portfolioCardTitle.classList.add("portfolio-card-title");
portfolioCardTitle.classList.add("flag");
/* <span class="flag flag-shadow">{{title}}</span> */
var flagShadowSpan = document.createElement("span");
flagShadowSpan.classList.add("flag");
flagShadowSpan.classList.add("flag-shadow");
flagShadowSpan.textContent = item.title;
/* <span class="date">JUL 15</span> */
var dateSpan = document.createElement("span");
dateSpan.classList.add("date")
dateSpan.textContent = formatDate(item.date);
portfolioCardTitle.appendChild(flagShadowSpan);
portfolioCardTitle.appendChild(dateSpan);
portfolioCardBody.appendChild(portfolioCardTitle);
/* <p class="card-text">{{text}}</p> */
var cardText = document.createElement("p");
cardText.classList.add("card-text");
cardText.innerHTML = options.short ? item.short : item.text;
portfolioCardBody.appendChild(cardText);
if(item.logo) {
/* <img class="work-logo" src="{{src}}"></img> */
var logo = document.createElement("img");
logo.classList.add("work-logo");
logo.src = item.logo.src;
if(item.logo.css) logo.classList.add(item.logo.css);
portfolioCardBody.appendChild(logo);
portfolioCard.classList.add("has-logo");
}
/* <div class="tags">{{tags}}</div> */
var tags = document.createElement("div");
// /* <span class="badge badge-pill badge-danger">{{tag.text}}</span> */
// item.tags.forEach(function(tag) {
// var badge = document.createElement("span");
// badge.classList.add("badge");
// badge.classList.add("badge-pill");
// badge.classList.add("badge-danger");
// badge.textContent = tag.text;
// tags.appendChild(badge);
// tags.appendChild(document.createTextNode(" "));
// });
// tags.classList.add("tags");
portfolioCardBody.appendChild(tags);
portfolioCard.appendChild(portfolioCardBody);
timelineItem.appendChild(portfolioCard);
$timeline.appendChild(timelineItem);
}
function formatDate(date) {
var months = ["JAN", "FEB", "MARCH", "APR", "MAY", "JUNE", "JULY", "AUG", "SEPT", "OCT", "NOV", "DEC"];
var year = date.getYear()-100;
return months[date.getMonth()] + " " + date.getFullYear();
}
</script>
</body>
</html>