optimize: about page

[PainterPuppets]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
magickbase-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2023 2:40am
neuron-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2023 2:40am

[WhiteMinds]

Is this PR ready for review?

[Kirl70]

1.The first-screen effect is inconsistent with the given parameters.

Design Draft:

2.It doesn't match the design draft.

3.The effect lacks interactivity.

4.The scrolling range is odd, resulting in a large gap that doesn't align with the design draft.

Refer:Magickbase/visual-style-guide#26

[Danie0918]

1. Loading time is a bit long and dragging can be laggy, needs to be optimized.

2023-12-01-19-50-57.mp4

2. The proportions of the navigation layout need to be optimized a bit, and the entire content needs to be displayed on one screen.
   

3. Service switching and hopping is currently unavailable.
   

4. The Contact Us button does not respond when clicked.
   

5. Missing service monitor; Twitter icon needs tweaking; navigation is currently unavailable.
   

6. Language change when jumping to Neuron home page.（The home page and the service's home page should have consistent language）
   

7. The scrollbar for the CKB Node Compatibility table needs to be optimized, refer to the UI draft.
   

[PainterPuppets]

1.The first-screen effect is inconsistent with the given parameters.

Design Draft:

2.It doesn't match the design draft.

3.The effect lacks interactivity.

4.The scrolling range is odd, resulting in a large gap that doesn't align with the design draft.

Refer:Magickbase/visual-style-guide#26

1.It is indeed set according to this params, these codes are option items, can compare where there is a difference

websites/packages/magickbase/public/perlin-noise/script.js

Lines 110 to 125 in 276f7d7

	perlin: {
	vel: 0.001,
	speed: 0.0000,
	perlins: 1.0,
	decay: 0.14,
	complex: 0.30,
	waves: 20.0,
	eqcolor: 9.0,
	fragment: false,
	redhell: true
	},
	spin: {
	sinVel: 0.0,
	ampVel: 80.0,
	}
	}

2. Can describe it in detail?

3. The animation provided is very laggy and consumes a lot of memory, I can change to an animation for you to experience, and Spline animation if you want to adapt through the program needs some settings, such as setting certain variables can trigger a certain animation such as this, at present, this kind of direct autoplay without triggering animation there is no way to let the program to control the animation can only be autoplay.

4.Because the scope of this animation is too large, containing both background and foreground content, the animation is not adaptive to the screen, so it will lead to some problems, and here you may need to split the animation into foreground and background to control separately

[PainterPuppets]

1. Loading time is a bit long and dragging can be laggy, needs to be optimized.

2023-12-01-19-50-57.mp4
2. The proportions of the navigation layout need to be optimized a bit, and the entire content needs to be displayed on one screen.

3. Service switching and hopping is currently unavailable.

4. The Contact Us button does not respond when clicked.

5. Missing service monitor; Twitter icon needs tweaking; navigation is currently unavailable.

6. Language change when jumping to Neuron home page.（The home page and the service's home page should have consistent language）

7. The scrollbar for the CKB Node Compatibility table needs to be optimized, refer to the UI draft.

The long loading time is more because of the animation

Some of the ways I can probably think of:

Lazy loading, don't load the animation before the first screen is rendered, load the animation when switching to pages, use placeholder images before the animation finishes loading, may require some cooperation

[Kirl70]

1.The first-screen effect is inconsistent with the given parameters.
Design Draft:
2.It doesn't match the design draft.
3.The effect lacks interactivity.
4.The scrolling range is odd, resulting in a large gap that doesn't align with the design draft.
Refer:Magickbase/visual-style-guide#26

1.It is indeed set according to this params, these codes are option items, can compare where there is a difference

websites/packages/magickbase/public/perlin-noise/script.js

Lines 110 to 125 in 276f7d7

	perlin: {
	vel: 0.001,
	speed: 0.0000,
	perlins: 1.0,
	decay: 0.14,
	complex: 0.30,
	waves: 20.0,
	eqcolor: 9.0,
	fragment: false,
	redhell: true
	},
	spin: {
	sinVel: 0.0,
	ampVel: 80.0,
	}
	}

2. Can describe it in detail?
3. The animation provided is very laggy and consumes a lot of memory, I can change to an animation for you to experience, and Spline animation if you want to adapt through the program needs some settings, such as setting certain variables can trigger a certain animation such as this, at present, this kind of direct autoplay without triggering animation there is no way to let the program to control the animation can only be autoplay.

4.Because the scope of this animation is too large, containing both background and foreground content, the animation is not adaptive to the screen, so it will lead to some problems, and here you may need to split the animation into foreground and background to control separately

1. The code doesn't necessarily have to match the parameter values exactly; it's more important to adjust the code according to the effect specified by the parameters.

2. On the left is the actual webpage, and on the right is the design draft. You can observe specific differences. Additionally, the text appears based on mouse scrolling, not all displayed at once.

3. This animation is a frame-by-frame animation triggered by mouse scrolling.

4. What kind of adjustment details do I need to provide?

[WhiteMinds]

If this PR is in a reviewable state, please let me know.

[PainterPuppets]

Currently have optimized all the animation effects and display effects
And the footer and sidebar are intended to be shared components.
so I'm going to merge this pr before submitting a new component package

@WhiteMinds