The Foundation Layer - Microsite

A clean, minimalist microsite for the AI safety essay "The Foundation Layer: Philanthropic strategy for the AGI transition" by Tyler John.

Design Philosophy

The site is inspired by Situational Awareness and Gradual Disempowerment, featuring:

• Clean, text-focused design with generous white space
• Horizontal navigation on desktop with mobile-friendly hamburger menu
• Pull quotes for emphasis (including prominent Geoffrey Hinton quote)
• Interactive embeds for AI demos (HuggingFace, CivAI)
• Serif typography (Crimson Pro) for body text, sans-serif (Inter) for UI
• Cream/white color scheme with minimal accents

Current Status

✅ Completed

• Core HTML/CSS/JS structure
• Responsive navigation (horizontal desktop, hamburger mobile)
• Pull-quote styling with special emphasis for Hinton quote
• Interactive demo iframes for:
  • GPT-2 transformer autocomplete (HuggingFace)
  • CivAI cyber security demos
• Section-based navigation with URL hash routing
• Mobile-responsive design

🚧 To Do

1. Populate content sections - Currently only Introduction is filled. Need to add:

   • The Opportunity Right Now
   • Section I: Exponential Trend to Superintelligence
   • Section II: Civilization-scale Threats
   • Section III: The Philanthropic Solution
   • Appendix: Impact Investing
   • Appendix: AI Explainer (technical content from second appendix)

2. Add images and videos - The essay mentions:

   • Graphics/charts for AI progress trends
   • Neural network diagrams
   • Benchmark visualizations
   • Potentially embedded videos

3. Additional interactive demos - May want to add more embedded examples

4. Fine-tune styling - Adjust spacing, typography, pull-quote placement

File Structure

foundation-layer/
├── index.html          # Main HTML with all sections
├── styles.css          # All styling
├── script.js           # Navigation and interactivity
└── README.md           # This file

How to Use

Local Development

Simply open index.html in a web browser. No build process required.

Deployment to foundation-layer.ai

Option 1: Simple Static Hosting Upload all files to your web host via FTP/SFTP:

• index.html
• styles.css
• script.js
• (+ any images/videos you add)

Option 2: GitHub Pages

1. Create a GitHub repository
2. Push these files to the repo
3. Enable GitHub Pages in Settings
4. Point your domain foundation-layer.ai to GitHub Pages

Option 3: Netlify/Vercel

1. Create account on Netlify or Vercel
2. Drag-and-drop the foundation-layer folder
3. Connect your custom domain

Content Population

The essay content is available in the extracted text files:

• essay_main.txt - Main essay content
• essay_appendix1.txt - Impact Investing appendix
• essay_appendix2.txt - AI Technical Explainer appendix

To populate the remaining sections, copy the relevant text from these files into the appropriate <section> elements in index.html.

Embedded Demos

Current embedded demos:

1. GPT-2 Autocomplete - https://banana-projects-transformer-autocomplete.hf.space/doc/gpt2-large
2. CivAI Cyber Demos - https://civai.org/cyber-demos

These are embedded as iframes. If the embeds don't work (CORS issues, iframe blocking), we can:

• Link to them instead of embedding
• Find alternative demos
• Create custom embedded widgets

Mobile Navigation

On mobile devices (≤768px):

• Horizontal navigation converts to hamburger menu
• Tap the menu icon to reveal navigation links
• Tap a section to navigate and auto-close menu
• Pull-quotes are reformatted for smaller screens

Browser Support

Tested in modern browsers:

• Chrome/Edge (Chromium)
• Safari
• Firefox

Uses standard web technologies:

• CSS Grid/Flexbox
• Intersection Observer API (for iframe lazy loading)
• CSS Custom Properties (variables)

Next Steps

1. Review the site - Open index.html and check the design/layout
2. Populate remaining sections - Copy content from the .docx files
3. Add images - Create or source charts, diagrams, and visuals
4. Test embeds - Verify the iframe embeds work correctly
5. Deploy - Upload to foundation-layer.ai

Questions?

The site is ready for content population. The structure, styling, and navigation are all in place. Let me know if you'd like any design adjustments or have questions about deploying to foundation-layer.ai!