Lumiee Web Studio
A full-featured agency website with multi-page structure, account system, light/dark mode, and integrated AI chat — built entirely from scratch
A full-featured agency website with multi-page structure, account system, light/dark mode, and integrated AI chat — built entirely from scratch
Lumiee Web Studio is the official agency website for my web development and product design business. It serves as a client acquisition platform, showcasing services, portfolio work, pricing, and providing multiple ways to get in touch or book a call. Built entirely from scratch without any page builders, the site functions as a multi-page single-file web application with client-facing account management, light/dark mode, a consultation booking form, an AI chat placeholder, and live WhatsApp integration.
Building a full agency website from scratch — that works as both a marketing site and a client portal — presented significant complexity:
I designed and engineered the entire site — brand, UI, and functionality — as a single cohesive HTML file:
go() function — no React or Vue neededlocalStorage and a CSS variable systemFrom brand identity to a fully functional agency platform
1. Brand Identity: Defined the visual language first — a dark, high-contrast aesthetic with a signature three-colour gradient (pink → purple → blue). Chose Playfair Display for display headings, DM Sans for body copy, and Space Mono for labels and tags. The result is a brand that feels premium and technical without being cold.
2. Information Architecture: Mapped out all eight pages and their relationships. The homepage is structured to guide visitors through a clear journey: what we do → who we are → our stack → our process → portfolio highlights → blog → CTA. Inner service pages (Web Dev, Product Design, SEO) each have their own pricing grid in both NGN and USD.
3. Component Design: Designed reusable components in Figma — cards, pricing tiers, marquee tickers, dropdown menus, floating buttons, and the account popup — before writing any code. This meant the HTML remained clean and each component had a clear visual brief to build against.
4. SPA Architecture: Implemented a lightweight page-switching system using a go(id) JavaScript function that toggles display:none/block and triggers a CSS fade-up animation. All pages live in one HTML file, meaning fast transitions and zero page reloads — similar in feel to a React SPA but with zero dependencies.
5. Interactivity & Polish: Built the portfolio scroll-preview (hover to auto-scroll tall screenshots), filter buttons with data attributes, FAQ accordion, currency toggle, mobile hamburger drawer, and a full AI chat UI shell — all in vanilla JavaScript. Hover animations use CSS keyframe gradient sweeps for depth without performance cost.
Full light and dark theme implemented via CSS custom properties. The user's preference is saved to localStorage and restored on every visit — no flash of wrong theme.
Home, About, Web Dev/Pricing, Product Design, SEO, Portfolio, Blog, Consultation, and Contact all live in a single HTML file, switching instantly via a custom JS routing function with fade-up animations.
All pricing pages include a currency toggle button that instantly switches between Nigerian Naira and US Dollar pricing, making the site usable for both local and international clients.
Portfolio cards display tall website screenshots that auto-scroll from top to bottom on hover, letting visitors see the full page design without leaving the portfolio grid.
A fully structured booking form with name, email, phone, preferred contact method, date/time, session duration, and project brief — giving the studio everything needed to prepare for a call.
A floating AI chat button opens a popup UI shell ready for API integration. A WhatsApp button links directly to the studio's number, both accessible from every page of the site.
Lumiee Web Studio is the most technically complex project in this portfolio, and the most strategically important. It exists not just as a portfolio piece but as the primary client acquisition tool for the business. Every section was written with a real client in mind: the service pages address the most common questions before they're asked, the pricing pages remove friction from the buying decision, and the multiple contact options (form, WhatsApp, consultation booking) make it easy for anyone to reach out in their preferred way.
Building the entire site without a framework proved that strong architecture decisions and clean CSS variable systems can produce a maintainable, extensible codebase that performs just as well as a React app, with a far smaller footprint. The CSS variable system makes theming and updates trivial across all eight pages.
The project also demonstrated the value of designing before coding. Sketching all components in Figma first meant zero time wasted making design decisions during development — every component had a clear brief, and the final result matched the intended brand vision precisely.
Explore the full agency site — all eight pages, light/dark mode, and the complete booking flow