docs : READE writeup(#73)

README.md

@@ -2,9 +2,9 @@
 
 
 <img
-  src="./frontend/src/img/mainlogo.png"
+  src="./demo/welcome.png"
   alt="mainlogo"
-  style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 300px">
+  style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 400px">
 
 > ## Learn from your friends. 
 
@@ -28,71 +28,119 @@ Friend mentor is a lecture provider platform where lectures recorded by students
 
 [2. Introducing Friend Mentor](#2)
 
-&nbsp;&nbsp;&nbsp;&nbsp;[2.1) Sign up & Sign in](#2-1)
+&nbsp;&nbsp;&nbsp;&nbsp;[2.1) Login and Signup](#2-1)
+
+&nbsp;&nbsp;&nbsp;&nbsp;[2.2) Browse Lectures & Give upvotes](#2-2)
+
 
-&nbsp;&nbsp;&nbsp;&nbsp;[2.2) Browse Lectures](#2-2)
+&nbsp;&nbsp;&nbsp;&nbsp;[2.3) Upload my lectures](#2-3)
 
-&nbsp;&nbsp;&nbsp;&nbsp;[2.3) Give upvotes](#2-3)
+&nbsp;&nbsp;&nbsp;&nbsp;[2.4) Certificates](#2-4)
 
-&nbsp;&nbsp;&nbsp;&nbsp;[2.4) Upload my lectures](#2-4)
+[3. Setup](#3)
 
-&nbsp;&nbsp;&nbsp;&nbsp;[2.5) Certificates](#2-5)
 
-[3. Project Architecture](#3)
+[4. Project Architecture](#4)
 
-&nbsp;&nbsp;&nbsp;&nbsp;[3.1) Flowchart](#3-1)
+&nbsp;&nbsp;&nbsp;&nbsp;[4.1) Flowchart](#4-1)
 
-&nbsp;&nbsp;&nbsp;&nbsp;[3.2) Techs Used](#3-2)
+&nbsp;&nbsp;&nbsp;&nbsp;[4.2) Techs Used](#4-2)
 
-[4. Contributors](#4)
+
+[5. Contributors](#5)
 
 <a name="1"></a>
 # 1. Backgrounds
 
 <a name="1-1"></a>
 ## 1.1) What is the problem?
 
-In this project, we aimed to solve 
+As a student, our team understands how hard it is to learn a piece of knowledge by oneself. It is very hard to 
+
 
 <a name="1-2"></a>
 ## 1.2) What is the solution?
 
+Project 'Friends Mentor' is motivated by one of Albert Einstein's quotes.
+
+> If you can't explain it simply, you don't understand it enough.
+
+This quote implies that once a student learned something thouroughly, one can also explain it to others. Also, thinking backwards, if we evaluate whether students can explain well about a topic they learned, we can 'grade them' without exams.
+
+ Our goal is to build a 'Stack overflow','Coursera', and 'Wikipedia' on school basic subjects. We dreamed an online website( or an app) where kids can freely access peer's explaination on things they didn't understand on school 
+
+Project 'Friends Mentor' tries to achieve the <u>4th goal of UN SDG sustainable Goals</u>, which is **Quality Education**. Specifically, this project aims to gain progress on **indicator 4.1.1. and 4.c.1.**
+
+> 4.1.1
+Proportion of children and young people (a) in grades 2/3; (b) at the end of primary; and (c) at the end of lower secondary achieving at least a minimum proficiency level in (i) reading and (ii) mathematics, by sex
+
+> 4.c.1
+Proportion of teachers with the minimum required qualifications, by education level
+
+
 <a name="1-3"></a>
 ## 1.3) What software is needed?
 
 <a name="2"></a>
 # 2. Introducing Friend Mentor
 
 <a name="2-1"></a>
-## 2.1) Sign up & Sign in
+## 2.1) Login & Sign up
+
+<img
+  src="./demo/login.png"
+  alt="mainlogo"
+  style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 400px">
+
 
 <a name="2-2"></a>
-## 2.2) Browse Lectures
+## 2.2) Browse Lectures & Give upvotes
+
+<img
+  src="./demo/watch_lectures_and_give_upvotes.png"
+  alt="mainlogo"
+  style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 400px">
 
 <a name="2-3"></a>
-## 2.3) Give upvotes
+## 2.3) Upload my lectures
+
+<img
+  src="./demo/upload_lectures.png"
+  alt="mainlogo"
+  style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 400px">
+
 
 <a name="2-4"></a>
-## 2.4) Upload my lectures
+## 2.4) Certificates
 
-<a name="2-5"></a>
-## 2.5) Certificates
+<img
+  src="./demo/certificates.png"
+  alt="mainlogo"
+  style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 400px">
 
 
 <a name="3"></a>
-# 3. Project Architecture
+# 3. Setup
+
+```bash
+npm build 
+```
+
+<a name="4"></a>
+# 4. Project Architecture
+
+<a name="4-1"></a>
+## 4.1) Project structure
 
-<a name="3-1"></a>
-## 3.1) Project structure
 <img src="./frontend/src/img/project-flow2.drawio.png" alt="project_structure"
   style="display: flex; margin: auto; align-items:center; justify-content : center; max-width: 300px">
 
-<a name="3-2"></a>
-## 3.2) Techs Used
+<a name="4-2"></a>
+## 4.2) Techs Used
 
 
-<a name="4"></a>
-# 4. Contributors
+<a name="5"></a>
+# 5. Contributors
 
 
 

frontend/src/styles/styled-components/LecturePlayer.style.jsx

@@ -8,8 +8,12 @@ import "styles/style.bootstrap.css";
 
 const LecturePlayer = styled.iframe`
     display : inline-block;
-    width : 100%;
-    aspect-ratio : 16/9;
+    position : absolute;
+    top : 0;
+    bottom : 0;
+    left : 0;
+    right : 0;
+    
     outline : none;
     border : none;
     border-radius : var(--default-border-radius);