-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (242 loc) · 12.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="My portfolio website containing what I have done and what I can do.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/main.css">
<script type="module" src="/src/common.js"></script>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<script src="/src/three/src/gsap.min.js"></script>
<script type="module" src="/src/three/src/background.js"></script>
</head>
<body>
<nav class="navbar" id="navbar">
<div class="logo" id="logo">Winston Lu</div>
<ul class="nav-links">
<!-- Hamburger Toggle -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- Nav Menu -->
<div class="menu">
<li><a id="top_scroll">Home</a></li>
<li class="dropdownItem">
<a id="about_scroll">About</a>
<ul class="dropdown">
<li><a id="summary_scroll">Short Intro</a></li>
<li><a id="skills_scroll">Skills</a></li>
</ul>
</li>
<li><a id="exp_scroll">Experience</a></li>
<li><a href="/projects">Projects</a></li>
<li><a id="footer">Contact</a></li>
</div>
</ul>
</nav>
<!-- Background landing page -->
<div class="topbackground">
<canvas class="background" class="fullSize mainBackground" onload="this.style.opacity = '1'"></canvas>
<div class="topoverlay">
<div class="overlaytext">
<h1>Hello There!</h1>
<h3>My name is Winston</h3>
<h5>Welcome to my portfolio, heres a few things about me</h5>
</div>
</div>
</div>
<!-- About Me -->
<a name="about" class="anchor"></a>
<div class="largeCard card" id="about_me" >
<div class="objectDisplay">
<canvas class="displayframe"></canvas>
</div>
<div class="cardtext">
<h3>About Me</h3>
<div class="line"></div>
<p> I am currently a Computer Engineering student at the University of Waterloo that likes working
on my own projects. I enjoy learning about the field of technology, which is why my projects
often involve circuit building, microcontrollers, and firmware programming. I also do enjoy
3D printing as well, maybe a bit too much as I've gone through at least 15kg of plastic spools
so far. Because of this, I co-founded a design team at Waterloo called Electrium Mobility where we
design portable electric vehicles from the ground up where we create PCB's, 3D print models, and
program the device to manage inputs. I also dabble in the field of cyber security in ethical
hacking and penetration testing at home, and work on blue team operations during the day.
</p>
</div>
</div>
<!-- Skills -->
<div style="height: 10vh"></div>
<a name="skills" class="anchor"></a>
<h3 id="skillsTab">What I do</h3>
<div class="skillsheader">
<div class="line"></div>
</div>
<div class="cardGrid">
<div class="smallCard card">
<div class="objectDisplaySmall">
<canvas class="displayframe"></canvas>
</div>
<div class="cardtextSmall">
<h4>Programming</h4>
<div class="line"></div>
<p> I usually work with C, C++, Python, Java, and less commonly in other languages such as
JS, PowerShell, and Bash. Most of my work is in Python and C++ dealing with automation
or low-level firmware
</p>
</div>
</div>
<div class="smallCard card">
<div class="objectDisplaySmall">
<canvas class="displayframe"></canvas>
</div>
<div class="cardtextSmall">
<h4>Circuit Design</h4>
<div class="line"></div>
<p> I've worked on dozens of projects involving MCU's inclding Arduino Micro, ESP32/8266, Teensy,
STM32, ATTiny, and a few others. I've also designed PCB's as well
</p>
</div>
</div>
<div class="smallCard card">
<div class="objectDisplaySmall">
<canvas class="displayframe"></canvas>
</div>
<div class="cardtextSmall">
<h4>3D Printing</h4>
<div class="line"></div>
<p> I've designed 3D models in OnShape and modified existing STL files for my own uses and quality
of life modifications. My Ender 3 V2 printer has gone through over 1,000 hours worth of prints
</p>
</div>
</div>
<div class="smallCard card">
<div class="objectDisplaySmall">
<canvas class="displayframe"></canvas>
</div>
<div class="cardtextSmall">
<h4>Ethical Hacking</h4>
<div class="line"></div>
<p> From my beginnings with Kali Linux, I've completed numerous challenges in HackTheBox and
TryHackMe. I currently work on the blue team developing tools for automation and access cleanups
</p>
</div>
</div>
</div>
<div style="padding: 20px">
<h4><a href="/projects">Want to see what I've made? Click here to see my projects</a></h4>
</div>
<!-- Experience -->
<div style="height: 10vh"></div>
<a name="experience" class="anchor"></a>
<h3 id="experienceTab">Work Experience</h3>
<div class="skillsheader">
<div class="line"></div>
</div>
<div style="height: 5vh"></div>
<div class="card_field">
<div class="card-img">
<img src="images/stacktics.jpg" id="card_image">
</div>
<div class="card_text">
<h2>Development and Security Operations (DevSecOps)</h2>
<div class="card_info">
<h4 style="text-align: left;">Stacktics Inc.</h4>
<h5 style="text-align: right;">Jan 2023 - Apr 2023</h5>
</div>
<p>Worked in Google Cloud Platform (GCP) and Amazon Web Services (AWS) on developing an IoT Network project to manage LoRa and
WiFi connected devices. Used AWS IoT to manage the devices and forward the data to an API endpoint in GCP. It is then analyzed
with BigQuery and displayed on a dashboard in Looker Studio. Additionally I proposed, documented, and worked on automating
RBAC/ABAC roles in Google Workspace and GCP to automate provisioning and revoking permissions through API calls in Jira,
BitBucket, and other service providers.
</p>
</div>
</div>
<div class="card_field flex_rev">
<div class="card_text">
<h2>Cyber Engineering - Crpytography</h2>
<div class="card_info">
<h4 style="text-align: left;">TD Bank</h4>
<h5 style="text-align: right;">May 2022 - Aug 2022</h5>
</div>
<p>Spread across 3 teams in the cryptography department, I programmed custom Python scripts and C libraries to port scan internal
subnet ranges, benchmark IO speed impacts of file-based encryption, and automate Windows updates on air-gapped servers. I had
also assisted with managing and document public key infrastructure and technical specifications on compliant TLS encryption
methods and storage of private keys, documenting all my work in Jira Kanban boards on issues, blockers, and dependencies.
</p>
</div>
<div class="card-img">
<img src="images/td.jpg" id="card_image">
</div>
</div>
<div class="card_field">
<div class="card-img">
<img src="images/questrade.jpg" id="card_image">
</div>
<div class="card_text">
<h2>Identity and Access Administrator</h2>
<div class="card_info">
<h4 style="text-align: left;">Questrade</h4>
<h5 style="text-align: right;">Aug 2021 - Dec 2021</h5>
</div>
<p>Our teams work consisted of almost entirely manual repetitive workflows, so I decided to take up automation
on many of the tasks I was given.
For audits, I automated access change detections and listed them in a overview section with color-coded identifiers for
easier manual review. I also automated user account creations using Selenium in a custom-made GUI application. I also worked
with other information security team members to run scans to validate application vulnerabilities in using a web API for a
popular static analysis tool.
</p>
</div>
</div>
<div class="card_field flex_rev">
<div class="card_text">
<h2>Enterprise Security</h2>
<div class="card_info">
<h4 style="text-align: left;">Gore Mutual Insurance</h4>
<h5 style="text-align: right;">Jan 2021 - Apr 2021</h5>
</div>
<p>Developed PowerShell scripts to audit the Active Directory users and permissions, disabling terminated employees and revoking
excess permissions. I also investigated alerts in Microsoft Azure Sentinel, Office 365 Security, and Microsoft Cloud App Security,
to determining if any suspicious actions were done by the user or by an attacker who had gained user credentials. I assisted with
setting up group policies on corporate devices and managing risks for 3rd party vendors to reduce the severity of data breaches
when they happen.</p>
</div>
<div class="card-img">
<img src="images/gore.jpg" id="card_image">
</div>
</div>
<div class="card_field">
<div class="card-img">
<img src="images/funup.jpg" id="card_image">
</div>
<div class="card_text">
<h2>Computer Science Instructor</h2>
<div class="card_info">
<h4 style="text-align: left;">Fun Up Academy</h4>
<h5 style="text-align: right;">Jul 2020 - Sep 2022</h5>
</div>
<p>Introduced elementry and high school students in from ages 7-16 the basics of programming. Languages taught
include: Java, Python 3, and HTML5 with a brief overview of AngularJS. Concepts taught
include using object-oriented programming to make games in PyGame (Python 3), algorithms in Java covered in
the AP CS A ciriculum, as well as a sandbox game in Java project using Swing.</p>
</div>
</div>
<!-- Footer -->
<footer class="footer" id="footer">
<div class="contact">
<div class="circle"><a href="https://github.com/Winston-Lu" target="_blank" rel="noopener noreferrer"><img src="/images/logo-github.svg"></img></a></div>
<div class="circle"><a href="https://www.linkedin.com/in/winstonlu1/" target="_blank" rel="noopener noreferrer"><img src="/images/logo-linkedin.svg"></img></a></div>
<div class="circle"><a href="mailto:wlu2268@gmail.com" target="_blank" rel="noopener noreferrer"><img src="/images/mail-outline.svg"></img></a></div>
</div>
<p>Winston Lu @ 2023</p>
</footer>
</body>
<script type="module">
import { ObjectPreviewer } from "/src/three/src/ObjectPreview.js";
let rp0 = new ObjectPreviewer("/src/three/models/rpi0.glb", 0.21,1,[0,-0.005,0],[Math.PI/10,0,0],[-7.5,0,4]);
let key = new ObjectPreviewer("/src/three/models/keyboard.glb",50, 2,[0,-0.005,0],[Math.PI/8,0,0],[0,0,0]);
let pcb = new ObjectPreviewer("/src/three/models/pcb.glb", 0.12,3,[0,-0.005,0],[3*Math.PI/5,0,0],[0,0,0]);
let print = new ObjectPreviewer("/src/three/models/printer.glb", 0.15,4,[0,-0.005,0],[0,0,0],[0,0,0]);
let pwn = new ObjectPreviewer("/src/three/models/flipper.glb", 0.1, 5,[0,-0.005,0],[0,0,-Math.PI/6],[0,0,0]);
</script>
</html>