Introduction

The website template implementation for the MotionInput project is built on a stack of modern web development technologies and practices that provide a robust and maintainable structure.

Technologies, Frameworks, Plugins, Libraries Used

• React.js: The core of the website template is React, a JavaScript library for building user interfaces. React's component-based architecture ensures reusability and modularity, allowing components to be encapsulated with their own state and logic, promoting maintainability and scalability.
• SCSS: Used for styling, an extension of CSS, provides advanced features for writing cleaner and more maintainable styles. The styling is responsive, ensuring the website is accessible and aesthetically pleasing on a variety of devices and screen sizes.

Project Configuration

The project is configured to compile into static files, with index.html serving as the entry point. This setup aligns with the client's requirement for easy hosting, allowing the generated website to be served efficiently from any static web hosting service.

Navigation and Routing

The website uses HashRouter from the react-router-dom package to manage client-side routing:

          <HashRouter>
            <Routes>
              <Route path='/' element={<Home />} />
              <Route path='/video' element={<Video />} />
              <Route path='/faq' element={<Faq />} />
              <Route path='/manual' element={<Manual />} />
              <Route path='*' element={<h1>404 Page not found</h1>} />
            </Routes>
          </HashRouter>          
        

Each subpage is implemented as a React component and is stored in the pages/ directory (Home.js, Video.js, Faq.js, Manual.js). HashRouter was chosen specifically to ensure compatibility with the static file structure.

Content Management System

The content displayed on the website is managed using JSON files located in src/pageContent. Images are stored in src/pageContent/img, with their filenames referenced within the JSON files. All content is dynamically loaded and passed as props to React components.

Section-based Website Structure

The website is divided into distinct sections, each implemented as a separate React component. Data for each section is passed as props to ensure a clean and consistent structure. Here's how an About section is defined in About.js:

          import s from './About.module.scss'
          import SvgBackground from './SvgBackground' // Import the SVG component
          import TypewriterText from './TypewriterText'
          import 'animate.css'
          
          export default function About({ header, text, svgColor = '#25344E' }) {
            return (
              <section id='about' className={s.about}>
                <div className={s.container}>
                  <div className='animate__animated animate__backInLeft '>
                    <h2 className={s.header}>{header}</h2>
                  </div>
          
                  <p className={s.text}>
                    <TypewriterText text={text} />
                  </p>
                </div>
                <div className={s.svgContainer}>
                  <SvgBackground color={svgColor} />
                </div>
              </section>
            )
          }
        

And here's an example of calling About with props from Home.js:

          <About
            header={content.aboutSection.header}
            text={content.aboutSection.text}
          />
        

Component Organisation

Components are organised within the components/ directory, following clear naming conventions that link related files, like About.js and About.module.scss, which are stored in components/home/about. This organization enhances readability and supports a clean separation of concerns.

Shared components that are reused across multiple pages, such as the navigation bar, are stored in components/shared/, making the codebase easier to maintain.

Use of Third-Party Libraries

In the construction of the website template, we integrated several third-party libraries to enrich the user experience with advanced features while ensuring developer convenience. We have used to following pre-made components:

• Typewriter Animation: For the typewriter effect seen in text elements, we incorporated a library that simulates the classic typing animation, adding a dynamic, engaging quality to text presentation.
• Image Gallery Carousel: The visual showcase of images is powered by a carousel library. This tool provides a fluid, intuitive navigation experience for browsing images, with features like auto-scrolling.
• SVG Backgrounds: To create scalable, interactive vector backgrounds, we used an SVG manipulation library, enabling visually stunning graphics that scale perfectly across devices without losing quality.