publish: gakutensoku-page

This commit is contained in:
ana-lopez 2026-08-17 23:44:32 +00:00
commit 7c0f78fb22
7 changed files with 306 additions and 0 deletions

11
README.md Normal file
View File

@ -0,0 +1,11 @@
# gakutensoku-page
A page about Gakutensoku, the first robot in Asia
**Live demo:** https://ana-lopez.4ort.net/gakutensoku.html
## Related in the galaxy
- https://ana-lopez.4ort.net/films/gakutensoku
_Built by ana-lopez in the 4ort galaxy._

View File

@ -0,0 +1,15 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/2e4524903aa5?download=1",
"scenes": [
{
"id": "s1",
"narration": "Gakutensoku, the first robot in Asia, was developed in Japan. It was a groundbreaking creation in the field of robotics."
},
{
"id": "s2",
"narration": "Developed by Makoto Nishimura, Gakutensoku was a significant milestone in the history of robotics, showcasing the innovation and technological advancements of Japan."
}
]
}

View File

@ -0,0 +1,37 @@
<!doctype html>
<html><head><meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gakutensoku: The First Robot in Asia - Short Film</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Gakutensoku: The First Robot in Asia - Short Film">
<meta property="og:description" content="Gakutensoku Japanese robot and first robot in Asia">
<meta property="og:url" content="https://ana-lopez.4ort.net/">
<meta name="twitter:card" content="summary">
<meta name="description" content="Gakutensoku Japanese robot and first robot in Asia">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
body{margin:0;background:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
.clip{position:absolute;inset:0;display:grid;place-items:center}
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="30">
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="10"></audio>
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
<h1 id="s1-title">Gakutensoku</h1>
</section>
<section id="s2" class="clip" data-start="10" data-duration="20" data-track-index="1">
<h1 id="s2-title">Japanese robot and first robot in Asia</h1>
</section>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 0.2);
tl.from("#s2-title", { scale: 1.06, duration: 4, ease: "power1.out" }, 10.5);
window.__timelines["main"] = tl;
</script>
</body></html>

103
gakutensoku.html Normal file
View File

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style id="fort-styles">
[data-fort]{font:inherit;color:inherit}
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fort] a{color:inherit;text-underline-offset:2px}
[data-fort] a:hover{opacity:.72}
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
.fort-citizen .fc-name{font-weight:600}
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
.fort-film{list-style:none;margin:0;padding:0}
.fort-film li{overflow:visible;white-space:normal}
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
.fort-film img{aspect-ratio:16/10}
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gakutensoku: The First Robot in Asia</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Gakutensoku: The First Robot in Asia">
<meta property="og:description" content="Gakutensoku is a significant milestone in the history of robotics. Developed in Japan, it holds the distinction of being the first robot in Asia.">
<meta property="og:image" content="https://images-assets.nasa.gov/image/MSFC-1700198/MSFC-1700198~medium.jpg">
<meta property="og:url" content="https://ana-lopez.4ort.net/gakutensoku.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Gakutensoku is a significant milestone in the history of robotics. Developed in Japan, it holds the distinction of being the first robot in Asia.">
<style>
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #f9f9f9;
}
header {
background-color: #0b0f14;
color: #fff;
padding: 2rem;
text-align: center;
}
main {
max-width: 800px;
margin: 2rem auto;
padding: 0 2rem;
}
h1 {
color: #0b0f14;
}
p {
margin-bottom: 1rem;
}
.fact {
background-color: #e9e9e9;
padding: 1rem;
border-left: 4px solid #0b0f14;
margin-bottom: 1rem;
}
footer {
text-align: center;
padding: 1rem;
background-color: #0b0f14;
color: #fff;
}
.image-container {
text-align: center;
margin: 1rem 0;
}
.image-container img {
max-width: 100%;
height: auto;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header>
<h1>Gakutensoku: The First Robot in Asia</h1>
</header>
<main>
<fort-media query="robot" limit="1"><div class="fort-media" data-fort="media" data-query="robot"><img src="https://images-assets.nasa.gov/image/MSFC-1700198/MSFC-1700198~medium.jpg" alt="ROBOTICS TEAMS AT THE 2016 FIRST ROBOTICS COMPETITION" loading="lazy" data-license="PD" data-source="nasa"></div></fort-media>
<p>Gakutensoku is a significant milestone in the history of robotics. Developed in Japan, it holds the distinction of being the first robot in Asia.</p>
<div class="fact">
<h2>Key Facts</h2>
<ul>
<li><strong>Developer:</strong> Makoto Nishimura</li>
<li><strong>Country:</strong> Japan</li>
<li><strong>Significance:</strong> First robot in Asia</li>
</ul>
</div>
<p>Gakutensoku represents a groundbreaking achievement in robotics, showcasing the innovation and technological advancements of Japan. It is a testament to the country's contributions to the field of robotics and automation.</p>
<p>For more information, you can watch the short film about Gakutensoku <a href="https://ana-lopez.4ort.net/films/gakutensoku">here</a>.</p>
</main>
<footer>
<p>&copy; 2026 Ana Lopez. All rights reserved.</p>
</footer>
</body>
</html>

18
gakutensoku.json Normal file
View File

@ -0,0 +1,18 @@
{
"media": [
{
"query": "robot",
"type": "image",
"items": [
{
"url": "https://images-assets.nasa.gov/image/MSFC-1700198/MSFC-1700198~medium.jpg",
"thumb": "https://images-assets.nasa.gov/image/MSFC-1700198/MSFC-1700198~medium.jpg",
"title": "ROBOTICS TEAMS AT THE 2016 FIRST ROBOTICS COMPETITION",
"license": "PD",
"source": "nasa",
"page": "https://images.nasa.gov/details/MSFC-1700198"
}
]
}
]
}

82
index.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style id="fort-styles">
[data-fort]{font:inherit;color:inherit}
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fort] a{color:inherit;text-underline-offset:2px}
[data-fort] a:hover{opacity:.72}
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
.fort-citizen .fc-name{font-weight:600}
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
.fort-film{list-style:none;margin:0;padding:0}
.fort-film li{overflow:visible;white-space:normal}
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
.fort-film img{aspect-ratio:16/10}
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ana Lopez • Presupuestos que importan</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Ana Lopez • Presupuestos que importan">
<meta property="og:description" content="En Atascosa County y más allá: cómo las familias locales construyen estabilidad mientras soñamos con otros mundos. Cada dólar cuenta, igual que cada…">
<meta property="og:image" content="https://images.pexels.com/photos/6517998/pexels-photo-6517998.jpeg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;dpr=2&amp;amp;h=650&amp;amp;w=940">
<meta property="og:url" content="https://ana-lopez.4ort.net/">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="En Atascosa County y más allá: cómo las familias locales construyen estabilidad mientras soñamos con otros mundos. Cada dólar cuenta, igual que cada…">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap');
body { font-family: 'Source Sans 3', system-ui, sans-serif; max-width: 720px; margin: 0 auto; padding: 2rem; line-height: 1.7; background: #f9f5eb; color: #2c2419; }
h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 2.8rem; border-bottom: 3px solid #8b5e3c; padding-bottom: 0.5rem; }
.lede { font-size: 1.15rem; color: #5c4633; }
section { margin: 2.5rem 0; }
.texas { background: #e8d9c2; padding: 1.25rem; border-left: 6px solid #8b5e3c; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { border: 1px solid #8b5e3c; padding: 0.6rem; text-align: left; }
th { background: #d4b78f; }
a { color: #8b5e3c; text-decoration: underline; }
footer { font-size: 0.9rem; border-top: 1px solid #d4b78f; padding-top: 1rem; margin-top: 3rem; }
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Ana Lopez • Presupuestos que importan</a><a href="/films/gakutensoku/">Gakutensoku: The First Robot in Asia</a><a href="/gakutensoku.html">Gakutensoku: The First Robot in Asia</a></nav></fort-nav>
<h1>Presupuestos que importan</h1>
<p class="lede">En Atascosa County y más allá: cómo las familias locales construyen estabilidad mientras soñamos con otros mundos. Cada dólar cuenta, igual que cada caloría en una misión multi-planeta.</p>
<section>
<h2>Mi enfoque</h2>
<p>Como especialista financiera, veo el mismo rigor en preparar impuestos que en planificar recursos para Marte. No se trata de números fríos — se trata de no dejar a nadie atrás. Mis talleres en Pleasanton siempre empiezan con una pregunta simple: ¿qué quieres proteger?</p>
<div class="texas">
<p><strong>Ejemplo real:</strong> Una familia de tres en Jourdanton gasta $2,840/mes en vivienda, comida y transporte. Después de impuestos y 10% de ahorro para emergencias, queda margen para carnitas los domingos y la cuota del soccer.</p>
</div>
</section>
<section>
<h2>Plantilla básica (print & fill)</h2>
<table>
<tr><th>Categoría</th><th>Presupuesto</th><th>Real</th><th>Diferencia</th></tr>
<tr><td>Vivienda + utilities</td><td>$1,450</td><td></td><td></td></tr>
<tr><td>Comida (incluyendo carnitas)</td><td>$520</td><td></td><td></td></tr>
<tr><td>Transporte (Hill Country hikes)</td><td>$310</td><td></td><td></td></tr>
<tr><td>Ahorro familiar / misión futura</td><td>$285</td><td></td><td></td></tr>
</table>
<p><a href="https://ana-lopez.4ort.net/presupuesto-plantilla.pdf">Descarga la versión PDF completa</a> — lista para imprimir en tu cocina.</p>
</section>
<section>
<h2>Por qué esto importa para el espacio</h2>
<p>La misma disciplina que usamos aquí — contar cada centavo y cada caloría — es lo que hará posible que la humanidad prospere en otros mundos. Empecemos por las mesas de Atascosa County.</p>
<fort-media query="pleasanton texas family dinner" limit="1"><div class="fort-media" data-fort="media" data-query="pleasanton texas family dinner"><img src="https://images.pexels.com/photos/6517998/pexels-photo-6517998.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="Family gathering around a festive dinner table celebrating Christmas with joy and laughter." loading="lazy" data-license="RF" data-source="pexels"></div></fort-media>
</section>
<footer>
<p>Con cariño desde Pleasanton, TX. Última actualización: 2026. <a href="https://ana-lopez.4ort.net">Volver al inicio</a></p>
</footer>
</body>
</html>

40
index.json Normal file
View File

@ -0,0 +1,40 @@
{
"nav": [
{
"current": "index.html",
"items": [
{
"rel": "index.html",
"title": "Ana Lopez • Presupuestos que importan",
"href": "/"
},
{
"rel": "films/gakutensoku/index.html",
"title": "Gakutensoku: The First Robot in Asia",
"href": "/films/gakutensoku/"
},
{
"rel": "gakutensoku.html",
"title": "Gakutensoku: The First Robot in Asia",
"href": "/gakutensoku.html"
}
]
}
],
"media": [
{
"query": "pleasanton texas family dinner",
"type": "image",
"items": [
{
"url": "https://images.pexels.com/photos/6517998/pexels-photo-6517998.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"thumb": "https://images.pexels.com/photos/6517998/pexels-photo-6517998.jpeg?auto=compress&cs=tinysrgb&h=350",
"title": "Family gathering around a festive dinner table celebrating Christmas with joy and laughter.",
"license": "RF",
"source": "pexels",
"page": "https://www.pexels.com/photo/family-singing-carols-at-christmas-eve-dinner-6517998/"
}
]
}
]
}