🚀 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
- css3
- es6)
- giphy
- github
- html2canvas
- html5
- javascript
- jszip
Log in or sign up for Devpost to join the conversation.