tams2429 / FedExpress

A profile site created for one of my sporting idols, Roger Federer, to experiment with a few concepts

FedExpress 🎾

Table of Contents 📖

• Overview
• Technologies
• Planning
• Getting Started
• Wins
• Future Work

Overview 👓

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.

Technologies 💻

• General:
  • ReactJS
  • HTML5
  • SCSS
• Others:
  • GitHub
• 3rd party libraries/frameworks:
  • Robin-Dela Hover Effect
  • React Player

Process 📝

• 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)

MVP

• "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

Getting Started 🏃‍♂️🏃‍♀️

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 install to install all the dependencies
• npm start to start the development server for the whole site

Wins 🏆

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.

Future Work ☕

Planned features/extensions

• Add Mobile Responsiveness
• Add background color transitions between each section divider
• Add animations that are invoked with scroll