Enhance character rendering in Hero component for responsive design

- Implemented dynamic scaling for character grid and pixel size based on screen width.
- Adjusted character size to improve display on mobile devices.
- Updated texture sampling to accommodate different resolutions for better visual fidelity.

Author: valebearzotti

src/components/hero/index.tsx

@@ -60,7 +60,9 @@ uniform vec2 uResolution;
 uniform sampler2D uTexture;
 out vec4 fragColor;
 float character(int n, vec2 p) {
-  p = floor(p * vec2(-4.0, 4.0) + 2.5);
+  // character grid scale
+  float scale = uResolution.x < 768.0 ? 6.0 : 4.0;
+  p = floor(p * vec2(-scale, scale) + 2.5);
   if(clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y) {
     int a = int(round(p.x) + 5.0 * round(p.y));
     if(((n >> a) & 1) == 1) return 0.8;
@@ -69,7 +71,9 @@ float character(int n, vec2 p) {
 }
 void main() {
   vec2 pix = gl_FragCoord.xy;
-  vec3 col = texture(uTexture, floor(pix / 16.0) * 16.0 / uResolution.xy).rgb;
+  // pixel size
+  float pixelSize = uResolution.x < 768.0 ? 12.0 : 16.0;
+  vec3 col = texture(uTexture, floor(pix / pixelSize) * pixelSize / uResolution.xy).rgb;
   float gray = 0.3 * col.r + 0.59 * col.g + 0.11 * col.b;
   int n = 2048;
   if(gray > 0.2) n = 65600;
@@ -79,7 +83,9 @@ void main() {
   if(gray > 0.6) n = 15252014;
   if(gray > 0.7) n = 13195790;
   if(gray > 0.8) n = 11512810;
-  vec2 p = mod(pix / 8.0, 2.0) - vec2(1.0);
+  // char size
+  float charSize = uResolution.x < 768.0 ? 6.0 : 8.0;
+  vec2 p = mod(pix / charSize, 2.0) - vec2(1.0);
   col = vec3(character(n, p));
   if (gray < 0.2) {
     col *= 0.4;