portfolio/index.html at main · taearls/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--
      @font-face declarations moved to globals.css to fix mobile Android rendering issue.

      Previous implementation used inline <style> tags to prevent CLS, but Android Chrome
      has issues resolving relative font paths in inline styles. Moving to external CSS
      fixes the mobile rendering issue with minimal CLS impact (fonts still preloaded below).
    -->

    <!-- Preload font files (now @font-face rules are already defined above) -->
    <link
      rel="preload"
      href="/fonts/ubuntu-regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/ubuntu-bold.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/limelight-regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <!-- Preload LCP image for optimal loading performance -->
    <link
      rel="preload"
      as="image"
      href="https://res.cloudinary.com/taearls/image/upload/ar_1:1,c_thumb,g_xy_center,r_max,w_800,x_730,y_800/profile/front_of_brick_wall_smiling.webp"
      fetchpriority="high"
    />
    <!-- <link
      href="https://fonts.googleapis.com/css2?family=Limelight&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
      rel="preload"
      id="fonts"
      as="style"
    /> -->
    <!-- Preload SVG sprite to prevent icon flash on page load -->
    <link
      rel="preload"
      href="/icons/sprite.svg"
      as="image"
      type="image/svg+xml"
    />
    <!-- <link
      rel="preload"
      href="src/styles/globals.css"
      id="global-styles"
      as="style"
    /> -->
    <!-- Meta tags managed by React 19 Meta component -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/root.tsx"></script>
    <!-- <script>
      const fonts = document.getElementById("fonts");
      const sprite = document.getElementById("sprite");
      const globalCSS = document.getElementById("global-styles");

      fonts.addEventListener("load", () => {
        fonts.rel = "stylesheet";
      });

      sprite.addEventListener("load", () => {
        sprite.rel = "image";
      });

      globalCSS.addEventListener("load", () => {
        globalCSS.rel = "stylesheet";
      });
    </script> -->
  </body>
</html>