Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Landing Page #3

Merged
merged 33 commits into from
Dec 7, 2021
Merged

Landing Page #3

merged 33 commits into from
Dec 7, 2021

Conversation

julieg18
Copy link
Contributor

@julieg18 julieg18 commented Nov 17, 2021

What Needs to be Done

  • Add Storybook for reviews (I couldn't get it working but I'll investigate further once I finish the first iteration)
  • Finalize logo
  • Create image for social sharing and favicon(I created images with our current logo version for now)
  • eslint doesn't appear to be working correctly 🤔

* add sans-serif font (tmp)
* update tablet padding
@julieg18 julieg18 self-assigned this Nov 17, 2021
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 17, 2021 21:39 Inactive
@julieg18 julieg18 marked this pull request as draft November 17, 2021 22:04
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 17, 2021 22:09 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 17, 2021 22:11 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 17, 2021 22:14 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 18, 2021 23:09 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 19, 2021 14:43 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 20, 2021 01:15 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 22, 2021 15:27 Inactive
* add font sizing to terminal text
* add terminal animation
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 24, 2021 02:07 Inactive
@aguschin
Copy link
Contributor

aguschin commented Nov 24, 2021

Thanks a lot, @julieg18, the website looks awesome! 🔥
Two things I wanted to suggest:

  1. Could we make this progress bar look like it changes in the process?
    image
    E.g. we can quickly change the following values (sorry, text formatting is completely failing here).
24%|██                      | 2432/10000 [00:11<00:33, 230.00it/s]
51%|████               | 4636/10000 [00:23<00:21, 232.00it/s]
76%|██████        | 7568/10000 [00:33<00:10, 230.00it/s]
100%|████████| 10000/10000 [00:43<00:00, 229.00it/s]
  1. When you first open a new code tab, it's expected that you'll see how text is typing. But when you already saw that and just trying to browse through the code tabs once again, it takes too long to wait IMO. In this case, it would be good to just show code, without typing it or, alternatively, type it very fast.

Or, we can always type code much faster and don't distinguish whether do you open the code tab for the first time or not. I previously thought that it's bad because people don't keep up with it (as in the case with the terraform website), but the amount of text is very limited in our case compared to theirs, so it may be fine to type everything quite fast. WDYT about this?

@aguschin
Copy link
Contributor

aguschin commented Nov 26, 2021

One more idea: steps here compete too fast. In reality it would take at least few seconds for each one. Maybe small pauses between steps (need to look at this with pauses, but 0.5s-1s may be sufficient) will make this more realistic?
image

@julieg18
Copy link
Contributor Author

Could we make this progress bar look like it changes in the process?

Yes, I'm planning to work on that next!

...Or, we can always type code much faster and don't distinguish whether do you open the code tab for the first time or not. I previously thought that it's bad because people don't keep up with it (as in the case with the terraform website), but the amount of text is very limited in our case compared to theirs, so it may be fine to type everything quite fast. WDYT about this?

Increasing the type speed makes sense to me! I'll increase the typing speed for now and we can alway implement increasing (or just showing code) after the user clicks on it at a later date.

One more idea: steps here compete too fast. In reality it would take at least few seconds for each one. Maybe small pauses between steps (need to look at this with pauses, but 0.5s-1s may be sufficient) will make this more realistic?

Sure, I'll increase the pauses after each step!

@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 29, 2021 15:08 Inactive
* add option to add a loading bar into your script
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji November 30, 2021 16:11 Inactive
@julieg18
Copy link
Contributor Author

I was hoping to make a working animated progress bar that moves but I realized that it would take some more time to get it done. So for now, I added multiple progress bars showing progress:

Screen.Recording.2021-11-30.at.10.17.35.AM.mov

Copy link
Contributor

@rogermparent rogermparent left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything I'd consider a blocker is taken care of! Might be best to give others a chance to go over it first, but that's up to you.

@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 3, 2021 21:09 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 3, 2021 21:13 Inactive
- generate delays at random
- allow way to use delays in home-slides.js
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 3, 2021 21:14 Inactive
@julieg18
Copy link
Contributor Author

julieg18 commented Dec 3, 2021

Ok, I added delays to the parts that @aguschin requested and the delays are random from 0.25s-0.5s. I also implemented the other requested changes :)

@aguschin
Copy link
Contributor

aguschin commented Dec 6, 2021

Cool, @julieg18!

Few things I found:

  1. First three lines have "7568/10000" - can we fix this?

image

  1. On Safari Version 15.1 (17612.2.9.1.20) other items beside the first one are non-clickable for me
    image

  2. When you scroll down, three dots which hint that this is a terminal, disappear. Can we stick them to the top as with real-life terminal windows?

image

@aguschin
Copy link
Contributor

aguschin commented Dec 6, 2021

Also, this section looks slightly different on Firefox 94.0.2 (64-bit) (notice more space between sections)
image

One minor thing - maybe move the terminal window up a bit, so the top on it would match the top of the text on the left? Maybe I'm overthinking stuff, so please ignore if you disagree :)
image

@julieg18
Copy link
Contributor Author

julieg18 commented Dec 6, 2021

@aguschin, thanks for spotting the bugs! I'll get right on it!

One minor thing - maybe move the terminal window up a bit, so the top on it would match the top of the text on the left? Maybe I'm overthinking stuff, so please ignore if you disagree :)

The terminal is centered vertically in the desktop version which is why it isn't touching the top:

Screen Shot 2021-12-06 at 7 13 03 AM

But if you'd prefer the terminal being at the top, I can update the terminal to move to the top.

@0x2b3bfa0
Copy link
Member

Awesome work! 🎉

It took me a while to realize that the four items on the left were interactive. 🙈 I was about to complain about “the tagline being smaller than the feature list” when I saw this issue and the actual purpose of that graphical element. 🤦🏼‍♂️

Also, it's just me, or the underscore could be a bit bolder and aligned with the base line?

Proposed

Captura de pantalla 2021-12-06 a las 14 37 15

Current

Captura de pantalla 2021-12-06 a las 14 37 26

@julieg18
Copy link
Contributor Author

julieg18 commented Dec 6, 2021

Also, it's just me, or the underscore could be a bit bolder and aligned with the base line?

Agreed! We're still deciding on what the site's official font is. Once we have this, I'll adjust the underscore to be thicker.

* fix firefox adding extra height to li items
* fix header not working correctly in safari
* fix incorrect timer numbers
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 6, 2021 15:40 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 6, 2021 15:55 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 6, 2021 20:46 Inactive
@julieg18
Copy link
Contributor Author

julieg18 commented Dec 6, 2021

Ok, we have our font (might be changed later) and I fixed all the bugs. Once we have the typeform link, we should be ready to deploy 🥳

@aguschin
Copy link
Contributor

aguschin commented Dec 7, 2021

Thanks a lot, @julieg18! Website is 🔥
Please use this link: https://iterative-ai.typeform.com/to/FGyGIx45

@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 7, 2021 14:56 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 7, 2021 15:20 Inactive
@julieg18 julieg18 temporarily deployed to mlem-ai-complete-site-igqsofji December 7, 2021 15:48 Inactive
@julieg18 julieg18 merged commit e5e44b4 into main Dec 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants