Giter VIP home page Giter VIP logo

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

ShiftWalk© Studio's Projects

shiftwalk-nextjs-starter icon shiftwalk-nextjs-starter

A simple Next.js starter kit with TailwindCSS (JIT) and Framer Motion preconfigured. Optional feature branches for Locomotive Scroll, Sanity and Dato configuration coming soon...

shiftwalk-sanity-starter icon shiftwalk-sanity-starter

A simple Sanity Studio starter kit with preview mode, custom structuring, vercel deploy and reorder documents preconfigured.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.