The content you put on a personal website can vary depending on your goals and interests, but here are some common elements that people include:


About Me

Well hello there!
My name is Jason Mai, and I'm currently a Staff Software Engineer working at Capital One Logo Canada. As the Technical Lead on the Homepage Team ๐Ÿ˜Ž, I help the team tackle exciting challenges ๐Ÿ’ƒ while promoting a fun, positive, diligent, and inclusive culture. We are always experimenting ๐Ÿงช with the latest tech, and we do some really cool stuff behind the scenes, all-in on the cloud โ˜๏ธ.
I studied Computer Science ๐Ÿค“ at the University of Toronto, St. George Campus ๐ŸŽ“. It was an awesome time! Starting 2nd year, I was given the opportunity to work as a Teaching Assistant ๐Ÿ‘จโ€๐Ÿซ and continued for several years after in undergrad. I TAed courses such as CSC207, CSC108, CSC148, etc, gaining the privilege to work with several amazing professors ๐Ÿคฉ. I enjoyed working with the profs so much that I even continued on to develop side projects with some ๐Ÿš€.
How did I decide that I wanted to be a Software Developer ๐Ÿค”? That's a good question. I actually didn't think I wanted to be one growing up but I was actually becoming one before I even knew it ๐Ÿ˜‚. Before university, I taught myself how to build websites ๐ŸŒ, gaming/VOIP/general dedicated servers ๐Ÿ•น๏ธ, perform penetration testing ๐Ÿ‘จโ€๐Ÿ’ป, create/modify game mods ๐Ÿ‘พ, network scripts ๐Ÿ“œ, and much more ๐Ÿ› ๏ธ! I had a knack for figuring out how things worked and customizing things to my liking. I think I probably peaked in high school/university ๐Ÿ˜….
Wanna learn more about me ๐Ÿ™ˆ???
Betcha don't, but here are some random pics of some hobbies!

Expertise

I've been developing professionally since my newbie ๐Ÿ’ days interning at Ontario Teachers' Pension Plan Logo in 2015. Since then, I've worked at startups ๐Ÿš€ and fintech ๐Ÿฆ companies with roles in:
  • Front End
  • Back End
  • Infrastructure
  • Dev Ops
  • FullStack
And in the last several years, I've been lending my time to efforts such as:
  • Mentorship
    • Onboarding
    • Knowledge Sharing Sessions
    • Code Review Sessions
    • Pair/Mob Programming
  • Recruiting
    • Tech Questions
    • Interview Guides
    • Reviewing Resumes
    • Conducting Interviews
  • Internal Bootcamps
    • Code Quality
    • Best Practices
    • Code Reviewing
  • And much more...
Even though I thoroughly enjoy a diversity of roles, for the last couple of years I've been primarily on Front End focussed teams. I guess I am somewhat decent at Front End work ๐Ÿ™ˆ. I try to ๐Ÿ˜… stay up-to-date with the current trends in frameworks and tools, and love learning new things. To learn more about some of the work I've done, check out the Projects section below!

To build this website, I explored tools I haven't used before such as Adobe Illustrator, Vite, GSAP, and Adobe Illustrator. I built this completely serverless website with the following:

  • Vite
  • Sass
  • TypeScript
  • ReactJS
  • GSAP
  • Google reCAPTCHA
  • Terraform
  • AWS Route53
  • AWS S3
  • AWS CloudFront
  • API Gateway
  • AWS Lambda
  • AWS SES
  • AWS SNS
  • AWS ACM
  • AWS IAM
  • Adobe Photoshop
  • Adobe Illustrator
  • and more...

I've open sourced the infrastructure and backend for this project! It comes complete with Google reCAPTCHA and e-mail functionality out of box ๐Ÿ˜Ž. Learn more on my Github here:

Projects

Some of these projects predate university (go easy on messy code ๐Ÿ˜…).
<<๐Ÿคš>>

Serverless E-mail React Starter Project architecture diagram thumbnail
Beau Lieu Bistro website thumbnail
Team Vital Skill website thumbnail
Team Point Blank website thumbnail
MarkUs thumbnail
CSC258 Lecture Videos thumbnail
OTPP member website thumbnail
Quick Check Canada website thumbnail
capitalone.ca website thumbnail
Bricking Bad game thumbnail
Nail Salon website thumbnail
jasonmai.com website thumbnail


Serverless Email React Starter (2024)

The Serverless Email React Starter open source project is the latest to my collection ๐Ÿ‘ถ! After building this website which required setting up all the infrastructure from scratch using Terraform, I figured why not share it ๐Ÿ’•? A lot of work went into the infrastructure and backend to get a functioning contact me section protected by Google reCAPTCHA, and also to have the ability to receive custom emails from <ANY_IDENTITY>@jasonmai.com. If I shared my work, I can make the most out of it by helping others who may want something similar ๐Ÿ‘. The way I organized the project, I just needed to do a bit more work to modularize it in a way anyone can use it. Check it out here:

- Serverless Email React Starter

For this project, I used HTML, SASS/CSS, JavaScript, TypeScript, NPM, Vite, ReactJS, Google reCAPTCHA, React Hook Form, ESLint, Prettier, Rollup, Vitest, React Testing Library, Jest, jsdom, MSW, Terraform, Bash, AWS (Route 53, S3, CloudFront, ACM, SES, Lambda, API Gateway, CloudWatch, SNS, IAM, etc.), and more!

Beau Lieu Bistro (2012)

The website for Beau Lieu Bistro restaurant was one of my earlier projects ๐Ÿ‘ถ. As a summer project before post secondary, I made this website for a small French bistro ๐Ÿ‡ซ๐Ÿ‡ท that used to be in business in the down town Toronto, Ossington ๐ŸŒƒ street area. This website used to live at www.beaulieubistro.com, but has since been decommissioned.

For this project, I used HTML, CSS, JavaScript, PHP, MooTools, JQuery, x10hosting, Adobe Photoshop, etc.

Vital Skill (2011)

Vital Skill (VS), was a professional gaming team for the popular game Counter-Strike 1.6 ๐Ÿ”ซ. They played in leagues such as CAL-IM, CEVO, and ESEA. I made this website to be a replica of the CS1.6 UI itself, complete with draggable/resizable windows, sounds, and even a hidden console ๐Ÿ”ฎ. The theme of the website was to be a 1:1 copy of the pre-game UI itself.

This website was created as a challenge to myself and to learn more about web development. For this project I used HTML, CSS, JavaScript, PHP, MooTools, JQuery, x10hosting, screen scraping methods, Adobe Photoshop, etc.

Point Blank (2009)

Formerly www.teampb.net, this is one of my very first ๐Ÿฅ‡ projects that I used to teach myself web development in my high-school days. During the initial rise in popularity of horizontal scrolling websites, I was pretty fascinated by some really cool websites I've encountered and wondered how they worked ๐Ÿค”. This led me down a rabbit hole of teaching myself HTML, CSS, and JavaScript from w3schools, learning JavaScript frameworks and tools like JQuery and MooTools, and also exploring how to create your own web servers (LAMP) to host your own websites.

Eventually, I opted for free web hosting with x10hosting, since the maintenance, performance, cost ๐Ÿ’ธ, etc, required to host your own server was a bit much. But I learned loads of server, scripting, and networking skills from setting up all these components on my own network. I even managed to create a Wake-On-Lan PHP script that cold-booted one of my servers from over the internet. The server I named SinkMaster9000 (look up Samsung monitors from the early 2000s ๐Ÿคช), lived under my bathroom sink and was used for hosting dedicated game, VOIP, and file servers. Surprisingly, I had not yet discovered powerful web IDEs, and so I programmed everything with Notepad++ ๐Ÿ˜….

For this project, I used HTML, CSS, JavaScript, PHP, .htaccess, MooTools, JQuery, x10hosting, and Adobe Photoshop, and more.

MarkUs (2016)

During my undergrad years at UofT SG, I had the privilege to TA for many wonderful professors ๐Ÿ‘จโ€๐Ÿซ. Karen Reid and David Liu were among the profs I worked with. I had an amazing experience working with them, and was invited to continue joining forces through contributions to MarkUs. University of Toronto's MarkUs is a web application for the management of submissions and grading of student assignments at UofT ๐Ÿ“. It is built with Ruby on Rails and it is a great product for a diversity of courses, not just for Computer Science courses. Learn more about MarkUs from its Github:

- https://github.com/MarkUsProject/Markus

For my contributions to this project, I learned Ruby on Rails, solidified my understanding of git + Github, and leveraged my growing knowledge of web development languages and tools (HTML, CSS, JavsScript, etc.).

CSC258 Lecture Videos (2015)

CSC258 is a 2nd year Computer Science course on Computer Organization and Computer Hardware ๐Ÿ–ฅ. After taking this course with the awesome Steve Engels, I volunteered to help create supplemental lecture videos ๐ŸŽฌ for the course as a summer research project. Along with several other students, we created a series of handy videos that would add to the course material. I worked closely with Ben Hu to learn how to create computer animations and complete videos with sound editing. Here are some examples of videos I worked on:

- Memory Model II ๐Ÿ’พ
- Introduction to Caches ๐Ÿ—„

See here for the for list of videos here. For this project I used Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Audacity, and so on.

OTPP Members Web (2015 - 2016)

Working at Ontario Teachers' Pension Plan Logo as an intern for 1.5 years was my first real gig in the professional world ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ผ. I met some brilliant colleagues there, and still work closely with some till this day ๐Ÿค. As a Sotware Developer at OTPP, I worked as a Full Stack developer on their member's web portal application, and then moved on to the Developer Operations (Dev Ops) team for the second half of my internship.

During my time there, I learned so much by being exposed to variety of different languages, frameworks, and tools ๐Ÿคฏ. For example, for the full stack team I used HTML, CSS, JS, Angular, JQuery, Java, SpringBoot, Wicket, JUnit, TestNG, Selenium, AEM, WebSphere, Maven, Gradle, Eclipse, IntelliJ, and GitHub. For the Dev Ops team, I created "SpringBloomr" which is an internal application that bootstrapped the creation of new projects. On the Dev Ops team I used languages and tools such as HTML, CSS, JS, Java, Groovy, Ruby, Rspec, Rubocop, RubyMine, IntelliJ, Jenkins, Bamboo, and more!

Quick Check (2018 - 2020)

After graduating from UofT, I joined Capital One Logo Canada and was assigned to the Quick Check Canada team ๐Ÿ‡จ๐Ÿ‡ฆ. Quick Check is a web application that allows potential Capital One Canada credit card customers to see if they will be approved for a credit card, before they actually apply โœ…. This helps prevent detrimental effects to potential customers' credit scores when applying for credit cards.

I was on the Quick Check team for about 2 years, and took on several roles: Front End Developer, Back End Developer, Infrastructure Developer, FullStack, etc ๐Ÿฆธโ€โ™‚๏ธ. While on this team, I worked with several languages and different technologies. For instance, for Front End I worked with HTML, CSS, JavaScript, React, TypeScript, Storybook, Jest, Enzyme, Mocha, Chai, JUnit, Montebank, Cucumber, Selenium, etc. For Back End I worked with Java, Spring Boot, NodeJS, AWS Lambdas, Go, Wiremock, Mockito, Powermock, Docker, and more. For Infrastructure and Monitoring I worked with Groovy, Jenkins, Docker, Bash, Akamai, AWS (IAM, API GW, EC2, ALB, CloudFront, Lambda, Route53, CloudWatch, etc.), Splunk, New Relic, Ensighten, Snowplow, and so on! For all work committed, we had very solid best practices and guidelines for how we organize, commit, and review code, using Github as our main VCS. I learned a lot working on Quick Check, and had an ๐Ÿ”ฅ amazing team ๐Ÿ”ฅ to work with!

Capital One Canada (2020 - Present)

After working at Capital One Logo Canada for 2 years, I was invited to join the Capital One Canada Homepage team to help rebuild our UI leveraging the latest and greatest tools and methods ๐Ÿค–. Shortly after joining, I became the Technical Lead of the team. Together, my team and I added loads of new features and made several user experience, application, analytic, and infrastructure improvements behind the scenes ๐Ÿ‹๏ธ. We are a solid team and each member also valued the things that are uncompromising to me: positive team/work culture โค๏ธ, clean code โœจ, best practices (in every area) ๐Ÿ“‹, following conventions โœ…, creating guidelines ๐Ÿ“œ, high quality documentation ๐Ÿ“š, superior test quality ๐Ÿ’Ž, 100% test coverage (unit tests) ๐Ÿ’ฏ, automation ๐Ÿค–, empathetic code reviews ๐Ÿค—, ownership โœŠ, optimization โšก, boy/girl scout rule ๐Ÿงน, coding with the mindset of making the next developers' jobs easier ๐Ÿ™, and more...

Like my time on Quick Check, I took on several roles so far on the Canada Homepage team ๐Ÿฆธโ€โ™‚๏ธ: Front End Developer, Back End Developer, Infrastructure Developer, FullStack, etc. For instance, for Front End I worked with HTML, CSS, JavaScript, TypeScript, GatsbyJS, React, Storybook, Jest, Enzyme, React Testing Library, Karma, Montebank, Selenium, BrowserStack, Applitools, Optimizely, etc. For Back End I worked with NodeJS, AWS Lambdas, AWS S3, etc. For Infrastructure and Monitoring I worked with Jenkins, Docker, Bash, Akamai, AWS (IAM, API GW, CloudFront, Lambda, Route53, CloudWatch, etc.), New Relic, Snowplow, and so on! For this team, our stacks are mainly serverless so there was less backend work and maintenance was easier ๐Ÿ‘Œ. I also worked with Ruby on Rails and Go briefly for some internal side projects.

(2015)

This hardware project was probably one of my proudest achievements ๐Ÿ™Œ together with my homie Danny Reis. While taking CSC258 (Computer Organization and Hardware), we had to create an interactive project that leveraged the Altera DE2 Boards and the VHDL language by the end of the semester. We had to use the knowledge learned throughout the semester to complete the project. Danny Reis and I came up with an ambitious goal of creating something new, or something that hasn't been created before by previous years ๐Ÿ’ช. We both liked first person shooting games, so why not create some sort of shooting game ๐Ÿ”ซ!?

We spent the next couple of months planning: drawing blueprints, figuring out physical hardware components, electrical configurations, measurements, the programming, etc ๐Ÿคฏ. We spent a tonne of time planning and a lot of time building, and the final product worked flawlessly ๐Ÿ˜Ž๐Ÿ‘Œ๐Ÿ”ฅ! We had a fully fledged, bug-free, fun, laser shooting game that had multiple difficulty levels, multiple targets, and more. The target board was wired to the Altera DE2 board, allowing it to control the LED indicators (to show an active target) and receive the hit signals. The primary mechanism for hit detection was multiple light sensors calibrated properly to give the proper signal when the laser light hit. We also created the laser gun that was used by putting a laser pointer in an old AirSoft pistol, with a battery pack in the magazine chamber. When the trigger was pressed, the circuit for the battery and laser pointer would complete, producing a shot of laser light. This was a very fun project!

For this project, Danny Reis and I used an Altera DE2 board, the VHDL programming language, several resistors, a tonne of wiring, 4 light sensors, 16 + 5 red LED lights, 8 blue LED lights, 3 yellow LED lights, 15 green LED lights, woodwork, AirSoft pistol, laser pointer, batteries, sunglasses ๐Ÿ˜Ž, and more!

Bricking Bad (2016)

Bricking Bad is a simple little game ๐ŸŽฎ I made for a CSC309 (Programming on the Web) assignment. It is essentially a brick breaker game, popularized by the classic "Breakout" game from 1976 ๐Ÿง“. The television series "Breaking Bad" was a big hit at the time I made this, so I themed it accordingly.

This game was made Primarily with HTML, CSS, JavaScript, canvas, and Adobe Photoshop.

Nail Salon Website Concepts (2015)

In early 2015, I attempted to make some website concepts for a friend's Nail Salon business ๐Ÿ’…. At the time, I was already getting my butt kicked by university courses and work, so I was only capable of throwing together a couple of unfinished concepts. The request was to create a website, but that required branding and other graphics/images. I ended up creating some branding designs and some functionally different website concepts. I am in no way good artist or designer at all, so it me a takes me a while to come up with logos and graphics. Go easy on the criticism with the brand designs and the web layout choices ๐Ÿ˜…. Here are the website examples:

- Fade Transition Concept
- Parallax Scrolling Concept

For these concept websites, I used HTML, CSS, JavaScript, Angular, JQuery, Adobe Photoshop, etc.

Personal Website v3 (2023)

This is my latest side project: finishing my personal website ๐Ÿ’โ€โ™‚๏ธ! Being a bit of a perfectionist, this domain (www.jasonmai.com), had a loading/under construction animation on it for several years because I did not like the final product of my previous 2 attempts at making a personal website ๐Ÿ˜…. I fiddled with creating a parallax version and another wizard-like interface one. When I got close to completion I did not really like it. So I ended up doing a tonne research over time, collecting ideas I liked from many different websites. Then finally, I decided I had the ingredients I need to complete this ๐Ÿงช. And this is the result!

As mentioned in the Expertise section, to build the this website, I used HTML, SASS/CSS, JavaScript, TypeScript, Vite, ReactJS, GSAP, Google reCAPTCHA, Terraform, AWS(Route 53, S3, CloudFront, API Gateway, Lambda, SES, SNS, ACM, IAM, etc.), Adobe Photoshop, Adobe Illustrator, and more!

Contact Me

Thanks for dropping by!
๐Ÿ‘‹

Feel free to contact me here or by email at updog@jasonmai.com

โœ“๏ธ
x
โœ“๏ธ
x
โœ“๏ธ
x
๏ข