UI Overhaul & Design Philosophy

The user interface was completely redesigned with a modern, clean aesthetic. We adopted a mobile-first approach using Tailwind CSS, meaning styles are designed for small screens first and then scaled up for larger devices using responsive prefixes like `md:` and `lg:`. This ensures a flawless experience on any device. The design language emphasizes clarity and readability, with a vibrant color palette and professional typography ('Poppins' for headings, 'Inter' for body text) to create a visually engaging and consistent experience.

Folder Layout & URL Structure

To keep the project organized and scalable, we've implemented a logical folder structure. This makes it easy to add new content without cluttering the root directory. The `assets` folder serves as a central repository for all media, while the `topics` directory is designed to grow as new subjects are added.

v2/
├── index.html              (Homepage)
├── changelog.html          (Version history)
├── v3-details.html         (This page)
├── assets/
│   └── images/             (All site images)
└── topics/
    ├── biology/            (Biology section)
    │   └── biology.html
    ├── psychology/         (Psychology section)
    │   └── psychology.html
    └── science/            (General science section)
        ├── general-science.html
        └── astrobiology.html

This structure translates directly to our URLs (e.g., `/topics/science/astrobiology.html`), keeping them clean, predictable, and SEO-friendly.

Code & Dependencies

The site is built with pure HTML, CSS, and vanilla JavaScript. We deliberately avoided complex frameworks like React or Vue because they would be overkill for a content-focused static site. This choice results in faster performance, easier maintenance, and no required build steps. All external libraries—Tailwind CSS, FontAwesome, and Google Fonts—are loaded via a Content Delivery Network (CDN). This ensures users download these files from a server near them, and if they've visited another site using the same resource, it may already be cached in their browser, leading to near-instant load times.

Interactivity with JavaScript

Vanilla JavaScript brings the site to life. Our script logic is organized into several initialization functions:

• initMobileMenu(): Toggles the visibility of the mobile navigation menu when the hamburger icon is clicked.
• initThemeToggle(): Switches between `light` and `dark` classes on the `` element and saves the user's preference in `localStorage`.
• initFadeInObserver(): Uses the modern `IntersectionObserver` API to trigger subtle fade-in animations on sections as they enter the viewport.
• Notification Scripts: Custom functions manage the display and dismissal of banners, also using `localStorage` to avoid repeatedly showing them to the same user.

Streamlined Navigation

The navigation is designed to be intuitive. The homepage features a full navigation bar with smooth-scrolling links for a single-page feel. Sub-pages adopt a more focused header with a clear "Back" link. This design choice follows established UX principles, reducing cognitive load on the user and making it easy to understand their location within the site's hierarchy.

Accessibility Commitment

Building an inclusive web is crucial. We've incorporated several accessibility (a11y) best practices:

• Semantic HTML: Using tags like `
  `, `
• Screen Reader Text: Elements like the close button on notifications include `` text, which is hidden visually but read aloud by screen readers.
• Keyboard Navigation: All interactive elements, like links and buttons, are fully accessible using the keyboard.
• Color Contrast: The chosen color palette ensures that text is easily readable against its background, meeting WCAG guidelines.

Performance & SEO

A fast and easily discoverable site provides the best user experience. Our strategy includes:

• Fast Load Times: By avoiding heavy frameworks and loading assets from a CDN, we minimize the amount of data a user needs to download, resulting in very fast page loads.
• SEO-Friendly URLs: The clean, descriptive URLs from our folder structure are easy for search engines to crawl and understand.
• Semantic Markup: Using proper heading tags (`

  `, `

  `, etc.) and semantic HTML helps search engines understand the content hierarchy and importance of different sections.

• Meta Tags: Each page has a unique `