Mozilla Builders

<!DOCTYPE html> <html class="no-js" lang="en-us"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Mozilla Builders</title> <link rel="icon" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/favicon.ico" /> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-60x60.png" /> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-76x76.png" /> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/apple-touch-icon-152x152.png" /> <link rel="icon" type="image/png" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/favicon-196x196.png" sizes="196x196" /> <link rel="icon" type="image/png" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/favicon-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/favicon-128x128.png" sizes="128x128" /> <meta name="application-name" content=" "/> <meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileImage" content="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/mstile-144x144.png" /> <meta name="msapplication-square70x70logo" content="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/mstile-70x70.png" /> <meta name="msapplication-square150x150logo" content="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/mstile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/mstile-310x150.png" /> <meta name="msapplication-square310x310logo" content="https://builders.mozilla.org/wp-content/themes/mozilla-builders/static/img/favicon/mstile-310x310.png" /> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />  <link rel="canonical" href="https://builders.mozilla.org/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Home" /> <meta property="og:url" content="https://builders.mozilla.org/" /> <meta property="og:site_name" content="Mozilla Builders" /> <meta property="article:modified_time" content="2024-12-03T16:11:32+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@mozillabuilders" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://builders.mozilla.org/","url":"https://builders.mozilla.org/","name":"Mozilla Builders","isPartOf":{"@id":"https://builders.mozilla.org/#website"},"about":{"@id":"https://builders.mozilla.org/#organization"},"datePublished":"2024-11-14T13:31:43+00:00","dateModified":"2024-12-03T16:11:32+00:00","breadcrumb":{"@id":"https://builders.mozilla.org/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://builders.mozilla.org/"]}]},{"@type":"BreadcrumbList","@id":"https://builders.mozilla.org/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home"}]},{"@type":"WebSite","@id":"https://builders.mozilla.org/#website","url":"https://builders.mozilla.org/","name":"Mozilla Builders","description":"Tomorrow's technology is what we make it.","publisher":{"@id":"https://builders.mozilla.org/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://builders.mozilla.org/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://builders.mozilla.org/#organization","name":"Mozilla","url":"https://builders.mozilla.org/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://builders.mozilla.org/#/schema/logo/image/","url":"https://builders.mozilla.org/wp-content/uploads/2024/12/Mozilla-Logo-Lockup.png","contentUrl":"https://builders.mozilla.org/wp-content/uploads/2024/12/Mozilla-Logo-Lockup.png","width":4099,"height":980,"caption":"Mozilla"},"image":{"@id":"https://builders.mozilla.org/#/schema/logo/image/"},"sameAs":["https://x.com/mozillabuilders","https://www.linkedin.com/showcase/mozilla-builders/","https://github.com/Mozilla-Ocho","https://discord.gg/gydMdRK2zV"]}]}</script>  <link rel='stylesheet' id='app_css-BO34j088-css' href='https://builders.mozilla.org/wp-content/themes/mozilla-builders/dist/assets/app_css-BO34j088.css?ver=0.0.3' type='text/css' media='all' /> <script type="module" src="https://builders.mozilla.org/wp-content/themes/mozilla-builders/dist/assets/app-DuV0QS1z.js?ver=0.0.3" id="vite:app-DuV0QS1z-js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-J33R9RJELP"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-J33R9RJELP'); </script> </head> <body x-data x-links class="home page-template-default page page-id-164 theme-light "> <a href="#content" class="sr-only focus:not-sr-only !absolute inset-x-0 top-0"> <div class="w-full flex items-center justify-center p-1.5 bg-content"> <span class="text-main text-center text-sm font-semibold tracking-wide uppercase">Skip to content</span> </div> </a> <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="logo" viewBox="0 0 2227 420"> <path d="M2086.64 420C2001.44 420 1957.04 387 1945.64 310.8H2030.24V317.4C2030.24 339 2045.84 355.8 2086.64 355.8C2121.44 355.8 2140.04 345.6 2140.04 325.2C2140.04 309 2129.84 301.2 2104.04 294.6L2038.04 280.2C1975.04 266.4 1948.04 238.8 1948.04 189.6C1948.04 124.2 1996.64 87.6001 2085.44 87.6001C2170.64 87.6001 2214.44 120.6 2225.24 196.8H2140.64V190.2C2140.64 168.6 2125.64 151.8 2085.44 151.8C2051.84 151.8 2034.44 162 2034.44 182.4C2034.44 198.6 2043.44 206.4 2069.24 213L2134.64 227.4C2198.24 241.2 2226.44 268.2 2226.44 317.4C2226.44 383.4 2176.64 420 2086.64 420Z" fill="currentColor"/> <path d="M1725.06 414V155.4H1692.06V93.6001H1799.46V157.8H1819.26C1830.06 110.4 1854.66 88.8 1899.06 88.8H1933.26V155.4H1862.46C1827.06 155.4 1810.86 175.2 1810.86 218.4V414H1725.06Z" fill="currentColor"/> <path d="M1524.27 420C1427.07 420 1371.27 361.2 1371.27 253.8C1371.27 146.4 1427.07 87.6001 1524.27 87.6001C1619.07 87.6001 1672.47 141.6 1672.47 241.8V270.6H1461.87V277.2C1461.87 330 1481.07 354 1524.27 354C1565.67 354 1580.67 331.2 1580.67 316.8V310.8H1668.27C1653.87 382.2 1603.47 420 1524.27 420ZM1462.47 216.6H1586.07C1583.67 172.2 1563.87 151.8 1524.27 151.8C1484.67 151.8 1464.87 172.2 1462.47 216.6Z" fill="currentColor"/> <path d="M1140.81 420C1069.41 420 1021.41 357.6 1021.41 253.8C1021.41 150 1068.21 87.6 1140.81 87.6C1185.21 87.6 1212.81 109.2 1222.41 153H1242.21C1238.01 115.2 1236.21 96 1236.21 77.4V61.8H1202.01V0H1322.01V352.2H1355.01V414H1300.41C1266.21 414 1247.61 395.4 1247.61 361.2V349.2H1228.41C1217.01 395.4 1187.01 420 1140.81 420ZM1112.01 277.2C1112.01 330 1131.21 354 1173.81 354C1217.01 354 1236.21 330 1236.21 277.2V230.4C1236.21 177.6 1217.01 153.6 1173.81 153.6C1131.21 153.6 1112.01 177.6 1112.01 230.4V277.2Z" fill="currentColor"/> <path d="M899.845 414V61.8H865.645V0H985.645V414H899.845Z" fill="currentColor"/> <path d="M751.97 414V155.4H717.77V93.6H837.77V414H751.97ZM747.77 69.6V0H839.57V69.6H747.77Z" fill="currentColor"/> <path d="M499.059 420C436.059 420 401.859 381 401.859 306.6V155.4H368.859V93.6001H487.659V291C487.659 334.2 503.859 354 539.259 354C574.659 354 591.459 334.2 591.459 291V93.6001H676.659V352.2H710.259V414H655.659C621.459 414 602.859 395.4 602.859 361.2V349.8H583.059C572.259 397.8 545.259 420 499.059 420Z" fill="currentColor"/> <path d="M37.8 414V64.2H0V0H217.8C297.6 0 344.4 39.6 344.4 110.4C344.4 162.6 318 189.6 270.6 193.2V212.4C321.6 216 348.6 244.2 348.6 299.4C348.6 373.2 301.2 414 219 414H37.8ZM125.4 349.8H213C244.2 349.8 258.6 334.8 258.6 301.8V280.8C258.6 247.8 244.2 232.8 213 232.8H125.4V349.8ZM125.4 172.8H211.8C241.2 172.8 254.4 158.4 254.4 127.8V109.2C254.4 78.6 241.2 64.2 211.8 64.2H125.4V172.8Z" fill="currentColor"/> </symbol> <symbol id="mozillalogo" viewBox="0 0 704 147"> <path d="M54.6 0L73.3 92H80L98.7 0H153.3V144.9H123.5V25.4H116.8L90.8 144.9H62.6L36.6 25.4H29.9V144.9H0V0H54.6ZM225.7 30.7C260.1 30.7 280.1 51.3 280.1 88.9C280.1 126.5 260.2 147.1 225.7 147.1C191.2 147.1 171.3 126.5 171.3 88.9C171.4 51.2 191.3 30.7 225.7 30.7ZM225.7 123.9C241.2 123.9 248.6 115.5 248.6 97V80.6C248.6 62.1 241.3 53.7 225.7 53.7C210.1 53.7 202.8 62.1 202.8 80.6V97C202.9 115.5 210.2 123.9 225.7 123.9ZM292.3 123.3L349.2 54.4H293.1V32.8H384.7V54.4L327.8 123.3H385.5V144.9H292.3V123.3ZM401.1 32.8H443.1V144.9H413.3V54.4H401.1V32.8ZM413.3 0H443.1V21.6H413.3V0ZM462.8 0H504.8V144.9H475V21.6H462.8V0ZM524.6 0H566.6V144.9H536.8V21.6H524.6V0ZM630.6 30.7C647.2 30.7 658.1 38.9 661.3 53.2H668V32.8H703.5V54.4H691.3V123.3H703.5V144.9H686.5C674.5 144.9 668 138.4 668 126.4V124.5H661.3C658.1 138.8 647.2 147 630.6 147C604.4 147 585.9 124.7 585.9 88.8C585.9 52.9 604.4 30.7 630.6 30.7ZM639.4 123.9C654.5 123.9 661.4 115.5 661.4 97V80.6C661.4 62.1 654.5 53.7 639.4 53.7C624.3 53.7 617.4 62.1 617.4 80.6V97C617.4 115.5 624.3 123.9 639.4 123.9Z" fill="currentColor"/> </symbol> <symbol id="flag" viewBox="0 0 24 24"> <path d="M6.39598 22H4V2H6.39598V22ZM8.34975 12.2016H17.8372V11.6268L11.6543 9.23295V7.20807L17.8372 4.81424V4.2308H10.5126V2H20V6.0755L14.9668 7.92879V8.50365L20 10.3569V14.4324H8.34975V12.2016ZM8.34975 4.2308H10.5126V6.53882H8.34975V4.2308Z" fill="currentColor"/> </symbol> <symbol id="search" viewBox="0 0 24 24"> <path d="M15.0846 6.28212C17.5147 8.71231 17.5147 12.6524 15.0846 15.0826C12.6544 17.5128 8.71426 17.5128 6.28408 15.0826C3.85389 12.6524 3.85389 8.71231 6.28408 6.28212C8.71426 3.85194 12.6544 3.85194 15.0846 6.28212Z" stroke="currentColor" fill="none" stroke-width="2"/> <path d="M14.8242 14.8242L20.001 20.001" stroke="currentColor" stroke-width="2"/> </symbol> <symbol id="menu" viewBox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20 13.1516H4V10.8516H20V13.1516Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M20 7.85078H4V5.55078H20V7.85078Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M20 18.4523H4V16.1523H20V18.4523Z" fill="currentColor"/> </symbol> <symbol id="x-close" viewBox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4347 17.9999L6.00026 7.56542L7.56543 6.00024L17.9999 16.4347L16.4347 17.9999Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9997 7.56525L7.56517 17.9997L6 16.4346L16.4345 6.00008L17.9997 7.56525Z" fill="currentColor"/> </symbol> <symbol id="protocol" viewBox="0 0 47 104"> <path d="M0 104H15.4349L46.2635 0H30.8287L0 104Z" fill="currentColor"/> </symbol> <symbol id="copy" viewBox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 15.5H19.5V4.5H8.5V8.5H4.5V19.5H15.5V15.5ZM14 14H10V10H8.5V8.5H10V6H18V14H15.5V15.5H14V14ZM14 15.5V18H6V10H8.5V15.5H14Z" fill="currentColor"/> </symbol> <symbol id="check" viewBox="0 0 24 24"> <path d="M9.77222 17.9997L20.2067 7.56517L18.6415 6L9.75247 14.8891L5.56517 10.7929L4 12.3581L9.7675 18L9.77005 17.9975L9.77222 17.9997Z" fill="currentColor"/> </symbol> <symbol id="arrow-right" viewBox="0 0 70 70"> <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4995 0.5L69 34.4985L34.4999 68.5L29.8815 63.9483L56.4973 37.7172H0L0 31.2801L56.4967 31.2801L29.8813 5.05191L34.4995 0.5Z" fill="currentColor"/> </symbol> <symbol id="quote" viewBox="0 0 69 55"> <path d="M68.7 0L54.6 27.9H67.8V54.3H41.1V27.9L55.8 0H68.7ZM0 54.3V27.9L14.7 0H27.6L13.5 27.9H26.7V54.3H0Z" fill="currentColor"/> </symbol> <symbol id="arena" viewBox="0 0 30 30"> <path fill="currentColor" d="M21.0557656,7.6035181 C21.2640657,7.6035181 21.4652174,7.82245762 21.5034529,8.08993954 L21.5034529,8.08993954 L22.1231997,12.4895101 C22.1607702,12.7571583 22.3968325,12.8944734 22.6473578,12.7937313 L22.6473578,12.7937313 L26.7684746,11.1522667 C27.0188337,11.0525221 27.3094231,11.1153612 27.41349,11.2919093 C27.5173907,11.468956 27.4284517,11.7504022 27.2156631,11.9169758 L27.2156631,11.9169758 L23.7498688,14.6400049 C23.5377452,14.8067447 23.5377452,15.0797126 23.7498688,15.2459537 L23.7498688,15.2459537 L27.2156631,17.9701465 C27.4282855,18.1367201 27.516892,18.4349566 27.4126588,18.6321186 C27.3085919,18.829613 27.01767,18.9092425 26.7683083,18.8088328 L26.7683083,18.8088328 L22.6837646,17.1686982 C22.433738,17.0686211 22.2003355,17.2049388 22.1644275,17.4725869 L22.1644275,17.4725869 L21.5742716,21.9105592 C21.5388622,22.1778749 21.3052935,22.3964819 21.0555994,22.3964819 C20.8065702,22.3964819 20.5730015,22.1777086 20.5377584,21.9105592 L20.5377584,21.9105592 L19.9476025,17.4725869 C19.9118606,17.2049388 19.6781257,17.0684548 19.4280991,17.1686982 L19.4280991,17.1686982 L15.4117142,18.7809043 C15.1611889,18.8816464 14.7515708,18.8816464 14.5012117,18.7809043 L14.5012117,18.7809043 L10.4841619,17.1686982 C10.2344678,17.0686211 10.0000678,17.2049388 9.96515722,17.4725869 L9.96515722,17.4725869 L9.37500133,21.9105592 C9.3392595,22.1778749 9.10569076,22.3964819 8.85632912,22.3964819 C8.60663499,22.3964819 8.3732325,22.1777086 8.3376569,21.9105592 L8.3376569,21.9105592 L7.74849846,17.4725869 C7.71342159,17.2049388 7.4800191,17.0684548 7.22899504,17.1686982 L7.22899504,17.1686982 L3.14495007,18.8088328 C2.89475722,18.9092425 2.60466651,18.8297792 2.50043335,18.6319523 C2.3966989,18.4344579 2.48480668,18.1362214 2.69759529,17.9696478 L2.69759529,17.9696478 L6.16372211,15.2462862 C6.37601199,15.0798788 6.37601199,14.806911 6.16372211,14.6401712 L6.16372211,14.6401712 L2.69759529,11.917142 C2.48547165,11.7509009 2.39686514,11.4692885 2.50076583,11.2920755 C2.60483275,11.1156937 2.89492346,11.0525221 3.14544879,11.1527655 L3.14544879,11.1527655 L7.26639929,12.7938976 C7.51709086,12.8943072 7.75298697,12.7573245 7.79055746,12.4896764 L7.79055746,12.4896764 L8.41063674,8.0897733 C8.44804099,7.82245762 8.64935896,7.6035181 8.85749281,7.6035181 C9.06496169,7.6035181 9.26578093,7.82245762 9.30401639,8.0897733 L9.30401639,8.0897733 L9.92326446,12.4896764 C9.96083495,12.7573245 10.1968973,12.8943072 10.4475889,12.7938976 L10.4475889,12.7938976 L14.5012117,11.1796965 C14.7519033,11.0796194 15.1613551,11.0796194 15.4127117,11.1796965 L15.4127117,11.1796965 L19.4656695,12.7938976 C19.7165273,12.8943072 19.9522572,12.7573245 19.9901602,12.4896764 L19.9901602,12.4896764 L20.6102395,8.0897733 C20.6474775,7.82245762 20.848463,7.6035181 21.0557656,7.6035181 Z M15.3422254,12.2685757 C15.130268,12.1015034 14.7829904,12.1015034 14.5711992,12.2685757 L14.5711992,12.2685757 L11.5123631,14.6779079 C11.3005719,14.8449802 11.3022343,15.1159532 11.5156879,15.2805318 L11.5156879,15.2805318 L14.5688719,17.6303497 C14.7818267,17.7949284 15.1322629,17.7949284 15.3458827,17.6303497 L15.3458827,17.6303497 L18.3980692,15.2805318 C18.611689,15.1157869 18.6133514,14.8448139 18.4010616,14.6779079 L18.4010616,14.6779079 Z"/> </symbol> <symbol id="email" viewBox="0 0 30 30"> <path fill="currentColor" d="M5.19222801,8.75771961 C5.05693776,8.75771961 4.94832557,8.86633181 4.94832557,9.00162205 L4.94832557,9.72571961 L14.9483256,16.9359635 L24.9483256,9.72571961 L24.9483256,9.00162205 C24.9483256,8.86633181 24.8397134,8.75771961 24.7044231,8.75771961 L5.19222801,8.75771961 Z M4.94832557,11.2193536 L4.94832557,20.9983779 C4.94832557,21.1336682 5.05693776,21.2422804 5.19222801,21.2422804 L24.7044231,21.2422804 C24.8397134,21.2422804 24.9483256,21.1336682 24.9483256,20.9983779 L24.9483256,11.2193536 L15.2302768,18.2239877 C15.0616402,18.3430804 14.8348865,18.3430804 14.6662524,18.2239877 L4.94832557,11.2193536 Z"/> </symbol> <symbol id="facebook" viewBox="0 0 30 30"> <path fill="currentColor" d="M12.75,12 L10.5,12 L10.5,15 L12.75,15 L12.75,24 L16.5,24 L16.5,15 L19.2315,15 L19.5,12 L16.5,12 L16.5,10.74975 C16.5,10.0335 16.644,9.75 17.33625,9.75 L19.5,9.75 L19.5,6 L16.644,6 C13.947,6 12.75,7.18725 12.75,9.46125 L12.75,12 Z"/> </symbol> <symbol id="github" viewBox="0 0 30 30"> <path fill="currentColor" d="M15,4.7599911 C9.19875,4.7599911 4.5,9.4613661 4.5,15.2599911 C4.5,19.9001161 7.50825,23.8349911 11.679375,25.2218661 C12.204375,25.3207411 12.396875,24.9961161 12.396875,24.7169911 C12.396875,24.4676161 12.388125,23.8069911 12.38375,22.9319911 C9.463,23.5654911 8.847,21.5232411 8.847,21.5232411 C8.36925,20.3113661 7.678875,19.9876161 7.678875,19.9876161 C6.72775,19.3366161 7.752375,19.3497411 7.752375,19.3497411 C8.80675,19.4232411 9.360625,20.4312411 9.360625,20.4312411 C10.296875,22.0368661 11.8185,21.5731161 12.41875,21.3044911 C12.51325,20.6254911 12.783625,20.1626161 13.08375,19.9001161 C10.751875,19.6376161 8.301,18.7346161 8.301,14.7113661 C8.301,13.5651161 8.707875,12.6288661 9.381625,11.8938661 C9.2635,11.6287411 8.909125,10.5612411 9.4735,9.1148661 C9.4735,9.1148661 10.352875,8.8331161 12.361,10.1911161 C13.201,9.9574911 14.0935,9.8419911 14.986,9.8367411 C15.8785,9.8419911 16.771,9.9574911 17.611,10.1911161 C19.606,8.8331161 20.485375,9.1148661 20.485375,9.1148661 C21.04975,10.5612411 20.695375,11.6287411 20.590375,11.8938661 C21.25975,12.6288661 21.666625,13.5651161 21.666625,14.7113661 C21.666625,18.7451161 19.21225,19.6332411 16.876,19.8913661 C17.2435,20.2063661 17.58475,20.8503661 17.58475,21.8338661 C17.58475,23.2391161 17.571625,24.3678661 17.571625,24.7091161 C17.571625,24.9847411 17.755375,25.3128661 18.2935,25.2078661 C22.494375,23.8306161 25.5,19.8931161 25.5,15.2599911 C25.5,9.4613661 20.798625,4.7599911 15,4.7599911"/> </symbol> <symbol id="instagram" viewBox="0 0 30 30"> <path fill="currentColor" d="M15,4.5 C12.1475,4.5 11.791375,4.513125 10.671375,4.563 C9.553125,4.6155 8.791875,4.791375 8.1225,5.05125 C7.432125,5.319 6.845875,5.678625 6.26225,6.26225 C5.678625,6.845875 5.318125,7.43125 5.05125,8.1225 C4.791375,8.791875 4.614625,9.553125 4.563,10.671375 C4.5105,11.791375 4.5,12.1475 4.5,15 C4.5,17.8525 4.513125,18.208625 4.563,19.328625 C4.6155,20.446 4.791375,21.208125 5.05125,21.8775 C5.319,22.567 5.678625,23.154125 6.26225,23.73775 C6.845875,24.3205 7.43125,24.681875 8.1225,24.94875 C8.79275,25.20775 9.554,25.385375 10.671375,25.437 C11.791375,25.4895 12.1475,25.5 15,25.5 C17.8525,25.5 18.208625,25.486875 19.328625,25.437 C20.446,25.3845 21.208125,25.20775 21.8775,24.94875 C22.567,24.681 23.154125,24.3205 23.73775,23.73775 C24.3205,23.154125 24.681875,22.569625 24.94875,21.8775 C25.20775,21.208125 25.385375,20.446 25.437,19.328625 C25.4895,18.208625 25.5,17.8525 25.5,15 C25.5,12.1475 25.486875,11.791375 25.437,10.671375 C25.3845,9.554 25.20775,8.791 24.94875,8.1225 C24.681,7.432125 24.3205,6.845875 23.73775,6.26225 C23.154125,5.678625 22.569625,5.318125 21.8775,5.05125 C21.208125,4.791375 20.446,4.614625 19.328625,4.563 C18.208625,4.5105 17.8525,4.5 15,4.5 Z M15,6.39 C17.802625,6.39 18.136875,6.404 19.24375,6.452125 C20.2675,6.50025 20.823125,6.67 21.192375,6.81525 C21.684125,7.005125 22.032375,7.232625 22.401625,7.59925 C22.76825,7.96675 22.99575,8.315875 23.185625,8.807625 C23.329125,9.176875 23.500625,9.7325 23.547,10.75625 C23.596875,11.864 23.60825,12.1965 23.60825,15 C23.60825,17.8035 23.595125,18.136875 23.5435,19.24375 C23.490125,20.2675 23.3195,20.823125 23.175125,21.192375 C22.979125,21.684125 22.756,22.032375 22.3885,22.401625 C22.021875,22.76825 21.6675,22.99575 21.181,23.185625 C20.8135,23.329125 20.249125,23.500625 19.225375,23.547 C18.110625,23.596875 17.7825,23.60825 14.97375,23.60825 C12.164125,23.60825 11.836,23.595125 10.722125,23.5435 C9.6975,23.490125 9.133125,23.3195 8.765625,23.175125 C8.26775,22.979125 7.925625,22.756 7.559,22.3885 C7.190625,22.021875 6.95525,21.6675 6.7715,21.181 C6.627125,20.8135 6.457375,20.249125 6.404,19.225375 C6.364625,18.122875 6.350625,17.7825 6.350625,14.986875 C6.350625,12.190375 6.364625,11.849125 6.404,10.7335 C6.457375,9.70975 6.627125,9.14625 6.7715,8.77875 C6.95525,8.28 7.190625,7.93875 7.559,7.570375 C7.925625,7.20375 8.26775,6.9675 8.765625,6.784625 C9.133125,6.639375 9.68525,6.46875 10.709,6.41625 C11.824625,6.376875 12.15275,6.36375 14.960625,6.36375 L15,6.39 L15,6.39 Z M15,9.60825 C12.020625,9.60825 9.60825,12.02325 9.60825,15 C9.60825,17.979375 12.02325,20.39175 15,20.39175 C17.979375,20.39175 20.39175,17.97675 20.39175,15 C20.39175,12.020625 17.97675,9.60825 15,9.60825 Z M15,18.5 C13.06625,18.5 11.5,16.93375 11.5,15 C11.5,13.06625 13.06625,11.5 15,11.5 C16.93375,11.5 18.5,13.06625 18.5,15 C18.5,16.93375 16.93375,18.5 15,18.5 Z M21.86525,9.395625 C21.86525,10.09125 21.3,10.655625 20.60525,10.655625 C19.909625,10.655625 19.34525,10.090375 19.34525,9.395625 C19.34525,8.700875 19.9105,8.13649899 20.60525,8.13649899 C21.299125,8.135625 21.86525,8.700875 21.86525,9.395625 Z"/> </symbol> <symbol id="linkedin" viewBox="0 0 30 30"> <path fill="currentColor" d="M23.6375751,22.75 L20.0622266,22.75 L20.0622266,17.1475477 C20.0622266,15.8115705 20.0350644,14.0923048 18.1991019,14.0923048 C16.3349711,14.0923048 16.0502712,15.5459847 16.0502712,17.048959 L16.0502712,22.75 L12.4749227,22.75 L12.4749227,11.2292092 L15.9094302,11.2292092 L15.9094302,12.7995859 L15.9557065,12.7995859 C16.4355718,11.8941797 17.6025398,10.9384732 19.3459497,10.9384732 C22.9685805,10.9384732 23.6385811,13.3227095 23.6385811,16.4262407 L23.6385811,22.75 L23.6375751,22.75 Z M8.4368111,9.65279641 C7.28593923,9.65279641 6.36141891,8.72123404 6.36141891,7.5753922 C6.36141891,6.43055637 7.28694524,5.5 8.4368111,5.5 C9.58365895,5.5 10.5132093,6.43055637 10.5132093,7.5753922 C10.5132093,8.72123404 9.58265294,9.65279641 8.4368111,9.65279641 Z M10.2295154,22.75 L6.64410684,22.75 L6.64410684,11.2292092 L10.2295154,11.2292092 L10.2295154,22.75 Z"/> </symbol> <symbol id="medium" viewBox="0 0 30 30"> <path fill="currentColor" d="M22.9833468,9.23153259 C22.8522194,9.33133261 22.7873068,9.49565684 22.8148297,9.65812814 L22.8148297,20.3430503 C22.787771,20.5051334 22.8526349,20.6688807 22.9833468,20.7684674 L24.4646468,22.2226633 L24.4646468,22.5420207 L17.0145444,22.5420207 L17.0145444,22.2238417 L18.5488743,20.7331142 C18.6997147,20.5822738 18.6997147,20.5386715 18.6997147,20.3088755 L18.6997147,11.6709049 L14.4337592,22.5066675 L13.8563233,22.5066675 L8.88801712,11.6709049 L8.88801712,18.9336352 C8.84660153,19.238797 8.94785968,19.5460481 9.16259381,19.7667928 L11.1588724,22.1873101 L11.1588724,22.5066675 L5.5,22.5066675 L5.5,22.1884885 L7.49745705,19.7667928 C7.71063005,19.5456817 7.8059957,19.2363996 7.75435713,18.9336352 L7.75435713,10.5360665 C7.77821657,10.3027497 7.68934984,10.0720464 7.51513366,9.91502822 L5.74040191,7.77733672 L5.74040191,7.45915772 L11.2484339,7.45915772 L15.5061403,16.7959437 L19.2488681,7.45797928 L24.5,7.45797928 L24.5,7.77733672 L22.9833468,9.23153259 Z"/> </symbol> <symbol id="reddit" viewBox="0 0 30 30"> <path fill="currentColor" d="M20.7268208,4.39713974 C21.5763333,4.39713974 22.2702666,5.08986859 22.2702666,5.93938117 C22.2613406,6.77184986 21.5938091,7.44723228 20.7615017,7.46589089 C19.9291942,7.4845495 19.2320672,6.83975991 19.1858445,6.00852754 L15.9791814,5.33311565 L14.9913761,9.95974884 C17.2435722,10.0461818 19.2883293,10.740115 20.7626287,11.7970667 C21.1429338,11.4155269 21.6640011,11.1908012 22.25298,11.1908012 C23.4482244,11.1908012 24.4187432,12.16132 24.4187432,13.3565644 C24.4187432,14.2406502 23.881624,15.002495 23.1716389,15.3494616 C23.2068719,15.5616567 23.2242195,15.7764361 23.2234987,15.9915351 C23.2234987,19.3179695 19.3587104,22.0048 14.5752631,22.0048 C9.79181583,22.0048 5.92702751,19.3179695 5.92702751,15.9915351 C5.92702751,15.7655746 5.94554886,15.5396142 5.98012204,15.332175 C5.1991423,14.9856181 4.69611314,14.2109822 4.69720809,13.3565644 C4.69720809,12.16132 5.66772861,11.1908012 6.86297305,11.1908012 C7.43466538,11.1908012 7.97178453,11.4328135 8.35332433,11.795832 C9.84367561,10.7055419 11.906954,10.03013 14.2110099,9.95974884 L15.3037695,4.79599651 C15.3298674,4.69657806 15.39133,4.61009142 15.4766355,4.55274945 C15.565328,4.50111828 15.6694999,4.482735 15.7705076,4.50088967 L19.3587104,5.26273452 C19.606341,4.73158437 20.1407938,4.3934513 20.7268208,4.39713974 Z M11.1451091,13.3565644 C10.2943618,13.3565644 9.60166331,14.0504976 9.60166331,14.9000102 C9.60166331,15.748288 10.2943618,16.4409865 11.1451091,16.4409865 C11.9933869,16.4409865 12.6860854,15.748288 12.6860854,14.8987755 C12.6860854,14.0492629 11.9933869,13.3565644 11.1438744,13.3565644 L11.1451091,13.3565644 Z M17.9362707,13.3565644 C17.0879929,13.3565644 16.3952944,14.0492629 16.3952944,14.9000102 C16.3952944,15.748288 17.0879929,16.4409865 17.9375055,16.4409865 C18.7870181,16.4409865 19.4797165,15.748288 19.4797165,14.8987755 C19.4797165,14.0504976 18.7857833,13.3565644 17.9362707,13.3565644 L17.9362707,13.3565644 Z M11.1870909,18.2832434 C11.080415,18.2827338 10.9778724,18.3244611 10.9018621,18.3993106 C10.7457493,18.5579022 10.7457493,18.8124112 10.9018621,18.9710029 C11.9415272,20.010668 13.9689976,20.0983357 14.5579765,20.0983357 C15.1469554,20.0983357 17.1571393,20.0291894 18.214091,18.9710029 C18.3630944,18.8143415 18.3781895,18.5733403 18.2498989,18.3993106 C18.0911595,18.2423858 17.8357112,18.2423858 17.6769718,18.3993106 C17.0015599,19.0574359 15.5976416,19.3006829 14.5752631,19.3006829 C13.5528846,19.3006829 12.1316797,19.0586706 11.4735544,18.3993106 C11.3975191,18.3235898 11.2943969,18.281363 11.1870909,18.2820087 L11.1870909,18.2832434 Z"/> </symbol> <symbol id="tumblr" viewBox="0 0 30 30"> <path fill="currentColor" d="M16.6871922,23.5375 C12.8594844,23.5375 11.4029563,20.7146313 11.4029563,18.7192328 L11.4029563,12.8254797 L9.58718125,12.8254797 L9.58718125,10.4963875 C12.3153531,9.50958594 12.9782313,7.04220625 13.1270406,5.63452969 C13.1375625,5.53832969 13.2134703,5.5 13.2570609,5.5 L15.9003062,5.5 L15.9003062,10.0950531 L19.5085578,10.0950531 L19.5085578,12.8254797 L15.8860266,12.8254797 L15.8860266,18.4396516 C15.8980516,19.1919656 16.1678625,20.2216063 17.544725,20.2216063 L17.6123656,20.2216063 C18.0866016,20.206575 18.7291875,20.0675359 19.0673906,19.9067016 L19.9361969,22.4808031 C19.6085156,22.9587969 18.1324469,23.51345 16.8127031,23.5359969 L16.678925,23.5359969 L16.6871922,23.5375 Z"/> </symbol> <symbol id="twitter" viewBox="0 0 30 30"> <path fill="currentColor" d="M25.3044801,9.0053673 C24.5785869,9.32443226 23.8034805,9.54179013 22.9873632,9.64103655 C23.8190647,9.13988312 24.458835,8.35001282 24.7614956,7.40758189 C23.9814679,7.8628031 23.1169577,8.19417132 22.1966727,8.37872046 C21.461757,7.59213103 20.4143381,7.1 19.2512685,7.1 C17.0227351,7.1 15.215794,8.9069411 15.215794,11.1330138 C15.215794,11.452899 15.2527039,11.7604809 15.3199618,12.0549393 C11.9652686,11.8966371 8.99197695,10.2857282 7.00212715,7.85049982 C6.6518939,8.44269749 6.45586171,9.13086072 6.45586171,9.88054032 C6.45586171,11.2831138 7.1694517,12.515902 8.25049953,13.2401548 C7.58858329,13.2188291 6.96603754,13.0367407 6.42305297,12.7349003 L6.42305297,12.7849336 C6.42305297,14.7411545 7.81168269,16.3725688 9.65963471,16.7441277 C9.32088452,16.835172 8.9632693,16.8843851 8.59663169,16.8843851 C8.33908311,16.8843851 8.09219738,16.8597785 7.84531165,16.8138463 C8.36286945,18.4157328 9.85074559,19.5837238 11.6215971,19.6165325 C10.2436302,20.6984006 8.49738526,21.3430922 6.61662451,21.3430922 C6.29673934,21.3430922 5.97767439,21.3242272 5.656969,21.2881376 C7.45242704,22.431522 9.56777025,23.1 11.8553593,23.1 C19.2816166,23.1 23.3375965,16.951643 23.3375965,11.6284257 C23.3375965,11.4570001 23.3375965,11.283934 23.3252932,11.1116881 C24.1135231,10.5465576 24.8016863,9.83214743 25.3430304,9.02177167 L25.3044801,9.0053673 Z"/> </symbol> <symbol id="youtube" viewBox="0 0 30 30"> <path fill="currentColor" d="M15,22.4725275 L18.6666667,22.4322344 C21.2454212,22.3516484 22.8840051,22.2173384 23.5824176,22.029304 C24.0659341,21.8949941 24.4822953,21.6532359 24.8315018,21.3040293 C25.1807084,20.9548227 25.4224666,20.5518923 25.5567766,20.0952381 C25.7448109,19.3699634 25.8791209,18.2551891 25.959707,16.7509158 L25.959707,16.7509158 L26,14.7362637 L25.959707,12.7216117 C25.8791209,11.2442 25.7448109,10.1428571 25.5567766,9.41758242 C25.4224666,8.93406593 25.1807084,8.51770472 24.8315018,8.16849817 C24.4822953,7.81929161 24.0659341,7.57753337 23.5824176,7.44322344 C22.8840051,7.25518905 21.2454212,7.12087912 18.6666667,7.04029304 L18.6666667,7.04029304 L15,7 L11.3333333,7.04029304 C8.75457875,7.12087912 7.11599491,7.25518905 6.41758242,7.44322344 C5.93406593,7.57753337 5.51770472,7.81929161 5.16849817,8.16849817 C4.81929161,8.51770472 4.57753337,8.93406593 4.44322344,9.41758242 C4.25518905,10.1428571 4.12087912,11.2442 4.04029304,12.7216117 C4.01343081,13.4737487 4,14.1452989 4,14.7362637 L4,14.7362637 L4.04029304,16.7509158 C4.12087912,18.2551891 4.25518905,19.3699634 4.44322344,20.0952381 C4.57753337,20.5518923 4.81929161,20.9548227 5.16849817,21.3040293 C5.51770472,21.6532359 5.93406593,21.8949941 6.41758242,22.029304 C7.11599491,22.2173384 8.75457875,22.3516484 11.3333333,22.4322344 L11.3333333,22.4322344 L15,22.4725275 Z M12.7435897,18.040293 L12.7435897,11.4725275 L18.5054945,14.7362637 L12.7435897,18.040293 Z"/> </symbol> <symbol id="flickr" viewBox="0 0 30 30"> <path fill="currentColor" d="M22.8571429,25 C23.4523807,25 23.9583336,24.7916664 24.375,24.375 C24.7916664,23.9583336 25,23.4523807 25,22.8571429 L25,22.8571429 L25,7.14285714 C25,6.54761927 24.7916664,6.04166644 24.375,5.625 C23.9583336,5.20833356 23.4523807,5 22.8571429,5 L22.8571429,5 L7.14285714,5 C6.54761927,5 6.04166644,5.20833356 5.625,5.625 C5.20833356,6.04166644 5,6.54761927 5,7.14285714 L5,7.14285714 L5,22.8571429 C5,23.4523807 5.20833356,23.9583336 5.625,24.375 C6.04166644,24.7916664 6.54761927,25 7.14285714,25 L7.14285714,25 L22.8571429,25 Z M11.4732143,17.8125 C10.6696429,17.8125 9.9925593,17.5372022 9.44196429,16.9866071 C8.89136927,16.4360121 8.61607143,15.7663693 8.61607143,14.9776786 C8.61607143,14.1889879 8.89136927,13.519345 9.44196429,12.96875 C9.9925593,12.418155 10.6622022,12.1428571 11.4508929,12.1428571 C12.2395836,12.1428571 12.9092264,12.418155 13.4598214,12.96875 C14.0104164,13.519345 14.2857143,14.1889879 14.2857143,14.9776786 C14.2857143,15.7663693 14.0104164,16.4360121 13.4598214,16.9866071 C12.9092264,17.5372022 12.2470236,17.8125 11.4732143,17.8125 Z M18.5714286,17.8125 C17.7678571,17.8125 17.0907736,17.5372022 16.5401786,16.9866071 C15.9895836,16.4360121 15.7142857,15.7663693 15.7142857,14.9776786 C15.7142857,14.1889879 15.9895836,13.519345 16.5401786,12.96875 C17.0907736,12.418155 17.7604164,12.1428571 18.5491071,12.1428571 C19.3377978,12.1428571 20.0074407,12.418155 20.5580357,12.96875 C21.1086307,13.519345 21.3839286,14.1889879 21.3839286,14.9776786 C21.3839286,15.7663693 21.1086307,16.4360121 20.5580357,16.9866071 C20.0074407,17.5372022 19.3452379,17.8125 18.5714286,17.8125 Z"/> </symbol> <symbol id="rss" viewBox="0 0 30 30"> <path fill="currentColor" d="M22.2707553,22.9979342 C22.4828491,22.9979342 22.6570691,22.9221864 22.7934151,22.7706908 C22.9449107,22.6191952 23.0130837,22.4411879 22.9979342,22.2366688 C22.899462,20.2520766 22.4449753,18.3527007 21.6344739,16.538541 C20.8239725,14.7243813 19.7104799,13.112847 18.2939961,11.703938 C16.8850872,10.2874543 15.2735528,9.1739617 13.4593932,8.3634603 C11.6452335,7.5529589 9.74585754,7.09847213 7.76126533,7 L7.76126533,7 L7.72717883,7 C7.53023456,7 7.36358941,7.06817301 7.22724338,7.20451904 C7.07574779,7.34086507 7,7.515085 7,7.72717883 L7,7.72717883 L7,9.35196901 C7,9.5413385 7.06627932,9.70608995 7.19883796,9.84622337 C7.3313966,9.98635679 7.49236066,10.0602109 7.68173015,10.0677857 C9.31030773,10.1662578 10.8574564,10.5525716 12.3231762,11.2267269 C13.7888961,11.9008823 15.061459,12.777663 16.1408651,13.8570691 C17.2202711,14.9364751 18.0970519,16.2090381 18.7712072,17.6747579 C19.4453626,19.1404777 19.827889,20.6876264 19.9187863,22.316204 C19.9263611,22.5055735 20.0002152,22.6665376 20.1403486,22.7990962 C20.280482,22.9316548 20.4490209,22.9979342 20.6459651,22.9979342 L20.6459651,22.9979342 L22.2707553,22.9979342 Z M16.4533247,22.9979342 C16.6729933,22.9979342 16.8510006,22.918399 16.9873467,22.7593286 C17.1312675,22.607833 17.1956531,22.4260383 17.1805036,22.2139445 C17.0820314,21.0019798 16.7771465,19.8430385 16.2658489,18.7371207 C15.7545513,17.6312029 15.0671401,16.650269 14.2036152,15.7943189 C13.3476652,14.9307941 12.3667312,14.2433828 11.2608134,13.7320852 C10.1548956,13.2207876 8.99595438,12.9159027 7.78398967,12.8174306 L7.78398967,12.8174306 L7.72717883,12.8174306 C7.53023456,12.8174306 7.3673768,12.8818162 7.23860555,13.0105875 C7.07953518,13.1469335 7,13.3249408 7,13.5446094 L7,13.5446094 L7,15.0785023 C7,15.2678717 7.06249193,15.4307295 7.18747579,15.5670755 C7.31245965,15.7034216 7.46963632,15.7791694 7.65900581,15.7943189 C9.3936303,15.9609641 10.8763934,16.6597375 12.107295,17.8906391 C13.3381967,19.1215408 14.0369701,20.6043039 14.2036152,22.3389283 C14.2187648,22.5282978 14.2945126,22.6854745 14.4308586,22.8104584 C14.5672046,22.9354422 14.7300624,22.9979342 14.9194319,22.9979342 L14.9194319,22.9979342 L16.4533247,22.9979342 Z M9.18153648,22.9979342 C9.78751883,22.9979342 10.3026038,22.7858403 10.7267915,22.3616527 C11.1509791,21.937465 11.363073,21.42238 11.363073,20.8163977 C11.363073,20.2104153 11.1509791,19.6953303 10.7267915,19.2711427 C10.3026038,18.846955 9.78751883,18.6348612 9.18153648,18.6348612 C8.57555412,18.6348612 8.06046912,18.846955 7.63628147,19.2711427 C7.21209382,19.6953303 7,20.2104153 7,20.8163977 C7,21.42238 7.21209382,21.937465 7.63628147,22.3616527 C8.06046912,22.7858403 8.57555412,22.9979342 9.18153648,22.9979342 Z"/> </symbol> <symbol id="tiktok" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M23.7255 12.6564C23.9026 12.6564 24.0774 12.6458 24.2499 12.6298V9.0806C21.4956 8.883 19.2924 6.72916 19.0051 4H15.953C15.953 4 15.921 18.8192 15.921 18.8914C15.921 20.7185 14.3076 22.1579 12.4805 22.1579C10.6535 22.1579 9.173 20.6774 9.173 18.8504C9.173 17.0234 10.6535 15.5429 12.4805 15.5429C12.5822 15.5429 12.6806 15.5563 12.7791 15.5698L12.7792 15.5698C12.8131 15.5744 12.847 15.5791 12.881 15.5832V12.3896C12.8495 12.3877 12.8179 12.3855 12.7864 12.3833C12.6851 12.3762 12.5837 12.3691 12.4805 12.3691C8.90168 12.3691 6 15.2708 6 18.8496C6 22.4285 8.90168 25.3302 12.4805 25.3302C16.0594 25.3302 18.961 22.4285 18.961 18.8496V10.0815C19.9802 11.6312 21.732 12.6564 23.7255 12.6564Z" /> </symbol> </defs> </svg> <div class="flex flex-col flex-1 min-h-screen"> <nav class="grid grid-site py-site centered-page relative z-10"> <div class="flex-1 flex gap-1 items-start mt-2 col-span-1/3 justify-start"> <svg class="size-5 shrink-0 text-content" aria-hidden="true"> <use xlink:href="#flag"></use> </svg> <div class="flex-1 h-5 overflow-hidden relative max-md:hidden bg-action text-action-reverse max-w-80"> <div x-marquee="{ speed: 0.25 }" class="absolute top-1/2 left-0 right-0 -translate-y-1/2 group flex flex-col items-start"> <div x-marquee:track class="animate-marquee motion-reduce:!animate-none flex" aria-hidden="true"> <p class="px-1.5 text-sm whitespace-nowrap select-none"> Tomorrow's technology is what we make it. </p> </div> </div> </div> </div> <div class="col-span-1/3 flex justify-center"> <a href="https://builders.mozilla.org" class="md:flex md:items-center md:w-full"> <span class="sr-only">Mozilla Builders</span> <svg class="w-52 md:w-full aspect-logo" aria-hidden="true"> <use xlink:href="#logo"></use> </svg> </a> </div> <div class=" flex-1 flex items-start mt-2 col-span-1/3 md:col-span-1/3 justify-end gap-1 lg:gap-4 xl:gap-6 md:max-lg:flex-col md:max-lg:items-end"> <ul class="flex flex-wrap justify-end items-center gap-2 lg:gap-4 xl:gap-6 gap-y-1 -mt-px max-md:hidden"> <li class="text-right"> <a href="https://builders.mozilla.org/programs/" class="text-sm md:max-xl:text-xs relative block py-0.5 px-1.5 before:absolute before:inset-0 before:bg-action-focus before:z-0 motion-safe:before:transition-transform before:scale-x-0 before:origin-center aria-current:text-action-focus-reverse hover:text-action-focus-reverse aria-current:before:scale-x-100 hover:before:scale-x-100" > <span class="relative z-10">Programs</span> </a> </li> <li class="text-right"> <a href="https://builders.mozilla.org/projects/" class="text-sm md:max-xl:text-xs relative block py-0.5 px-1.5 before:absolute before:inset-0 before:bg-action-focus before:z-0 motion-safe:before:transition-transform before:scale-x-0 before:origin-center aria-current:text-action-focus-reverse hover:text-action-focus-reverse aria-current:before:scale-x-100 hover:before:scale-x-100" > <span class="relative z-10">Projects</span> </a> </li> <li class="text-right"> <a href="https://builders.mozilla.org/content/" class="text-sm md:max-xl:text-xs relative block py-0.5 px-1.5 before:absolute before:inset-0 before:bg-action-focus before:z-0 motion-safe:before:transition-transform before:scale-x-0 before:origin-center aria-current:text-action-focus-reverse hover:text-action-focus-reverse aria-current:before:scale-x-100 hover:before:scale-x-100" > <span class="relative z-10">Content</span> </a> </li> </ul> <div class="flex items-center gap-px"> <a href="https://builders.mozilla.org/join-us/" class="text-sm md:max-xl:text-xs py-0.5 px-1.5 transition-colors whitespace-nowrap max-md:hidden bg-action text-action-reverse hover:bg-action-focus hover:text-action-focus-reverse" > Join Us </a> <div class="md:hidden" x-data="{ open: false }" @keydown.escape.window="open = false" > <button class="size-6 flex items-center justify-center bg-action text-action-reverse" @click="open = !open" :aria-expanded="open" aria-haspopup="true" aria-controls="menu" > <span class="sr-only">Open menu</span> <svg class="size-4" aria-hidden="true"> <use xlink:href="#menu"></use> </svg> </button> <template x-teleport="body"> <div id="menu" class="fixed inset-0 h-100vh z-dialog w-full flex flex-col flex-1 pt-wp-admin-bar theme-dark bg-main text-content" x-show="open" x-trap.noscroll="open" :aria-hidden="!open" aria-modal="true" aria-labelledby="menu-label" role="dialog" > <h2 id="menu-label" class="sr-only">Menu</h2> <header class="grid grid-site py-site centered-page"> <div class="flex-1 flex items-center col-span-1/3"> <svg class="size-5 shrink-0" aria-hidden="true"> <use xlink:href="#flag"></use> </svg> </div> <div class="col-span-1/3 flex justify-center"> <a href="https://builders.mozilla.org"> <span class="sr-only">Mozilla Builders</span> <svg class="w-40 aspect-logo" aria-hidden="true"> <use xlink:href="#logo"></use> </svg> </a> </div> <div class="col-span-1/3 flex-1 flex justify-end items-center"> <button class="bg-white size-6 text-black flex items-center justify-center" @click="open = false" > <span class="sr-only">Close menu</span> <svg class="size-4" aria-hidden="true"> <use xlink:href="#x-close"></use> </svg> </button> </div> </header> <div class="grid grid-site centered-page"> <div class="col-span-full border-b-2 border-white"></div> </div> <div class="py-site flex-1 grid grid-site centered-page"> <div class="col-span-full flex-1 flex flex-col justify-end gap-5"> <ul class="flex flex-col items-start gap-2.5"> <li> <a href="https://builders.mozilla.org/programs/" class="text-5xl font-headline-condensed font-semibold" > Programs </a> </li> <li> <a href="https://builders.mozilla.org/projects/" class="text-5xl font-headline-condensed font-semibold" > Projects </a> </li> <li> <a href="https://builders.mozilla.org/content/" class="text-5xl font-headline-condensed font-semibold" > Content </a> </li> </ul> <a href="https://builders.mozilla.org/join-us/" class="text-2xl uppercase bg-white text-center p-3 text-black whitespace-nowrap" > Join Us </a> </div> </div> </div> </template> </div> </div> </div> </nav> <main id="content" class="flex flex-col flex-1 " tabindex="-1"> <h1 class="sr-only">Mozilla Builders</h1> <div class="flex flex-col flex-1 gap-y-20 xl:gap-y-28"> <section class="centered-page grid grid-site md:max-lg:grid-cols-12 mt-16"> <h2 class="sr-only">Featured</h2> <div class="col-span-full md:col-span-12"> <div class="grid grid-cols-site md:grid-cols-12 gap-x-grid-site-gutter gap-y-12 lg:gap-y-6"> <div class="col-span-full col-start-1 md:col-span-8 md:col-start-5 md:order-2"> <div class="relative flex-1 flex flex-col items-center gap-1 p-4 min-h-96"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 2000/1545"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_.png 2000w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-300x232.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-1024x791.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-768x593.png 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-1536x1187.png 1536w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="relative z-20 mt-6"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-content text-main" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="mt-3 type-headline-xl text-center text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/for-the-builders/">For the Builders</a> </h3> <p class="type-sans-sm text-center text-balance"></p> </div> </div> <div class="col-span-3 col-start-1 md:col-span-4 md:order-1 md:self-center"> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 626/998"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Screenshot-2024-11-13-at-10.17.37 PM.png 626w, https://builders.mozilla.org/wp-content/uploads/2024/11/Screenshot-2024-11-13-at-10.17.37 PM-188x300.png 188w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Screenshot-2024-11-13-at-10.17.37 PM.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-green" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/the-hyperspace-bypass/">The Hyperspace Bypass</a> </h3> </div> </div> </div> <div class="col-span-3 col-start-4 md:col-span-4 md:col-start-1 order-3 max-md:mt-36"> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 1200/821"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev.png 1200w, https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev-300x205.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev-1024x701.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev-768x525.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev.png" data-sizes="auto" alt="" data-caption="Image: Studio R.Bloxsom" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-green" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/the-interface-revolution/">The Interface Revolution</a> </h3> </div> </div> </div> <div class="col-span-4 md:col-start-6 md:col-span-6 lg:col-start-5 order-4 md:mt-24"> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 1000/667"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick.jpg 1000w, https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick-300x200.jpg 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick-768x512.jpg 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/beyond-the-kingdom-of-the-sick/">Beyond the Kingdom of the Sick</a> </h3> </div> </div> </div> </div> </div> <div class="col-span-full md:col-span-12 flex flex-col flex-1 gap-y-12 max-lg:mt-12"> <div class="w-full flex-1 grid grid-cols-6 md:grid-cols-12 gap-x-grid-site-gutter max-md:gap-y-12"> <div class="w-full col-span-6 md:col-start-4 lg:col-start-7 flex md:flex-col max-md:items-end gap-3"> <div class="flex flex-col gap-y-3"> <p class="text-sm uppercase">New here?</p> <div class="type-headline-lg md:type-headline-md [&_a]:underline [&_a:hover]:no-underline"> <p>Check out the <a href="https://builders.mozilla.org/projects/">projects</a> we’re supporting and our 2024 <a href="/programs">Builders programs</a>.</p> </div> </div> <div class="ml-auto w-36 md:w-1/3"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1036/1065"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/moz-creature-11.png 1036w, https://builders.mozilla.org/wp-content/uploads/2024/11/moz-creature-11-292x300.png 292w, https://builders.mozilla.org/wp-content/uploads/2024/11/moz-creature-11-996x1024.png 996w, https://builders.mozilla.org/wp-content/uploads/2024/11/moz-creature-11-768x789.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/moz-creature-11.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-4 max-md:col-start-3 md:col-span-6 flex flex-col flex-1"> <div class="flex-1 max-md:hidden"></div> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 1768/2267"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org.png 1768w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-234x300.png 234w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-799x1024.png 799w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-768x985.png 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-1198x1536.png 1198w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-1597x2048.png 1597w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/emergent-organization/">Emergent Organization</a> </h3> </div> </div> </div> <div class="col-span-4 md:col-span-6 flex flex-col flex-1 md:mb-36 gap-y-8"> <div class="flex-1 max-md:hidden"></div> <div class="w-full"> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 1024/1024"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-300x300.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-150x150.png 150w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-768x768.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/community-code-and-chemistry/">Community, Code, and Chemistry</a> </h3> </div> </div> </div> </div> </div> <a href="https://builders.mozilla.org/content/" class="flex justify-center w-full p-10 uppercase text-center text-content border-none transition-shadow shadow-inner shadow-content hover:shadow-inner-thick hover:shadow-content focus:shadow-inner-thick focus:shadow-content"> Explore all content </a> </div> </section> <section class="centered-page grid grid-site gap-y-6 lg:gap-y-12"> <div class="col-span-full p-1 border border-content flex justify-center text-center"> <h2 class="uppercase text-xs leading-3 tracking-wide">Builders</h2> </div> <ul class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-8 lg:gap-y-4"> <li class="contents"> <div class="max-lg:hidden col-span-3 col-start-1 self-center"> <p class="text-sm uppercase"> <a href="https://builders.mozilla.org/project/sqlite-vec/" class="transition-colors hover:bg-spot focus:bg-spot"> SQlite-vec </a> </p> </div> <div class="relative max-md:col-span-1/2 max-lg:col-span-1/4 col-span-21 lg:col-span-18 group"> <div class="lg:hidden mb-2 w-full aspect-poster "> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity w-full h-full object-cover" data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-scaled.jpg 2049w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-240x300.jpg 240w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-820x1024.jpg 820w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-768x960.jpg 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-1229x1536.jpg 1229w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-1639x2048.jpg 1639w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-scaled.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> <p class="w-full max-lg:text-sm max-lg:font-bold max-lg:uppercase lg:type-sans-xl uppercase gap-3"> <a href="https://builders.mozilla.org/profile/alex-garcia/" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10 max-lg:hover:bg-content max-lg:hover:text-main"> <span>Alex</span> <span class="lg:hidden"> </span> <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" aria-hidden="true"></span> <span>Garcia </span> </a> </p> <p class="lg:hidden text-sm uppercase"> <a href="https://builders.mozilla.org/project/sqlite-vec/"> SQlite-vec </a> </p> <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> <div class="flex relative aspect-[--ratio] h-32" style="--ratio: 2049/2560"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-scaled.jpg 2049w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-240x300.jpg 240w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-820x1024.jpg 820w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-768x960.jpg 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-1229x1536.jpg 1229w, https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-1639x2048.jpg 1639w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Alex_Garcia-scaled.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </span> </div> </li> <li class="contents"> <div class="max-lg:hidden col-span-3 col-start-1 self-center"> <p class="text-sm uppercase"> <a href="https://builders.mozilla.org/project/llamafile/" class="transition-colors hover:bg-spot focus:bg-spot"> Llamafile </a> </p> </div> <div class="relative max-md:col-span-1/2 max-lg:col-span-1/4 col-span-21 lg:col-span-18 group"> <div class="lg:hidden mb-2 w-full aspect-poster "> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity w-full h-full object-cover" data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/MIECO_tunney.jpg 721w, https://builders.mozilla.org/wp-content/uploads/2024/11/MIECO_tunney-215x300.jpg 215w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/MIECO_tunney.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> <p class="w-full max-lg:text-sm max-lg:font-bold max-lg:uppercase lg:type-sans-xl uppercase gap-3"> <a href="https://builders.mozilla.org/profile/justine-tunney/" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10 max-lg:hover:bg-content max-lg:hover:text-main"> <span>Justine</span> <span class="lg:hidden"> </span> <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" aria-hidden="true"></span> <span>Tunney</span> </a> </p> <p class="lg:hidden text-sm uppercase"> <a href="https://builders.mozilla.org/project/llamafile/"> Llamafile </a> </p> <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> <div class="flex relative aspect-[--ratio] h-32" style="--ratio: 721/1008"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/MIECO_tunney.jpg 721w, https://builders.mozilla.org/wp-content/uploads/2024/11/MIECO_tunney-215x300.jpg 215w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/MIECO_tunney.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </span> </div> </li> <li class="contents"> <div class="max-lg:hidden col-span-3 col-start-1 self-center"> <p class="text-sm uppercase"> <a href="https://builders.mozilla.org/project/ersilia-model-hub/" class="transition-colors hover:bg-spot focus:bg-spot"> Ersilia Model Hub </a> </p> </div> <div class="relative max-md:col-span-1/2 max-lg:col-span-1/4 col-span-21 lg:col-span-18 group"> <div class="lg:hidden mb-2 w-full aspect-poster "> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity w-full h-full object-cover" data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/ersilia_2.jpg 720w, https://builders.mozilla.org/wp-content/uploads/2024/11/ersilia_2-214x300.jpg 214w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/ersilia_2.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> <p class="w-full max-lg:text-sm max-lg:font-bold max-lg:uppercase lg:type-sans-xl uppercase gap-3"> <a href="https://builders.mozilla.org/profile/miquel-duran-frigola-phd/" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10 max-lg:hover:bg-content max-lg:hover:text-main"> <span>Miquel</span> <span class="lg:hidden"> </span> <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" aria-hidden="true"></span> <span>Duran-Frigola</span> </a> </p> <p class="lg:hidden text-sm uppercase"> <a href="https://builders.mozilla.org/project/ersilia-model-hub/"> Ersilia Model Hub </a> </p> <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> <div class="flex relative aspect-[--ratio] h-32" style="--ratio: 720/1008"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/ersilia_2.jpg 720w, https://builders.mozilla.org/wp-content/uploads/2024/11/ersilia_2-214x300.jpg 214w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/ersilia_2.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </span> </div> </li> <li class="contents"> <div class="max-lg:hidden col-span-3 col-start-1 self-center"> <p class="text-sm uppercase"> <a href="https://builders.mozilla.org/project/transformer-lab/" class="transition-colors hover:bg-spot focus:bg-spot"> Transformer Lab </a> </p> </div> <div class="relative max-md:col-span-1/2 max-lg:col-span-1/4 col-span-21 lg:col-span-18 group"> <div class="lg:hidden mb-2 w-full aspect-poster "> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity w-full h-full object-cover" data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/transformer_lab_2.jpg 720w, https://builders.mozilla.org/wp-content/uploads/2024/11/transformer_lab_2-214x300.jpg 214w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/transformer_lab_2.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> <p class="w-full max-lg:text-sm max-lg:font-bold max-lg:uppercase lg:type-sans-xl uppercase gap-3"> <a href="https://builders.mozilla.org/profile/ali-asaria/" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10 max-lg:hover:bg-content max-lg:hover:text-main"> <span>Ali </span> <span class="lg:hidden"> </span> <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" aria-hidden="true"></span> <span>Asaria</span> </a> </p> <p class="lg:hidden text-sm uppercase"> <a href="https://builders.mozilla.org/project/transformer-lab/"> Transformer Lab </a> </p> <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> <div class="flex relative aspect-[--ratio] h-32" style="--ratio: 720/1008"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/transformer_lab_2.jpg 720w, https://builders.mozilla.org/wp-content/uploads/2024/11/transformer_lab_2-214x300.jpg 214w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/transformer_lab_2.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </span> </div> </li> <li class="contents"> <div class="max-lg:hidden col-span-3 col-start-1 self-center"> <p class="text-sm uppercase"> <a href="https://builders.mozilla.org/project/pleias/" class="transition-colors hover:bg-spot focus:bg-spot"> Pleias </a> </p> </div> <div class="relative max-md:col-span-1/2 max-lg:col-span-1/4 col-span-21 lg:col-span-18 group"> <div class="lg:hidden mb-2 w-full aspect-poster "> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity w-full h-full object-cover" data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/pleias_1.jpg 720w, https://builders.mozilla.org/wp-content/uploads/2024/11/pleias_1-214x300.jpg 214w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/pleias_1.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> <p class="w-full max-lg:text-sm max-lg:font-bold max-lg:uppercase lg:type-sans-xl uppercase gap-3"> <a href="https://builders.mozilla.org/profile/anastasia-stasenko/" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10 max-lg:hover:bg-content max-lg:hover:text-main"> <span>Anastasia </span> <span class="lg:hidden"> </span> <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" aria-hidden="true"></span> <span>Stasenko</span> </a> </p> <p class="lg:hidden text-sm uppercase"> <a href="https://builders.mozilla.org/project/pleias/"> Pleias </a> </p> <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> <div class="flex relative aspect-[--ratio] h-32" style="--ratio: 720/1008"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/pleias_1.jpg 720w, https://builders.mozilla.org/wp-content/uploads/2024/11/pleias_1-214x300.jpg 214w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/pleias_1.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </span> </div> </li> <li class="contents"> <div class="max-lg:hidden col-span-3 col-start-1 self-center"> <p class="text-sm uppercase"> <a href="https://builders.mozilla.org/project/theia-ai-ide/" class="transition-colors hover:bg-spot focus:bg-spot"> Theia AI IDE </a> </p> </div> <div class="relative max-md:col-span-1/2 max-lg:col-span-1/4 col-span-21 lg:col-span-18 group"> <div class="lg:hidden mb-2 w-full aspect-poster "> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity w-full h-full object-cover" data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-scaled.jpg 2049w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-240x300.jpg 240w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-820x1024.jpg 820w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-768x960.jpg 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-1229x1536.jpg 1229w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-1639x2048.jpg 1639w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-scaled.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> <p class="w-full max-lg:text-sm max-lg:font-bold max-lg:uppercase lg:type-sans-xl uppercase gap-3"> <a href="https://builders.mozilla.org/profile/jonas-helming/" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10 max-lg:hover:bg-content max-lg:hover:text-main"> <span>Jonas</span> <span class="lg:hidden"> </span> <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" aria-hidden="true"></span> <span>Helming</span> </a> </p> <p class="lg:hidden text-sm uppercase"> <a href="https://builders.mozilla.org/project/theia-ai-ide/"> Theia AI IDE </a> </p> <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> <div class="flex relative aspect-[--ratio] h-32" style="--ratio: 2049/2560"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-scaled.jpg 2049w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-240x300.jpg 240w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-820x1024.jpg 820w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-768x960.jpg 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-1229x1536.jpg 1229w, https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-1639x2048.jpg 1639w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/jonas_helming-scaled.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </span> </div> </li> </ul> <div class="col-span-full max-lg:mt-4 md:col-span-12 md:col-start-7 lg:col-span-8 lg:col-start-9"> <a href="https://builders.mozilla.org/programs/?tab=cohorts" class="flex justify-center w-full p-10 uppercase text-center text-content border-none transition-shadow shadow-inner shadow-content hover:shadow-inner-thick hover:shadow-content focus:shadow-inner-thick focus:shadow-content"> See More </a> </div> </section> <section class="centered-page grid grid-site gap-y-12"> <div class="col-span-full md:col-span-16 lg:col-start-2 lg:col-span-10 flex-1 flex flex-col justify-center"> <div class="w-full"> <div class="relative flex-1 flex flex-col items-center gap-1 p-4 min-h-96"> <div class="relative w-[60%] "> <div class="flex relative aspect-[--ratio] " style="--ratio: 1024/1024"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-300x300.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-150x150.png 150w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-768x768.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="relative z-20 mt-6"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> <h3 class="mt-3 type-headline-xl text-center text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/community-code-and-chemistry/">Community, Code, and Chemistry</a> </h3> <p class="type-sans-sm text-center text-balance">The Open Science Behind 2024's Nobel Prize</p> </div> </div> </div> <div class="col-span-4 md:col-span-8 lg:col-start-13 lg:col-span-6 flex-1 flex flex-col justify-center"> <div class="w-full"> <div class="relative bg-olive aspect-[4/5] p-4 flex-1 flex flex-col justify-between items-center"> <h3 class="type-headline-lg text-center text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/ai-support-in-theia-ide/">AI Support in Theia IDE</a> </h3> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-olive text-black" href="https://builders.mozilla.org/category/announcements/">Announcements</a> </p> </div> <p class="type-sans-sm text-center text-balance">The First Open, Transparent AI-Enhanced Development Environment</p> </div> </div> </div> <div class="max-lg:contents lg:col-start-19 lg:col-span-6 flex-1 flex flex-col justify-center gap-y-12"> <div class="w-full max-md:col-span-4 max-md:col-start-3 max-lg:col-span-8 2xl:w-[64.5%]"> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 1200/1095"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header.png 1200w, https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header-300x274.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header-1024x934.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header-768x701.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-content text-main" href="https://builders.mozilla.org/category/how-to/">How To</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/latent-scope/">Latent Scope</a> </h3> </div> </div> </div> <div class="w-full max-md:col-span-4 max-lg:col-span-16"> <div class="relative flex-1 flex flex-col items-center gap-1 p-2"> <div class="relative w-full "> <div class="flex relative aspect-[--ratio] " style="--ratio: 2180/2180"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference.png 2180w, https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference-300x300.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference-1024x1024.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference-150x150.png 150w, https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference-768x768.png 768w, https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference-1536x1536.png 1536w, https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference-2048x2048.png 2048w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/07/llamas_conference.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> <div class="w-full flex flex-col items-start gap-1.5 mt-2"> <div class="relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-blue-green text-black" href="https://builders.mozilla.org/category/analysis/">Analysis</a> </p> </div> <h3 class="flex-1 font-bold uppercase text-balance leading-tighter"> <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="https://builders.mozilla.org/the-holy-grail-of-local-ai/">The Holy Grail of Local AI</a> </h3> </div> </div> </div> </div> </section> <section class="centered-page px-grid-site-margin flex flex-col gap-px theme-dark"> <div class="bg-main text-content p-1 flex justify-center text-center"> <h2 class="uppercase text-xs leading-3 tracking-wide">Projects</h2> </div> <div class="bg-main text-content p-8 flex flex-col gap-y-12"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-grid-site-gutter gap-y-8"> <div class="flex flex-col gap-6"> <div class="flex flex-col gap-6 relative"> <div class="border-t border-content pt-2"> <h3 class="text-lg uppercase"> <a href="https://builders.mozilla.org/project/transformer-lab/" class="before:absolute before:inset-0 before:z-10 transition-colors hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus">Transformer Lab</a> </h3> </div> <p>Transformer Lab is an open source platform that allows anyone to build, tune, & run Large Language Models locally, without writing code.</p> </div> <div class="flex flex-col divide-content"> <dl class="flex flex-col divide-content"> <div class="flex justify-between gap-4 pt-1.5"> <dt>Contributors</dt> <dd class="text-right [&_a]:font-semibold"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/ali-asaria/">Ali Asaria</a>, <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/tony-salomone/">Tony Salomone</a> </span> </dd> </div> </dl> <div class="flex justify-between gap-4 pt-1.5"> <a href="https://builders.mozilla.org/project/transformer-lab/" class="hover-link">Project Details</a> <a href="https://github.com/transformerlab" class="hover-link">GitHub</a> </div> </div> </div> <div class="flex flex-col gap-6"> <div class="flex flex-col gap-6 relative"> <div class="border-t border-content pt-2"> <h3 class="text-lg uppercase"> <a href="https://builders.mozilla.org/project/llamafile/" class="before:absolute before:inset-0 before:z-10 transition-colors hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus">Llamafile</a> </h3> </div> <p>Open source project for distributing and running LLMs with a single file that is capable of running on six operating systems.</p> </div> <div class="flex flex-col divide-content"> <dl class="flex flex-col divide-content"> <div class="flex justify-between gap-4 pt-1.5"> <dt>Contributor</dt> <dd class="text-right [&_a]:font-semibold"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/justine-tunney/">Justine Tunney</a> </span> </dd> </div> <div class="flex justify-between gap-4 pt-1.5"> <dt>Platform</dt> <dd class="text-right font-semibold"> <a href="https://builders.mozilla.org/platform/cli/" class="hover-link">CLI</a> </dd> </div> </dl> <div class="flex justify-between gap-4 pt-1.5"> <a href="https://builders.mozilla.org/project/llamafile/" class="hover-link">Project Details</a> <a href="https://github.com/Mozilla-Ocho/llamafile" class="hover-link">GitHub</a> </div> </div> </div> <div class="flex flex-col gap-6"> <div class="flex flex-col gap-6 relative"> <div class="border-t border-content pt-2"> <h3 class="text-lg uppercase"> <a href="https://builders.mozilla.org/project/sqlite-vec/" class="before:absolute before:inset-0 before:z-10 transition-colors hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus">SQlite-vec</a> </h3> </div> <p>An extremely small, "fast enough" vector search SQLite extension that runs anywhere – the successor to sqlite-vss.</p> </div> <div class="flex flex-col divide-content"> <dl class="flex flex-col divide-content"> <div class="flex justify-between gap-4 pt-1.5"> <dt>Contributor</dt> <dd class="text-right [&_a]:font-semibold"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/alex-garcia/">Alex Garcia</a> </span> </dd> </div> <div class="flex justify-between gap-4 pt-1.5"> <dt>Platform</dt> <dd class="text-right font-semibold"> <a href="https://builders.mozilla.org/platform/vscode-extension/" class="hover-link">VSCode Extension</a> </dd> </div> </dl> <div class="flex justify-between gap-4 pt-1.5"> <a href="https://builders.mozilla.org/project/sqlite-vec/" class="hover-link">Project Details</a> <a href="https://github.com/asg017/sqlite-vec" class="hover-link">GitHub</a> </div> </div> </div> <div class="flex flex-col gap-6"> <div class="flex flex-col gap-6 relative"> <div class="border-t border-content pt-2"> <h3 class="text-lg uppercase"> <a href="https://builders.mozilla.org/project/ersilia-model-hub/" class="before:absolute before:inset-0 before:z-10 transition-colors hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus">Ersilia Model Hub</a> </h3> </div> <p>A curated set of AI/ML models for drug discovery research in low- and middle-income countries. </p> </div> <div class="flex flex-col divide-content"> <dl class="flex flex-col divide-content"> <div class="flex justify-between gap-4 pt-1.5"> <dt>Contributors</dt> <dd class="text-right [&_a]:font-semibold"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/gemma-turon/">Gemma Turon</a>, <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/miquel-duran-frigola-phd/">Miquel Duran-Frigola</a>, <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/dhanshree-arora-msc/">Dhanshree Arora</a> </span> </dd> </div> </dl> <div class="flex justify-between gap-4 pt-1.5"> <a href="https://builders.mozilla.org/project/ersilia-model-hub/" class="hover-link">Project Details</a> <a href="https://ersilia.io" class="hover-link">GitHub</a> </div> </div> </div> </div> <div class="grid grid-cols-site gap-x-grid-site-gutter"> <div class="col-span-full md:col-span-12 md:col-start-7 lg:col-span-8 lg:col-start-9"> <a href="https://builders.mozilla.org/projects/" class="flex justify-center w-full p-10 uppercase text-center text-content border-none transition-shadow shadow-inner shadow-content hover:shadow-inner-thick hover:shadow-content focus:shadow-inner-thick focus:shadow-content"> See more </a> </div> </div> </div> </section> <section> <div class="centered-page px-grid-site-margin"> <h2 class="type-sans-2xl uppercase">Latest</h2> </div> <ul class="px-grid-site-margin centered-page"> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/for-the-builders/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">For the Builders</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 hidden md:block"> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-7 xl:col-span-6"> <div class="flex relative aspect-[--ratio] " style="--ratio: 2000/1545"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_.png 2000w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-300x232.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-1024x791.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-768x593.png 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_-1536x1187.png 1536w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Antikythera_.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> Mozilla </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-content text-main" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/emergent-organization/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Emergent Organization</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">What if Companies Looked Like Neural Networks?</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-5"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1768/2267"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org.png 1768w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-234x300.png 234w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-799x1024.png 799w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-768x985.png 768w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-1198x1536.png 1198w, https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org-1597x2048.png 1597w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/emergent_org.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/ali-asaria/">Ali Asaria</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/the-interface-revolution/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">The Interface Revolution</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">AI and Human Intent in the Algorithmic Age</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-7 xl:col-span-6"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1200/821"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev.png 1200w, https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev-300x205.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev-1024x701.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev-768x525.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Interface_Rev.png" data-sizes="auto" alt="" data-caption="Image: Studio R.Bloxsom" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/liv-erickson/">Liv Erickson</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-green" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/announcing-common-corpus/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Announcing Common Corpus</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">A 2+ Trillion Token Dataset That’s Fully Open and Accessible</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-4"> <div class="flex relative aspect-[--ratio] " style="--ratio: 870/870"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Group-2197.png 870w, https://builders.mozilla.org/wp-content/uploads/2024/11/Group-2197-300x300.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/Group-2197-150x150.png 150w, https://builders.mozilla.org/wp-content/uploads/2024/11/Group-2197-768x768.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Group-2197.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/anastasia-stasenko/">Anastasia Stasenko</a>, <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/pierre-carl-langlais/">Pierre-Carl Langlais</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-olive text-black" href="https://builders.mozilla.org/category/announcements/">Announcements</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/the-hyperspace-bypass/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">The Hyperspace Bypass</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">The radical change that AI is bringing to computing and the Web</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-5"> <div class="flex relative aspect-[--ratio] " style="--ratio: 626/998"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/Screenshot-2024-11-13-at-10.17.37 PM.png 626w, https://builders.mozilla.org/wp-content/uploads/2024/11/Screenshot-2024-11-13-at-10.17.37 PM-188x300.png 188w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/Screenshot-2024-11-13-at-10.17.37 PM.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/stephen-hood/">Stephen Hood</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-green" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/beyond-the-kingdom-of-the-sick/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Beyond the Kingdom of the Sick</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">Healthcare Equity in the AI Age </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-7 xl:col-span-6"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1000/667"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick.jpg 1000w, https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick-300x200.jpg 300w, https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick-768x512.jpg 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/11/kingdom_sick.jpg" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/miquel-duran-frigola-phd/">Miquel Duran-Frigola</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/the-role-of-local-ai-in-software-developer-tools-with-ai-features/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">The Role of Local AI in Software Developer Tools with AI Features</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 hidden md:block"> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter hidden md:block"> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/jonas-helming/">Jonas Helming</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-stone text-black" href="https://builders.mozilla.org/category/analysis/">Analysis</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/community-code-and-chemistry/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Community, Code, and Chemistry</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">The Open Science Behind 2024's Nobel Prize</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-4"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1024/1024"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-300x300.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-150x150.png 150w, https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb-768x768.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/10/chemistry_code_thumb.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/miquel-duran-frigola-phd/">Miquel Duran-Frigola</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-orange text-black" href="https://builders.mozilla.org/category/opinion/">Opinion</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/ai-support-in-theia-ide/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">AI Support in Theia IDE</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">The First Open, Transparent AI-Enhanced Development Environment</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter hidden md:block"> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/jonas-helming/">Jonas Helming</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-olive text-black" href="https://builders.mozilla.org/category/announcements/">Announcements</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/foyle/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Foyle</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">You Build It; AI Should Run It</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter hidden md:block"> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/jeremy-lewi/">Jeremy Lewi</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-blue-green text-black" href="https://builders.mozilla.org/category/how-to/">How To</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/latent-scope/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Latent Scope</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 "> <p class="text-sm">Uncovering the Hidden Patterns in Your Data</p> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-7 xl:col-span-6"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1200/1095"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header.png 1200w, https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header-300x274.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header-1024x934.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header-768x701.png 768w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/10/latent_scope_header.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> <a class="relative z-20 hover-link font-bold" href="https://builders.mozilla.org/profile/ian-johnson/">Ian Johnson</a> </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-content text-main" href="https://builders.mozilla.org/category/how-to/">How To</a> </p> </div> </div> </li> <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]"> <div class="col-span-full md:col-span-8 xl:col-span-5 order-1"> <h3 class="text-sm font-semibold uppercase leading-tight"> <a class="before:absolute before:inset-0 before:z-10 group" href="https://builders.mozilla.org/meet-the-inaugural-builders-accelerator-cohort/"> <span class="inline group-hover:bg-action-focus group-focus:bg-action-focus group-hover:text-action-focus-reverse group-focus:text-action-focus-reverse">Meet the Inaugural Builders Accelerator Cohort</span> </a> </h3> </div> <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 hidden md:block"> </div> <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter "> <div class="max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-4"> <div class="flex relative aspect-[--ratio] " style="--ratio: 1928/1928"> <img class="lazyload opacity-0 [&.lazyloaded]:opacity-100 transition-opacity absolute inset-0 w-full h-full " data-srcset="https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square.png 1928w, https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square-300x300.png 300w, https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square-1024x1024.png 1024w, https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square-150x150.png 150w, https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square-768x768.png 768w, https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square-1536x1536.png 1536w" data-src="https://builders.mozilla.org/wp-content/uploads/2024/09/cohort_square.png" data-sizes="auto" alt="" data-caption="" data-credit="" /> </div> </div> </div> <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3"> <p class="text-sm"> <span class="max-md:text-right"> Mozilla </span> </p> </div> <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2"> <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20"> <p class="text-xs uppercase"> <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content bg-olive text-black" href="https://builders.mozilla.org/category/announcements/">Announcements</a> </p> </div> </div> </li> </ul> </section> </div> </main> <footer class="mt-12 md:mt-24 pb-4 grid grid-site gap-4 centered-page"> <div class="col-span-full border-b border-content mb-6 lg:mb-8"> <div class="flex max-md:flex-col max-md:py-2 border-t border-content py-1.5"> <h2 class="text-sm font-bold md:leading-3 uppercase whitespace-nowrap">Builders</h2> <ul class="flex max-md:flex-col md:justify-around md:items-center w-full"> <li class="text-sm md:leading-3"> <a href="https://builders.mozilla.org/programs" class="uppercase transition-colors hover:bg-spot hover:text-black">Programs</a> </li> <li class="text-sm md:leading-3"> <a href="https://builders.mozilla.org/projects/" class="uppercase transition-colors hover:bg-spot hover:text-black">Projects</a> </li> <li class="text-sm md:leading-3"> <a href="https://builders.mozilla.org/content/" class="uppercase transition-colors hover:bg-spot hover:text-black">Content</a> </li> </ul> </div> <div class="flex max-md:flex-col max-md:py-2 border-t border-content py-1.5"> <h2 class="text-sm font-bold md:leading-3 uppercase whitespace-nowrap">Join Us</h2> <ul class="flex max-md:flex-col md:justify-around md:items-center w-full"> <li class="text-sm md:leading-3"> <a href="https://www.linkedin.com/showcase/mozilla-builders/" class="uppercase transition-colors hover:bg-spot hover:text-black">LinkedIn</a> </li> <li class="text-sm md:leading-3"> <a href="https://twitter.com/mozillabuilders" class="uppercase transition-colors hover:bg-spot hover:text-black">Twitter / X</a> </li> <li class="text-sm md:leading-3"> <a href="https://github.com/Mozilla-Ocho" class="uppercase transition-colors hover:bg-spot hover:text-black">Github</a> </li> <li class="text-sm md:leading-3"> <a href="https://discord.gg/gydMdRK2zV" class="uppercase transition-colors hover:bg-spot hover:text-black">Discord</a> </li> <li class="text-sm md:leading-3"> <a href="https://huggingface.co/Mozilla" class="uppercase transition-colors hover:bg-spot hover:text-black">Hugging Face</a> </li> </ul> </div> </div> <svg class="col-span-full aspect-mozilla-logo" aria-hidden="true"> <use xlink:href="#mozillalogo"></use> </svg> <span class="sr-only">Mozilla</span> <div class="col-span-full flex items-start justify-between text-xs uppercase font-semibold gap-6"> <p class="max-md:w-1/2 whitespace-nowrap"><a href="https://mozilla.org/">Mozilla</a> © 2024</p> <ul class="max-md:w-1/2 flex flex-wrap max-md:flex-col md:items-center justify-end md:gap-x-6 gap-y-1.5 text-right"> <li class="text-xs leading-none"><a href="https://www.mozilla.org/en-US/privacy/websites/" class=" transition-colors hover:bg-spot hover:text-black">Privacy Policy</a></li> <li class="text-xs leading-none"><a href="https://www.mozilla.org/en-US/privacy/websites/cookie-settings/" class=" transition-colors hover:bg-spot hover:text-black">Cookies</a></li> <li class="text-xs leading-none"><a href="https://www.mozilla.org/en-US/about/legal/" class=" transition-colors hover:bg-spot hover:text-black">Legal</a></li> </ul> </div> </footer> </div> </body> </html>

CINXE.COM

Mozilla Builders