/morin

Company Profile for Morin Jam

Primary LanguageJavaScript

Next Interactive Starter

Demo: [INCOMING] A Next.js boilerplate with TailwindCSS Framer Motion, Locomotive Scroll and GSAP Scroll Trigger. A Fork from Samuel Goddard Next Boilerplate.

✨ Features

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

Roadmap / Coming Soon...

🚀 Quick start

  1. Clone the repo

    git clone https://github.com/tomostudio/next-interactive-starter.git
  2. Start developing

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

    cd next-interactive-starter/
    
    yarn
    yarn 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*
    |-- scrolltrigger.js *// A container to enable scrolltrigger interaction*
|-- 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*
    |-- globalscroll.js *// push locomotive scroll event to context or global window event*
|-- context
    |-- state.js  *// default react context initiation, currently preset to store locomotive scroll event as a context*
|-- pages
    |-- _app.js *// Includes default SEO component, Framer motion AnimatePresence & Locomotive Scroll init*
    |-- _document.js *// Default Next document component*
    |-- about.js
    |-- index.js
|-- public *// Next public assets*
|-- styles
    |-- _locomotive.css *// custom locomotive scroll 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