-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (167 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=JetBrains Mono' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <script type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
<spline-viewer loading-anim-type="spinner-small-light" url="https://prod.spline.design/0P4nUrd0wNPkvLsF/scene.splinecode"></spline-viewer> -->
<title>Home</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrambleTextPlugin.min.js"></script>
</head>
<body>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script type="importmap">
{
"imports": {
"@splinetool/runtime": "https://unpkg.com/@splinetool/[email protected]/build/runtime.js"
}
}
</script>
<!-- <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> -->
<script type="module" src="./src/main.js"></script>
<nav id="navbar">
<div class="nav-center">
<ul class="nav-list">
<li class="nav-item"><a class="nav-link"><i class="uil-home-name"></i>meena gopalakrishnan</a></li>
<li class="nav-link-active"><a class="nav-link"><i href="#home" class="uil uil-home-alt"></i>home</a></li>
<li class="nav-link-ani"><a class="nav-link" href="#work"><i class="uil uil-work"></i>work</a></li>
<li class="nav-link-ani"><a class="nav-link" href="resume.html"><i class="uil uil-resume"></i>resume</a></li>
<li class="nav-link-ani"><a class="nav-link" href="#connect"><i class="uil uil-connect"></i>connect</a></li>
</ul>
</div>
</nav>
<!-- <canvas class="canvas"></canvas>
<div class="navbar">
<div class="navbar-bg"> </div>
<a href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div> -->
<div class="main">
<section class="section" id = "s1">
<div class="content-container">
<div class="left-content">
<p class="firstText" id="myName">Hi, my name is</p>
<h1 class="firstText" id="nameText">Meena</h1>
<svg class="distort" style="position: absolute; width: 0; height: 0;">
<filter id="distortionFilter">
<feTurbulence type="fractalNoise" baseFrequency="2.01 .01" numOctaves="5" seed="2" stitchTiles="noStitch" x="0%" y="0%" width="100%" height="100%" result="noise"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"></feDisplacementMap>
</filter>
</svg>
<h2 id="traitsBox" class="traitsClass"></h2>
<p id="descriptionId" class="descriptionClass">
Currently studying Computer Engineering at the University of Waterloo, I strive to solve problems through computers and code. In the past, I have delved into full stack development, machine learning, computer systems development and deep learning, and am always looking for new technologies to tinker with. I enjoy integrating my love for science, art and music with my passion for coding to create cool and useful projects. <br><br> I'm always seeking opportunities to grow my technical toolkit. When I’m not at my computer, you can find me curating playlists, trying to learn the guitar, or biking around.
</p>
</div>
<div id="right-content">
<canvas id="canvas3d"></canvas>
</div>
</section>
<section class="section" id = "s2">
<h1 class="projectsText">Projects</h1>
<div class="project-container">
<ul class="vertical-menu ul--reset">
<li class="vertical-menu-item" data-project="cine-fm"><a class="link--inverse-menu" href="https://cinefm.streamlit.app/">cine.fm 🎶</a></li>
<li class="vertical-menu-item" data-project="ecotrackr"><a class="link--inverse-menu" href="https://github.com/meenag0/Ecotrackr">EcoTrackr 🌱</a></li>
<li class="vertical-menu-item" data-project="rust-web-crawler"><a class="link--inverse-menu" href="https://www.readthisweek.live/">2Read [Rust] 📖</a></li>
<li class="vertical-menu-item" data-project="portfolio-website"><a class="link--inverse-menu" href="https://github.com/meenag0/Portfolio">Portfolio 💻</a></li>
<li class="vertical-menu-item" data-project="flappy-bird"><a class="link--inverse-menu" href="https://github.com/meenag0/flappybird">Flappy Bird 🐥</a></li>
<li class="vertical-menu-item" data-project="price-predictor"><a class="link--inverse-menu" href="https://github.com/meenag0/Housing-Price-Regression-Model">Price Predictor 🏠</a></li>
<li class="vertical-menu-item" data-project="mnist"><a class="link--inverse-menu" href="https://github.com/meenag0/MNIST-Classification">MNIST Classify ✍</a></li>
</ul>
<div class="project" id="projectItems">
<div id="toolsInfo" class="toolInfo">
<div class="toolsDescription">
<a id="viewButton" data-link="" class="toolsDescription" target="_blank" rel="noopener noreferrer">VIEW↗</a>
<p class="toolsDescription" id="tools"></p>
</div>
<img id="projectImage" src="#" class="projectImg">
</div>
<div id="projectInfo" class="pInfo">
<p id="projectDescription"></p>
</div>
</div>
</div>
</section>
<section class="section" id = "s3">
<h2 id="expText">Experience</h2>
<div id="flexExp">
<div class="exp" id="exp1">
<div class="exp-content">
<p id="expTitle">AI Engineering Intern - Finance { Microsoft WEA - Azure & AI / University of Waterloo }</p>
<p id="expiText">
→ Designed AI pipeline using Azure ML, Azure SQL DB, and Azure Databricks to provide personalized financial recommendations <br>
→ Utilized regression models to predict stock/ETF performance, and content-based filtering to allow personalized recommendations <br>
→ Led cross-functional team collaboration, improving productivity through communication & teamwork
</p>
</div>
<div class="exp-skills" id="exp1Skills">
MS Azure • Azure ML <br> Azure App Services • SQL <br> Python • Azure DevOps <br> MS Excel • MS Powerpoint <br> Teamwork • Collaboration
</div>
</div>
<div class="exp" id="exp2">
<div class="exp-content">
<p id="expTitle">Web Developer { The Fraser Post }</p>
<p id="expiText">
→ Developed a cross-browser responsive website with 400+ users for student magazine <br>
→ Utilized React.js, HTML & CSS to create interactive galleries and search functionality <br>
→ Collaborated with cross-functional team for content-integration and bug fixes
</p>
</div>
<div class="exp-skills" id="exp2Skills">Docker • C • C++ • Confluence </div>
</div>
<div class="exp" id="exp3">
<div class="exp-content">
<p id="expTitle">Firmware Engineer { Midnight Sun Design Team - University of Waterloo }</p>
<p id="expiText">
→ Collaborated with team to develop/optimize C-based firmware for critical automotive systems <br>
→ Inspected and improved power distribution, battery monitoring, and driver controls <br>
→ Worked on designing improvements for telemetry system for real-time vehicle data tracking
</p>
</div>
<div class="exp-skills" id="exp3Skills">
Time-management • Planning <br>
Organization • Communication
</div>
</div>
</div>
</section>
<section class="section" id="s4">
<div class="interestText" id="interestText">
<p id="int">I'm always interested about</p>
<span class="buttonInterests"><p>Machine Learning</p></span>
<span class="buttonInterests"><p>Cloud Computing</p></span>
<span class="buttonInterests"><p>Neural Networks</p></span>
<span class="buttonInterests"><p>Cryptography</p></span>
<span class="buttonInterests"><p>Data Science</p></span>
<span class="buttonInterests"><p>GUI Development</p></span>
<span class="buttonInterests"><p>Generative AI</p></span>
<span class="buttonInterests"><p>Sustainability</p></span>
<span class="buttonInterests"><p>Music</p></span>
</div>
<div class="connectGrid">
<div class="connectText" id="connectText">
<h1>
Let's <br> Connect
</h1>
</div>
<div class="contactInfo" id="contactInfo">
<a class="reachText" style="text-decoration: none;">[email protected]</a>
<a class="reachText" href="https://www.linkedin.com/in/meenagopalakrishnan/" target="_blank">LinkedIn↗</a>
<a class="reachText" href="https://github.com/meenag0" target="_blank">Github↗</a>
<a class="reachText" href="resume.html" target="_blank">Resume↗</a>
</div>
</div>
</section>
</div>
<script type="module" src="script.js"></script>
</body>
</html>