calmCommandCenter/index.html at main · hypnoticdata777/calmCommandCenter · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

  <!-- ============================================================
    ARCHIVO: index.html

    ¿QUÉ HACE ESTE ARCHIVO?
    Es el punto de entrada de toda la aplicación — el único archivo
    HTML real del proyecto. El navegador lo carga primero cuando
    visitas el sitio. Su trabajo es mínimo: preparar la página y
    decirle a React dónde "enchufarse" para tomar el control.

    FLUJO DE CARGA:
    1. El navegador descarga index.html
    2. Ve el <script> y descarga main.tsx (compilado por Vite)
    3. main.tsx monta el componente App dentro del <div id="root">
    4. React toma control de toda la página desde ese punto
  ============================================================ -->

  <!-- DOCTYPE le dice al navegador que este es HTML5 (el estándar moderno).
       Sin esto, el navegador entraría en "modo de compatibilidad" y algunas
       cosas podrían verse diferente. -->
  <!DOCTYPE html>

  <!-- lang="en" le dice a los lectores de pantalla y motores de búsqueda
       que el idioma principal de la página es inglés. -->
  <html lang="en">
    <head>
      <!-- charset DEBE ser lo primero en <head> — regla del estándar HTML.
           UTF-8 permite mostrar cualquier carácter: acentos, emojis, etc. -->
      <meta charset="UTF-8" />

      <!-- viewport controla cómo se escala la página en dispositivos móviles.
           width=device-width → el ancho se adapta al ancho del dispositivo
           initial-scale=1.0 → sin zoom al cargar (tamaño natural) -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <meta
        name="description"
        content="h777 is a public portfolio for remote operations software, workflow tools, field notes, and practical systems by Carlos Sanchez."
      />
      <meta name="robots" content="index, follow" />
      <meta name="theme-color" content="#0f0f0f" />
      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
      <link rel="canonical" href="https://h777.dev/" />
      <meta property="og:type" content="website" />
      <meta property="og:title" content="h777 | Remote Operations Software and Workflow Tools" />
      <meta
        property="og:description"
        content="Remote operations software, workflow tools, field notes, and practical systems."
      />
      <meta property="og:url" content="https://h777.dev/" />
      <meta property="og:image" content="https://h777.dev/og.png" />
      <meta property="og:image:secure_url" content="https://h777.dev/og.png" />
      <meta property="og:image:type" content="image/png" />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta
        property="og:image:alt"
        content="h777 remote operations software, workflow tools, and field notes"
      />
      <meta property="og:site_name" content="h777" />
      <meta property="og:locale" content="en_US" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content="h777 | Remote Operations Software and Workflow Tools" />
      <meta
        name="twitter:description"
        content="Remote operations software, workflow tools, field notes, and practical systems."
      />
      <meta name="twitter:image" content="https://h777.dev/og.png" />
      <meta
        name="twitter:image:alt"
        content="h777 remote operations software, workflow tools, and field notes"
      />
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@graph": [
            {
              "@type": "WebSite",
              "name": "h777",
              "url": "https://h777.dev",
              "description": "Remote operations software, workflow tools, field notes, and practical systems."
            },
            {
              "@type": "Person",
              "name": "Carlos Sanchez",
              "alternateName": "hypnoticdata777",
              "url": "https://h777.dev",
              "sameAs": ["https://github.com/hypnoticdata777"],
              "knowsAbout": [
                "Remote operations",
                "Workflow software",
                "Service operations",
                "High-stakes handoffs",
                "Maintenance workflows",
                "PropTech tools",
                "Property management operations"
              ]
            }
          ]
        }
      </script>

      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

      <!-- El título que aparece en la pestaña del navegador y en resultados de búsqueda -->
      <title>h777 | Remote Operations Software and Workflow Tools</title>
    </head>

    <body>
      <!-- El <body> contiene todo lo visible en la página. -->

      <!-- Este div vacío es el "contenedor raíz" de React.
           Empieza vacío — React lo llenará con toda la interfaz.
           El id="root" es como una dirección: main.tsx lo busca
           con document.getElementById("root") para montar la app. -->
      <div id="root"></div>

      <!-- Este script carga el punto de entrada de JavaScript.
           type="module" habilita la sintaxis moderna import/export.
           Vite intercepta esta petición y sirve el código transformado.
           Al ejecutarse, main.tsx monta React dentro del div#root. -->
      <script type="module" src="/src/main.tsx"></script>
    </body>
  </html>