Welcome!
Hello! My name is Jodi and this is a portfolio I built back when I first started coding. This site hosts a portfolio of some of the works I have created over the years, built using HTML, CSS, and JavaScript. Feel free to explore!
Zodiac World
Zodiac World is a website designed to help users learn a bit more about the Eastern and Western zodiac signs. The index page contains an overall description of the website. When users enter the site, it will show a pop-up asking users to enter their names. After the user enters his/her name, the “Welcome!” message at the end of the introduction will be modified to include user’s name. The “About Us” page includes a link titled “Who are we and what is the purpose of this site”. When user clicks the link, this section expands to show the details of the site. The Eastern and Western Zodiac pages include videos with controls/sliders to provide playback assistance for users. Finally, the Resources page offers a list of resources used for the website, while the “Contact Us” page includes a form with validation features for collecting user information. All pages also include an interactive navigation bar with hover features, and a non-interactive sidebar with a zodiac list. HTML, CSS, Javascript, and JQuery were used to build this site.
Animation Reception
Animation Reception is a website that contains information about the plots and popularity statistics of various Anime. Included are rollover images and a sign-up form. Each input field of the form has validation features and will only be submitted once the user fills out the form properly. Regarding the images, each picture is set up with a rollover feature such that if a user hovers over an image, another image is displayed. HTML, CSS, Javascript, and JQuery were used to build this website.
Space Gallery
Space Gallery is a very simple lightbox designed to provide images from space. Included are pictures of the sun, moon, Earth, Mars, Jupiter, Saturn, as well as our Solar System, Milky Way, and Universe. When the user clicks on an image, the image appears in a larger version. A user can close out of the image by clicking anywhere outside of the image. Javascript (specifically jQuery), CSS, and HTML were used to make this project.
Birthstone Memory Game
This project is a memory game featuring birthstones to entertain users. Included are pictures of each month with an accompanying birthstone. When the user clicks on a card, the card flips over and reveals a birthstone. Flipping over another card will trigger a pop-up confirming a match or advising to try again. The goal is to find the card with the matching birthstone. Javascript, CSS, and HTML were used to make this project.