text: import React, { Fragment, useMemo, useRef } from 'react';
  import { Helmet } from 'react-helmet';
  import { useAppContext, useScrollRestore } from 'hooks';
  import Footer from 'components/Footer';
  import {
    ProjectContainer,
    ProjectSection,
    ProjectSectionContent,
    ProjectTextRow,
    ProjectImage,
    ProjectSectionHeading,
    ProjectSectionText,
    ProjectBackground,
    ProjectHeader,
    ProjectSectionColumns,
  } from 'components/ProjectLayout';
  import ThemeProvider, { useTheme } from 'components/ThemeProvider';
  import Image from 'components/Image';
  import SegmentedControl, { SegmentedControlOption } from 'components/SegmentedControl';
  import prerender from 'utils/prerender';
  import { media } from 'utils/style';
  import backgroundSpr from 'assets/spr-background.jpg';
  import backgroundSprLarge from 'assets/spr-background-large.jpg';
  import backgroundSprPlaceholder from 'assets/spr-background-placeholder.jpg';
  import imageSprLessonBuilderLight from 'assets/spr-lesson-builder-light.jpg';
  import imageSprLessonBuilderLightLarge from 'assets/spr-lesson-builder-light-large.jpg';
  import imageSprLessonBuilderLightPlaceholder from 'assets/spr-lesson-builder-light-placeholder.jpg';
  import imageSprLessonBuilderDark from 'assets/spr-lesson-builder-dark.jpg';
  import imageSprLessonBuilderDarkLarge from 'assets/spr-lesson-builder-dark-large.jpg';
  import imageSprLessonBuilderDarkPlaceholder from 'assets/spr-lesson-builder-dark-placeholder.jpg';
  import imageSprComponentsDark from 'assets/spr-components-dark.png';
  import imageSprComponentsDarkLarge from 'assets/spr-components-dark-large.png';
  import imageSprComponentsDarkPlaceholder from 'assets/spr-components-dark-placeholder.png';
  import imageSprComponentsLight from 'assets/spr-components-light.png';
  import imageSprComponentsLightLarge from 'assets/spr-components-light-large.png';
  import imageSprComponentsLightPlaceholder from 'assets/spr-components-light-placeholder.png';
  import imageSprDesignSystemDark from 'assets/spr-design-system-dark.png';
  import imageSprDesignSystemDarkLarge from 'assets/spr-design-system-dark-large.png';
  import imageSprDesignSystemDarkPlaceholder from 'assets/spr-design-system-dark-placeholder.png';
  import imageSprDesignSystemLight from 'assets/spr-design-system-light.png';
  import imageSprDesignSystemLightLarge from 'assets/spr-design-system-light-large.png';
  import imageSprDesignSystemLightPlaceholder from 'assets/spr-design-system-light-placeholder.png';
  import imageSprStoryboarderDark from 'assets/spr-storyboarder-dark.png';
  import imageSprStoryboarderDarkLarge from 'assets/spr-storyboarder-dark-large.png';
  import imageSprStoryboarderDarkPlaceholder from 'assets/spr-storyboarder-dark-placeholder.png';
  import imageSprStoryboarderLight from 'assets/spr-storyboarder-light.png';
  import imageSprStoryboarderLightLarge from 'assets/spr-storyboarder-light-large.png';
  import imageSprStoryboarderLightPlaceholder from 'assets/spr-storyboarder-light-placeholder.png';
  import imageSprBackgroundVolcanism from 'assets/spr-background-volcanism.jpg';
  import imageSprBackgroundVolcanismLarge from 'assets/spr-background-volcanism-large.jpg';
  import imageSprBackgroundVolcanismPlaceholder from 'assets/spr-background-volcanism-placeholder.jpg';
  import imageSprSchema1Light from 'assets/spr-schema-1-light.png';
  import imageSprSchema1LightLarge from 'assets/spr-schema-1-light-large.png';
  import imageSprSchema1LightPlaceholder from 'assets/spr-schema-1-light-placeholder.png';
  import imageSprSchema1Dark from 'assets/spr-schema-1-dark.png';
  import imageSprSchema1DarkLarge from 'assets/spr-schema-1-dark-large.png';
  import imageSprSchema1DarkPlaceholder from 'assets/spr-schema-1-dark-placeholder.png';
  import imageSprSchema2Light from 'assets/spr-schema-2-light.png';
  import imageSprSchema2LightLarge from 'assets/spr-schema-2-light-large.png';
  import imageSprSchema2LightPlaceholder from 'assets/spr-schema-2-light-placeholder.png';
  import imageSprSchema2Dark from 'assets/spr-schema-2-dark.png';
  import imageSprSchema2DarkLarge from 'assets/spr-schema-2-dark-large.png';
  import imageSprSchema2DarkPlaceholder from 'assets/spr-schema-2-dark-placeholder.png';
  import videoSprMotion from 'assets/spr-motion.mp4';
  import videoSprMotionLarge from 'assets/spr-motion-large.mp4';
  import videoSprMotionPlaceholder from 'assets/spr-motion-placeholder.jpg';
  import Earth, { EarthSection } from './Earth';
  import './index.css';
  
  const title = 'Create the future of education';
  const description =
    'I worked as the design and developer lead on a major iteration of Smart Sparrow’s product. We took the platform in a bold new direction, focusing on becoming the best tool for learning designers.';
  const roles = [
    'Motion Design',
    'UX and UI Design',
    'Front End Development',
    'Back End Development',
  ];
  
  const ProjectSPR = () => {
    const { themeId } = useTheme();
    const { dispatch } = useAppContext();
    const motionSectionRef = useRef();
    const earthSectionRef = useRef();
    useScrollRestore();
  
    const isDark = themeId === 'dark';
    const themes = ['dark', 'light'];
  
    const handleThemeChange = index => {
      dispatch({ type: 'setTheme', value: themes[index] });
    };
  
    return (
  
      <Fragment>
        <ProjectContainer className="spr">
          <Helmet>
            <title>{`Projects | ${title}`}</title>
            <meta name="description" content={description} />
          </Helmet>
          <ProjectBackground
            opacity={isDark ? 0.5 : 0.8}
            srcSet={`${backgroundSpr} 1080w, ${backgroundSprLarge} 2160w`}
            placeholder={backgroundSprPlaceholder}
            entered={!prerender}
          />
          <ProjectHeader
            title={title}
            description={description}
            url="https://www.smartsparrow.com/"
            roles={roles}
          />
          <ProjectSection first>
            <ProjectSectionContent>
              <ProjectImage
                raised
                key={themeId}
                srcSet={`${
                  isDark ? imageSprLessonBuilderDark : imageSprLessonBuilderLight
                } 1280w, ${
                  isDark ? imageSprLessonBuilderDarkLarge : imageSprLessonBuilderLightLarge
                } 2560w`}
                placeholder={
                  isDark
                    ? imageSprLessonBuilderDarkPlaceholder
                    : imageSprLessonBuilderLightPlaceholder
                }
                sizes={`(max-width: ${media.mobile}px) 100vw, (max-width: ${media.tablet}px) 800px, 1000px`}
                alt="The aero lesson builder app dragging an audio component into a screen about plant cells."
              />
            </ProjectSectionContent>
          </ProjectSection>
          <ProjectSection>
            <ProjectTextRow>
              <ProjectSectionHeading>The problem</ProjectSectionHeading>
              <ProjectSectionText>
                In 2017, Smart Sparrow began a project to build an entirely new platform to
                from the ground up to serve as the most powerful tool for educators to
                create online learning experiences. The old platform was built in Flash, and
                there were a number of user experience problems to solve in the process of
                moving the platform to Javascript. The primary goals for the project were
                reducing barriers to collaboration, and making the platform both easier for
                new users, but with plenty of room to scale for advanced users.
              </ProjectSectionText>
            </ProjectTextRow>
          </ProjectSection>
          <ProjectSection light={isDark}>
            <ProjectSectionContent>
              <Image
                key={themeId}
                srcSet={`${
                  isDark ? imageSprComponentsDark : imageSprComponentsLight
                } 800w, ${
                  isDark ? imageSprComponentsDarkLarge : imageSprComponentsLightLarge
                } 1000w`}
                placeholder={
                  isDark
                    ? imageSprComponentsDarkPlaceholder
                    : imageSprComponentsLightPlaceholder
                }
                alt={`A set of ${themeId} themed components for the aero design system`}
                sizes="100vw"
              />
              <ProjectTextRow>
                <SegmentedControl
                  currentIndex={themes.indexOf(themeId)}
                  onChange={handleThemeChange}
                >
                  <SegmentedControlOption>Dark theme</SegmentedControlOption>
                  <SegmentedControlOption>Light theme</SegmentedControlOption>
                </SegmentedControl>
              </ProjectTextRow>
              <ProjectTextRow>
                <ProjectSectionHeading>The aero design system</ProjectSectionHeading>
                <ProjectSectionText>
                  To streamline the design process across designers and engineers for such a
                  large project, it was important to lay the foundations with a strong,
                  flexible design system that could evolve during the product’s development
                  cycle. This would inform both the aesthetics and user experience across
                  the product itself as well as the website and marketing material.
                </ProjectSectionText>
              </ProjectTextRow>
            </ProjectSectionContent>
          </ProjectSection>
          <ProjectSection>
            <ProjectSectionContent>
              <Image
                raised
                key={themeId}
                srcSet={`${
                  isDark ? imageSprDesignSystemDark : imageSprDesignSystemLight
                } 1280w, ${
                  isDark ? imageSprDesignSystemDarkLarge : imageSprDesignSystemLightLarge
                } 2560w`}
                placeholder={
                  isDark
                    ? imageSprDesignSystemDarkPlaceholder
                    : imageSprDesignSystemLightPlaceholder
                }
                alt="The homepage of the aero design system docs website linking to principles and components."
                sizes="100vw"
              />
              <ProjectTextRow>
                <ProjectSectionHeading>Design system docs</ProjectSectionHeading>
                <ProjectSectionText>
                  A design system is useless if no one knows how to use it, so we put
                  together a comprehensive documentation website to cover principles, ux,
                  accessibility, and component guidelines for designers and engineers
                  working with the system.
                </ProjectSectionText>
              </ProjectTextRow>
            </ProjectSectionContent>
          </ProjectSection>
          <ThemeProvider themeId="dark">
            <ProjectSection
              ref={motionSectionRef}
              backgroundOverlayOpacity={0.5}
              backgroundElement={
                <Image
                  srcSet={`${imageSprBackgroundVolcanism} 1280w, ${imageSprBackgroundVolcanismLarge} 2560w`}
                  placeholder={imageSprBackgroundVolcanismPlaceholder}
                  alt="A dramatic ocean scene with lava forming a new land mass."
                  sizes="100vw"
                />
              }
            >
              <ProjectSectionColumns width="full">
                <ProjectSectionContent width="full">
                  <ProjectTextRow width="s">
                    <ProjectSectionHeading>Motion design</ProjectSectionHeading>
                    <ProjectSectionText>
                      Animation was a core principle in making the authoring experience a
                      more understandable process. Elements animate in ways that indicate
                      the cause and effect of each interaction to improve the fluidity of
                      the overall experience.
                    </ProjectSectionText>
                  </ProjectTextRow>
                </ProjectSectionContent>
                <Image
                  raised
                  srcSet={`${videoSprMotion} 1280w, ${videoSprMotionLarge} 2560w`}
                  className="spr__video"
                  src={videoSprMotionLarge}
                  placeholder={videoSprMotionPlaceholder}
                  alt="A learning designer building and deploying an interactive lesson on volcanism using the app."
                  sizes={`(max-width: ${media.mobile}px) 100vw, 50vw`}
                />
              </ProjectSectionColumns>
            </ProjectSection>
          </ThemeProvider>
          <ProjectSection>
            <ProjectSectionContent>
              <ProjectTextRow>
                <ProjectSectionHeading>Encouraging adaptivity</ProjectSectionHeading>
                <ProjectSectionText>
                  A major part of solving for collaboration was being able to visualize the
                  learner experience in the editor. This was especially beneficial for
                  subject matter experts and instructors need to review and give feedback on
                  the higher level structure without having to dig through all of the
                  adaptivity scenarios screen by screen.
                </ProjectSectionText>
              </ProjectTextRow>
              <Image
                raised
                key={themeId}
                srcSet={`${
                  isDark ? imageSprStoryboarderDark : imageSprStoryboarderLight
                } 1280w, ${
                  isDark ? imageSprStoryboarderDarkLarge : imageSprStoryboarderLightLarge
                } 2560w`}
                placeholder={
                  isDark
                    ? imageSprStoryboarderDarkPlaceholder
                    : imageSprStoryboarderLightPlaceholder
                }
                alt="A drag and drop storyboard style editor for creating an adaptive lesson."
                sizes={`(max-width: ${media.mobile}px) 100vw, 80vw`}
              />
            </ProjectSectionContent>
          </ProjectSection>
          <ProjectSection>
            <ProjectSectionColumns>
              <ProjectSectionContent>
                <ProjectTextRow>
                  <ProjectSectionHeading>
                    An extensible plugin ecosystem usable by everyone
                  </ProjectSectionHeading>
                  <ProjectSectionText>
                    The most powerful aspect of the platform is the ability to create custom
                    plugins for any content, whether it be a degree, course, lesson, screen,
                    or interactive component. Out of the box these can be made configurable
                    with minimal effort from developers. Learning designers can then edit
                    everything using a common configuration interface.
                  </ProjectSectionText>
                </ProjectTextRow>
              </ProjectSectionContent>
              <div className="spr__sidebar-images">
                <Image
                  className="spr__sidebar-image"
                  srcSet={`${isDark ? imageSprSchema2Dark : imageSprSchema2Light} 260w, ${
                    isDark ? imageSprSchema2DarkLarge : imageSprSchema2LightLarge
                  } 520w`}
                  placeholder={
                    isDark
                      ? imageSprSchema2DarkPlaceholder
                      : imageSprSchema2LightPlaceholder
                  }
                  alt="Configuration options for a component."
                  sizes={`(max-width: ${media.mobile}px) 50vw, 25vw`}
                />
                <Image
                  className="spr__sidebar-image"
                  srcSet={`${isDark ? imageSprSchema1Dark : imageSprSchema1Light} 260w, ${
                    isDark ? imageSprSchema1DarkLarge : imageSprSchema1LightLarge
                  } 520w`}
                  placeholder={
                    isDark
                      ? imageSprSchema1DarkPlaceholder
                      : imageSprSchema1LightPlaceholder
                  }
                  alt="Configuration options for text."
                  sizes={`(max-width: ${media.mobile}px) 50vw, 25vw`}
                />
              </div>
            </ProjectSectionColumns>
          </ProjectSection>
          <ThemeProvider themeId="dark">
            <Earth
              className="spr__earth"
              hideMeshes={useMemo(
                () => ['Atmosphere', 'EarthPartial', 'Chunk', 'EarthFull'],
                []
              )}
              position={useMemo(() => [0, 0, 0], [])}
              ref={earthSectionRef}
              labels={useMemo(
                () => [
                  {
                    position: [0.54, 0.19, 0.18],
                    text: 'Pacific ring of fire',
                    hidden: true,
                  },
                  {
                    position: [0.47, -0.38, 0.04],
                    text: 'Ruapehu',
                    hidden: true,
                  },
                  {
                    position: [0.22, 0.44, -0.35],
                    text: 'St. Helens',
                    hidden: true,
                  },
                  {
                    position: [0.16, -0.06, 0.58],
                    text: 'Krakatoa',
                    hidden: true,
                  },
                  {
                    position: [0.11, 0.2, -0.56],
                    text: 'Parícutin',
                    hidden: true,
                  },
                  {
                    position: [0.52, 0.2, -0.23],
                    text: 'Kīlauea',
                    hidden: true,
                  },
                  {
                    position: [-0.24, 0.75, 0.24],
                    text: 'Mantle',
                    delay: 800,
                    hidden: true,
                  },
                  {
                    position: [-0.24, 0.55, 0.24],
                    text: 'Outer core',
                    delay: 800,
                    hidden: true,
                  },
                  {
                    position: [-0.24, 0.35, 0.24],
                    text: 'Inner core',
                    delay: 800,
                    hidden: true,
                  },
                ],
                []
              )}
              scale={0.6}
            >
              <EarthSection
                scrim
                animations={['0:loop']}
                camera={[0, 0, 1.5]}
                meshes={['Atmosphere', 'EarthFull']}
              >
                <ProjectSection>
                  <ProjectSectionContent>
                    <ProjectTextRow center>
                      <ProjectSectionHeading>
                        Next-generation learning experiences
                      </ProjectSectionHeading>
                      <ProjectSectionText>
                        The flexibility of the product allowed for developers to create
                        engaging interactive experiences as highly configurable plugins that
                        could then be used and manipulated by learning designers.
                      </ProjectSectionText>
                    </ProjectTextRow>
                  </ProjectSectionContent>
                </ProjectSection>
              </EarthSection>
              <EarthSection
                animations={['0:loop']}
                camera={[0, 0, 2.4]}
                meshes={['Atmosphere', 'EarthFull']}
              />
              <EarthSection
                animations={['0:loop']}
                camera={[1.14, -1.39, 0.94]}
                meshes={['Atmosphere', 'EarthFull']}
              >
                <ProjectSection>
                  <ProjectSectionContent width="xl">
                    <ProjectTextRow justify="end" width="s">
                      <ProjectSectionHeading level={4} as="h3">
                        Bringing 3D into learning
                      </ProjectSectionHeading>
                      <ProjectSectionText>
                        One really cool example is the 3D screen plugin. Learning designers
                        can load any model into it and then configure camera positions to
                        animate to for each section.
                      </ProjectSectionText>
                    </ProjectTextRow>
                  </ProjectSectionContent>
                </ProjectSection>
              </EarthSection>
              <EarthSection
                animations={['0:loop']}
                camera={[1.17, 0.69, -1.47]}
                meshes={['Atmosphere', 'EarthFull']}
                labels={[
                  'Pacific ring of fire',
                  'Ruapehu',
                  'St. Helens',
                  'Krakatoa',
                  'Parícutin',
                  'Kīlauea',
                ]}
              >
                <ProjectSection>
                  <ProjectSectionContent width="xl">
                    <ProjectTextRow justify="start" width="s">
                      <ProjectSectionHeading level={4} as="h3">
                        Interactivity
                      </ProjectSectionHeading>
                      <ProjectSectionText>
                        Learners can then be directed to specific parts of the model and
                        shown labels. They're also able to click and drag to orbit around
                        and freely explore at any time.
                      </ProjectSectionText>
                    </ProjectTextRow>
                  </ProjectSectionContent>
                </ProjectSection>
              </EarthSection>
              <EarthSection
                animations={['0:loop']}
                camera={[1.81, 0.51, 0.43]}
                meshes={['Atmosphere', 'EarthFull']}
                labels={[
                  'Pacific ring of fire',
                  'Ruapehu',
                  'St. Helens',
                  'Krakatoa',
                  'Parícutin',
                  'Kīlauea',
                ]}
              />
              <EarthSection
                animations={['0:loop']}
                camera={[0.37, 1.02, 1.84]}
                meshes={['EarthPartial', 'Chunk']}
                labels={['Mantle', 'Outer core', 'Inner core']}
              >
                <ProjectSection>
                  <ProjectSectionContent width="xl">
                    <ProjectTextRow justify="end" width="s">
                      <ProjectSectionHeading level={4} as="h3">
                        Animation
                      </ProjectSectionHeading>
                      <ProjectSectionText>
                        Learning designers can pick an animation included in the model to
                        play or loop for any section without having to use any complex
                        animation tools.
                      </ProjectSectionText>
                    </ProjectTextRow>
                  </ProjectSectionContent>
                </ProjectSection>
              </EarthSection>
              <EarthSection
                scrimReverse
                animations={['0:loop']}
                camera={[0.37, 1.02, 1.84]}
                meshes={['Atmosphere', 'EarthFull']}
              />
            </Earth>
          </ThemeProvider>
        </ProjectContainer>
        <Footer />
      </Fragment>
    );
  };
  
  export default ProjectSPR;
  