Inspiration
In a time when a pandemic is first in our minds--taking the lives of thousands of people--and then there comes along a death due to police brutality, there are many who have passed away and have not been given the recognition they deserve. By having a space where we can remember and think about those who passed away while we are stuck at home--far away from them--is needed. I realize that this may prolong the pain of losing someone, but having a space to share our love for the person seems more likely to provide comfort than sadness.
What it does
The website has simple graphics, showing a picture frame of a person and two flowers under the picture frame. When clicking on the picture frame, the person's name and years of life appear, and clicking on the person multiple times will change their skin color. The person's head rocks back and forth; I added motion because I wanted to show that even though the person is gone from this world, they are still living (hence the motion) in our minds and hearts. Clicking on the flowers would cause messages to appear. Currently, the messages are details about the website and its purpose, but those messages should be submissions from people who have something positive that they want to share about the person who has passed away.
How I built it
I started from scratch because I wanted to practice the languages in their simplest form without using frameworks or other tools. I am familiar with HTML and CSS, but I have not created graphics with CSS before, so I wanted to try that. All the images that appear in the website are made from CSS. For the animations (aside from the movement when a mouse hovers over the image), I used Javascript. It was used to make the popup messages appear when the person/picture frame and flowers are clicked on, to rock the person's head back and forth, to enlarge and move the flower petals to the background of the flower popup messages, and to animate the green arrow on the bottom to indicate the user to scroll down.
Challenges I ran into
Starting the project was difficult because I originally wanted to create an Android App. It was taking me very long to figure out a simple feature, so in order to meet the time constraints, I switched to website building with a focus on Javascript and CSS. Creating the images with CSS took surprisingly long because I had to do a lot of rescaling and searching up tags, but it was very rewarding to see them take shape. Javascript was also difficult because I did not know how to refer to the CSS tags, but eventually, I got an idea of how that worked.
Accomplishments that I'm proud of
The hardest part was the beginning of the project, so getting the person's head to rock was very satisfying. It took a lot of googling and messing around to figure out how to do that. I am also happy with how the flowers turned out, and I like how I was able to make them become the background for the popup messages.
What I learned
I learned that Google really is a valuable resource and that things may start difficult, but with perseverance, they become easier. This project started very slowly for me because there was quite a bit that I did not know, but after trying and searching my problems up on Google, I started seeing patterns and understanding the code more. Thus, I was able to solve my problems and create the app that I have now.
What's next for In Remembrance
I was hoping that I could animate the flower petals as they moved to the popup message background, but I was not able to figure it out in time. I would also like to be able to make a database where people can submit their messages and decide to share their stories so that this website is more usable.
Log in or sign up for Devpost to join the conversation.