get personal info

src/views/PersonalView.vue

@@ -1,11 +1,30 @@
-<script setup lang="ts">
-
+<script setup>
+import List from '@/views/PersonalView/List.vue'
 </script>
 
 <template>
-Personal view
+  <n-grid
+    responsive="screen"
+    item-responsive
+    cols="24"
+    :x-gap="16"
+    :y-gap="16"
+  >
+    <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3"/>
+
+    <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
+      <n-card class="personal-card"
+        bordered title="Personal info">
+        <List />
+      </n-card>
+    </n-gi>
+
+    <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3"/>
+  </n-grid>
 </template>
 
 <style scoped>
-
+.personal-card {
+  margin: 10px auto 0;
+}
 </style>