• About
  • Skills
  • Portfolio
  • Contact
  • Resume

MY PROJECTS

  1. All
  2. HTML
  3. CSS
  4. JavaScript
  5. React
  6. Django
  7. Flask
  8. OpenAI
  9. MongoDB
  10. MindsDB
  11. PostgreSQL
  12. AWS
  13. Google API
  14. bootstrap 5
  15. hackathon

Hue: Create & Sell AI Art

About

Hue is a digital art store and image generation app with custom machine learning models powered by MindsDB and OpenAI's Dalle-3 model. Hue started as a full-stack e-commerce application where users could sign up, create a profile, and purchase digital artwork but was upgraded for MindsDB's August 2023 Hackathon.

Problem

Create or update a web application that integrates MindsDB to improve its' overall functionality.

Solution

For this challenge, I added an AI Image Generation Tool to the site and trained its' connected models on datasets of famous artwork by iconic artists. I also added special permissions, so users can decide if they want to make their artwork public and/or downloadable. Finally, I connected the store and gave users permission to sell their artwork there.

Tech Stack

PYTHON, DJANGO, MINDSDB, OPENAI, JAVASCRIPT, HTML, CSS, BOOTSTRAP 5, AWS S3, HEROKU, STRIPE API, GIT

hue

OLLA AI & OBBA: WAIT QUEUE MGMT

About

This onboarding page was built to support OLLA AI's integration with OBBA BQQ, a Korean Barbeque Restaurant in Singapore.

Problem

OLLA AI and OBBA, a chain restaurant in Korea, need somewhere to send customers so they can begin the onboarding process and streamline the wait queue process.

Solution

For these clients, I built a responsive React app to handle the customer onboarding process. Because this will be filled out while customers are waiting on line for a table, the application was bootstrapped with React. I used CSS to make it look great on tablets. The login flow was built with React.js and configured to send data to the backend queue management system.

Tech Stack

REACTJS, JAVASCRIPT, HTML, CSS

OLLA AI

About

This onboarding page was built to support OLLA AI's integration with OBBA BQQ, a Korean Barbeque Restaurant in Singapore.

Problem

OLLA AI and OBBA, a chain restaurant in Korea, need somewhere to send customers so they can begin the onboarding process and streamline the wait queue process.

Solution

For these clients, I built a responsive React app to handle the customer onboarding process. Because this will be filled out while customers are waiting on line for a table, the application was bootstrapped with React. I used CSS to make it look great on tablets. The login flow was built with React.js and configured to send data to the backend queue management system.

Tech Stack

REACTJS, JAVASCRIPT, HTML, CSS

Inklusion: Pride Art Gallery

1st Place - Code Institute Hackathon, 06/17/22

About

Inklusion is an online gallery of LGBTQIA+ art throughout history. The gallery provides information about each artist along with photo representation of a quintessential art piece from their repertoire. Inklusion features an art gallery, a team page, and a "Get Involved" section where users can find & support local artists.

Problem

Create a project to celebrate Pride Month.

Solution

My team and I created Inklusion, an online gallery celebrating LGBTQIA+ art throughout history. Inklusion provides information on famous LGBTQA+ artists along with photo representation of a quintessential art piece from their repertoire. The website also provides information on LGBTQA+ artists, organisations and charities and how they can be contacted.

Tech Stack

HTML, CSS, BOOTSTRAP 5, JAVASCRIPT

inklusion

Muzak: YouTube Music Player

muzak

About

Muzak is a React-powered application that uses the YouTube Data API to fetch & stream videos by video ID or title.

Problem

Build a simple web application that uses the YouTube Data API to fetch & stream videos by video ID or title.

Solution

For this project I created Muzak, a responsive, clean video search & player.

Tech Stack

React, JavaScript, HTML, CSS, JavaScript, YouTube API

Electrillo: EV-Fuel Calculator

1st Place - Code Institute Hackathon, 04/10/22
electrillo

About

Electrillo is a web application that allows users to calculate the amount of money they could save by switching from fuel to EV-powered vehicles. Electrillo includes a homepage, mission statement, team page, EV/Fuel savings calculator, and an electric vehicle search tool.

Problem

Create a project to promote clean/green solutions for Earth Day

Solution

For this project, my team and I created Electrillo, a website that allows users to calculate the amount of money they could save by switching from fuel to EV-powered vehicles. The application also provides an electrical vehicle search, where users can search for electric vehicles based on their needs.

Tech Stack

JavaScript, HTML, CSS, Bootstrap 5, JSON

Smitten: JAVASCRIPT WORDLE GAME

1ST PLACE - CODE INSTITUTE HACKATHON, 02/22
hue

About

As the 1st Place winner in Code Institute’s 2022 “Love is in The Air” Hackathon, "Smitten" is a Valentine's Day & Love themed "Wordle" game.

Problem

Create a project for Valentine's Day theme, "Love is in the air".

Solution

For this challenge, my team and I crreated Smitten. Smitten is an online word game related to love and Valentine's Day. Smitten was inspired by the famous game, Wordle. The game is built for anyone who likes word games, and want to test their knowledge in love.

Tech Stack

JAVASCRIPT, HTML, CSS, BOOTSTRAP, JSON

Source Code

Game of Facts: Trivia Game

Merit Award - Code Institute Milestone 2 Project
hue

About

Built for Game of Thrones fans and history lovers, Game Of Facts is a fun & interactive way to learn about the historical people & events that inspired George R.R Martin's book and television series, Game of Thrones.

Problem

Create a web-based program that relies on JavaScript and/or JavaScript libraries for its' main functionality.

Solution

I used JavaScript and jQuery to create a web-based trivia game about the real history behind George R.R Martin & HBO's popular book and television series, Game of Thrones. The website features a landing page with a 'Play' button that starts the game. The game includes 10 questions. A modal dialog opens after each question is answered revealing a relevant GIF along with the correct answer and its' explanation. The game also includes an FAQ("How to Play"). When all 10 questions have been answered the user is presented with their final score and a 'Play Again' button that will restart the game when clicked.

Tech Stack

JAVASCRIPT, HTML, CSS, BOOTSTRAP 4, JQUERY, GIT

Source Code

Infinity: Landing Page

Distinction Award - Code Institute Milestone 1 Project
infinity

About

This responsive website was created for Infinity, a fictional Yoga & Meditation studio in New York, New York. As the Milestone 1 Project for Code Institute's Full Stack Software Development Program, this website was built with HTML, CSS & Bootstrap.

Problem

Create a frontend website that achieves business goals and uses HTML and CSS best practices.

Solution

For this project, I created a responsive landing page for a fictional Yoga Studio, Infinity. Infinity’s website addresses all of the studio's goals in a clean, user-friendly, and visually appealing manner. The website's Jumbotron includes a call-to-action button that directs users to the schedule section where class details, times, and a signup button can be accessed with ease. The website also includes an interactive, 'About' section, relatable 'Customer Reviews, and contact details.

Tech Stack

JAVASCRIPT, HTML, CSS, BOOTSTRAP 4, JQUERY, GIT

Source Code

Emojourney: Emoji Travel Guide

1st Place - Code Institute World Emoji Day Hackathon 04/22
infinity

About

Emojourney is a guide to educate people about the different meanings of emojis for different cultures.

Problem

Create a project to celebrate World Emoji Day.

Solution

For this project, my team and I came up with a rather unique concept: an Emoji travel guide. The idea for Emojourney was born after my team and I shared funny stories about how certain emojis can be offensive or insulting in other cultures. The goal of Emojourney is to share unexpected/unusual meanings for Emojis in a creative way. The app features a landing page and a Team page with links to hackathon team members. The main feature of Emojourney is 'The Guide', which includes an Emoji fixed action navigation tool,so users can navigate different Emoji meanings with ease.

Tech Stack

JAVASCRIPT, HTML, CSS, BOOTSTRAP 5

Source Code

DeathScape: Star Wars Escape Room Game

3rd Place - Code Institute May the Fourth Hackathom 05/2023
deathscape

About

DeathScape is a Star Wars themed escape room game.

Problem

Create a Star Wars themed project for May the 4th.

Solution

For this project my team and I created DeathScape, a Star Wars themed escape game. To play Deathscape, the user must use Star Wars knowledge to escape the Death Star. To win users must find the hidden mini-games and complete them all to unlock the sealed door and lead the others to safety.

Tech Stack

JAVASCRIPT, HTML, CSS, BOOTSTRAP 5

Source Code

Dara Budapen Fashion: Coming Soon

About

Coming soon page for fashion company

Problem

Client wants something in place while she makes her products

Solution

An attractive coming soon splash page to get customers excited

Tech Stack

HTML, CSS, BOOTSTRAP 5, JAVASCRIPT, CANVAS

Coast VA, Girls Lacrosse Club

COAST VA

About

Coast VA's website coastva.org is a simple, user friendly website for a girls lacrosse club in Virginia. The main purpose of this website is to provide information and resources to current and potential Coast VA athletes as well as parents of athletes. The client also needed the abiliy to update content on the site as needed, which was made possible by integrating Google via Google Apps Script/GitHub Workflow intgration.

Problem

Create a simple, user friendly website for a girls lacrosse club that client can be updated and edited as needed.

Duration

2 Weeks

Solution

Developed website that solves all clients goals in just two weeks. Because the client needs to update website content as needed, I created .CSV data files and cooresponding Google Sheets (spreadsheets) for each section. I then wrote custom Google Apps Scripts & GitHub workflows to automatically update .csv data files in the website's GitHub repository whenever the connected Google Sheets are updated, using JavaScript to render changes on the frontend. Finally, I made thorough screencasts for the client, demonstrating how to update the site accordingly

Tech Stack

HTML, CSS, BOOTSTRAP 5, JAVASCRIPT, Google Apps Script, Google API, YAML, GitHub Actions

Dash, Recipe Sharing

Dash

About

Dash is a recipe sharing application powered by Flask. To become a contributor or an editor for Dash, all you need to do is sign up for a free account, log in, and start creating/editing recipes! Dash's administrator account manages the application and may delete inappropriate or offensive content.

Problem

Use Flask to build a Full Stack application with CRUD (create, read, edit, delete) capabilities to satisfy Code Institute's 'Data-Centric Development' portion of the Software Development Diploma program.

Duration

2 Months

Solution

Developed a full-stack application where users can find and share recipes. I connected the Flask app with MongoDB in order to store Dash's recipe & user data efficiently. Photos are stored in a remote AWS S3 Photo Bucket.

Tech Stack

HTML, CSS, Bootstrap 5, JavaScript, Flask, MongoDB, AWS