Hi, I'm Florian!

I am a first-year CS undergraduate at the University of Texas at Austin. Most of my experience stems from web development, but I am interested in machine learning, computer vision, and computer security. I am ready to learn more and enjoy diving into new topics that catch my eye.

Projects

Boopnote
Ephemeral, virtual, location-aware notes that are written using wearables.
Continuity Read through a story and pick your own path or create your own. Ctrl-F Video
Search for spoken words in a YouTube video.
Deciso Shared, democratic playlist that pulls songs from YouTube and SoundCloud. Gatshi
One central page for all of the student information of my high school.
Hackme A very vulnerable sample PHP website to practice computer security on the web. I Want a Cookie The premier cookie analytics platform! Loudred Personal page for server that houses several projects. +1 (805) MATH PLS Text math and get a text-to-speech result. Pitch.py
Take a video and MIDI file. Now mash them together!
3D Printer Camera A near-live stream of the 3D printer downstairs. Project Winter
Motion tracking and updating small displays based on physical location.
Sonar Simple positional audio game, completely in the browser. Spritebase Upload and search for image sprites (think video games). Transcribe Space Transcribe a lecture and stream the transcription in real time. Online Video Editor A simple video editor in the browser and render in full quality later. Videoparts.py Extract snippets of video that contain given words. Wordaround A catchphrase clone using Arduino.

Elsewhere

GitHub Projects and open-source contributions of my own I've worked on. Codepen Small web things I've built. Devpost Stuff I've worked on at hackathons with others. Email You can send me emails as well (imjaflo on Google).

Descriptions

Below are some extended descriptions, links, videos, and images relating to the projects I've worked on in the past.

Boopnote

Notes can be written using smart devices are attached to the current physical location of the user. These notes expire after a set duration. Other users using the app receive a notification once they walk by a note and have the opportunity to view the note left by a stranger. I worked on the server and Pebble client. Made at the hack-ED 2016 wearables hackathon for Apple iWatch, Android wearables, and the Pebble smartwatch. Won first place! Facebook announcement

Uses Lumen (PHP) JS (for pebble app) Swift (for iWatch app) Java (for Android smartwatch app)

Continuity

Needed a project to work on and decided to create a collaborative story telling website with a couple of others. Users can write a story by contributing small pieces that can then again be continued by other users. Each submission is a branching point. After using the first iteration as a teaching exercise, the entire project was rewritten. Most of the work was done Winter 2016/17 with a friend. I worked mostly on the front-end and learned a lot about animation of DOM elements. Also designed the logo. Demo Source code

Uses jQuery LESS Node.js Express

Ctrl-F Video

For those moments when you need to find the moment a particular word or phrase was said in a video, but you can't recall where. A bunch of lectures were recorded and uploaded to YouTube, but I did not want to rewatch them just to find one particular topic. So I wrote a small program to download YouTube transcripts (the automatically generated ones have actually become quite good!) and search for words and find the time they correspond with. Then came a UI that shows all matches and allows the user to jump to the video. All on one page. Demo

Uses Node.js Express YouTube CC

Deciso

Made with friends from high school in the summer of senior year. Users can create a room and share its unique link. All connected users can add songs from YouTube and SoundCloud. Users can also vote on songs and ask to skip to the next song. This was my first "real" node.js project and got me to use socket.io and read up on real-time communication. Demo

Uses Node.js Express Socket.io YouTube API SoundCloud API Redis

Gatshi

My high school used several websites to manage students, display lunch menus, classes, and other information. Frustrated with the fragmented system, I created a website for students at my high school that automatically imports student records such as full name, community service hours, and classes using their standard username and password. This project was my first time *really* using an MVC framework (Laravel on PHP) and got me into server management. Moving from a shared host to a VPS, I had to setup the software environment myself. I also got more involved in security and patched up the website to prevent issues in the future. I am quite proud of the fact that most of the profile is prepopulated by automating the sign-in and scraping server-side. With my high school career coming to a close, I replaced the website with the lunch menu (which can also be reached using Telegram). Demo

Uses Laravel (PHP) Goutte Telegram API

Hackme

A basic, buggy, and unsafe website created for my high school web development club. Designed to have multiple attack points and security issues, this is the perfect website to practice patching up vulnerable code. Try finding some XSS and SQL injection attack vectors -- there should be plenty! Source code

Uses PHP Insecurity

I Want a Cookie

Cooked up at a hackathon in an hour or so. Ranked 18th place out of over a hundred participants at HackDFW 2016. This project has a simple but revolutionary purpose: track the number of user that want a cookie. Ideal for cookie corporations and affiliated services, this innovative platform allows clients to track the only important number for their business: the number of people in need of a cookie! Demo

Uses PHP A text file

Loudred

I registered a fun domain for my server and needed to put something to fill the void. Previously there was a temporary file hosting service and URL shortener, but because of lack of interest I replaced that with a simpler page that features a small jQuery script to quickly check if all services are online. Demo

Uses Node.js Express Laravel (PHP, before rewrite)

+1 (805) MATH PLS

Ever needed to solve math quickly and didn't want to use your head or a calculator? Simply text a math query to +1 (805) MATH PLS [+1 (805) 628-4757] and receive the result in an easily understandable format. This was made at TAMUhack 2016 last minute as our main project fell apart. Thanks to the ease of use of the Twilio API and some prior experience, this project was created in just a few hours. This is more of a proof that it can be done rather than solving an actual problem. Still neat though. Demo

Uses Node.js Express Twilio TwiML

Pitch.py

After watching too many stupid versions of pitchshifted videos of [thing] to match the tune of [song], I decided to make my own script to programmatically generate such videos. Simply pass in a video and MIDI file and this python script will generate pitchshifted versions of the input video as "notes" and assemble a new video (including video placement. It's the future!) to match the melody of the provided MIDI file. Demo Source code

Uses Python MoviePy mido

3D Printer Camera

My high school bought a new 3D printer, but it is located downstairs whereas most science rooms are upstairs. So my high school chemistry teacher (and science department chair) asked me to set up a stream near the end of my senior year. I was tasked with the entire process: selecting the hardware, writing the software, and setting up the system. I decided to go with a python script on a Raspberry Pi that connects to the camera using a USB cable. The Raspberry Pi connects to the internet automatically on boot and send images periodically to a server running a PHP script. Not really real-time, but it does the job. On a publicly available website, a jQuery script periodically fetches the newest image. Demo

Uses PHP Python Raspberry Pi

Project Winter

Created for a high school physics design and engineering class in 2015, this group project consists of Rainbowduino (Arduinos with LED matrices) and a computer with a webcam communicating via USB cable. The computer uses its camera to capture images and uses OpenCV to detect the physical location of the matrices. It then updates each matrix to show a portion of an image depending on the physical location of the matrix. Demo Source code

Uses Arduino Rainbowduino Python OpenCV Processing

Sonar

Put on your headphones, turn up the volume, locate the sound! A simple game that requires you to locate a sound in 3-dimensional space, running completely in your browser. Works best on a mobile device. For the Global Game Jam 2017 (theme: waves). Demo Submission

Uses WebAudio DeviceOrientation <canvas> jQuery

Spritebase

Made for my high school digital images class. The class introduced its students to the processing programming language and one of the assignments involved sharing image sprites with other students. So I made a website that allows users to upload a sprite or processing code (that is run and converted to an image), add a description and tags, and select a license. The program also finds dominant colors. Users can search for sprites by text and color and mark sprites as favorites. Demo

Uses Laravel (PHP) Processing

Transcribe Space

Targeted at the educational market, this website allows students and lecturer to create and join a virtual room. The leader of the room enables the transcription feature and microphone input is converted to text and streamed to the server and all connected users. Clients have the opportunity to flag text if it is transcribed incorrectly. The text can be corrected (and the changes are mirrored to everyone else). There is also a chat panel to discuss content in real-time as it appears on the page. Coded at the Eaglehacks 2016 hackathon. Demo

Uses Node.js Express Socket.io Web Speech API

Online Video Editor

With a web client and a server component that work seamlessly together, this project allows for simple video editing anywhere with an internet connection and compatible machine. Music, sounds, and videos can be imported via YouTube. The web editor does not actually export a single video, but saves the project in a file that can be fed into the server component. The server collects all necessary assets and combines them into one single video. Made at HackDFW 2016, placed 13th place out of over a hundred submissions. Demo

Uses Python MoviePy

Videoparts.py

Ever wanted to create your own word bank from a transcribed video for some nefarious purpose (like piecing together a video to resemble Swift's "Shake It Off")? Well, now you can! Just give this python script a video and SRT file and it will go work, trying it's best to create a carefully cut videos all labeled according to their contents. Demo

Uses Python MoviePy

Wordaround

Our high school English teacher loved catchphrase (the game), but wanted to use words of her own instead of the preprogrammed word lists. So we (four students) set out to make a clone of the game using an Arduino. I got to work on the wiring and the program. How hard could programming for a microcontroller? Turns out that the C(++)-dialect the Arduino uses is kind of difficult if you've never worked with something similar before. I got to learn to deal with overflows and debugging over the serial port. Another member of our team worked on creating a 3D-printed case for the device which was exciting. Source code

Uses Arduino JavaScript