Skip to content

samuelgoddard/ijp-2023

Repository files navigation

Shiftwalk Starter

Demo: https://sg-next-tailwind-motion.vercel.app/

Locomotive Scroll Demo: https://sg-next-tailwind-motion-locomotive.vercel.app/

A simple Next.js boilerplate with TailwindCSS (JIT), Framer Motion, and a few other nice bits preconfigured.

✨ Features

*To remove Preact and switch back to React simply remove the code in next.config.js

Roadmap / Coming Soon...

  • Feature branch with Sanity preconfigured
  • Feature branch with DatoCMS preconfigured
  • Feature branch with GSAP preconfigured

🚀 Quick start

  1. Clone the repo

    git clone https://github.com/samuelgoddard/next-tailwind-motion.git
  2. Start developing

    Navigate into your new site’s directory and install the local dependencies first, then run the dev command.

    cd next-tailwind-motion/
    
    npm i
    npm run dev
  3. Open the source code and start editing!

    Your site is will be running at http://localhost:3000

🗄 Directory Structure

|-- components
    |-- container.js *// A simple container component to wrap areas in a max width*
    |-- fancyLink.js *// A simple wrapper around `next/link`
    |-- footer.js *// Example footer component*
    |-- header.js *// Example header component*
    |-- layout.js *// Layout component that can be used to wrap your pages in a global layout*
|-- helpers
    |-- seo.config.js *// default SEO configuration helper, imported in `pages/_app.js`*
    |-- transitions.js *// re-usable framer motion transition helper with a basic 'fade' transition to get started*
|-- pages
    |-- _app.js *// Includes default SEO component & Framer motion AnimatePresence init*
    |-- _document.js *// Default Next document component*
    |-- about.js
    |-- index.js
|-- public *// Next public assets*
|-- styles
    |-- _fonts.css *// custom webfont styles*
    |-- _typography.css *// custom typographical styles*
    |-- main.css *// Tailwind init and custom css imports*
|-- .gitignore
|-- jsconfig.json *// module aliasing*
|-- postcss.config.js *// Tailwind, CSS import, CSS nesting init*
|-- next.config.js *// Prefer Preact to React*
|-- package.json
|-- README.md
|-- tailwind.config.js