Multi-page portfolio with /work and /play pages

Expand single-page site into three pages:
- / — hero landing
- /work — about, skills, services, projects
- /play — lately (reading/music/watching) + Glass.photo masonry gallery

Refactored build.py for multi-page generation with shared template,
cleaned and standardised all CSS (px units, design tokens), and
updated CNAME for exp.thedataareclean.com hosting.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: cube

CNAME

@@ -1 +1 @@
-thedataareclean.com
+exp.thedataareclean.com

build.py

@@ -3,14 +3,17 @@
 """Build script for portfolio site.
 
 Reads markdown content files, renders them into HTML,
-and assembles the final dist/index.html.
+and assembles multi-page output: /, /work/, /play/.
 
 Usage: python3 build.py
 """
 
+import json
 import re
 import shutil
+import urllib.request
 from datetime import datetime
+from html import escape
 from pathlib import Path
 
 BASE = Path(__file__).parent
@@ -152,7 +155,6 @@ def render_meta(md):
     url = items.get('url', '')
     image = items.get('image', '')
     twitter = items.get('twitter', '')
-    lang = items.get('lang', 'en')
 
     favicon = items.get('favicon', '')
     image_url = url.rstrip('/') + '/' + image if image and not image.startswith('http') else image
@@ -306,7 +308,7 @@ def render_projects(md):
     return (
         '  <!-- PROJECTS -->\n'
         '  <section class="projects-section">\n'
-        '    <h2 class="projects-title">\n'
+        '    <h2 class="section-title">\n'
         f'      {title}\n'
         '    </h2>\n'
         '    <div class="projects">\n'
@@ -329,57 +331,255 @@ def render_lately(md):
         value = items.get(key, '\u2014')
         icon = icon_map[key]
         parts.append(
-            '      <div class="footer-lately-item">\n'
+            '      <div class="lately-item">\n'
             f'        <span class="material-symbols-sharp">{icon}</span>\n'
-            f'        <span class="footer-lately-value">{value}</span>\n'
+            f'        <span class="lately-value">{value}</span>\n'
             '      </div>'
         )
 
     return (
-        '    <div class="footer-lately">\n'
+        '    <div class="lately-list">\n'
         + '\n'.join(parts) + '\n'
         + '    </div>'
     )
 
 
-def render_footer(footer_md, lately_md):
+def render_footer(footer_md):
     items = dict(parse_kv_list(footer_md))
-    email = items.get('email', '')
     location = items.get('location', '')
-    credit = parse_inline(items.get('credit', ''))
+    designed = parse_inline(items.get('designed', ''))
+    developed = parse_inline(items.get('developed', ''))
     license_text = parse_inline(items.get('license', ''))
-    handle = parse_inline(items.get('handle', ''))
-    year = items.get('year', '')
-
-    lately = render_lately(lately_md)
 
     return (
-        '    <div class="footer-email">\n'
-        f'      <span>{email}</span>\n'
-        '      <button class="footer-email-copy" onclick="copyEmail()" aria-label="Copy email">\n'
-        '        <span class="material-symbols-sharp">content_copy</span>\n'
-        '      </button>\n'
-        '    </div>\n'
-        '\n'
-        f'{lately}\n'
-        '\n'
         '    <div class="footer-meta">\n'
         f'      <span>{location}</span>\n'
-        '\n'
         '      <span id="local-time">--:--</span>\n'
-        '\n'
         '      <span id="temperature">--</span>\n'
-        '\n'
         '      <span>AQI <span id="aqi">--</span></span>\n'
         '    </div>\n'
         '\n'
         '    <div class="footer-bottom">\n'
-        f'      <span>{license_text} \u00b7 {handle} \u00b7 {year}</span>\n'
-        f'      <span>{credit}</span>\n'
+        f'      <span>{designed}</span>\n'
+        f'      <span>{developed}</span>\n'
+        f'      <span>{license_text}</span>\n'
         '    </div>'
     )
 
 
+def render_work_section(md):
+    """Parse work.md into skills grid + services grid HTML."""
+    lines = md.strip().split('\n')
+    current_section = None
+    skills = []
+    services = []
+
+    for line in lines:
+        stripped = line.strip()
+        if stripped.startswith('# '):
+            current_section = stripped[2:].strip().lower()
+        elif stripped.startswith('- ') and current_section:
+            value = stripped[2:].strip()
+            if current_section == 'skills':
+                skills.append(value)
+            elif current_section == 'services':
+                services.append(value)
+
+    skill_boxes = '\n'.join(
+        f'      <div class="skill-box">{s}</div>'
+        for s in skills
+    )
+    service_boxes = '\n'.join(
+        f'      <div class="service-box">{s}</div>'
+        for s in services
+    )
+
+    return (
+        '  <!-- SKILLS -->\n'
+        '  <section>\n'
+        '    <h2 class="section-title"><span class="highlight">skills</span></h2>\n'
+        '    <div class="skills-grid">\n'
+        f'{skill_boxes}\n'
+        '    </div>\n'
+        '  </section>\n'
+        '\n'
+        '  <!-- SERVICES -->\n'
+        '  <section>\n'
+        '    <h2 class="section-title"><span class="highlight">services</span></h2>\n'
+        '    <div class="services-grid">\n'
+        f'{service_boxes}\n'
+        '    </div>\n'
+        '  </section>'
+    )
+
+
+def fetch_glass_photos():
+    """Fetch photos from Glass.photo profile, return list of {url, description}."""
+    try:
+        url = 'https://glass.photo/thedataareclean'
+        req = urllib.request.Request(url, headers={
+            'User-Agent': 'Mozilla/5.0 (compatible; portfolio-build/1.0)',
+        })
+        with urllib.request.urlopen(req, timeout=15) as resp:
+            html = resp.read().decode('utf-8')
+
+        # Extract __NEXT_DATA__ JSON
+        match = re.search(
+            r'<script\s+id="__NEXT_DATA__"\s+type="application/json">\s*({.+?})\s*</script>',
+            html,
+            re.DOTALL,
+        )
+        if not match:
+            print('Warning: Could not find __NEXT_DATA__ in Glass.photo page.')
+            return []
+
+        data = json.loads(match.group(1))
+
+        # Navigate to posts array: props.pageProps.fallbackData.posts.data
+        posts = (
+            data.get('props', {})
+            .get('pageProps', {})
+            .get('fallbackData', {})
+            .get('posts', {})
+            .get('data', [])
+        )
+
+        photos = []
+        for post in posts:
+            img_url = post.get('image1024x1024', '')
+            desc = post.get('description', '')
+            if img_url:
+                photos.append({
+                    'url': img_url,
+                    'description': desc or '',
+                })
+
+        print(f'Fetched {len(photos)} photos from Glass.photo')
+        return photos
+
+    except Exception as e:
+        print(f'Warning: Glass.photo fetch failed ({e}), using empty gallery.')
+        return []
+
+
+def render_gallery(photos, num_cols=3):
+    """Render masonry gallery with round-robin column distribution for L-to-R chronological order."""
+    if not photos:
+        return ''
+
+    # Distribute photos round-robin across columns
+    cols = [[] for _ in range(num_cols)]
+    for i, photo in enumerate(photos):
+        cols[i % num_cols].append(photo)
+
+    col_parts = []
+    for col in cols:
+        items = []
+        for photo in col:
+            desc = escape(photo['description'])
+            caption = f'\n          <figcaption>{desc}</figcaption>' if desc else ''
+            items.append(
+                f'        <figure class="gallery-item">\n'
+                f'          <img src="{photo["url"]}" alt="{desc}" loading="lazy">{caption}\n'
+                f'        </figure>'
+            )
+        col_parts.append(
+            '      <div class="gallery-col">\n'
+            + '\n'.join(items) + '\n'
+            + '      </div>'
+        )
+
+    return (
+        '  <!-- GALLERY -->\n'
+        '  <section>\n'
+        '    <h2 class="section-title"><span class="highlight">photos</span></h2>\n'
+        '    <div class="gallery">\n'
+        + '\n'.join(col_parts) + '\n'
+        + '    </div>\n'
+        '  </section>'
+    )
+
+
+def render_home_body(hero_md):
+    """Home page body: hero."""
+    hero_html = render_hero(hero_md)
+    return hero_html
+
+
+def render_page_intro(text):
+    """Render an opening tagline, **bold** becomes accent-colored."""
+    styled = re.sub(r'\*\*(.+?)\*\*', r'<span class="name">\1</span>', text)
+    return (
+        '  <section class="page-intro">\n'
+        f'    <p class="tagline">{styled}</p>\n'
+        '  </section>'
+    )
+
+
+def render_work_body(work_md, projects_md, about_md):
+    """Work page body: intro + about + skills + services + projects."""
+    intro_html = render_page_intro('at work, i am a multi-disciplinary **data communicator**.')
+    about_html = render_about(about_md)
+    work_html = render_work_section(work_md)
+    projects_html = render_projects(projects_md)
+    return intro_html + '\n\n' + about_html + '\n\n' + work_html + '\n\n' + projects_html
+
+
+def render_play_body(lately_md, photos):
+    """Play page body: intro + lately + photo gallery."""
+    intro_html = render_page_intro('during play, i do whatever i want.')
+    lately_html = (
+        '  <!-- LATELY -->\n'
+        '  <section class="lately-section">\n'
+        '    <h2 class="section-title"><span class="highlight">lately</span></h2>\n'
+        + render_lately(lately_md) + '\n'
+        + '  </section>'
+    )
+    gallery_html = render_gallery(photos)
+    parts = [intro_html, lately_html]
+    if gallery_html:
+        parts.append(gallery_html)
+    return '\n\n'.join(parts)
+
+
+def render_page(template, css, js, meta_html, footer_html, body_html, active_nav, depth=0):
+    """Assemble a full HTML page with shared nav/footer, inlined CSS/JS."""
+    # Navigation root path (relative)
+    nav_root = '../' * depth if depth > 0 else ''
+    # Asset path prefix
+    asset_prefix = '../' * depth if depth > 0 else ''
+
+    html = template
+    html = html.replace('{{meta}}', meta_html)
+    html = html.replace('{{body}}', body_html)
+    html = html.replace('{{footer}}', footer_html)
+
+    # Nav active states
+    html = html.replace('{{nav_root}}', nav_root)
+    html = html.replace('{{nav_work_active}}', 'active' if active_nav == 'work' else '')
+    html = html.replace('{{nav_play_active}}', 'active' if active_nav == 'play' else '')
+
+    # Fix asset paths for subpages
+    if asset_prefix:
+        html = html.replace('href="assets/', f'href="{asset_prefix}assets/')
+        html = html.replace('src="assets/', f'src="{asset_prefix}assets/')
+        html = html.replace('content="assets/', f'content="{asset_prefix}assets/')
+
+    # Inline minified CSS
+    html = html.replace(
+        '  <link rel="stylesheet" href="style.css">',
+        '  <style>\n' + minify_css(css) + '  </style>',
+    )
+
+    # Inline minified JS
+    html = html.replace(
+        '  <script src="script.js"></script>',
+        '  <script>\n' + minify_js(js) + '  </script>',
+    )
+
+    return html
+
+
 def minify_css(css):
     """Remove comments and collapse whitespace in CSS."""
     css = re.sub(r'/\*.*?\*/', '', css, flags=re.DOTALL)
@@ -413,33 +613,19 @@ def build():
     projects_md = read(CONTENT / 'projects.md')
     lately_md = read(CONTENT / 'lately.md')
     footer_md = read(CONTENT / 'footer.md')
+    work_md = read(CONTENT / 'work.md')
 
-    # Render content sections
+    # Shared pieces
     meta_html = render_meta(meta_md)
-    hero_html = render_hero(hero_md)
-    about_html = render_about(about_md)
-    projects_html = render_projects(projects_md)
-    footer_html = render_footer(footer_md, lately_md)
+    footer_html = render_footer(footer_md)
 
-    # Assemble page
-    html = template
-    html = html.replace('{{meta}}', meta_html)
-    html = html.replace('{{hero}}', hero_html)
-    html = html.replace('{{about}}', about_html)
-    html = html.replace('{{projects}}', projects_html)
-    html = html.replace('{{footer}}', footer_html)
+    # Fetch Glass.photo images
+    photos = fetch_glass_photos()
 
-    # Inline minified CSS
-    html = html.replace(
-        '  <link rel="stylesheet" href="style.css">',
-        '  <style>\n' + minify_css(css) + '  </style>',
-    )
-
-    # Inline minified JS
-    html = html.replace(
-        '  <script src="script.js"></script>',
-        '  <script>\n' + minify_js(js) + '  </script>',
-    )
+    # Page bodies
+    home_body = render_home_body(hero_md)
+    work_body = render_work_body(work_md, projects_md, about_md)
+    play_body = render_play_body(lately_md, photos)
 
     # Generate seasonal images
     month = datetime.now().month - 1  # 0-indexed
@@ -450,9 +636,21 @@ def build():
     except Exception as e:
         print(f'Warning: image generation failed ({e}), skipping.')
 
-    # Write output
+    # Build pages
+    pages = [
+        ('index.html', home_body, 'home', 0),
+        ('work/index.html', work_body, 'work', 1),
+        ('play/index.html', play_body, 'play', 1),
+    ]
+
     DIST.mkdir(exist_ok=True)
-    (DIST / 'index.html').write_text(html)
+
+    for path, body, active, depth in pages:
+        html = render_page(template, css, js, meta_html, footer_html, body, active, depth)
+        out = DIST / path
+        out.parent.mkdir(parents=True, exist_ok=True)
+        out.write_text(html)
+        print(f'Built dist/{path} ({len(html)} bytes)')
 
     # Copy assets
     assets_src = BASE / 'assets'
@@ -462,7 +660,7 @@ def build():
             shutil.rmtree(assets_dst)
         shutil.copytree(assets_src, assets_dst, ignore=shutil.ignore_patterns('README.md'))
 
-    print(f'Built dist/index.html ({len(html)} bytes) — og accent: {accent}')
+    print(f'Done — og accent: {accent}')
 
 
 if __name__ == '__main__':