🚀 Project Story – RetroWeb Builder: GeoCities 2.0 ✨ Inspiration I’ve always been fascinated by the charm of the early internet—sparkling cursors, marquee text, rainbow dividers, and the iconic "Under Construction" signs. While exploring old archives of GeoCities and Web 1.0 aesthetics, I thought: What if we could bring it back—but smarter? That’s when the idea hit me: an AI-powered drag-and-drop retro website builder that lets anyone recreate that vintage vibe effortlessly—no coding skills needed.

🧠 What I Learned This project helped me explore and integrate:

DOM manipulation and dynamic element creation in JavaScript

GIPHY API integration for real-time GIF search

Natural Language Understanding for AI prompts

Exporting live content to ZIP and HTML/CSS

Making canvas elements draggable and resizable

Client-side rendering, event handling, and accessibility considerations

🛠️ How I Built It The project is built using:

HTML, CSS, JavaScript (Vanilla, no frameworks)

JSZip – to export the site as a ZIP file

html2canvas – to capture a screenshot

GIPHY API – for real-time GIF search and insertion

Google Fonts – for retro typography

AI Prompt Parser – understands simple English commands like

“Add a fire gif at bottom” or “Change theme to dark and add text”

Main Features:

Drag-and-drop retro elements like text, gifs, counters, marquees

Smart AI assistant for natural-language UI control

Export full site as .zip with HTML and CSS

Built-in screenshot tool

Mobile responsive retro themes (Neon, Classic, Dark)

😅 Challenges Faced Making draggable elements resizable without third-party libraries

Ensuring exported HTML works standalone without breaking layout

Handling malformed user prompts gracefully in the AI assistant

Debugging cross-browser GIF preview and sizing issues

Keeping the UI intuitive while still offering creative flexibility

🌈 What Makes It Unique? Most site builders are modern, professional, and minimal. This one celebrates chaos and creativity—inspired by 90s internet culture.

The AI prompt interpreter adds a layer of fun and accessibility, letting users speak in natural language.

Combines nostalgia, humor, and smart interactivity in one experience.

📦 Try It Out Anyone—regardless of tech skills—can create a weird, fun, nostalgic webpage in minutes. Perfect for portfolios, meme sites, or just for fun!

Built With

Share this project:

Updates