feat: base page

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
+    "element-ui": "^2.15.12",
     "vue": "^2.6.10",
     "vue-router": "3.1.3"
   },

src/App.vue

@@ -24,6 +24,7 @@ export default {
 
 header {
   flex: 0 0 auto;
+  position: absolute;
 }
 
 .main {
@@ -34,6 +35,7 @@ footer {
   flex: 0 0 auto;
 }
 
+/*
 @media all and (min-width: 991px) {
   .main {
     padding: 60px 120px;
@@ -51,4 +53,5 @@ footer {
     padding: 12px 12px;
   }
 }
+ */
 </style>

src/layout/Header.vue

@@ -1,24 +1,35 @@
 <template>
   <header :data-color="color">
-    <div id="logo">
-      <a href="/#/">Chen.Space</a>
-    </div>
-
     <nav id="menu">
-      <div :class="{active: active === 'index'}">
-        <a href="/#/">Projects</a>
-      </div>
-      <div :class="{active: active === 'about'}">
-        <a href="/#/about">About</a>
-      </div>
-      <div :class="{active: active === 'contact'}">
-        <a href="/#/contact">Contact</a>
-      </div>
-    </nav>
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          Projects<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>The Perspective of The Other, 2022</el-dropdown-item>
+          <el-dropdown-item>The Last Mile, 2021</el-dropdown-item>
+          <el-dropdown-item>La jetée 2021,2021</el-dropdown-item>
+          <el-dropdown-item>Cardboard Cut-outs, 2020</el-dropdown-item>
+          <el-dropdown-item>The right to clip, 2020</el-dropdown-item>
+          <el-dropdown-item>film.exe, 2020</el-dropdown-item>
+          <el-dropdown-item>Overexposure, 2019</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
 
-    <span id="more">
-      <a href="/#/"><img alt="" src="../assets/logo.png" height="20"/></a>
-    </span>
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          About<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>Biography</el-dropdown-item>
+          <el-dropdown-item>CV</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-link href="/#/contact">
+        Contact
+      </el-link>
+    </nav>
   </header>
 </template>
 
@@ -32,7 +43,6 @@ export default {
   },
   methods: {},
   mounted() {
-    // console.log(111);
   },
 }
 </script>
@@ -41,44 +51,20 @@ export default {
 header {
   display: flex;
   flex-direction: row;
-  padding: 30px;
-  /*background: blanchedalmond;*/
-}
-
-#logo {
-  flex: 0 0 auto;
-}
-
-#logo a {
-  font-weight: bold;
+  padding: 24px;
 }
 
 #menu {
   flex: 1 0 auto;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: left;
   margin: 0;
   padding: 0;
 }
 
 #menu div {
   margin: 0 6px;
-  padding: 0 4px 4px 4px;
-}
-
-#menu div.active {
-  border-bottom: black solid 2px;
-}
-
-#menu div a {
-  color: black;
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: unset;
-}
-
-#more {
-  flex: 0 0 auto;
+  padding: 0 4px;
 }
 </style>

src/main.js

@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import router from "./router";
 
 Vue.config.productionTip = false
+Vue.use(ElementUI);
 
 new Vue({
   router,

src/views/Contact.vue

@@ -16,6 +16,10 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  margin: 96px 64px 0;
+}
+
 h1 {
   font-size: 32px;
 }

src/views/Index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="container">
+    <!--
     <div>
       <a href="/#/"><h1>The Perspective of The Other, 2022</h1></a>
       <a href="/#/"><h1>The Last Mile, 2021</h1></a>
@@ -9,6 +10,38 @@
       <a href="/#/"><h1>film.exe, 2020</h1></a>
       <a href="/#/"><h1>Overexposure, 2019</h1></a>
     </div>
+    -->
+    <div id="main-left">
+      <div id="main-name">
+        <p>Chen<br/>Luyu</p>
+      </div>
+    </div>
+    <div id="main-right">
+      <div class="box" id="box-1">
+        <a href="/#/">Project 1</a>
+      </div>
+      <div class="box" id="box-2">
+        <a href="/#/">Project 2</a>
+      </div>
+      <div class="box" id="box-3">
+        <a href="/#/">Project 3</a>
+      </div>
+      <div class="box" id="box-4">
+        <a href="/#/">Project 4</a>
+      </div>
+      <div class="box" id="box-5">
+        <a href="/#/">Project 5</a>
+      </div>
+      <div class="box" id="box-6">
+        <a href="/#/">Project 6</a>
+      </div>
+      <div class="box" id="box-7">
+        <a href="/#/">Project 7</a>
+      </div>
+      <div class="box" id="box-8">
+        <a href="/#/">Project 8</a>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -19,6 +52,7 @@ export default {
 </script>
 
 <style scoped>
+/**
 h1 {
   font-size: 28px;
 }
@@ -26,5 +60,87 @@ h1 {
 a {
   color: black;
   text-decoration: none;
+}
+ */
+
+.container {
+  height: 100%;
+}
+
+#main-left {
+}
+
+#main-right {
+  /*flex: 1 0 auto;*/
+  display: flex;
+  flex-direction: column;
+  float: right;
+  width: 50%;
+  height: 100%;
+}
+
+#main-name {
+  position: absolute;
+  bottom: 20px;
+  left: 32px;
+  font-size: 96px;
+}
+
+#main-right div {
+  flex: 1 0 auto;
+}
+
+.box {
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 24px;
+}
+
+.box a {
+  color: white;
+  font-size: 24px;
+  text-decoration: none;
+  display: none;
+  transition: all 0.6s;
+}
+
+.box:hover a {
+  display: block;
+  transform: unset;
+}
+
+#box-1 {
+  background-image: url("../assets/img-1.jpg");
+}
+
+#box-2 {
+  background-image: url("../assets/img-2.jpg");
+}
+
+#box-3 {
+  background-image: url("../assets/img-3.jpg");
+}
+
+#box-4 {
+  background-image: url("../assets/img-4.jpg");
+}
+
+#box-5 {
+  background-image: url("../assets/img-5.jpg");
+}
+
+#box-6 {
+  background-image: url("../assets/img-6.jpg");
+}
+
+#box-7 {
+  background-image: url("../assets/img-7.jpg");
+}
+
+#box-8 {
+  background-image: url("../assets/img-8.jpg");
 }
 </style>