67 Pages Rebuilt — How AI Transformed dajai.io Overnight

Before and After

Yesterday, dajai.io was 67 pages of text on dark backgrounds. Functional. Clean. But flat. Today, every single page has photos, animations, floating particles, parallax scrolling, and cinematic hero sections. The entire site was rebuilt in one session using Claude AI agents working in parallel.

This is not a redesign that took a studio six weeks and cost $15,000. This is what happens when an independent artist has access to AI agents that can read, write, and deploy code at the speed of thought.

The Image Pipeline

The biggest challenge was not the code — it was the images. I had 95 archive photos sitting in various folders, totaling 1.7 gigabytes. Raw photos from shoots, album artwork, behind-the-scenes images, promo shots spanning years of work. None of them were web-ready.

The AI pipeline handled the entire optimization process. Each image was analyzed for content, resized to appropriate dimensions for its placement on the site, compressed to web-optimized formats, and given descriptive filenames for SEO. The result: 1.7GB became 24MB. A 98.6% reduction in file size with no visible quality loss at the display sizes used on the site.

On top of those 95 optimized archive images, an additional 282 assets were generated or sourced — icons, background textures, gradient overlays, and UI elements. Total assets deployed: 377.

The Tech Stack

Every enhancement was built with vanilla JavaScript and CSS. No frameworks, no build tools, no dependencies that could break. Here is what powers the visual layer:

• IntersectionObserver — Elements animate into view as you scroll. No scroll event listeners burning CPU. The browser's native API handles visibility detection efficiently.
• CSS animations — Floating particles, breathing orbs, gradient shifts, and glow effects are all CSS-driven. Hardware-accelerated, no JavaScript animation loops.
• createElement — Every dynamic element is built using document.createElement(). Zero innerHTML assignments anywhere on the site. This is a security decision — innerHTML is an XSS vector. createElement is safe by default.
• Parallax scrolling — Subtle depth effects on hero sections using CSS transforms triggered by scroll position. Lightweight, no parallax libraries.
• Lazy loading — Images load only when they enter the viewport. On a 67-page site with 377 images, this is the difference between a 3-second load and a 30-second load.

Security-First Development

When AI writes your code, security is not optional. Every page was built with a strict rule: no innerHTML. This matters because innerHTML takes a string and parses it as HTML, which means any user-controlled data that ends up in that string can execute arbitrary JavaScript. It is the most common XSS vulnerability on the web.

Using createElement and textContent instead means the browser never parses dynamic content as HTML. Text stays text. Elements are created through the DOM API. There is no injection point. This is a pattern that most hand-coded sites do not follow because innerHTML is faster to write. But when AI is writing the code, there is no reason to take shortcuts.

What Changed on Each Page

The rebuild was not just adding images. Each page type received a specific treatment:

• Album pages — Full-bleed hero images, track listings with hover effects, embedded streaming links, animated waveform decorations
• Single pages — Artwork-forward design with gradient backgrounds pulled from the single's color palette
• Blog posts — Reading-optimized typography, ambient background orbs, glass-morphism stat boxes
• The music player — Apple Music-style interface loading all 1,585 SoundCloud tracks with search, filter, and queue management
• The DARK Library hub — Interactive map of the series with connections between albums showing their philosophical relationships

Performance

Adding 377 images to a site usually destroys performance. The key decisions that kept the site fast:

The site loads fast on mobile because there is nothing unnecessary. No React, no Vue, no Next.js on the static pages. Just HTML, CSS, and vanilla JavaScript. The browser does what browsers are built to do — render documents.

What This Means for Independent Artists

A professional website redesign typically costs $5,000 to $25,000 and takes 4 to 8 weeks. I rebuilt 67 pages in one session for $0 in additional costs. The AI agents are subscription-based, and I was already paying for them to handle music production, content creation, and infrastructure management.

This is the advantage of building your own AI infrastructure. The same tools that master my music, manage my content calendar, and monitor my network also rebuild my website. Every capability compounds. The website rebuild was a side effect of having the right tools already running.

If you are an independent artist still paying a web designer to update your site, the game has changed. AI can do in hours what used to take weeks. The only requirement is understanding what you want — the execution is handled.