researcher profile page separations

frontend/src/Apps/ResearcherProfile.vue

@@ -0,0 +1,109 @@
+<script setup>
+
+</script>
+
+<template>
+<div id="main">
+  <div id="profilePicture">
+    <img src="/Clyde.png">
+  </div>
+  <div id="researcherInfos">
+    <div class="surrounded" >
+      John Doe
+
+    </div>
+    <div class="surrounded" >
+      Orcid :
+      12144-2144-12336-B
+
+    </div>
+    <div class="surrounded" >
+      Email : John.Doe@umons.ac.be
+
+    </div>
+
+    <div class="surrounded" >
+      site :
+      <a href="http://localhost:5173" style="color: #007aff">here</a>
+
+    </div>
+    <div class="surrounded" >
+      Domain : physics, IT
+    </div>
+    <div id="coAuthorList" class="surrounded">
+     Co-authors list : D
+    </div>
+
+  </div>
+  <div id="stats">
+    <div class="surrounded">
+      Stat type : <select name="stats" id="stats-select">
+      <option value="views">Views</option>
+      <option value="co-authors">Co-authors</option>
+      <option value="articles">Articles</option>
+      <option value="language">Languages</option>
+    </select>
+    </div>
+    <div class="surrounded">
+      Class by: <select name="classedBy" id="classed-select">
+      <option value="years">Years</option>
+      <option value="months">Months</option>
+      <option value="topics">Topics</option>
+
+    </select>
+    </div>
+
+  </div>
+  <div id="articles">
+
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+#main {
+  display: grid;
+  grid-template-columns: 22% auto;
+  grid-template-rows: 26% auto;
+  height: 100%;
+  width: 100%;
+}
+
+
+#profilePicture {
+  display: flex;
+  justify-content: center;
+}
+#profilePicture img{
+  align-self: center;
+  justify-self: center;
+  width:60%;
+}
+
+#researcherInfos {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  column-gap: 5px;
+  grid-template-rows: auto auto ;
+}
+.surrounded {
+  border:2px solid black;
+  color:white;
+  background-color:rgb(50,50,50);
+  font-size: x-large;
+  align-self: center;
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius:20px;margin-bottom:10px;
+}
+
+#stats {
+}
+
+
+#articles {
+  background-color: orange;
+}
+
+</style>

frontend/src/rest/apps.js

@@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import ResearcherProfile from "@/Apps/ResearcherProfile.vue";
 
 const apps = {
 		'/login': LoginPage,
@@ -17,6 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/researcher-profile' : ResearcherProfile,
 }
 
 const appsList = {