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.