Background

• I made the website landing page for Loop
• Specifically: I implemented the core of the website along with the external sign up, and for the images I applied styling via photoshop (the video + most of the images were provided)

What is this site?

• Loop is the landing page for a start-up called Loop: a connection campus life platform for college students, administrators and organizations

Client Description of Website

• Website should be for onboarding new-users
• Target demographic customers are student leaders and college administrators
• Client provided the video to showcase users - to be viewable on the front page of the website

Under the hood

• Back-End: PHP; Front-End: HTML, CSS, Javascript
• Wordpress is CMS
• Using MailChimp to add users to the MailList
• Hosted by Siteground

Background

• We've all been there. You know that person's face and remember his horn-rimmed glasses, fiery-red hair and shy demeanor. BUT: you just cannot remember his name.
• To solve this problem, I made a mobile App (iOS and Android) that stores the names + descriptions of the people you meet within your social groups.
• I built the app from scratch with the UI+UX feedback of 8+ people along with some architectural guidance

How does it work?

• The app has groups (i.e. social circles) you create.
• Inside each group (e.g. Work) you put down the names of the people you meet
• This app is meant for those niche occasions where you meet someone in passing (and don't get their FB or #), but might see them again in the future
• The main target audience is club/organizational leaders

Under the Hood

• Views: React Native
• Back-end: Expo, React Navigator, SQLite, Redux and Sentry
• Approved by App Store for Beta release under Testflight; currently being deployed to Google Play

Source Code:

https://github.com/matthewliuswims/name-keeper

Background

• I made the revamped website for Hubble Optics

What is this site?

• Hubble optics is a website for the small-business, Hubble Optics, which sells large-scale optic systems

Client Description of Website

• Website should have a lefthand navbar on all pages
• The objective of the business is to sell optic systems to customers
• Target demographic customers are generally age range of 40+
• Should not have fancy features and should be very simple to navigate

Under the hood

• Handle and monitor Search Engine Optimization (e.g. web crawls)
• Content hosted on AWS cloudfront
• Hosted by Yahoo Small Business (as per client request)

CoinCollect (Augmented Reality App)

Background

• As a team of 3, we produced a Augmented Reality App
• I implemented the logic behind the real-world distance monitoring
• It was a fun project, where I and everyone on the team wanted to simply tinker with Google's experimental AR Browsers

How the App Works

• This is an Augmented Reality Game where the objective is to collect coins
• Coins are collected by tapping on boxes; these boxes are randomly generated at the start
• By getting physically close enough to a box, and then tapping the box on the phone screen, users can collect coins, and increase their score
• Boxes that have already been touched (and gave out coins) turn from orange to red

The Techonology

• This uses Google's AR Browsers (not in production and are experimental), which expose functionality of ARCore and ARKit to the web: learn more here
• It's essentially a Chromium modification for Android Apps - the WebARonARCore is built on top of Android ARCore APK
• We use this in conjunction with Three.ar.js (used for developing 3D objects) - docs for Three.ar.js are here

The App in Action

Under the Hood

• In our code, we setup the three.js rendering environment
• Inside the render loop, called once per frame, we constantly check for collisions, by iterating through all the different cubes (which are in a group) and seeing if the camera is close enough to trigger an event
• Boxes (or cubes) are randomly generated around the camera's 3D position

Source Code:

https://github.com/matthewliuswims/collect-coins

Background

• I made the landing page website for District Dumplings
• Specifically: I implemented the core of the website - the images were provided and I applied some styling via photoshop and css

What is this site?

• It is a website for the small-business restaurant, District Dumplings, which is located in Fairfax, Virginia

Client Description of Website

• Be easy to navigate!
• Present information very concisely

Under the hood

• Back-End: PHP; Front-End: HTML, CSS, Javascript
• Wordpress is CMS
• Pique theme used
• Hosted by Hostgator

Background

• As a team of 4, we created a prototype web app for the startup, Finnest
• Finnest is a mobile app tied to a secured debit card which that handles financial transactions for kids and teens
• I worked on front-end aspects

Under the Hood

• We use Sails.js as our MVC framework (it's developed atop the Node.JS enivornment)
• We used Foundation for styling
• For the backend: MySQL is our RDBMS

Background

• I made the fun, popular game, Tetris, from scratch using the software platform JavaFX
• The especially fun/tricky aspects of the project to imeplement were coding the rotation of pieces and the clearing of lines

How the Game Works

• 7 randomly generated pieces fall to the stage
• Pieces can be shifted or rotated by pressing keys on the keyboard
• Pressing the down key accelerates the motion of the piece; pressing space drops the piece

Under the hood

• Each tetris piece is randomly generated, and each piece is composed of 4 wrapper square classes
• The entire tetris board is implemented as a 2-D array
• Inside our handle methods we have to calculate a variety of events (e.g. if the tetris piece tries to go out of the bounds of the board); we use a Timeline to animate the Piece going down

Background

• I made the fun, (and once) popular game, Doodle Jump, from scratch using the software platform JavaFX
• The especially fun/tricky aspects of the project to imeplement were coding the scrolling of the screen and the accleration (due to "gravity") of the doodle piece

How the Game Works

• A doodle jumps up platforms - and tries to not fall into the abyss!
• As the doodle progresses upwards, the stage vertically scrolls
• The player is able to interact with the doodle using arrow keys

Under the hood

• Setting up a stage, we instantiate a game board and used key handlers for user input
• Gravity and Quit Handlers implements the EventHandler Interface
• We had a Game Class handle the logic of the game (e.g. add pieces to the pane)
• Piece class (to make the different pieces) instantiated Square Objects from the Square Class

also known as Reversi

Background

• I made the fun, popular game, Othello, from scratch using the software platform JavaFX
• Features a human vs. human player mode
• Employs aritificial intelligence (using minimax algorithm) for the computer players

How the Game Works

• Game can be played with human players or computer players (AI)
• Game is set on a 8x8 grid; the game is played between 2 players
• Each player moves in turns and the objective is to have as many tiles by the end (of your color)
• A player can place a piece every turn - opponent's tiles are flipped by sandwiching them with your pieces

Under the hood

• Setting up a stage, we instantiate a 2-D game board and used key handlers for user input.
• We have a HumanPlayer and ComputerPlayer class which each handles its own logic - but they both implement a Player Interface
• There is also a Referee class that handles when players should move and the legality of moves
• To check for sandwiches, we have the referee class iterate through all the board pieces (for each move), checking in all 8 directions
• For the ComputerClass, we have to use Artifical Intelligence, specifically MiniMax

Human Player vs Computer Player

Artifical Intelligence

• The Computer Player determines the best move based upon a MiniMax Search, an adversial search, which means it tries to maximize its own score or lower the opponent's score
• Each of the squares are assigned a value of importance (is a bit subjective, but the corner squares are worth more)
• MiniMax has to create simulated boards to determine all the different possible outcomes - this requires a copy constructor
• By weighing all the different moves - which means taking into account the difference in points between players - the AI Player will then choose the best move