Site Theming Research

Introduction

This research document provides an in-depth analysis of the theming system used across the Johnsen AI website. The site features a unique dual-theme approach with a "Ghibli Mode" and "Real Mode" toggle, allowing users to switch between a whimsical, Studio Ghibli-inspired aesthetic and a more professional, modern appearance.

The research explores the technical implementation of the theme system, how it maintains consistency across different pages, and the structure of the website's codebase.

🎨

Dual-Theme System

Switch between whimsical Ghibli-inspired design and professional modern aesthetic

💾

Persistent Preferences

User theme choices are saved across sessions using localStorage

📱

Responsive Design

Mobile-first approach that adapts to all screen sizes

Site Structure Overview

Directory Organization

The Johnsen AI website follows a clean, modular organization pattern with clear separation of concerns:

/
├── index.html           # Main landing page
├── apps/                # Application pages
│   ├── apps.html        # Apps directory index
│   ├── coffeeapp.html   # Coffee Journal app
│   ├── disc-app.html    # Disc Tracker app
│   ├── datacenterapp.html # Data Center app
│   ├── strongapp.html   # I Am Very Strong app
│   ├── sunlightapp.html # Sunlight app
│   ├── teatimeapp.html  # Tea Time app
│   └── ...
├── games/               # Game projects
│   ├── games.html
│   └── ...
├── research/            # Research projects
│   ├── research.html
│   ├── site-theming.html
│   ├── hello-local-about.html
│   ├── hellolocal.html
│   ├── homelab.html
│   └── ...
├── assets/              # Shared resources
│   ├── css/             # Stylesheets
│   ├── js/              # JavaScript files
│   └── images/          # Image assets
├── pwa/                 # Progressive Web App support
│   ├── manifest.json
│   └── sw.js            # Service worker
└── scripts/             # PowerShell utility scripts

File Naming Conventions

The Johnsen AI website follows consistent naming conventions for all files and assets:

# HTML Files
- Use lowercase with hyphens for multi-word filenames (e.g., disc-app.html)
- App pages use the app name followed by "app" (e.g., coffeeapp.html, strongapp.html)

# CSS Files
- Component-specific CSS uses kebab-case (e.g., jai-card.css, header.css)
- Global styles use descriptive names (e.g., styles.css)

# JavaScript Files
- Feature-specific JS files use kebab-case (e.g., theme-toggle.js, data-center.js)

# Image Assets
- All image assets use kebab-case with descriptive names (e.g., coffee-journal.webp)
- Ghibli-style images use descriptive names (e.g., tea-time.webp, disc-tracker.webp)
- Real-mode images use the app name followed by "-banner" (e.g., coffee-app-banner.svg)
- No spaces in filenames - always use hyphens for word separation

Page Types

Apps: Utility web applications like Coffee Timer, Disc App, Strong App, etc.
Games: Interactive games and entertainment projects
Research: Experimental projects and research demonstrations like Hello Local Framework

File Naming Convention

All HTML files follow a consistent naming convention using kebab-case (hyphenated lowercase):

Multi-word filenames: Words are separated by hyphens for better readability (e.g., coffee-app.html, tea-time-app.html)
Single-word filenames: Remain as simple lowercase (e.g., index.html, apps.html)
Benefits: Improves URL readability, SEO-friendly, and maintains consistency across the project

Common Header

Every page includes a standardized header for consistent navigation and branding:

Structure: Logo + Site Name + Page Title, with responsive design for all screen sizes
Implementation: Uses header.css for styling and may include header.js for interactive elements
Accessibility: Includes skip-to-content link and proper semantic HTML structure

Navigation Structure

Each section has its own landing page that displays cards for the various projects within that category. These landing pages (projects.html, games.html, research.html) use a consistent card-based layout that works with both theme modes.

CSS Organization

Global Styles

The site uses a combination of global styles and page-specific styles:

styles.css: Base styles, variables, and common components
apps.css: Shared styles for application pages
home.css: Styles specific to the homepage
projects.css: Styles for project listing pages
Page-specific CSS: Some pages have their own dedicated stylesheets

CSS Variables

The site uses CSS variables (custom properties) for consistent theming:

                    :root {
                        /* Colors */
                        --primary-color: #4a6fa5;
                        --primary-light: #6b8cb5;
                        --primary-dark: #385580;
                        --text-color: #333;
                        --text-light: #666;
                        --background-color: #f8f9fa;
                        --card-color: #ffffff;
                        --border-color: rgba(0, 0, 0, 0.1);
                        
                        /* Spacing */
                        --spacing-xs: 4px;
                        --spacing-sm: 8px;
                        --spacing-md: 16px;
                        --spacing-lg: 24px;
                        --spacing-xl: 32px;
                        
                        /* Other */
                        --border-radius: 12px;
                        --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    }
                

Responsive Design

The site follows mobile-first responsive design principles with media queries for different screen sizes:

                    /* Base styles for mobile first */
                    .container {
                        padding: 16px;
                    }
                    
                    /* Tablet */
                    @media (min-width: 768px) {
                        .container {
                            padding: 24px;
                            max-width: 768px;
                            margin: 0 auto;
                        }
                    }
                    
                    /* Desktop */
                    @media (min-width: 1024px) {
                        .container {
                            max-width: 960px;
                        }
                    }
                

Ghibli Theme System

The Johnsen AI website features a unique theming system that allows users to switch between two distinct visual styles: a whimsical "Ghibli Mode" inspired by Studio Ghibli animations, and a more professional "Real Mode" with modern design aesthetics.

This dual-theme approach not only provides visual variety but also demonstrates how a website can maintain consistent functionality while offering completely different aesthetic experiences.

🌳

Ghibli Mode

Whimsical, hand-drawn aesthetic

⟷

🏢

Real Mode

Professional, modern aesthetic

Theme Toggle Implementation

The theme toggle is implemented in theme-toggle.js. It provides a switch between "Ghibli Mode" (the default) and "Real Mode":

Current Mode: Ghibli Mode

Core Functionality

💾

Theme Storage

User preference is stored in localStorage as "johnsenAI-themeMode"

localStorage.setItem('johnsenAI-themeMode', mode);

🔄

Toggle Button

A visual slider indicates the current theme with animated transitions

toggleSlider.style.transform = 'translateX(33px)';

🎨

Theme Application

Theme-specific styles and images are applied based on the selected mode

updateImages(currentMode);

Code Structure

The theming system is primarily handled by theme-toggle.js, which:

Checks localStorage for saved theme preference
Updates the toggle appearance based on the current mode
Swaps images and applies CSS styles based on the selected theme
Handles toggle button click events and updates localStorage

                            // Core theme toggle functionality
                            toggleBtn.addEventListener('click', function() {
                                currentMode = currentMode === 'ghibli' ? 'real' : 'ghibli';
                                
                                // Save preference to localStorage
                                localStorage.setItem('johnsenAI-themeMode', currentMode);
                                
                                // Update UI
                                updateUI(currentMode);
                            });
                        

Image Swapping

One of the most visible aspects of the theme system is the automatic swapping of images between Ghibli-style illustrations and vector graphics:

Ghibli Mode

Features hand-drawn, Studio Ghibli-inspired artwork with forest scenes and whimsical illustrations.

Real Mode

Uses clean, professional vector graphics with a modern, minimalist aesthetic.

This is handled programmatically in the updateImages() function, which updates image sources based on the current theme and page:

                            // Example of image swapping code
                            function updateImages(mode) {
                                if (isProjectsPage) {
                                    const projectImages = {
                                        coffee: {
                                            element: document.querySelector('.coffee-app-image'),
                                            ghibli: '../assets/images/backgrounds/coffee-journal.webp',
                                            real: '../assets/images/app-banners/js-refs/coffee-app-banner.svg'
                                        },
                                        dataCenter: {
                                            element: document.querySelector('.data-center-image'),
                                            ghibli: '../assets/images/backgrounds/data-center.webp',
                                            real: '../assets/images/app-banners/js-refs/datacenter-banner.svg'
                                        },
                                        disc: {
                                            element: document.querySelector('.disc-app-image'),
                                            ghibli: '../assets/images/backgrounds/disc-tracker.webp',
                                            real: '../assets/images/app-banners/js-refs/disc-app-banner.svg'
                                        },
                                        strong: {
                                            element: document.querySelector('.strong-app-image'),
                                            ghibli: '../assets/images/backgrounds/i-am-very-strong.webp',
                                            real: '../assets/images/app-banners/js-refs/strong-app-banner.svg'
                                        },
                                        sunlight: {
                                            element: document.querySelector('.sunlight-app-image'),
                                            ghibli: '../assets/images/backgrounds/sunlight.webp',
                                            real: '../assets/images/app-banners/js-refs/sunlight-app-banner.svg'
                                        },
                                        tea: {
                                            element: document.querySelector('.tea-app-image'),
                                            ghibli: '../assets/images/backgrounds/tea-time.webp',
                                            real: '../assets/images/app-banners/js-refs/tea-app-banner.svg'
                                        }
                                    };
                                    
                                    Object.values(projectImages).forEach(project => {
                                        if (project.element) {
                                            project.element.src = mode === 'ghibli' ? project.ghibli : project.real;
                                        }
                                    });
                                }
                            }
                        

Theme Switching Flow

1

User Clicks Toggle

The theme toggle button is clicked

↓

2

Update Mode Variable

currentMode is switched between 'ghibli' and 'real'

↓

3

Save Preference

New preference is saved to localStorage

↓

4

Update UI

Toggle appearance and page images are updated

JAI Card System

To ensure visual consistency across the site, we implemented a unified JAI (Johnsen AI) card system that standardizes the appearance and behavior of all card-based components.

Key Files

assets/css/jai-card.css - Core card styles and layout
apps/apps.html - Example implementation for apps page
research/research.html - Example implementation for research page
games/games.html - Example implementation for games page

Card Components

/* Container for cards */
.jai-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual card */
.jai-card {
    position: relative;
    height: 380px;
    background: var(--card-color);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease;
}

/* Card components */
.jai-image { ... }     /* Card image container */
.jai-content { ... }   /* Card content area */
.jai-title { ... }     /* Card title */
.jai-description { ... } /* Card description */
.jai-link { ... }      /* Card action link */

Benefits

Consistency: Unified appearance across all card-based pages
Maintainability: Single source of truth for card styles
Responsive: Adapts to different screen sizes
Themeable: Uses CSS variables for easy theme switching
Accessible: Built with proper ARIA labels and semantic HTML

The JAI card system is a core component of our design system, ensuring that all project cards, whether they're apps, research papers, or games, have a consistent and professional appearance while maintaining the unique character of each section.

Conclusion

The Johnsen AI website demonstrates thoughtful design and engineering practices through its dual-theme system and modular organization. The Ghibli/Real mode toggle provides a unique user experience while maintaining functionality and usability.

These approaches align with modern web development best practices, emphasizing:

User-centered design
Persistent user preferences
Responsive layouts
Progressive enhancement
Modular code organization

Table of Contents

Introduction

Dual-Theme System

Persistent Preferences

Responsive Design

Site Structure Overview

Directory Organization

File Naming Conventions

Page Types

File Naming Convention

Common Header

Navigation Structure

CSS Organization

Global Styles

CSS Variables

Responsive Design

Ghibli Theme System

Ghibli Mode

Real Mode

Theme Toggle Implementation

Core Functionality

Theme Storage

Toggle Button

Theme Application

Code Structure

Image Swapping

Ghibli Mode

Real Mode

Theme Switching Flow

User Clicks Toggle

Update Mode Variable

Save Preference

Update UI

JAI Card System

Key Files

Card Components

Benefits

Conclusion