Sneak Peek

Inspiration

Our inspiration started when we were wondering what would be needed to create a new movie and we concluded that a platform such as LinkedIn that is specific to the movie industry would be best for that. We decided that a good place to start would be a site that lets casting directors see an actor's profile and watch video clips from their past acting projects to see if the actor is a good fit for the role they are auditioning for.

What it does

Actors can create their profile with their name, profile picture, and projects they worked on. For every project, you give its name, YouTube video code, genre, and the role the actor played in it. When directors are casting for a new movie, they can browse the profiles available on the platform and watch the videos that are relevant to the new movie by filtering the different projects based on the genre of the movie and the role of the actors.

How we built it

We built our program with HTML, CSS, and JavaScript. We used CodePen, which is an open platform to create HTML/CSS/JavaScript public projects that everybody can look at. This way we did not have to look for a host and site name to share our project.

Challenges we ran into

We had to think about how we can have multiple pages because CodePen supports only one HTML file, one CSS file, and one JavaScript file. We wanted to have a Marvel-related animation and theme, specifically for Spiderman, which is why we chose Tom Holland as the example actor in the demo video. We wanted the UI to look nice no matter the size of the screen and which device you use, so we made sure the features would fit any size screen. We thought about how we can get the animation to not get in the way of the site and not cover the important features of the page when the size of the screen is smaller so we made sure the animation went away after a few seconds.

Accomplishments that we're proud of

We used CodePen which allows one file only, and we did not use any platform like Angular. We just used HTML, CSS, and JavaScript, but we still found a way to show multiple pages. We had all the pages in one file, showing the relevant page at any given time and hiding the others. We made a nice gradient blue background and used red links and a Spiderman animation to show the theme we wanted. We used flexbox in the CSS to have the sections of the page shift when the size of the screen is changing. We placed the animation in a place that is not blocking the page for bigger screens. We timed out the animation after 10 seconds, to make sure it does not block other elements in the page when we are showing the page on a smaller screen.

What we learned

It takes time to create a good quality project and it is better to get the details we want in advance, but also be ready to make changes while working. You need to focus on the most important points at first and be ready to build on top of them in the future.

What's next for Sneak Peek

In the Sneak Peek video, you can see how we create a profile for Tom Holland and include his Spiderman videos showing him in different roles in the Spiderman action movies. When casting for a movie you can check out his new profile!

In the future, we are planning to save the profiles in a cloud platform and be able to add many profiles and edit existing profiles. Users will have to log into the platform and will be able to browse other profiles and add new ones.   After that, we can add more functionality to the site that will be useful for Marvel and for the movie industry in general.

Built With

• codepen
• css
• html
• javascript