MVP

gatsby-config.js

@@ -1,34 +1,34 @@
 module.exports = {
-  pathPrefix: `/gatsby-creative`,
+  pathPrefix: '/gatsby-creative',
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: 'Gatsby Default Starter',
+    description: 'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
+    author: '@gatsbyjs',
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
+    'gatsby-plugin-react-helmet',
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `images`,
+        name: 'images',
         path: `${__dirname}/src/images`,
       },
     },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: 'gatsby-plugin-manifest',
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        name: 'gatsby-starter-default',
+        short_name: 'starter',
+        start_url: '/',
+        background_color: '#663399',
+        theme_color: '#663399',
+        display: 'minimal-ui',
+        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
       },
     },
-    `gatsby-plugin-sass`,
+    'gatsby-plugin-sass',
     {
       resolve: 'gatsby-plugin-web-font-loader',
       options: {
@@ -39,6 +39,6 @@ module.exports = {
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
+    // 'gatsby-plugin-offline',
   ],
-}
+};

src/components/header.js

@@ -12,27 +12,51 @@ export default class Header extends React.Component {
   render() {
     return (
       <>
-        <Navbar className="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav" expand="lg"
+        <Navbar className="navbar navbar-expand-lg navbar-light fixed-top py-3"
+                id="mainNav"
+                expand="lg"
                 collapseOnSelect={true}>
           <div className="container">
-            <a className="navbar-brand js-scroll-trigger" href="#page-top" onClick={Scroller.handleAnchorScroll}>Start Bootstrap</a>
+            <a className="navbar-brand js-scroll-trigger" h
+               ref="#page-top"
+               onClick={Scroller.handleAnchorScroll}>
+              British Kitties
+            </a>
             <Navbar.Toggle aria-controls="navbarResponsive"/>
             <Navbar.Collapse id="navbarResponsive">
               <Nav className="navbar-nav ml-auto my-2 my-lg-0">
                 <Scrollspy className="navbar-nav"
-                           items={["about", "services", "portfolio", "contact"]}
-                           currentClassName="active" rootEl={"#mainNav"} offset={-75}>
+                           items={["about", "gallery", "faq", "contact"]}
+                           currentClassName="active"
+                           rootEl={"#mainNav"}
+                           offset={-75}>
                   <li className="nav-item">
-                    <Nav.Link className={"js-scroll-trigger"} href="#about" onClick={Scroller.handleAnchorScroll}>About</Nav.Link>
+                    <Nav.Link className={"js-scroll-trigger"}
+                              href="#about"
+                              onClick={Scroller.handleAnchorScroll}>
+                      About
+                    </Nav.Link>
                   </li>
                   <li className="nav-item">
-                    <Nav.Link className={"js-scroll-trigger"} href="#services" onClick={Scroller.handleAnchorScroll}>Services</Nav.Link>
+                    <Nav.Link className={"js-scroll-trigger"}
+                              href="#gallery"
+                              onClick={Scroller.handleAnchorScroll}>
+                      Gallery
+                    </Nav.Link>
                   </li>
                   <li className="nav-item">
-                    <Nav.Link className={"js-scroll-trigger"} href="#portfolio" onClick={Scroller.handleAnchorScroll}>Portfolio</Nav.Link>
+                    <Nav.Link className={"js-scroll-trigger"}
+                              href="#faq"
+                              onClick={Scroller.handleAnchorScroll}>
+                      FAQ
+                    </Nav.Link>
                   </li>
                   <li className="nav-item">
-                    <Nav.Link className={"js-scroll-trigger"} href="#contact" onClick={Scroller.handleAnchorScroll}>Contact</Nav.Link>
+                    <Nav.Link className={"js-scroll-trigger"}
+                              href="#contact"
+                              onClick={Scroller.handleAnchorScroll}>
+                      Contact
+                    </Nav.Link>
                   </li>
                 </Scrollspy>
               </Nav>
@@ -43,14 +67,16 @@ export default class Header extends React.Component {
           <div className="container h-100">
             <div className="row h-100 align-items-center justify-content-center text-center">
               <div className="col-lg-10 align-self-end">
-                <h1 className="text-uppercase text-white font-weight-bold">Your Favorite Source of Free Bootstrap
-                  Themes</h1>
-                <hr className="divider my-4"/>
               </div>
               <div className="col-lg-8 align-self-baseline">
-                <p className="text-white-75 font-weight-light mb-5">Start Bootstrap can help you build better websites
-                  using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
-                <a className="btn btn-primary btn-xl js-scroll-trigger" href="#about" onClick={Scroller.handleAnchorScroll}>Find Out More</a>
+                <p className="text-white-75 font-weight-light mb-5">
+                  Pure breed british kitties born and raised with love in Brooklyn, NY.
+                </p>
+                <a className="btn btn-primary btn-xl js-scroll-trigger"
+                   href="#about"
+                   onClick={Scroller.handleAnchorScroll}>
+                    About us
+                </a>
               </div>
             </div>
           </div>

src/components/layout.js

@@ -62,7 +62,9 @@ export default class Layout extends React.Component {
         <main>{this.props.children}</main>
         <footer className="bg-light py-5">
           <div className="container">
-            <div className="small text-center text-muted">Copyright &copy; 2019 - Start Bootstrap</div>
+            <a href="https://www.instagram.com/british_scottish_ny/">
+              <i className="fab fa-instagram" />
+            </a>
           </div>
         </footer>
       </div>
@@ -73,4 +75,4 @@ export default class Layout extends React.Component {
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-}
+}