Major changes in home page, added stuff on other pages and favicon

3 files changed, 151 insertions, 15 deletions

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index f818c20..2e10eba 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,8 +1,20 @@
 <template>
     <div>
-            <v-card-title>Blog</v-card-title>
-            <v-card-text>This is where I will be posting my stuff</v-card-text>
-        <h1>Hello</h1>
+        <v-card>
+            <header id="showcase">
+                <h1 class="display-3">Blog</h1>
+                <h1>This is where I post stuff here.</h1>
+            </header>
+        </v-card>
+        <v-container>
+            <v-col cols="6">
+                <v-card to="/">
+                    <v-card-title>Blog Post Title</v-card-title>
+                    <v-card-text>Content</v-card-text>
+                </v-card>
+                <br>
+            </v-col>
+        </v-container>
     </div>
 </template>
 
@@ -13,8 +25,19 @@ export default {
     title: 'Blog'
   }
 }
+
 </script>
 
 <style scoped>
-
+    #showcase {
+        background-image:url("../../assets/img/landing_page.png");
+        background-size: cover;
+        background-position: center;
+        height: 30vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+    }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index d66d3fc..420b60e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,98 @@
 <template>
     <div>
-        <v-card>
-            <h1>Landing page here</h1>
-        </v-card>
-        <v-container>
-            <v-card flat color="green darken-3" dark>
-                <h1>About Me</h1>
-                <p>Hello! I am Andrew Lee and I'm 15 years old. In 2014, I started my first youtube channel The Alee Diamond.</p>
+        <!-- Animation goes here -->
+        <div class="landing-page">
+            <v-card>
+                <header id="showcase">
+                    <v-img :src="require('../assets/img/Alee.png')" max-height="200px" max-width="200px" />
+                    <br/>
+                    <h1 class="display-4">Hello, I'm Andrew Lee!</h1>
+                    <br/>
+                    <h1 class="display-1">Welcome to my personal website.</h1>
+                    <h1>Note to Andrew: Replace this background</h1>
+                </header>
             </v-card>
+        </div>
+        <v-container>
+            <div class="about">
+                <v-card flat color="green darken-3" dark>
+                    <v-container>
+                        <h1>About Me</h1>
+                        <p><b>Hello, I'm Andrew Lee and I'm currently 15 years old.</b></p>
+                        <h1>Timeline</h1>
+                        <p> 2014: Created my first YouTube channel The Alee Diamond<br>
+                            2015: First got into programming and learned HTML and Batch.<br>
+                            2016: Learned a bit of VB, The Alee Diamond rebranded into Andrew Lee and AleeTechyPlays is born.<br>
+                            2017: Learned JavaScript and C#.</p>
+                        <h1>Programming Languages</h1>
+                        <ul>
+                            <li>C#</li>
+                            <li>C++</li>
+                            <li>JavaScript</li>
+                            <li>HTML</li>
+                            <li>Vue</li>
+                        </ul>
+                        <h1>My favorite games</h1>
+                        <ul>
+                            <li>Splatoon 2</li>
+                            <li>Animal Crossing: New Horizons</li>
+                            <li>Minecraft</li>
+                            <li>Super Mario Maker 2</li>
+                            <li>Super Mario Odyssey</li>
+                            <li>PC Building Simulator</li>
+                            <li>Software Inc</li>
+                            <li>Hacknet</li>
+                        </ul>
+                    </v-container>
+                </v-card>
+            </div>
+            <div class="projects">
+                <!-- This might get removed -->
+            </div>
+            <div class="blog">
+                <h1>Blog here</h1>
+            </div>
+            <div class="aleepc-specs">
+                <h1>AleePC Parts</h1>
+                <v-simple-table>
+                    <tr>
+                        <th>Part Type</th>
+                        <th>Part Name</th>
+                    </tr>
+                    <tr>
+                        <td>CPU</td>
+                        <td>AMD - Ryzen 3 2200G 3.5 GHz Quad-Core Processor</td>
+                    </tr>
+                    <tr>
+                        <td>CPU Cooler</td>
+                        <td>Cooler Master - Hyper T2 54.8 CFM Sleeve Bearing CPU Cooler</td>
+                    </tr>
+                    <tr>
+                        <td>Motherboard</td>
+                        <td>ASRock - B450M-HDV Micro ATX AM4</td>
+                    </tr>
+                    <tr>
+                        <td>Memory</td>
+                        <td>Corsair - Vengeance LPX 16 GB (2 x 8 GB) DDR4-2400</td>
+                    </tr>
+                    <tr>
+                        <td>Main Storage</td>
+                        <td>Western Digital Blue 250 GB M.2-2280 Solid State Drive</td>
+                    </tr>
+                    <tr>
+                        <td>Second Storage</td>
+                        <td>Western Digital Blue 2 TB 3.5" 5400RPM Internal Hard Drive</td>
+                    </tr>
+                    <tr>
+                        <td>Case</td>
+                        <td>Rosewill - FBM-X1 MicroATX Mini Tower Case</td>
+                    </tr>
+                    <tr>
+                        <td>Power Supply</td>
+                        <td>EVGA - 500 W 80+ Certified ATX Power Supply</td>
+                    </tr>
+                </v-simple-table>
+            </div>
         </v-container>
     </div>
 </template>
@@ -25,5 +110,15 @@ export default {
 </script>
 
 <style scoped>
-
+    #showcase {
+        background-image:url("../assets/img/landing_page.png");
+        background-size: cover;
+        background-position: center;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+    }
 </style>
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
index 6f9c676..c8487ce 100644
--- a/pages/projects/index.vue
+++ b/pages/projects/index.vue
@@ -1,13 +1,31 @@
 <template>
-        <p>test</p>
+        <v-card>
+                <header id="showcase">
+                        <h1 class="display-3">Projects</h1>
+                        <h1>My current and past projects goes here.</h1>
+                </header>
+        </v-card>
 </template>
 
 <script>
 export default {
-  name: 'projects'
+  name: 'projects',
+  head: {
+    title: 'Projects'
+  }
 }
 </script>
 
 <style scoped>
-
+        #showcase {
+                background-image:url("../../assets/img/landing_page.png");
+                background-size: cover;
+                background-position: center;
+                height: 30vh;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 0 20px;
+        }
 </style>