A Single Page (SPA), profile site created for one of my sporting idols, Roger Federer, to experiment with a few concepts, including horizontal scrolling and the Robin-Dela Hover Effect. This a Front-End Web application built using ReactJS, SCSS , HTML5 and various other libraries.
Due to the requirements of this project, this has been designed for a typical desktop/laptop viewing window only. Mobile responsiveness is a potential feature to be added in the future.
- General:
- ReactJS
- HTML5
- SCSS
- Others:
- GitHub
- 3rd party libraries/frameworks:
- Robin-Dela Hover Effect
- React Player
-
I started by deciding which famous person to do a website on, having followed Tennis from an early age, I was curious what Roger Federer's existing site looked like and after some research, felt that I could expand on the UX of the existing site whilst experimenting with some ideas that I had.
-
Next, as part of my research, I looked at some example portfolio sites to see what libraries and frameworks could be implemented on my site
-
I planned and wrote out the main features that I wanted to include on my portfolio (i.e. a Horizontal Scrolling Effect, Robin-Dela Hover Effect for photos, video players)
- "Landing page":
- Include the Roger Federer picture as background
- Include quote
- Include name
- "The Beginning 👶 🍼" section :
- Include section divider
- Include images and description
- "The Professional 🤵♂️" section:
- Include section divider
- Include images and description
- "The Philanthropist 🎁" section:
- Include section divider
- Include images and description
- "The Champion 🏆" section:
- Include section divider
- Include images and description
- "The Family Man 👨👨👦👦" section:
- Include section divider
- Include images and description
- "The Legend ⭐😎" section:
- Include section divider
- Include images and description
To enjoy the full experience of the site, it is recommended to use the deployed version at https://fedexpress.netlify.app/. If you wish to run it locally, you will need to follow the steps below:
- Fork or Clone the GitHub repository (https://github.com/tams2429/FedExpress)
- In the 'frontEnd' folder, run
npm installto install all the dependencies npm startto start the development server for the whole site
One of the major wins in this project was being able to practice and successfully implement the Horizontal Scrolling, Robin-Dela Hover Effect for this React application.
- Add Mobile Responsiveness
- Add background color transitions between each section divider
- Add animations that are invoked with scroll