New QuantStack website

[HaudinFlorence]

New QuantStack website

[trungleduc]

Thanks @HaudinFlorence for the hard work. The new page looks great! I have a few nitpicks

• I played a bit with the color, how about this landing page?

• Setting the global background to #f9f7f4 might help reduce the eye constraint

• For the project page, a simple design like this might work?

• This section deserves a background image, it looks too empty

• The horizontal scroll bar is visible on any screen size

• The gap between these two sections is too big

• QS image is too big on a small screen size

• Items are not aligned on a smaller screen

• I like colorful pages so the black and white blog post page does not fit my taste. But it's only my personal view.

[trungleduc]

CC @SylvainCorlay @GabrielaVives might be interested in the discussion

[HaudinFlorence]

Hello @trungleduc Thanks for the comments and suggestions. I will start by fixing issues related to sizes of elements and their positions.

[trungleduc]

These sections are not aligned, and there is a horizontal scroll bar even in big screen

[IsabelParedes]

The font-weight for the card titles seems too high. It is currently at 600, but I think lowering it to 500 would make it look better. The e's are almost full circles.

[IsabelParedes]

The font size for "We have worked with" seems too small

[IsabelParedes]

I think the icon group and handle should align with the bottom of the card to make it look more uniform.

(Side note: I changed my handle to @IsabelParedes )

[IsabelParedes]

On the bottom banner, it would look better if the words (GitHub, LinkedIn, and X) are placed to the right of the icons instead of below.

[IsabelParedes]

Bullet alignment

[IsabelParedes]

The QS logo lines seems too thin, even thinner than the font. It would make it more readable if these lines were thicker. I can help with this if needed.

[IsabelParedes]

Speaking of the logo, when it is really small, the planet and the waves can barely be seen at all. Suggestion: we should have a smaller version of the logo that is less detailed (no planet and no waves, and a simplified astronaut)

I'm not a big fan of the white background with yellow lines. Suggestions:

• Keep the background white so that it matches the other icons, but change the planet and waves to dark lines so that they are more visible
• Or maybe better, change the background to yellow to keep it consistent with the other logo and maybe keeping the white lines for the planet and the waves would give a subtle contrast
• Or maybe just a darker yellow would make the planet more visible, or maybe a light gray could work too

(I could help with these if needed.)

[HaudinFlorence]

These sections are not aligned, and there is a horizontal scroll bar even in big screen

I have indeed observed that for large screen there starts to be a misalignment but I don't know how to fix that. There must be some breakpoint somewhere in docusaurus leading to that behavior but I could not find it.

[IsabelParedes]

The Xtensor logo looks very pixelated. Do we have a better one somewhere?

[IsabelParedes]

On the blogs page, some images look vertically stretched. I can't really tell if this is happening to all of them but it could be.

[trungleduc]

The QS logo lines seems too thin, even thinner than the font. It would make it more readable if these lines were thicker. I can help with this if needed.

I'm also interested in a version without the "Scientific Computing' bit

[HaudinFlorence]

On the bottom banner, it would look better if the words (GitHub, LinkedIn, and X) are placed to the right of the icons instead of below.

I agree, but I don't know how to format the position of these elements the way I want (it is not through a react component but via a config file). Maybe at some point I will replace the current footer by a custom one using react.

[HaudinFlorence]

On the blogs page, some images look vertically stretched. I can't really tell if this is happening to all of them but it could be.

I will check what's wrong with my formatting for these images.

[HaudinFlorence]

@IsabelParedes Thanks for proposing some help on the logos. I am interested if you want to propose some alternatives. You can find the original svgs files in static/img/quantstack.

[HaudinFlorence]

The QS logo lines seems too thin, even thinner than the font. It would make it more readable if these lines were thicker. I can help with this if needed.

I'm also interested in a version without the "Scientific Computing' bit

It is a possibility. I was only not sure if you could split it in terms of "brand".

[HaudinFlorence]

@IsabelParedes Thanks for your comments and for taking the time to have a look.

[HaudinFlorence]

@trungleduc Thanks for your comments too.

[IsabelParedes]

I'm looking at the mobile version, I feel like the different background color makes the images look out of place. The beige background makes sense in the full desktop version because you can see the edges.

For the mobile version, I think it would make more sense to have a white background for the descriptions and remove the borders around the images, that way it looks more continuous.

And the text for the project descriptions should probably be justified (like the desktop view) or left aligned.

[IsabelParedes]

(mobile view) On the services page, the text should be justified. And the bullets could use a little padding on the left.

[IsabelParedes]

(mobile vesion) For the cards, the name should be bigger and bold.

Like it is on the pop-up.

And the handle font size should probably be a little smaller.

(desktop version) when hovering over the people cards, there's no indication that they are clickable. In comparison, the cards for the blog posts change border and underline text when hovering, but these ones do not.

[IsabelParedes]

(mobile version) The title font-size should be bigger than people's names.

[IsabelParedes]

(mobile version) The title HIRE QUANTSTACK... font size should be the biggest on this page.

Edit: this also applies to the other pages. The titles seem too small.

[IsabelParedes]

The spaces between words when using the justified text alignment sometimes look too big. I wonder if using word-break and hyphens could help with that.

[trungleduc]

Elements are not centered on a 4k screen.

[HaudinFlorence]

I'm looking at the mobile version, I feel like the different background color makes the images look out of place. The beige background makes sense in the full desktop version because you can see the edges.

For the mobile version, I think it would make more sense to have a white background for the descriptions and remove the borders around the images, that way it looks more continuous.

And the text for the project descriptions should probably be justified (like the desktop view) or left aligned.

@IsabelParedes Thanks I have changed the logics to have a border only in the desktop case.

[HaudinFlorence]

(desktop version) when hovering over the people cards, there's no indication that they are clickable. In comparison, the cards for the blog posts change border and underline text when hovering, but these ones do not.

@IsabelParedes I agree that it would be great to have the same behavior but I don't know how to produce it. For the blogs, we are using links to other external pages. In the case of the portrait card, it opens a popup that is not a new internal page but another react component.

[HaudinFlorence]

The spaces between words when using the justified text alignment sometimes look too big. I wonder if using word-break and hyphens could help with that.

@IsabelParedes I agree but I don't know how to fix that because work-break : break-all reduces the issue of spaces between words but the words are then cut very strangely.