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 (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.

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.

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:

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 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:

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.

Working at 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!

After graduating from UofT, I joined 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!

After working at 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.

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 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.

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:

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

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!