This application will act as an interactive photo portfolio - with a twist. Users are able to view a digital zine, play two different strategy games with select photos from the collection, and browse additional photos.
- React
- Redux
- JSX
- HTML
- CSS
- JavaScript
- Markdown
- Webpack
- npm
- Framer Motion
- Canva
- Git
- Firebase
- Clone this repository to your desktop
- Navigate to the top level of this directory called
the-wandering-eye - Run the code
npm installin your terminal to install the necessary packages and plug-ins - Run the code
npm run startin your terminal to start the application and open the project in your web browser
This webpage acts as an interactive photo portfolio for my personal landscape photographs. From the navbar on each page, users are able to navigate to the home, zine, play, or about pages. On the home page, if you click on the site's logo, it will also take you to the browse page - a current work-in-progress.
Click here to view the live version of this webpage.
- has clickable options to view the video or pages version of the digital zine
- clicking video loads & automatically starts playing the video version of the digital zine
- clicking pages loads the zine in flipbook format. click on the right of the photo to flip to the next page, the left to flip to the previous
- NOTE: default is showing 2 pages at a time but if the window is resized smaller than the size of the doubled zine pages, it will display one page at a time
- displays options between slider & puzzle game
- on first visit, after selecting which game, only a clickable color palette will display. choose a color to begin a game
- the game will randomize difficulty between 3x3, 4x4, 5x5, or 6x6
- to start a new game, click on a new color on the color palette. to choose a different randomized difficulty, click on the same color again. to play the other game, click the play puzzle or play slider at the top of the page (will display the opposite of whichever game you're already playing)
- PUZZLE GAME: user clicks on two tiles to switch their positions until all tiles are in the proper spot & the game is finished
- SLIDER GAME: user clicks on one of the tiles touching the blank tile to switch positions. to win, all tiles should be in their correct position & the blank tile should be in the bottom row at the last spot on the right
- on game finish, the entire full photo is revealed as well as the amount of turns it took to complete
- high scores board coming soon
- learn more information about me and my photos
- clicking me displays a small blurb about me including links to my virtual resume as well as my github profile
- clicking photos displays a small blurb about my photos including my instagram handle to see more
- if you hover over my selfie, it turns me into a radiating eyeball. move your cursor after to see the reverse effect
- coming soon
- Does not show direction to "choose new color" after adding high score
- If user navigates away from gameplay when prompted for score (before/after adding) & then navigates back to page, user is prompted to enter name again
- Text on instructions overflow from modal on mobile
- Clicking outside of navbar while open should close navbar or be disabled until navbar is closed
- add input validation/error handling for high scores
- create webapi to browse photos (NoSQL)
- user upload to create custom sliding puzzles on demand?
MIT License
Copyright (c) 2023 Luckie
This project was bootstrapped with Create React App.