PageSourceSearch

https://sarangof.com/

html sarangof.com collected 2026-10-09 22:08:43 UTC 23,702 bytes, 550 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Sara Arango Franco — Ruido y Señal</title>
7<meta name="description" content="Sara Arango Franco is an artist-researcher based in Medellín. Her practice, Ruido y Señal, works at the intersection of sound, urban inquiry, data, and writing. Projects include Radio Aburrá, Monumento, and El ruido y la separación.">
8<link rel="canonical" href="https://sarangof.com/">
9<meta name="author" content="Sara Arango Franco">
10
11<link rel="preconnect" href="https://fonts.googleapis.com">
12<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500&display=swap" rel="stylesheet">
14<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500&display=swap" rel="stylesheet">
15<link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap" rel="stylesheet">
16<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap" rel="stylesheet">
17
18<style>
19:root {
20  --bg: #ffffff;
21  --card-bg: #ffffff;
22  --text: #1C1917;
23  --muted: #78716C;
24  --line: #ffffff;
25  --accent: #B91C1C;
26  --green: #365E4C;
27  --serif: 'Newsreader', Georgia, serif;
28  --mono: 'General Sans', sans-serif;
29  --sans: 'Outfit', system-ui, sans-serif;
30}
31
32*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
33html { font-size:16px; scroll-behavior:smooth; }
34body { font-family:var(--sans); font-weight:400; line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
35::selection { background:var(--accent); color:#fff; }
36a { color:var(--text); text-decoration:none; }
37a:hover { color:var(--accent); }
38
39/* NAV */
40nav {
41  position:fixed; top:0; left:0; right:0; z-index:100;
42  background:var(--bg);
43  border-bottom:1px solid var(--line);
44  padding:12px 28px;
45  display:flex; justify-content:space-between; align-items:center;
46}
47nav .name { font-family:'General Sans', sans-serif; font-weight:600; font-size:1.05rem; }
48nav .links { display:flex; gap:20px; align-items:center; }
49nav .links a {
50  font-family:var(--mono); font-size:0.65rem; text-transform:uppercase;
51  letter-spacing:0.1em; color:var(--muted);
52}
53nav .links a:hover { color:var(--text); }
54.lang-toggle {
55  background:none; border:none; font-family:var(--mono); font-size:0.65rem;
56  text-transform:uppercase; letter-spacing:0.1em; color:var(--muted);
57  cursor:pointer; padding:2px 0; border-bottom:1px dotted var(--muted);
58}
59.lang-toggle:hover { color:var(--text); border-color:var(--text); }
60
61/* HERO */
62.hero {
63  padding:80px 28px 12px;
64  max-width:none;
65  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 24px;
66}
67.hero h1 {
68  font-family:'General Sans', sans-serif;
69  font-size:clamp(1.8rem, 4vw, 2.8rem);
70  font-weight:600; line-height:1.05;
71  letter-spacing:-0.01em;
72}
73.hero h1 em { font-style:italic; color:var(--accent); }
74.hero .lead {
75  font-family:var(--serif); font-style:italic; font-size:1.15rem;
76  font-weight:400; color:var(--text); line-height:1.4;
77}
78.hero .loc {
79  font-family:var(--mono); font-size:0.62rem;
80  color:var(--muted); letter-spacing:0.04em;
81}
82
83/* SECTIONS */
84.sec { padding:16px 28px 24px; }
85.sep { border:none; border-top:1px solid var(--line); margin:0 28px; }
86.sec-label {
87  font-family:var(--mono); font-size:0.62rem; text-transform:uppercase;
88  letter-spacing:0.16em; color:var(--muted); margin-bottom:20px;
89}
90
91/* TAGS */
92.tag-bar { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
93.tag-btn {
94  font-family:var(--mono); font-size:0.58rem; text-transform:uppercase;
95  letter-spacing:0.06em; background:none; border:1px solid var(--line);
96  color:var(--muted); padding:2px 10px; cursor:pointer; transition:all 0.15s;
97}
98.tag-btn:hover { border-color:var(--text); color:var(--text); }
99.tag-btn.active { background:var(--text); color:var(--bg); border-color:var(--text); }
100.t { font-family:var(--mono); font-size:0.5rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); }
101
102/* PROJECT GRID */
103.pgrid {
104  display:grid;
105  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
106  gap:10px;
107}
108
109.pcard {
110  background:var(--card-bg);
111  padding:0;
112  cursor:pointer;
113  position:relative;
114  overflow:hidden;
115}
116
117.pcard-img {
118  width:100%; aspect-ratio:4/3;
119  background:#D4CFC8;
120  display:flex; align-items:center; justify-content:center;
121  font-family:var(--mono); font-size:0.55rem; color:var(--muted);
122  overflow:hidden;
123}
124.pcard-img img { width:100%; height:100%; object-fit:cover; }
125
126.pcard-body { padding:8px 10px 10px; }
127
128.pcard-body h3 {
129  font-family:'General Sans', sans-serif; font-size:0.92rem; font-weight:500;
130  line-height:1.2; letter-spacing:-0.005em;
131}
132/* Hidden by default */
133.pcard-body .pm,
134.pcard-body .pd,
135.pcard-body .tags-row,
136.pcard-body .plink { display:none; }
137
138.pcard-body .pm {
139  font-family:var(--mono); font-size:0.58rem; color:var(--muted);
140  margin-top:4px; margin-bottom:6px; letter-spacing:0.01em;
141}
142.pcard-body .pd {
143  font-size:0.78rem; line-height:1.5; color:var(--text);
144  margin-bottom:6px;
145}
146.pcard-body .tags-row { gap:6px; flex-wrap:wrap; margin-top:6px; }
147.pcard-body .plink {
148  margin-top:6px;
149  font-family:var(--mono); font-size:0.58rem; color:var(--green);
150}
151.pcard-body .plink:hover { color:var(--accent); }
152
153/* EXPANDED: show everything */
154.pcard.expanded .pcard-body .pm,
155.pcard.expanded .pcard-body .pd,
156.pcard.expanded .pcard-body .tags-row,
157.pcard.expanded .pcard-body .plink { display:flex; }
158.pcard.expanded .pcard-body .pm,
159.pcard.expanded .pcard-body .pd { display:block; }
160.pcard.expanded { grid-column: span 2; }
161
162/* English mode: hide Spanish descriptions even when expanded */
163.pcard.expanded .pcard-body .pd.lang-es { display:none; }
164body.es .pcard.expanded .pcard-body .pd.lang-en { display:none; }
165
166/* WRITING */
167.wlist { max-width:100%; }
168.witem {
169  padding:16px 0; border-bottom:1px solid var(--line);
170  display:grid; grid-template-columns:48px 1fr auto; gap:16px; align-items:baseline;
171}
172.witem:last-child { border-bottom:none; }
173.wy { font-family:var(--mono); font-size:0.68rem; color:var(--muted); }
174.witem h3 { font-family:var(--serif); font-size:1.05rem; font-weight:400; line-height:1.25; }
175.witem h3 a { text-decoration:none; }
176.witem h3 a:hover { color:var(--accent); }
177.wv { font-family:var(--mono); font-size:0.62rem; color:var(--muted); text-align:right; white-space:nowrap; }
178.wd { grid-column:2/-1; font-size:0.82rem; color:var(--muted); line-height:1.5; margin-top:-4px; }
179
180/* CV */
181.cv { max-width:100%; column-count:2; column-gap:40px; }
182.cvb {
183  display:grid; grid-template-columns:80px 1fr; gap:16px;
184  padding:12px 0; border-bottom:1px solid var(--line);
185  break-inside:avoid;
186}
187.cvb:last-child { border-bottom:none; }
188.cvp { font-family:var(--mono); font-size:0.65rem; color:var(--muted); padding-top:2px; }
189.cvb h3 { font-family:var(--sans); font-size:0.88rem; font-weight:500; line-height:1.3; }
190.cvo { font-family:var(--mono); font-size:0.72rem; color:var(--green); }
191.cvd { font-size:0.8rem; color:var(--muted); }
192.cv-section-label { break-before:avoid; break-inside:avoid; }
193
194/* ABOUT */
195.about-layout { display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
196.about-text h2 {
197  font-family:'General Sans', sans-serif; font-size:clamp(1.5rem, 3vw, 2.4rem);
198  font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin-bottom:14px;
199}
200.about-text h2 em {
201  font-family:var(--serif); font-style:italic; font-weight:500;
202  color:var(--text); letter-spacing:-0.01em;
203}
204.about-text p {
205  font-family:var(--serif); font-size:1.1rem; line-height:1.55;
206  margin-bottom:10px;
207}
208.about-photo {
209  width:100%;
210}
211
212/* CONTACT */
213.contact { padding:12px 28px 16px; }
214.contact h2 { font-family:var(--serif); font-size:1.5rem; font-weight:400; margin-bottom:8px; }
215.contact-links { display:flex; gap:24px; }
216.contact-links a {
217  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase;
218  letter-spacing:0.06em; color:var(--muted);
219}
220.contact-links a:hover { color:var(--text); }
221
222footer {
223  padding:16px 28px; display:flex; justify-content:space-between;
224  font-family:var(--mono); font-size:0.58rem; color:var(--muted);
225  border-top:1px solid var(--line);
226}
227
228/* RESPONSIVE */
229@media (max-width:768px) {
230  .pgrid { grid-template-columns:repeat(2, 1fr); gap:8px; }
231  .pcard.expanded { grid-column: span 1; }
232  .about-layout { grid-template-columns:1fr; }
233  .witem { grid-template-columns:1fr; gap:2px; }
234  .wv { text-align:left; }
235  .cvb { grid-template-columns:1fr; gap:2px; }
236  .cv { column-count:1; }
237  nav .links { gap:10px; }
238  .hero, .sec, .contact { padding-left:16px; padding-right:16px; }
239  .sep { margin-left:16px; margin-right:16px; }
240  .hero { flex-direction:column; gap:6px; }
241}
242@media (max-width:480px) {
243  .pgrid { grid-template-columns:1fr 1fr; gap:6px; }
244  .pcard-body { padding:6px 8px 8px; }
245  .pcard-body h3 { font-size:0.78rem; }
246}
247
248/* BILINGUAL */
249.lang-es { display:none; }
250body.es .lang-en { display:none; }
251body.es .lang-es { display:block; }
252body.es .lang-es-inline { display:inline; }
253body.es .lang-en-inline { display:none; }
254body:not(.es) .lang-es-inline { display: none; }
255
256/* FIX: card descriptions stay hidden until expanded, even in Spanish mode */
257body.es .pcard-body .pd.lang-es { display:none; }
258body.es .pcard-body .pm { display:none; }
259body.es .pcard.expanded .pcard-body .pd.lang-es { display:block; }
260body.es .pcard.expanded .pcard-body .pm { display:block; }
261/* Same fix for writing descriptions */
262body.es .wd.lang-es { display:none; }
263body.es .witem .wd.lang-es { display:block; }
264</style>
265
266<script type="application/ld+json">
267{
268  "@context": "https://schema.org",
269  "@type": "Person",
270  "name": "Sara Arango Franco",
271  "alternateName": "Sara Arango-Franco",
272  "url": "https://sarangof.com",
273  "image": "https://sarangof.com/images/DSCF8500_bw.png",
274  "jobTitle": "Artist-researcher",
275  "worksFor": {
276    "@type": "Organization",
277    "name": "Ruido y Señal"
278  },
279  "address": {
280    "@type": "PostalAddress",
281    "addressLocality": "Medellín",
282    "addressCountry": "CO"
283  },
284  "alumniOf": [
285    {"@type": "CollegeOrUniversity", "name": "New York University"},
286    {"@type": "CollegeOrUniversity", "name": "Universidad EAFIT"}
287  ],
288  "identifier": {
289    "@type": "PropertyValue",
290    "propertyID": "ORCID",
291    "value": "0009-0000-3052-6319",
292    "url": "https://orcid.org/0009-0000-3052-6319"
293  },
294  "sameAs": [
295    "https://orcid.org/0009-0000-3052-6319",
296    "https://www.linkedin.com/in/sara-arango-franco-91918910b/",
297    "https://github.com/sarangof",
298    "https://www.instagram.com/paraconsistenta/"
299  ]
300}
301</script>
301
302
303</head>
304<body>
305
306<nav>
307  <a href="/" class="name" style="color:var(--text)">Ruido y Señal</a>
308  <div class="links">
309    <a href="#work"><span class="lang-en-inline">Work</span><span class="lang-es-inline">Trabajo</span></a>
310    <a href="cv.html">CV</a>
311    <a href="#about"><span class="lang-en-inline">About</span><span class="lang-es-inline">Acerca</span></a>
312    <button class="lang-toggle">ES</button>
313  </div>
314</nav>
315
316<header class="hero">
317  <h1>Sara Arango Franco</h1>
318  <p class="lead lang-en">Research, art, and urban inquiry. Making invisible systems visible through data, devices, writing, and perception.</p>
319  <p class="lead lang-es">Investigación, arte e indagación urbana. Haciendo visibles los sistemas invisibles a través de datos, dispositivos, escritura y la percepción.</p>
320  <p class="loc">Medellín, Colombia</p>
321</header>
322
323<hr class="sep">
324
325<section class="sec" id="work">
326  <div class="sec-label"><span class="lang-en-inline">Selected work</span><span class="lang-es-inline">Trabajo seleccionado</span></div>
327
328  <div class="tag-bar">
329    <button class="tag-btn active" data-filter="all">All</button>
330    <button class="tag-btn" data-filter="art">Art</button>
331    <button class="tag-btn" data-filter="research">Research</button>
332    <button class="tag-btn" data-filter="data">Data</button>
333    <button class="tag-btn" data-filter="civic">Civic</button>
334    <button class="tag-btn" data-filter="sound">Sound</button>
335    <button class="tag-btn" data-filter="writing">Writing</button>
336    <button class="tag-btn" data-filter="cities">Cities</button>
337    <button class="tag-btn" data-filter="policy">Policy</button>
338  </div>
339
340  <div class="pgrid">
341
342<a href="projects/radio-aburra.html" class="pcard" data-tags="art research sound" style="text-decoration:none;color:inherit;">
343  <div class="pcard-img"><img src="images/box-2.cut.png" alt="Radio Aburrá" style="width:100%;height:100%;object-fit:cover;"></div>
344  <div class="pcard-body">
345    <h3>Radio Aburrá</h3>
346  </div>
347</a>
348
349<a href="projects/el-ruido-y-la-separacion.html" class="pcard" data-tags="writing sound" style="text-decoration:none;color:inherit;">
350  <div class="pcard-img"><img src="images/ruidoysep.jpg" alt="El ruido y la separación" style="width:100%;height:100%;object-fit:cover;"></div>
351  <div class="pcard-body">
352    <h3>El ruido y la separación</h3>
353  </div>
354</a>
355
356<a href="projects/monumento.html" class="pcard" data-tags="art writing sound" style="text-decoration:none;color:inherit;">
357  <div class="pcard-img"><img src="images/monumento.png" alt="Monumento" style="width:100%;height:100%;object-fit:cover;"></div>
358  <div class="pcard-body">
359    <h3>Monumento</h3>
360  </div>
361</a>
362
363<a href="projects/collage.html" class="pcard" data-tags="art" style="text-decoration:none;color:inherit;">
364  <div class="pcard-img"><img src="images/collage/taller1.png" alt="Collage" style="width:100%;height:100%;object-fit:cover;"></div>
365  <div class="pcard-body">
366    <h3>Collage</h3>
367  </div>
368</a>
369
370<a href="projects/data-collage.html" class="pcard" data-tags="art data" style="text-decoration:none;color:inherit;">
371  <div class="pcard-img"><img src="images/data_collage/data_collage.png" alt="Data collage" style="width:100%;height:100%;object-fit:cover;"></div>
372  <div class="pcard-body">
373    <h3>Data collage</h3>
374  </div>
375</a>
376
377<a href="projects/photography.html" class="pcard" data-tags="art" style="text-decoration:none;color:inherit;">
378  <div class="pcard-img"><img src="images/000119500009.png" alt="Photography" style="width:100%;height:100%;object-fit:cover;"></div>
379  
380  <div class="pcard-body">
381    <h3><span class="lang-en-inline">Photography</span><span class="lang-es-inline">Fotografía</span></h3>
382  </div>
383</a>
384
385
386<a href="projects/sympoietic.html" class="pcard" data-tags="art research" style="text-decoration:none;color:inherit;">
387  <div class="pcard-img"><img src="images/sympoietic/7841CB72-9DB8-41BA-8595-5232ED1D6C4E.png" alt="Sympoietic art organism" style="width:100%;height:100%;object-fit:cover;"></div>
388  
389  <div class="pcard-body">
390    <h3><span class="lang-en-inline">Sympoietic art organism</span><span class="lang-es-inline">Sympoietic art organism</span></h3>
391  </div>
392</a>
393
394
395<a href="projects/collage-about-death.html" class="pcard" data-tags="art research" style="text-decoration:none;color:inherit;">
396  <div class="pcard-img"><img src="images/IMG_1476.PNG" alt="A collage about death" style="width:100%;height:100%;object-fit:cover;"></div>
397  <div class="pcard-body">
398    <h3>A collage about death</h3>
399  </div>
400</a>
401
402<a href="projects/matza-edgelands.html" class="pcard" data-tags="art research" style="text-decoration:none;color:inherit;">
403  <div class="pcard-img"><img src="images/matzaedgelands.jpg" alt="MATZA × Edgelands" style="width:100%;height:100%;object-fit:cover;"></div>
404  <div class="pcard-body">
405    <h3>MATZA × Edgelands</h3>
406  </div>
407</a>
408
409<!-- ========== RESEARCH / CIVIC / POLICY CARDS ========== -->
410
411<a href="projects/edgelands-reports.html" class="pcard" data-tags="research data civic policy cities" style="text-decoration:none;color:inherit;">
412  <div class="pcard-img"><img src="images/img342.png" alt="Edgelands — Reports & Research" style="width:100%;height:100%;object-fit:cover;"></div>
413  <div class="pcard-body">
414    <h3><span class="lang-en-inline">Edgelands — Reports & Research</span><span class="lang-es-inline">Edgelands — Informes e investigación</span></h3>
415  </div>
416</a>
417
418<a href="projects/dropping-the-pin.html" class="pcard" data-tags="data civic cities" style="text-decoration:none;color:inherit;">
419  <div class="pcard-img"><img src="images/dropping.png" alt="Dropping the pin on surveillance" style="width:100%;height:100%;object-fit:cover;"></div>
420  <div class="pcard-body">
421    <h3>Dropping the Pin on Surveillance</h3>
422  </div>
423</a>
424
425<a href="projects/virgenes-del-metro.html" class="pcard" data-tags="data art civic cities" style="text-decoration:none;color:inherit;">
426  <div class="pcard-img"><img src="images/virgins.png" alt="Las Vírgenes del Metro" style="width:100%;height:100%;object-fit:cover;"></div>
427  <div class="pcard-body">
428    <h3>Las Vírgenes del Metro</h3>
429  </div>
430</a>
431
432<a href="projects/edgelands-network.html" class="pcard" data-tags="civic data" style="text-decoration:none;color:inherit;">
433  <div class="pcard-img"><img src="images/preview_network.jpg" alt="Edgelands Network" style="width:100%;height:100%;object-fit:cover;"></div>
434  <div class="pcard-body">
435    <h3>Edgelands Network Visualization</h3>
436  </div>
437</a>
438
439<a href="projects/civic-practice.html" class="pcard" data-tags="civic policy cities" style="text-decoration:none;color:inherit;">
440  <div class="pcard-img"><img src="images/ldc_pablo.png" alt="Lunes de Ciudad" style="width:100%;height:100%;object-fit:cover;"></div>
441  <div class="pcard-body">
442    <h3><span class="lang-en-inline">Civic practice</span><span class="lang-es-inline">Práctica cívica</span></h3>
443  </div>
444</a>
445
446<a href="projects/shape-compactness.html" class="pcard" data-tags="research data cities policy" style="text-decoration:none;color:inherit;">
447  <div class="pcard-img"><img src="images/compactness.jpg" alt="Shape Compactness of Urban Footprints" style="width:100%;height:100%;object-fit:cover;"></div>
448  <div class="pcard-body">
449    <h3><span class="lang-en-inline">Shape Compactness of Urban Footprints</span><span class="lang-es-inline">Compacidad de huellas urbanas</span></h3>
450  </div>
451</a>
452
453<a href="projects/urban-regularity-index.html" class="pcard" data-tags="research data cities policy" style="text-decoration:none;color:inherit;">
454  <div class="pcard-img"><img src="images/uri.jpeg" alt="Urban Regularity Index" style="width:100%;height:100%;object-fit:cover;"></div>
455  <div class="pcard-body">
456    <h3><span class="lang-en-inline">Urban Regularity Index</span><span class="lang-es-inline">
456Índice de regularidad urbana</span></h3>
457  </div>
458</a>
459
460<a href="projects/nyu-litmus.html" class="pcard" data-tags="research data policy cities" style="text-decoration:none;color:inherit;">
461  <div class="pcard-img"><img src="images/nyu/nyu_cover.png" alt="NYU Marron / Litmus" style="width:100%;height:100%;object-fit:cover;"></div>
462  <div class="pcard-body">
463    <h3>NYU Marron / Litmus</h3>
464  </div>
465</a>
466
467</section>
468
469<hr class="sep">
470
471<section class="sec" id="about">
472  <div class="sec-label"><span class="lang-en-inline">About</span><span class="lang-es-inline">Acerca</span></div>
473  <div class="about-layout">
474    <div class="about-text">
475      <h2 class="lang-en">Work that moves between noise and signal</h2>
476      <h2 class="lang-es">Trabajo que se mueve entre ruido y señal</h2>
477      <p class="lang-en">Sara Arango Franco is an artist-researcher based in Medellín, Colombia. Her work makes invisible urban systems visible, through data, devices, writing, and perception. Trained as a mathematical engineer (EAFIT) and urban data scientist (NYU), she has worked with the World Bank, the World Resources Institute, and the Edgelands Institute, and participated in the Complex Systems Summer School at the Santa Fe Institute.</p>
478      <p class="lang-es">Sara Arango Franco es una artista-investigadora basada en Medellín, Colombia. Su trabajo hace visibles los sistemas urbanos invisibles, a través de datos, dispositivos, escritura y el cuerpo.</p>
479      <p class="lang-en">Her practice, <strong>Ruido y Señal</strong>, threads through Radio Aburrá, Monumento, a forthcoming Routledge chapter on the algorithm as spiritual force, and fourteen years of civic engagement. She is working toward a book that uses noise as a lens for territory, algorithms, grief, extortion, birdsong, and the commons.</p>
480      <p class="lang-es">Su práctica, <strong>Ruido y Señal</strong>, atraviesa Radio Aburrá, Monumento, un capítulo en Routledge sobre el algoritmo como fuerza espiritual, y catorce años de participación ciudadana. Trabaja en un libro que usa el ruido como lente para el territorio, los algoritmos, el duelo, la extorsión, el canto de los pájaros y los comunes.</p>
481      <h2 class="lang-en" style="margin-top:20px;">Let's talk</h2>
482      <h2 class="lang-es" style="margin-top:20px;">Hablemos</h2>
483      <div class="contact-links" style="margin-top:8px;">
484        <a href="/cdn-cgi/l/email-protection#d9aab8abb8b7beb6bfba99beb4b8b0b5f7bab6b4">Email</a>
485        <a href="https://www.instagram.com/paraconsistenta/" target="_blank">Instagram</a>
486        <a href="https://github.com/sarangof" target="_blank">GitHub</a>
487        <a href="https://www.linkedin.com/in/sara-arango-franco-91918910b/" target="_blank">LinkedIn</a>
488      </div>
489    </div>
490    <div class="about-photo"><img src="images/DSCF8500_bw.png" alt="Sara Arango Franco" style="width:100%;max-height:300px;object-fit:contain;"></div>
491  </div>
492</section>
493
494<footer><span>© 2026 Sara Arango Franco</span><span>Medellín</span></footer>
vendor: 110 bytes, lines 494-496
494
495
496<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
496<script>
497// Non-exclusive tag filtering: click tags to toggle, multiple can be active
498const allBtn = document.querySelector('.tag-btn[data-filter="all"]');
499const tagBtns = document.querySelectorAll('.tag-btn:not([data-filter="all"])');
500const cards = document.querySelectorAll('.pcard');
501
502function updateFilter() {
503  const active = [...tagBtns].filter(b => b.classList.contains('active'));
504  if (active.length === 0) {
505    allBtn.classList.add('active');
506    cards.forEach(c => c.style.display = '');
507  } else {
508    allBtn.classList.remove('active');
509    const filters = active.map(b => b.dataset.filter);
510    cards.forEach(c => {
511      const tags = c.dataset.tags;
512      const match = filters.every(f => tags.includes(f));
513      c.style.display = match ? '' : 'none';
514    });
515  }
516}
517
518allBtn.addEventListener('click', () => {
519  tagBtns.forEach(b => b.classList.remove('active'));
520  allBtn.classList.add('active');
521  cards.forEach(c => c.style.display = '');
522});
523
524tagBtns.forEach(btn => {
525  btn.addEventListener('click', () => {
526    btn.classList.toggle('active');
527    updateFilter();
528  });
529});
530
531// Smooth scroll
532document.querySelectorAll('nav a[href^="#"]').forEach(a => {
533  a.addEventListener('click', e => {
534    e.preventDefault();
535    document.querySelector(a.getAttribute('href')).scrollIntoView({ behavior:'smooth' });
536  });
537});
538</script>
538
539
540<script>
541if(localStorage.getItem('lang')==='es'){
542  document.body.classList.add('es');
543  document.querySelector('.lang-toggle').textContent='EN';
544}
545document.querySelector('.lang-toggle').addEventListener('click', function(){
546  document.body.classList.toggle('es');
547  this.textContent = document.body.classList.contains('es') ? 'EN' : 'ES';
548  localStorage.setItem('lang', document.body.classList.contains('es') ? 'es' : 'en');
549});
550</script>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.