OctoAI (OctoML) Marketing Site

Automate Model Deployment

A Headless SSG Marketing Site

While working at Webstacks as the lead developer for OctoAI, I had the pleasure of being able to take responsibility for an entire repository. I owned the software development lifecycle from establishing the CI/CD pipeline to creating the linting standards. I was also responsible for peer and junior code reviews, sprint planning, and UX design reviews.

Problem: Content creators were limited in the choices they had and needed more control over their site. Each page was a separate content model and engineers were required to create new unique pages.
Solution: We solved this with a component generation model based on DatoCMS and GraphQL queries to dynamically create page sections. The system (the same pattern used in this site) allowed the content creators to create complete pages within minutes with nearly complete control over everything.

I was later hired by OctoAI to join their platform team as a Senior Engineer and was able to refer an engineer to take over their marketing site. Though no longer responsible for the site, I still help consult and do the occasional PR review.

Note: This has been redesigned since the initial development of it.
UI of OctoML

Animated Homepage

The animated variant of the hero utilized framer motion to create smooth multi-leveled animations at all large breakpoints. Each circle has two circles revolving around them as well as a flag that pivots up.

Conversion panel and footer

The animated conversion panel and footer are two separate components. The conversion panel has multiple variants and is modeled to give content creators a lot of control.

Pictured here is just one of the variants that includes a couple animated atoms that move on repeat and an octopus that pops up on hover.

Featured grid component

This component utilizes the scroll position, state, and clever use of a background gradient to create the dotted line when scrolling.

This was a very fun component to create and I feel as though It makes for an appealing UX.

A demonstration of the OctoML feature grid component

The Global Navbar

The one and only global navigation component (or global header/navbar). The first to be judged and utilized by all. As you can see OctoML follows modern design standards with icons, sections, and images. Best of all though, it's 100% headless.

Key Points

  • The first project that I was able to take full control of/was responsible for.

  • Worked directly with OctoAI stakeholders (and even got job out of it) to provide an optimized experience for their content creators.

  • Modeled with DatoCMS and queried with GraphQL utilizing fragments and GraphQL Codegen for the types.

  • Includes full documentation for use of components created with Storybook.

Next Project