shiny-migration

Introduction

The purpose of this document is to outline the system requirements for the "shiny-migration" project. This project involves migrating the existing WordPress website to a custom React.js implementation while maintaining the current design and functionality. The goal is to replicate the existing website exactly, without introducing any new features.

System Overview

The shiny-migration project aims to transition the current static WordPress website to a React.js framework. The website is static, with no user authentication features like signup or login. The primary interaction involves scrolling to specific sections on the landing page when buttons are clicked and viewing detailed records in modals on a dedicated legacy page.

Functional Requirements

• As a User, I should be able to navigate to specific sections on the landing page by clicking buttons in the hero section.
• As a User, I should be able to view all legacy records on a dedicated page by clicking "View All."
• As a User, I should be able to open detailed data in a modal by clicking on a particular legacy record.

User Personas

• Visitor: A general user who can navigate the website, view content, and interact with the legacy records.

Visuals Colors and Theme

• primary: #1A73E8 (a vibrant blue for brand identity)
• primary_light: #DDEEFF (a lighter blue for hover states and secondary UI elements)
• secondary: #FF6F61 (a coral hue for headlines and emphasis)
• accent: #FFC700 (a bright gold for call-to-action buttons and active states)
• highlight: #FFA500 (an orange hue for hover states and notifications)
• bg: #FAFAFA (a clean white for the page background)
• surface: rgba(240, 240, 240, 0.8) (a light grey for card/panel backgrounds)
• text: #202124 (a dark grey for primary text and headings)
• text_muted: #5F6368 (a softer grey for secondary text and labels)
• border: rgba(218, 220, 224, 0.2) (a subtle grey for borders)

Signature Design Concept

The homepage will feature an interactive "scroll-triggered panorama" concept. As users scroll, the background will transition through a series of panoramic images that represent different sections of the website. Each section will have a unique visual theme, and the transition between sections will be smooth and fluid, creating an immersive experience. The panorama will include subtle animations, such as moving clouds or shifting light, to enhance the visual appeal. Users can click on interactive elements within each panorama to learn more or navigate to specific content. This will be implemented using gsap for smooth scroll-triggered animations and transitions.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "parallax." This will create a layered depth effect as users scroll through the page. Decorative elements will move at different speeds to create a sense of depth, while the main content will scroll naturally. This approach is ideal for creating a visually rich first impression. Internal pages, such as the legacy records page, will use a "static" interaction model to prioritize layout clarity and ease of reading.

Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• The website should be responsive and function correctly on devices of various screen sizes, including desktops, tablets, and smartphones.
• The website should be accessible, adhering to WCAG 2.1 AA standards.

Tech Stack

• Frontend: React.js
• Backend: None required for static content
• Database: None required for static content
• Deployment: Docker for local orchestration, Kubernetes for server-side orchestration

Assumptions and Constraints

• The existing design and functionality will be replicated exactly in the new React.js implementation.
• No new features or functionalities will be introduced during the migration.
• The website will remain static, with no need for a backend server or database.

Glossary

• React.js: A JavaScript library for building user interfaces.
• Static Website: A website with fixed content that does not change unless manually updated.
• Modal: A dialog box/popup window that is displayed on top of the current page.
• Parallax: An effect where background images move slower than foreground images, creating a sense of depth.

This document serves as a comprehensive guide for the shiny-migration project, ensuring a seamless transition from WordPress to a custom React.js implementation while maintaining the existing user experience and design.