git-commit-show / landing-page Goto Github PK

Description

Praveen Kumar's photo is very stretched. It should be fixed.

Screenshots

Additional context

Instead of storing the images in a folder, we can use the direct links of their profiles from socials, such as Twitter, GitHub, etc..

Fixing position and managing size and responsiveness of all the mountains in the webpage at every devices. Device width minimum could be 350px to maximum laptop screen width to 1800px.
Take reference from figma.
Figma

I've also uploaded full mountain picture with name main-mountain.png in img folder just in case if anyone wants to delete those two separate mountains and add image of one full mountain.

Key items that needs to be updated

• Date
• Join Live Now to Join Live on __event-date__
• Make sure that people don't mistake 2020 schedule to be 2021 schedule. May be add another section - "Schedule 2021 coming soon.."

Different sections "masterclass", "Breakthrough showcase", etc. are not aligned well. The icons and the title text ("Masterclass", "Breakthrough Showcase", etc.) should be aligns properly. Make sure your solution does not disturbs the current mobile view.

Here's a guide by google to add structured data of type event.
This can help the event appear in relevant cards by google and other search engine to understand the page in a better way.

Here's a guide on what needs to be included : https://developers.google.com/search/docs/data-types/event

When we hover any button, the color should become dark not light.
And, animation should be like 16th button in this link.
Buttons link

Issues related to carousel are mentioned below:-

1. Arrows should not touch the edge of the screen. There should be some margin.
2. Arrows are not positioned correctly. They should be centered vertically (with height of video) as in figma.
3. Text of the description is not aligned as in figma. It should be left aligned w.r.t video as in figma.

Add a subtle animation for all buttons.
The animation should be a color change as implemented here

Note: we should not change any button style, only the animation needs to be added. (Same shadows as before)

Three issues with carousel:-

1. After adding margin to arrows it start overlapping.
2. Arrows are still not vertically centered as in figma.
3. Space between description and carousel is too much.
   

Carousel needs to be tested for padding and alignment on all screen. It has inconsistencies in padding

The red bar on top of the text, above the countdown should be aligned left.
Check the figma design

Currently list of talks on landing home page is huge. Can we make it more digestible by adding some filters.

How? Add some badges with following filters (on clicking them, the user should see only the talks related to that filter)

• Masterclass (P.S. might change it's name later to "Tech Talk")
• Career Talk
• Showcase

In Figma:

In Website:

On mobile, footer is adding a lots of scroll. Let's simplify that by removing complete "Git Commit Show 2019" block (keep it on for desktop screen though)

Using chrome.. The top navigation links disappear and the black box keeps covering the top 1/3rd of the page.

http://gitcommit.show is coming as a link but gitcommit.show is appearing as a normal text.

Take reference from FIGMA:
[Official design] (https://www.figma.com/proto/Pcgl4BjxXUY9oveLTPmpVS/Git-Commit-Show?node-id=1%3A2&viewport=369%2C-177%2C0.6467553377151489&scaling=min-zoom)

After expanding screen width from certain pixels, the positioning and sizes of mountains and it's elements changed.

Need resizing of mountains and elements according to the size of the screen so that everything matches and will be at right place.

As from our official design:
Official Figma Design

The text and countdown timer should look like this:

But It is like this now:

Need some resizing and positioning. Also check for this at every screen size and make it responsive.

As per designs, timezone should be mentioned right below the schedule heading

As per designs carousel videos should have title and description below each video

Left part of thumbnail of Daniel's video gets cut out on small devices. When we reduce the size of the window left part of thumbnail gets cut out and we have to maintain the 16:9 ratio for the video embed.

Earlier the domain had 301 redirect to blog post which had alll the details about event. As we moved to this new website and pointed the domain to GitHub servers where it's hosted, now users who had visited the old website do not get to see this new website rather when they hit the domain gitcommit.show they are redirected to old website (blog).

This happens because browsers usually cache the 301 url redirection info (for an year or indefinitely). So even if the domain is pointed to new ip, users keep redirecting to the old redirected url.

"Apply to appear on the show" button is not centered for width 350px and less.

Change title from "about git commit show" to "git commit show"

Figma:

Website:

While clicking on the Masterclass poster the embedded video is not playing automatically in chrome browser in laptop and in any browser in mobile devices. It's working in Mozilla Firefox though.

Here are the two methods of JS which I've tried:
Rough code pen
Rough code pen 2

Here are some of the references you can use to learn:

Stackoverflow
W3 Schools
MDN

Here are some solutions I found why It's not happening:
Stackoverflow
Stack overflow
Stack overflow

Move "Apply to appear on the show" button to its original postion as in Figma design

We are getting this issue on device having width greater than 1580PX. Speakers should be left aligned on every device.

Scroll all the way to bottom and then scroll right. On phone, it is reproducible.

Description

We should add a license to this repository. This way, people will know what and what not they can do with this repository, permissions, notices, etc.. I suggest adding the MIT license.

Additional Context

https://www.freecodecamp.org/news/how-open-source-licenses-work-and-how-to-add-them-to-your-projects-34310c3cf94/

Spacing or gap between the heading GIT COMMIT SHOW 2020 and its content is too much. It needs to be matched with the Figma design

Could be fixed by changing the link https://push.gitcommit.show to http://push.gitcommit.show

Text above countdown is not centered in desktop view (width=1920px)
screenshot is attached below:-

In Website:

In Figma:

Test social share preview, how does it look when shared on twitter, reddit, linkedin, whatsapp etc. On gitcommit.show

On schedule page, detect user timezone and change the time to their timezone.

Align the button "Book your free pass" to the center

We can change copy of "See full videos on Youtube" to "Watch 10+ full sessions from 2019".

1. Alternately if above solution makes button longer and doesn't look good on phone.
2. We can add this text below the button "7 masterclass and 4 breakthrough showcase sessions"