Inception

January 16, 2021

This website was developed using Gatsby, a React-based static site generator powered by GraphQL. Gatsby offers powerful preconfiguration options that enable the creation of websites that load quickly with static files. This approach leverages benefits like service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching to enhance user experience.

I chose Gatsby as a platform to build this website to expand my skillset and gain experience with GraphQL. The ability to query and fetch data seamlessly from multiple sources using GraphQL’s schema was particularly beneficial.

During the development of this website, I discovered the ability to integrate components directly into markdown pages using the MDXProvider. This feature allows for greater flexibility in website design and improves user experience. Here is an example of using a form component directly in the mdx page

- Picture/mirror hanging
- Moving items like plants, furniture, and appliances
- Gutter cleaning and repair
- Internet connectivity with network issues and IOT devices
- And just about any little annoyances that needs taken care of

![Bathroom Remodel](IMG_3387.JPG)

### Please fill out the form below and I will respond as soon as possible.

<HomeRequestForm />

### I will travel up to 30 miles from Nashville - Any further will need to be discussed

*I do* ***not*** *take-on full home remodels of any type. I do, however, have trusted individuals I recommend for larger projects and can help to advise you on the best course of action for your needs.*

Below is how MDXProvider is used in place of dangerouslySetInnerHTML. This is how Gatsby accesses the available components to use in MDX.

return (
    <>
      <Helmet>
        <html lang={"en"} />
        <style type="text/css">{""}</style>
        <body className={""} />
      </Helmet>

      <div className="viewport">
        <div className="viewport-top">
          <Header
            siteTitle={data.site.siteMetadata.title}
            siteDescription={data.site.siteMetadata.description}
          />
          <div className="site-main">
            <MDXProvider components={shortcodes}>{children}</MDXProvider>
          </div>
        </div>
        <footer>
          <Bio />
        </footer>
      </div>
    </>
  )

You can find the github repo here