Update readme and cover transitions

Author: hylu-dev

README.md

@@ -32,6 +32,43 @@ Please reach out if your interested in using the live app.
 
 ---
 
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`).
+
+### Frontend
+
+Create a .env file and declare your server url. Ensure it's directed towards `/api`.
+
+```bash
+REACT_APP_API_URL=http://localhost:5000/api
+```
+
+Start a development server:
+
+```bash
+npm start
+```
+
+### Server
+
+Create a .env file and declare your database URI and Secret Key
+
+> You can generate a key using node builtins `require('crypto').randomBytes(64).toString('hex')`
+
+```bash
+ATLAS_URI=<mongodb-connection-string>
+ACCESS_TOKEN_SECRET=<secret-key>
+```
+
+Start a development server:
+
+```bash
+npm start
+```
+
+---
+
 ## Overview
 
 ### Involvement

root/bujots-front/package-lock.json

@@ -16,7 +16,7 @@ const JournalBack = ({ children }: Props) => {
             <motion.div className="col-start-2 col-end-3 row-start-2 row-end-3"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { ease: [0.075, 0.82, 0.165, 1], duration: 1 } }}
-                exit={{ opacity: 0, rotate: -20, translateX: 100, translateY: 100 }}
+                exit={{ opacity: 0, rotate: -5, translateX: 40, translateY: 40 }}
                 transition={{ ease: "easeInOut", duration: .5 }}
             >
                 {/* A4 Aspect Ratio 1:1.4142 */}

root/bujots-front/src/components/JournalBack.tsx

@@ -17,7 +17,7 @@ const JournalCover = ({ children }: Props) => {
             <motion.div className="col-start-2 col-end-3 row-start-2 row-end-3"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { ease: [0.075, 0.82, 0.165, 1], duration: 1 } }}
-                exit={{ opacity: 0, rotate: 20, translateX: -100, translateY: 100 }}
+                exit={{ opacity: 0, rotate: 5, translateX: -40, translateY: 40 }}
                 transition={{ ease: "easeInOut", duration: .5 }}
             >
                 {/* A4 Aspect Ratio 1:1.4142 */}