cami-gs.github.io/visual_notes.template.html at main · cami-gs/cami-gs.github.io · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<!--
  Plantilla base para generar visual_notes.html automáticamente.

  CÓMO FUNCIONA:
  1. Este archivo define la estructura general de la página.
  2. El script generate_visual_notes.py lee visual_notes.json.
  3. Luego inserta automáticamente el bloque del archivo visual en la zona designada.
  4. El resultado final se guarda como visual_notes.html.

  IMPORTANTE:
  - No borres la zona designada para inserción automática dentro de la sección de observaciones visuales.
  - Sí puedes editar textos fijos como el título, introducción o navegación.
-->

<html lang="en" data-lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visual Notes | Camila Ignacia González Silva</title>
  <meta name="description" content="Visual Notes documents spatial and material observations on everyday life, the built environment, infrastructures, and broader social processes through images treated as empirical material for sociological analysis.">
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <header class="hero">
    <div class="hero-inner">
      <div class="hero-topline">
        <p class="eyebrow">
  <span class="lang lang-en" lang="en">Visual Methods · Space · Everyday Life</span>
  <span class="lang lang-es" lang="es">Metodologías visuales · Espacio · Vida cotidiana</span>
</p>

        <div class="language-switch" aria-label="Language switcher">
          <button class="lang-btn active" data-lang="en" type="button" aria-pressed="true">EN</button>
          <button class="lang-btn" data-lang="es" type="button" aria-pressed="false">ES</button>
        </div>
      </div>

      <div class="hero-grid">
        <div class="hero-text">
          <p>
            <a href="index.html">
              <span class="lang lang-en" lang="en">← Back to homepage</span>
              <span class="lang lang-es" lang="es">← Volver a la página principal</span>
            </a>
          </p>

          <h1>
            <span class="lang lang-en" lang="en">Visual Notes</span>
            <span class="lang lang-es" lang="es">Notas visuales</span>
          </h1>

          <p class="lead lang lang-en" lang="en">
            Visual Notes documents spatial and material observations related to everyday life, the built environment, infrastructures, and broader social processes. The section treats images as empirical material for sociological analysis of how social relations become spatially organized and materially legible.
          </p>

          <p class="lead lang lang-es" lang="es">
            Visual Notes documenta observaciones espaciales y materiales vinculadas con la vida cotidiana, el entorno construido, las infraestructuras y procesos sociales más amplios. La sección trata las imágenes como material empírico para un análisis sociológico de cómo las relaciones sociales se organizan espacialmente y se vuelven legibles en su materialidad.
          </p>
        </div>

        <figure class="hero-image hero-image-color">
          <img src="assets/img/photovoice.png" alt="Collage-style image evoking built space, infrastructures, everyday life, and the social organization of space">
         <figcaption>
  <span class="lang lang-en" lang="en">Visual observations on space, material environments, and social processes.</span>
  <span class="lang lang-es" lang="es">Observaciones visuales sobre espacio, entornos materiales y procesos sociales.</span>
</figcaption>
        </figure>
      </div>
    </div>
  </header>

  <div class="site-note">
    <p class="lang lang-en" lang="en">The photographs are presented as situated observations. Each image captures a concrete spatial configuration through which broader social relations become empirically legible.</p>
    <p class="lang lang-es" lang="es">Las fotografías se presentan como observaciones situadas. Cada imagen capta una configuración espacial concreta a través de la cual relaciones sociales más amplias se vuelven empíricamente legibles.</p>
  </div>

  <main>
    <section class="content-section">
      <div class="section-label" aria-hidden="true">✴︎</div>

      <div class="section-body">
        <h2>
          <span class="lang lang-en" lang="en">Scope and reading</span>
          <span class="lang lang-es" lang="es">Alcance y lectura</span>
        </h2>

        <p class="lang lang-en" lang="en">
          Visual Notes documents spatial and material observations related to everyday life, the built environment, infrastructures, and broader social processes. The section presents images as empirical material for sociological analysis.
        </p>

        <p class="lang lang-es" lang="es">
          Visual Notes documenta observaciones espaciales y materiales vinculadas con la vida cotidiana, el entorno construido, las infraestructuras y procesos sociales más amplios. La sección presenta las imágenes como material empírico para el análisis sociológico.
        </p>

        <p class="lang lang-en" lang="en">
          The photographs are presented as situated observations rather than as a visual portfolio. Each image records a concrete spatial configuration through which built forms, infrastructures, everyday practices, and broader social relations can be read in relation to processes of organization, negotiation, and inequality.
        </p>

        <p class="lang lang-es" lang="es">
          Las fotografías se presentan como observaciones situadas y no como portafolio visual. Cada imagen registra una configuración espacial concreta a través de la cual formas construidas, infraestructuras, prácticas cotidianas y relaciones sociales más amplias pueden leerse en relación con procesos de organización, negociación y desigualdad.
        </p>

        <p class="site-rights-note">
          <span class="lang lang-en" lang="en">
            All images featured in this section are © Camila Ignacia González Silva. Please do not reproduce, redistribute, or use them without prior permission.
          </span>
          <span class="lang lang-es" lang="es">
            Todas las imágenes de esta sección son © Camila Ignacia González Silva. Por favor, no reproducir, redistribuir ni utilizar sin autorización previa.
          </span>
        </p>
      </div>
    </section>

    <section class="content-section">
      <div class="section-label" aria-hidden="true">✴︎</div>

      <div class="section-body">
        <h2>
          <span class="lang lang-en" lang="en">Visual observations</span>
          <span class="lang lang-es" lang="es">Observaciones visuales</span>
        </h2>

        <!-- El script inserta automáticamente aquí los grupos y tarjetas del archivo visual. -->
        <!-- VISUAL_NOTES_AUTO_CONTENT -->
      </div>
    </section>

    <section class="content-section">
      <div class="section-label" aria-hidden="true">✴︎</div>

      <div class="section-body">
        <h2>
          <span class="lang lang-en" lang="en">Navigation</span>
          <span class="lang lang-es" lang="es">Navegación</span>
        </h2>

        <p>
          <a class="cv-link" href="index.html">
            <span class="lang lang-en" lang="en">Return to homepage</span>
            <span class="lang lang-es" lang="es">Volver a la página principal</span>
          </a>
        </p>
      </div>
    </section>
  </main>

  <section class="closing-image">
    <img src="assets/img/web-1.png" alt="Urban visual composition in blue, green, and violet tones">
  </section>

  <script>
    const buttons = document.querySelectorAll('.lang-btn');
    const root = document.documentElement;

    function setLanguage(lang) {
      root.setAttribute('data-lang', lang);
      localStorage.setItem('site-language', lang);

      buttons.forEach(btn => {
        const isActive = btn.dataset.lang === lang;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
      });
    }

    const savedLanguage = localStorage.getItem('site-language') || 'en';
    setLanguage(savedLanguage);

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setLanguage(btn.dataset.lang);
      });
    });
  </script>
</body>
</html>