Categories
Projects

You Can Now Use Your Face to Play the Classical Snake Game

Did you use to be addicted to Snake?

Now, with the help of a TensorFlow model called PoseNet, you can get a totally different experience with this classical game. That’s because:

You can now use your face to control the snake!

Have a try here: https://projects.chenpan.ca/snake/

Demo

Acknowledgements:

  1. To the PoseNet team who makes the core feature of my face control snake game possible.
  2. To the unknown person who shares his / her snake game so that I could just modify the codes to make my game.

Categories
Projects

Get UofT Access

A Chrome extension that automatically redirects webpages to myaccess.utoronto.ca with one-click. Save people’s time! It may take people 5 seconds to 10 seconds to copy and paste myaccess.utoronto.ca in the address bar, but now it is just one click.

Get UofT Access

More Background:

For many papers we find online, they are not free or are login-required. For instance, this one from ACM digital library at https://dl.acm.org/doi/10.1145/352871.352887.

A Paper in ACM digital library

However, UofT library mirrors a great number of websites, including ACM digital library, and grants access to the UofT community.

For example, UofT library mirrors this page at https://dl-acm-org.myaccess.library.utoronto.ca/doi/10.1145/352871.352887. If you are a UofT student, you get access to that paper using this link.

And there is a pattern in the URL conversion. This extension does this job for you. You don’t need to convert the URL yourself, all you need is one-click.

The extension is published in Chrome web store: Click here to add it.

Categories
Projects

Personal Website

So far, there have been four versions of my personal website.

HTML+CSS+JavaScript (Version 1)

At the very beginning, my personal website was HTML+CSS+JavaScript, with no backend, just frontend. Even though it could be hosted in GitHub pages, I still hosted it on a server.

Pan Chen’s Personal Website, version 1.

Link: https://web.archive.org/web/20210601232934/https://www.v1.chenpan.ca/

HTML+CSS+JavaScript+PHP+MySQL (Version 2)

I brought PHP and MySQL into my personal website, made it a dynamic web page such that the visitors could leave comments to me.

Also, I made a resume management system for this version, I could update my online resume without touching the HTML code.

It once won a 100% Lighthouse performance score.

I hosted this version on a Ubuntu server with the LAMP stack.

HTML+CSS+(Laravel) PHP+MySQL (Version 3)

Since May 6, 2020, I had been refactoring my personal website using Laravel, the PHP framework which follows the model–view–controller architectural pattern.

Pan Chen’s Personal Website, version 3.

Link: https://web.archive.org/web/20210601232831/https://www.v3.chenpan.ca/

WordPress (Version 4)

On December 6, 2020, I started the work to integrate my personal website into a WordPress site. To speed up, I moved to LNMP stack, and used the global CDN provided by Baidu.

This is the latest version.

Pan Chen’s Personal Website, version 4.

Notes

  • All four versions are multiple languages.
  • All four versions are mobile-friendly.
  • You may feel it is slow to visit the archived versions. This is because now they are hosted in my second server, which is in Germany and I don’t implement CDN on them (On December 16, 2020).
  • Both Version 2 and Version 3 are based on Version 1, while Version 4 is completely new and a different layout is applied for it.

Credits

Photo credit: Felix Wong / CC BY-SA 3.0
Categories
Projects

SickKids Uroflow

SickKids Uroflow was a project for UofT’s CSC301 course, in which I worked as a front-end developer with a team of seven.

We partnered directly with The Hospital for Sick Children (SickKids) to develop this application. We built both a web app and a mobile app. Through our product, patients can have the sound of urine recorded in the mobile app, which will be sent to the backend. There is a pre-developed natural network model that generates a curve for the sound of urine. The clinicians can see the curves of their patients, update the status, leave comments if necessary.

For more information on this application, please check us out on Github or see the video demo.

Categories
Projects

3030.Link – NodeJS based URL Shortener

3030.link is a URL shortener that was build with MongoDB, Express.js, and Node.js.

Every user has ten quotes that they could pay to get their customized short URL for any URL.

The Web App is deployed on Heroku.