Velvet Curtain Project
The Velvet Curtain Project was done as a college capstone project. I was charged with creating a website that used web design, graphic design and communication skills.
Velvet Curtain (College Degree Capstone Project)
This project was done for my college degree capstone class. I needed to make a project that incorporated computer science, graphic design and communication skills into one cohesive project. I chose to create a movie and TV review website. This website would require the design and creation of the website from concept to finished product and to write the reviews of each movie or TV show. I chose to use the Bootstrap css frame to help me with the layout design of the website. Bootstrap allowed me to layout the website quickly and also had some pre-built javascript components that I wanted to use. I also used PHP, MySQL and PHPMyAdmin for parts of the website.
Home Page
I wanted the home page to have as much information as possible without looking to cluttered. I used the Bootstrap carousel component to rotate the large images at the top of the page under the navigation. The page also has snippets of the newest reviews, entertainment news, latest trailers and coming to theaters.
I wanted the home page to have as much information as possible without looking to cluttered. I used the Bootstrap carousel component to rotate the large images at the top of the page under the navigation. The page also has snippets of the newest reviews, entertainment news, latest trailers and coming to theaters.
Continuation of Home Page
Reviews Page
I didn’t want to have 27 pages for reviews sections, so I used the tabs component from Bootstrap to contain all of the reviews together on one page. The main reviews page show snippets of the latest reviews. Each letter of the alphabet has a tab that shows the movie poster for each movie or TV show reviewed. The posters are links that take a user to that specific review.
I didn’t want to have 27 pages for reviews sections, so I used the tabs component from Bootstrap to contain all of the reviews together on one page. The main reviews page show snippets of the latest reviews. Each letter of the alphabet has a tab that shows the movie poster for each movie or TV show reviewed. The posters are links that take a user to that specific review.
News Page
The news page is just a compilation of news from different entertainment websites. Each entry shows a snippet of the story. If the user clicks the snippet they are taken to the original stories website. I didn’t take credit for the stories and attributed them to their original creators. This page was used to fill-out the websites overall content.
The news page is just a compilation of news from different entertainment websites. Each entry shows a snippet of the story. If the user clicks the snippet they are taken to the original stories website. I didn’t take credit for the stories and attributed them to their original creators. This page was used to fill-out the websites overall content.
Trailers Page
The trailers page is layout very simply. When loaded it just shows movie posters and titles in rows. If a user clicks the poster a modal will open up reveling the trailer and a short description of the movie or TV show. I embedded the trailers from YouTube, because finding good quality trailers for download is difficult. I also would have needed multiple versions of each trailer. YouTube also takes legal responsibility if the trailer violates copyright laws.
The trailers page is layout very simply. When loaded it just shows movie posters and titles in rows. If a user clicks the poster a modal will open up reveling the trailer and a short description of the movie or TV show. I embedded the trailers from YouTube, because finding good quality trailers for download is difficult. I also would have needed multiple versions of each trailer. YouTube also takes legal responsibility if the trailer violates copyright laws.
Example of Open Trailer Modal
Search Results Page
I needed a way for users to search for a movie or TV show. I decided to create the search with PHP, MySQL and PHPMyAdmin. Using these coding languages and service allowed me to create a secure and easy search. When a user types a search the code displays the move or TV show poster, title and description. Each search result is also linked to its web page.
I needed a way for users to search for a movie or TV show. I decided to create the search with PHP, MySQL and PHPMyAdmin. Using these coding languages and service allowed me to create a secure and easy search. When a user types a search the code displays the move or TV show poster, title and description. Each search result is also linked to its web page.
Contact Page
Every website needs a contact page, so I decided to create mine using PHP. I felt that sending an email with PHP was secure, because PHP is a server-side language and can’t be viewed from a web browser.
Every website needs a contact page, so I decided to create mine using PHP. I felt that sending an email with PHP was secure, because PHP is a server-side language and can’t be viewed from a web browser.
About Us Page
The about us page is just some background information on why the website was created and some of my favorite movies and TV shows.
Some Design Details
The about us page is just some background information on why the website was created and some of my favorite movies and TV shows.
Some Design Details
I chose the colors red and gold, because they remind me of red velvet curtains and a gold rope holding them back. I wanted to make the content seem like it was on a movie screen. So I rounded the corners and separated each container with a little break to show the background color. I also used a gold header background to visually break-up the content. I chose a script font for the site name and headers, because velvet is usually seen as classy. What is more classy than a nice hand-written script.