Full-Stack Engineering

Shoreline Marketing Website

Complete rebuild of the Shoreline.io marketing website using modern monorepo architecture, achieving significantly faster load speeds, improved SEO, non-technical editing capabilities, and a more intuitive user experience.

Home page with modern design and custom graphics & animations

1 of 7

Project Resources

Example #1
Case Studies & Blog
Example #2
How It Works page
Example #3
About Us page
Source Code
Private Repository

Completed the full architectural redesign and development of Shoreline.io's marketing website as the sole designer and developer, transforming it from a legacy system into a modern, high-performance platform. The project utilized a monorepo approach with advanced build optimization and content delivery strategies.

Implemented a custom CMS solution that allows non-technical team members to quickly publish and update content without developer intervention. This dramatically reduced content publishing time from days to minutes and improved the marketing team's agility.

The redesigned platform delivered substantial performance gains, including 64% faster load speeds and achieving scores across all metrics. These optimizations, combined with enhanced SEO architecture and improved user experience, significantly boosted engagement and search rankings. The site successfully supported the company through its acquisition by NVIDIA.

Following Shoreline.io's acquisition by NVIDIA during my tenure with the company, the website was brought offline to help inform the public and customers of the purchase.

Key Features

  • Modern monorepo architecture with Turborepo
  • Custom CMS for rapid content management from marketing team and other SREs
  • Real-time content updates with live editing capabilities
  • Custom animations and transitions using Framer Motion for a polished user experience
  • Advanced performance optimization with 64% speed improvement and .
  • SEO-optimized architecture with CMS-based metadata management
  • Responsive design system with consistent branding
  • A/B testing framework for conversion optimization
  • Analytics integration for detailed user tracking
  • Automated deployment pipeline with staging environments

Technical Architecture

The marketing website was built using a modern stack designed for performance, scalability, and maintainability:

  • Next.js, React, TypeScript, and Tailwind CSS for a modern front-end codebase
  • PlanetScale, Amazon RDS, and MongoDB for scalable database solutions
  • Prisma for type-safe database access
  • Sanity CMS for a flexible content management
  • Amazon S3 for user-uploaded media assets
  • Amazon CloudFront for media asset distribution
  • Vercel for global content delivery, edge caching, and serverless functions

Monorepo Strategy

The entire project embraced a monorepo strategy (using Turborepo) to streamline development and deployment processes. Here's the high-level directory structure at a glance:

root
apps
cms
web
packages
api-incident-insights
cms-importer
database
eslint-config
eslint-config-custom
insights-api
insights-ui
prettier-config
runbook-importer
sanity
shared
shoreline-markdown
tailwind-config
tsconfig
types
ui
web-content

This architecture allowed for reusable components, shared configurations, and consistent development practices across the entire codebase. It also enabled cross-team collaboration and multi-project support, allowing reuse of components and utilities in the private Shoreline product, the documentation platform, the runbook generator, and more.

Content Management System

Integrated Sanity CMS for flexible content management:

  • Real-time Collaboration: Multiple editors working simultaneously
  • Dev & Staging Environments: Preview and share content changes before publishing
  • Version Control: Content versioning and rollback capabilities
  • Preview Mode:
  • Schema Validation: Structured content with type safety

Continuous Integration

Implemented a robust CI/CD pipeline with Git hooks and GitHub Actions to ensure code quality and deployment reliability:

  • Code Quality: ESLint, Prettier, and TypeScript checks
  • Testing: Unit tests and integration tests
  • Build Optimization: Bundle size analysis and performance budgets
  • Deployment: Automated deployment to staging and production

Impact & Results

The marketing website redesign delivered exceptional results including:

  • 64% faster load speeds compared to the legacy platform
  • Improved SEO rankings for target keywords
  • Total in-house control over the codebase, infrastructure, and feature set
  • Enhanced user engagement with modern interactive elements
  • Reduced content publishing time from days to minutes
  • Successfully supported the company through NVIDIA acquisition

Project Details

Timeline

9 months

Role

Lead Full-Stack Engineer

Technologies & Skills

Next.jsReactTypeScriptTurborepoSanity CMSVercelTailwind CSSFramer MotionPrismaMarkdownMongoDBPlanetScaleAmazon RDSAmazon S3Amazon CloudFrontGitHub ActionsJestPlaywrightFigmaGoogle Analytics

© 2025 Gabe Wyatt. All rights reserved.

0%