React starter code

Personal Website React/README.md

@@ -85,7 +85,7 @@ nothing to commit, working tree clean
 
 At this point, you should be all set to develop!
 
-13. Type `yarn start` and begin to develop your website in React! Refer to the [crash course document](react-crash-course.md) for some guidance.
+13. Type `yarn start` and begin to develop your website in React! Refer to the [crash course document](react-crash-course.md) for some guidance. Starter code using the Elastic UI library, as well as instructions is available in the starter code folder - refer to the [README](./Starter%20Code/README.md).
 
 **Deployment**
 

Personal Website React/Starter Code/App.css

@@ -0,0 +1,4 @@
+.sticky {
+  position: sticky;
+  top: 0;
+}

Personal Website React/Starter Code/App.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  EuiButton,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiText,
+  EuiTitle,
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageSideBar,
+  EuiSideNav,
+  EuiSpacer,
+} from '@elastic/eui';
+import Header from './Header';
+import PageSection from './PageSection';
+
+// Other themes are also available - see files at
+// node_modules/@elastic/eui/dist/
+import '@elastic/eui/dist/eui_theme_dark.css';
+import './App.css';
+
+const App = () => {
+  const sections = ['About Me', 'Projects', 'Contact Me'];
+
+  const toHref = (title) => {
+    return '#' + title.toLowerCase().split(' ').join('-');
+  };
+
+  const navItems = sections.map((section) => ({
+    name: section,
+    id: section,
+    href: toHref(section),
+  }));
+
+  const renderTitle = () => {
+    return (
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size='l'>
+            <h1>Ephraim Williams</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+    );
+  };
+
+  return (
+    <div className='App'>
+      <Header sections={sections} className='sticky' />
+      <EuiPage restrictWidth={true}>
+        <EuiPageSideBar>
+          <EuiSideNav items={navItems} />
+        </EuiPageSideBar>
+
+        <EuiPageBody component='div'>
+          {renderTitle()}
+
+          <PageSection title='About Me'>
+            <EuiText>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat aliquet
+                lacinia. Fusce lobortis facilisis gravida. Aenean aliquam semper nulla, pellentesque
+                bibendum odio rutrum sed. Morbi at finibus lorem, et finibus lacus. Vivamus a diam
+                ornare, efficitur nulla in, dignissim tortor. Maecenas rutrum efficitur lacus, quis
+                dictum enim sagittis eget. Nam sed sapien quis enim aliquam pharetra. Aenean sodales
+                enim id sollicitudin rutrum. Nullam mollis risus in sapien lacinia pharetra.
+                Vestibulum sed sodales neque. Curabitur eros tortor, mollis vitae ipsum eu, vehicula
+                dignissim ipsum. Sed consectetur pharetra euismod. Ut neque augue, tincidunt sit
+                amet maximus at, tincidunt id elit.
+              </p>
+            </EuiText>
+          </PageSection>
+          <EuiSpacer />
+
+          <PageSection title='Projects'>
+            <EuiText>
+              <p>Here are some of my projects:</p>
+            </EuiText>
+            <EuiFlexGroup gutterSize='l'>
+              <EuiFlexItem>
+                <EuiCard
+                  icon={<EuiIcon size='xxl' type='devToolsApp' />}
+                  title='Built Something'
+                  description='With like, a spanner and a screwdriver.'
+                  footer={<EuiButton aria-label='Go to Developers Tools'>See it</EuiButton>}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiCard
+                  icon={<EuiIcon size='xxl' type='devToolsApp' />}
+                  title='Built Something Else'
+                  description='With two hammers and a torch.'
+                  footer={<EuiButton aria-label='Go to Developers Tools'>See it</EuiButton>}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiCard
+                  icon={<EuiIcon size='xxl' type='devToolsApp' />}
+                  title='Built Another thing'
+                  description='How many things can I build?'
+                  footer={<EuiButton aria-label='Go to Developers Tools'>See it</EuiButton>}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiCard
+                  icon={<EuiIcon size='xxl' type='devToolsApp' />}
+                  title='Built The THING'
+                  description='With a lot of gusto.'
+                  footer={<EuiButton aria-label='Go to Developers Tools'>See it</EuiButton>}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </PageSection>
+          <EuiSpacer />
+
+          <PageSection title='Contact Me'>
+            <EuiListGroup>
+              <EuiListGroupItem label='@ephraimbill' iconType='logoGithub' />
+              <EuiListGroupItem label='[email protected]' iconType='logoGmail' />
+            </EuiListGroup>
+          </PageSection>
+        </EuiPageBody>
+      </EuiPage>
+    </div>
+  );
+};
+
+export default App;

Personal Website React/Starter Code/Header.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  EuiHeader,
+  EuiHeaderLink,
+  EuiHeaderLinks,
+  EuiHeaderLogo,
+  EuiHeaderSectionItem,
+} from '@elastic/eui';
+import PropTypes from 'prop-types';
+
+const HeaderLink = ({ title }) => {
+  const titleHref = () => {
+    return '#' + title.toLowerCase().split(' ').join('-');
+  };
+
+  return <EuiHeaderLink href={titleHref()}>{title}</EuiHeaderLink>;
+};
+
+HeaderLink.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+const Header = ({ sections, className }) => {
+  return (
+    <EuiHeader className={className}>
+      <EuiHeaderSectionItem border='right'>
+        <EuiHeaderLogo iconType='logoElasticsearch' href='#'>
+          Ephraim Williams
+        </EuiHeaderLogo>
+      </EuiHeaderSectionItem>
+
+      <EuiHeaderLinks>
+        {sections.map((section) => (
+          <HeaderLink title={section} key={section} />
+        ))}
+      </EuiHeaderLinks>
+    </EuiHeader>
+  );
+};
+
+Header.propTypes = {
+  sections: PropTypes.array,
+};
+
+Header.defaultProps = {
+  sections: [],
+};
+
+export default Header;

Personal Website React/Starter Code/PageSection.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiTitle,
+} from '@elastic/eui';
+
+const PageSection = ({ title, children }) => {
+  const titleID = () => title.toLowerCase().split(' ').join('-');
+
+  return (
+    <EuiPageContent id={titleID()}>
+      <EuiPageContentHeader>
+        <EuiPageContentHeaderSection>
+          <EuiTitle>
+            <h2>{title}</h2>
+          </EuiTitle>
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      {children}
+    </EuiPageContent>
+  );
+};
+
+export default PageSection;

Personal Website React/Starter Code/README.md

@@ -0,0 +1,14 @@
+# Starter Code with Elastic UI
+
+## Setup
+
+1. Install yarn at https://yarnpkg.com/
+1. `cd <project folder>`
+1. `yarn add @elastic/eui @elastic/datemath moment`
+1. Copy the starter files `App.css, App.js, Header.js, PageSection.js` and override what you have in the file.
+1. `yarn`
+1. `yarn start`
+
+## Screenshot
+
+![Elastic UI](EUI%20Starter.png)