Web Developer Projects
I am a self-taught web developer who believes in and enjoys project-based learning. I seek to combine my programming skills with my past experience in project management, design, and customer relations in a role as a web developer in order to further develop, and explore beyond, the knowledge I have acquired and demonstrated in the projects below.
HISSINGBELL (2023) - Developer Website
I created the developer website, using Next.js, for the client HISSINGBELL, a San Diego, California based VR game studio.
This job includes:
- Ongoing client/developer collaboration involving virtual meetings, design mock-ups, and Git workflow.
- Static site developed using Next.js.
- Layered SVG parallax effects using React Scroll Parallax.
- Image carousel using React-multi-carousel.
- Site-wide light/dark mode saved to Local Storage.
- Deployed on DigitalOcean.
SIRME (2023) - React Simon Game
SIRME is a Simon game created in React. High scores are stored in local storage, so players can enjoy persistent competition with friends on the same device.
In this project, I learned how to manage state, execute actions in a timed sequence, properly set and get data in local storage, handle event listeners of keyboard shortcuts, and play sounds simultaneously using the Web Audio API. The UI is responsive, so SIRME can be experienced on both desktop and mobile.
GridSquid (2022) - Custom Grid Creator
- Implementation as a single-page application (SPA) with history states for better user navigation.
- A fully CRUD-capable backend written in Django/Python with many custom APIs.
- User authentication and password resets via email.
- Guest accounts (w/ same user access) that get deleted every 30 days, checked daily via automated task and custom command.
- User accounts for creating and storing sets of custom grids with uploaded images, audio, and/or text captions.
- Cropping functionality for user-submitted images using the Cropper.js library.
- Backend image compression using Pillow.
- User-uploaded audio files converted to mp3 using Pydub.
- File/mime type validation of image and audio files via Python Magic.
- The option to record and save audio using Microphone Recorder to Mp3.
- A memory game that can be played on any grid complete with sound effects and CSS “card flip” animations.
- Auto-generated quizzes for any grid with that has audio or text (or both).
- A collection page called “MyGrids” where user grids can be organized into albums.
- Deployed on PythonAnywhere.
View this project in action: gridsquid.ragmats.com
Oopsie (2021) - Anti-Fertility Calculator
Oopsie is a web-based anti-fertility application that celebrates the wonderful, life-altering event of not getting pregnant. I made this tool because I love my kids and two are enough for me 😊
- A main page that gives the user their “oopsie” chance as a percentage based on method inputs and researched data.
- Responsive design using CSS media queries.
- Algorithms that determine an oopsie chance based on date, time, and user inputs.
- A “permanent” session for a persistent user experience.
- Time zone localization.
- A calendar view that displays the current, last, and next week of oopsie chances.
Deployed on PythonAnywhere (previously Heroku).
- View this project in action: oopsie.ragmats.com