Sitegeist

Retro Website Builder utilizing modern tech to render Retro aesthetic. SITEGEIST: The Future Of Retro

Comment

Inspiration

Our inspiration for Sitegeist came from a deep-seated nostalgia for the early internet (And out of nowhere) a time of wild, unconstrained creativity before the web became standardized and templated. I missed the vibrant, chaotic, and deeply personal homepages of platforms like GeoCities and the quirky, experimental designs of the dial-up era, since you jyst don't see those anymore. I wanted to build a tool that not only pays homage to that Creative Nostalgic Freedom but also empowers a new generation of creators to experience the joy of building something uniquely their own, pixel by pixel, without being constrained by modern minimalist design trends.

What it does

Sitegeist is a "what-you-see-is-what-you-get" (WYSIWYG) retro website builder that allows users to create fully functional, standalone static websites inspired by different eras of internet history. Its key features include:

The Time Machine: Users can instantly switch between distinct internet "Eras" (like 1980s BBS, Late '90s GeoCities, or 2005 Web 2.0). Each Era has its own authentic UI theme, color palette, fonts, and a unique set of themed components.

Structured & Creative Modes: Users can build on a completely blank canvas in "Creative Mode" for total freedom, or use "Structured Mode" with pre-defined layouts (Header, Body, Footer) to guide their design process.

GeoBot AI Assistant: An integrated AI chatbot that changes its personality to match the selected Era. It provides era-specific design advice, content ideas, random knowledge and can even be hooked up to ElevenLabs TTS for a voice experience, all powered by user-provided API keys currently.

Rich Component Library: A drag-and-drop palette filled with classic components like marquees, hit counters, under-construction blocks, UNLIMITED GIFS, and era-aware components that automatically adapt their styling to the selected theme.

Static Site Export: The final and most crucial feature. Sitegeist exports the user's creation into a clean, self-contained ZIP file with a single index.html, ready to be hosted on any web server without backend dependencies or frameworks.

How I built it

Sitegeist was built as a modern web application using a React frontend with TypeScript for type safety.

State Management: The core of the builder is powered by a custom React hook, useBuilder.ts, which manages the entire application state—including the list of components, canvas settings, selected era, and undo/redo history - in a single, centralized state object.

UI Components: I meticulously crafted each UI panel—the ComponentPalette, PropertyPanel, LayerPanel, and various modals like the ExportDialog and TemplateLibrary - as individual React components.

Styling: I used Tailwind CSS for utility-first styling. The dynamic "Time Machine" theming was achieved by using CSS Custom Properties in index.css, which are redefined based on the active .era-theme-* class on the main app container.

Export Functionality: The export logic, contained in exportUtils.ts, dynamically generates a static HTML string by mapping over the component state. It translates each React component's props and style data into inline CSS and standard HTML tags. I implemented logic to handle different build modes and built a system to provide static, interactive representations of dynamic components.

Challenges I ran into

Layout & Scaling: Our most persistent challenge was a layout bug where the application would "stretch" or lock up when certain UI elements were expanded. This was caused by a complex interaction between nested Flexbox containers and a global CSS transform: scale() property. The definitive solution was to refactor the main application layout in App.tsx to use position: absolute for the scaled container, which isolated it from the document flow and prevented it from stretching the viewport.

Component Styling & Refactoring: I initially had styles hardcoded within each component. This led to issues where components wouldn't respect theme changes or property panel overrides. I had to refactor all "Era" components (like EraNavigation and EraTextBlock) to be purely "data-driven"—removing their internal style logic and having them derive their appearance from a central eraConfigs theme object.

Static Site Export: Translating a dynamic React application state into a functional, static HTML file was a major hurdle. I had to create a "translator" (generateComponentHTML) that could accurately convert each component's properties into inline styles and create usable, static versions of interactive elements like marquees and hit counters.

Accomplishments that we're proud of

The Time Machine Theming System: The ability to instantly reskin the entire application and have all components intelligently adapt to a new "Era" is our standout feature. It works reliably and truly captures the essence of each retro theme.

The Robust Export Engine: Building a system that can take a complex, zoned or freeform layout and translate it into a clean, self-contained, and interactive static index.html file is a significant technical achievement.

Solving the Layout Bug: Overcoming the frustrating "app stretch" bug required a deep understanding of browser rendering, CSS positioning, and layout containment. Finding the final, robust solution was a major breakthrough that made the app stable and usable.

The GeoBot AI: Integrating a thematically-aware AI assistant that can be configured by the user adds a layer of fun and utility that makes Sitegeist more than just a builder—it makes it a creative partner.

What I learned

The Importance of a Single Source of Truth: Many of our bugs were caused by having conflicting sources of truth—hardcoded styles in one component and a theme object in another. Refactoring to have a single, central theme config (eraConfigs) and a single application state (useBuilder) was crucial for stability.

CSS Layout Nuances: I learned firsthand how modern CSS features like Flexbox, Grid, and transform can interact in unexpected ways. A seemingly perfect layout can fail under the influence of a parent's transform, reinforcing the need to understand the browser's rendering engine.

The Frontend-to-Static Gap: I gained a deep appreciation for the challenge of translating a dynamic application into a static artifact. It requires careful planning to ensure not just the look, but also the feel and functionality of the original components are preserved.

What's next for Sitegeist

Sitegeist is a living love letter to the old web, and it's far from finished. Our next steps are focused on enhancing the user's creative power and the utility of the final exported product.

Asset Curation and "Total Retro Vibe" Integration and just further integration of Archive.org and other sources for 'true authenticity'

More Eras & Components, more Entities: I want to expand the Time Machine! I plan to add more eras, components and AI personalities.

Advanced AI Features: I plan to upgrade the GeoBot AI's "Pro" tier to allow it to generate entire page sections or suggest layout improvements based on the components already on the canvas, as well as further AI integration and execution of site design

Custom CSS & JS Injection/Easy Web Templates: To give power users ultimate freedom, I plan to add a feature allowing them to write and inject their own custom CSS and JavaScript directly into their exported site. It would be nice to have Retro elements living in harmony with modern websites, in my humble opinion.

Some Statements were written by AI, but I approve of their messaging. - Tim Walsh

Built With

Share this project:

Updates