Since home gets very laggy when loaded, we need to trim down the animations or improve it

According to one of our user's opinion on the website:

I think so too. I think it's a side effect React have since we only change components instead of navigate from page to page. So to resolve this, we can refer to the forum from stackoverflow below:
https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition

We will add a vlog menu in between of
Projects - Vlog - Our Team

It will mainly consist of Pekora's Minecraft Videos and her other vods

Vlog

• Minecraft Videos

Other videos

• Should contain her other videos

The layout of displaying videos should look about like this:

When a user clicks a vlog, they should be able to watch it using the website. Please develop a design for this as well

The data should be fetched using Youtube API V3
https://developers.google.com/youtube/v3/docs/videos/list

You should fetch the list of videos every 10 minutes only
Refresh the list of Vlogs via websocket
You can refer to ./controllers/youtube.js for the usage of youtube api and websocket

Loading images from Heroku takes ages. We should migrate all of our assets to https://imgbb.com/ to load everything faster

Display tooltips of the original artists directly on hover of each image. This way, people wont need to go to credits screen to discover who the artist is

To make it balanced, the carrot should spin similar to the Rabbit
I attempted to do this before but had issues with overflowing and stuff
Also the Carrot looks like this to prevent overflowing

Refer to this screenshot:

Specifically, the center bunny, the lower bunny, and the subscribe carrot button overrides the header

Display live subscriber count of Usada Pekora according to the design below:

The screen should be animated as it seems to be travelling to the right. The numbers should update accordingly

Credits should follow the format of the draft below:

You can design the credits screen however you see fit, but use the Peko Art in credits:

Also note to keep the look and feel of the design with the whole website. You can use the elements from the draft design as provided from GDrive, but the updated design should be in staging. To visit staging go to either:
http://usada-kensetsu-staging.herokuapp.com
http://usada-kensetsu-staging-2.herokuapp.com

Add a tweeter feed to the footer that displays Usada Pekora's tweets

To implement the "Join Us" feature to further enhance the Website and User interaction. The account people must follow is https://twitter.com/UsadaKensetsu. They must apply within usada-kensetsu.herokuapp.com to trigger the Bot to tweet the application, and for them to be able to see the generated PekoCard.
Refer to Designs below:

• Screen 1 Design above fold:

• Screen 2 Sticky Join Button after scrolling past fold:
  PREVIOUS DESIGN
  
  NEW DESIGN
  

The sticky join button animates from Screen 1 to Screen 2

• Screen 2.5 Additional Scroll to Top button
  Refer to Screen 2, New design for reference. There should be a triangle button above Join Us Sticky and should animate upon hover:
  
  The Triangle button should navigate upwards a bit and show the TOP word. The transition for scrolling to the top will be ScrollToTop component which is used in #13

• Screen 3 Modal Dialog design after clicking Join Us:

Will study how to implement this, but we might need to require users to login via their Twitter account.

• Screen 4 After clicking Apply, PekoCard will be generated:

CARD DESIGN: We can create a template of the design where we only replace the NAME, ID, SCREEN_NAME and QR CODE

NAME: The name should be truncated up to a maximum of 10 characters to prevent the overflow of the design, or find a way to decrease font size to fit the name. The maximum characters of the Twitter name are 50 characters

ID: This one refers to the Twitter ID of the user.

QR CODE: For the QR Code to be generated at the back of the PekoCard, we will use this generator:
https://www.qrcode-monkey.com/qr-code-api-with-logo
The generator above generates QR codes that allow us to append the company logo in the middle of the code.
The link that we will generate will contain the Usada Kensetsu PekoCard Link following this format:
usada-kensetsu.herokuapp.com/pekoCard

PRINT: The card should be printable with cutout guides. We should also include a note in the printable to laminate the ID to make it proper.

DOWNLOAD AS PNG: The front and back PekoCard should be downloadable in PNG. It should be in separate files

SHARE ON TWITTER: Should allow Users to share the front and back PekoCard. The image to be shared should have a different template:

• Screen 5 PekoCard Link Design:

• Screen 6 Employee Screen revisions and additions
  The Leadership Team header will be added to Services above the Employee List
  

And Nousagi Team will be added here as well

Mainly improvement in the Mobile responsiveness of the website

As per discussed, we will look into migrating to firebase instead of Heroku App

Refer to image below for the issue:

Confirmed this doesnt occur in PROD

Refer to Kiara's website: https://kiarafriedphoenix.com/
Each element from fade out will fade in once the scroll reaches the element

Listed below required improvements as a part of version 3 of the website.

1. Create the Vlog functionality (Where people can use usada-kensetsu as youtube) - @jmbiglangawa
2. Add a function where people can add Peko's new projects (Subject to review) - @IsmaFunes
3. Projects corner on the front page (Where projects will be featured). Will replace pekodam section - @jmbiglangawa
4. Submit your translation function (Subject to review) - @IsmaFunes
5. Re-designing front page - @jmbiglangawa
6. Moving usada-kensetsu from .online to .web.app (So we can remove hostinger domain) @jmbiglangawa
7. Add analytics just to see if people are visiting the website @jmbiglangawa

All listed above will be subjected to changes
Commits for this issue will be committed in branch revamp3

With the newly added Cubical in projects, let's make a maximize feature for each project in mobile

For reference to the cute hopping bunny animation, visit this codepen:
https://codepen.io/katydecorah/pen/uIEFy

We should get the rabbit animation only and change a few things:

• Background color (C7C7C7)
• Shadow color of the bunny (#4B4B4B)
• Bunny eye color (#54B7E9)
  For the edited scss file, you can check this:
  edited.txt

The screen should look similar to this:

You are free to change the colors according to your design, but the layout should be similar
As discussed, the bunny animation should override the loading animations currently existing in the following files:

• App.jsx (Not in Development branch yet. You can skip this one)
• Project.jsx
• Projects.jsx
• Employee.jsx
• Source.jsx

Related to #6 Join Us Implementation
Since we will allow users to connect using their social media (Google, Facebook, and Twitter), we need to implement a privacy policy. Refer to below for Facebook requirement of the privacy policy

We will not apply translations for this one (since it's probably going to be a long set of words). The target message of the privacy policy. I suggest we generate one from this website: https://www.privacypolicygenerator.info/. On the 3rd-party authentication, we target to get: Photo, Username, ID, and Display name; from each social media platform

The style of the page should be plain but should look properly on mobile, not looking too fancy.
Paths to the page should be routed to the parts of the page:

• Join Us Modal
  

• Footer
  

For further discussion on this issue, please message me at discord

Searching Usada Kensetsu results to this gibberish description

This should be changed to a more proper description

And we should change the title from Usada Construction to Usada Kensetsu or Usada Constructions

Add JP Language Support for Usada Kensetsu