Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aaronjai/mind-motion
A dynamic mental wellness platform showcasing the power of Tailwind CSS and smooth animations via framer motion
https://github.com/aaronjai/mind-motion
Last synced: about 1 month ago
JSON representation
A dynamic mental wellness platform showcasing the power of Tailwind CSS and smooth animations via framer motion
- Host: GitHub
- URL: https://github.com/aaronjai/mind-motion
- Owner: AaronJai
- Created: 2024-08-11T15:23:21.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-22T12:04:55.000Z (5 months ago)
- Last Synced: 2024-10-31T21:06:11.198Z (3 months ago)
- Language: TypeScript
- Homepage: https://mind-motion.vercel.app
- Size: 1.64 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mind Leap
MindLeap takes the form of a Mental Wellness Website
- Otherwise Mind-Motion to emphasise the animation aspects of the website
## Tech Stack
⭐ Next.js
⭐ TypeScript
⭐ TailwindCSS
⭐ React Icons
⭐ React Tabs
⭐ Framer Motion
## Features
➡️ Sleek and modern template designed to showcase therapy help
➡️ One page, dark theme layout
➡️ Features a responsive and engaging design
## Notes
I had aimed to utilise next.js for server-sided rendering capacities. However,
1. most components utilised react hook components so it required us to use the 'use client' directive.
2. regardless of whether they utilised react hook components, to apply animation from framer motion to each component requires the 'use client' directive.
## Usage
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/AaronJai/mind-motion
cd mind-motion
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.