layout full page; finish contact

L23de · Jan 2, 2022 · 1babad8 · 1babad8
1 parent 5c0350d
commit 1babad8
Show file tree

Hide file tree

Showing 13 changed files with 289 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/css/app.scss" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>👋 I'm Lester Huang</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -8,11 +8,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@quasar/extras": "^1.12.2",
     "gh-pages": "^3.2.3",
+    "quasar": "^2.4.2",
     "vue": "^3.2.25"
   },
   "devDependencies": {
+    "@quasar/vite-plugin": "^1.0.4",
     "@vitejs/plugin-vue": "^2.0.0",
+    "sass": "1.32.0",
     "vite": "^2.7.2"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,21 +1,15 @@
 <script setup>
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
+import NavBar from '@/components/NavBar.vue'
+import SplashPane from '@/components/SplashPane.vue'
+import CareerPane from '@/components/CareerPane.vue'
+import HumanPane from '@/components/HumanPane.vue'
+import ContactPane from '@/components/ContactPane.vue'
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
-</template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+  <NavBar />
+  <SplashPane />
+  <CareerPane />
+  <HumanPane />
+  <ContactPane />
+</template>
diff --git a/src/components/CareerPane.vue b/src/components/CareerPane.vue
@@ -0,0 +1,14 @@
+<script setup>
+</script>
+
+<template>
+    <div id="experiences">
+        Experiences
+        <!-- Brief resume -->
+    </div>
+</template>
+
+
+<style>
+
+</style>
diff --git a/src/components/ContactPane.vue b/src/components/ContactPane.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue'
+import { QBtn } from 'quasar'
+</script>
+
+<template>
+    <div id="contact">
+        <div id="contact-blurb">
+            <h2>Let's talk</h2>
+            <p>Reach out to me on the these platforms!</p>
+        </div>
+        <div id="contact-buttons">
+            <q-btn round icon="far fa-envelope-open" type="a" href="mailto:[email protected]" target="_blank" size="md" unelevated />
+            <q-btn round icon="fab fa-linkedin-in" type="a" href="https://www.linkedin.com/in/lesterhuang/" target="_blank" size="md" unelevated />
+            <q-btn round icon="fab fa-github" type="a" href="https://github.com/L23de" target="_blank" size="md" unelevated />
+            <q-btn round icon="fab fa-instagram" type="a" href="https://www.instagram.com/lester.302d/" target="_blank" size="md" unelevated />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+#contact {
+    background: $primary;
+    color: white;
+    padding-left: 20vw;
+    padding-right: 20vw;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+#contact-blurb {
+    text-align: left;
+    margin-right: 5vw;
+}
+
+#contact-blurb h2 {
+    margin-top: 3rem;
+    margin-bottom: 0;
+}
+
+#contact-blurb p {
+    margin-bottom: 3rem;
+}
+
+#contact-buttons {
+}
+</style>
diff --git a/src/components/HumanPane.vue b/src/components/HumanPane.vue
@@ -0,0 +1,14 @@
+<script setup>
+</script>
+
+<template>
+    <div id="hobbies">
+        Hobbies
+        <!-- Brief hobby desc and pictures if possible -->
+    </div>
+</template>
+
+
+<style>
+
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+import { QInput } from 'quasar'
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/components/SplashPane.vue b/src/components/SplashPane.vue
@@ -0,0 +1,13 @@
+<script setup>
+</script>
+
+<template>
+    <div id="splash">
+        <h1>👋 I'm Lester Huang</h1>
+        <!-- Brief about me with a good picture -->
+    </div>
+</template>
+
+
+<style>
+</style>
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -0,0 +1,8 @@
+@import './quasar-variables.scss';
+
+#app {
+    font-family: 'Open Sans', sans-serif;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/css/quasar-variables.scss b/src/css/quasar-variables.scss
@@ -0,0 +1,10 @@
+$primary   : #1976D2;
+$secondary : #26A69A;
+$accent    : #9C27B0;
+
+$dark      : #1D1D1D;
+
+$positive  : #21BA45;
+$negative  : #C10015;
+$info      : #31CCEC;
+$warning   : #F2C037;
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,16 @@
 import { createApp } from 'vue'
+import { Quasar } from 'quasar'
+import quasarIconSet from 'quasar/icon-set/fontawesome-v5'
+import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
+import 'quasar/src/css/index.sass'
+
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const myApp = createApp(App)
+
+myApp.use(Quasar, {
+    plugins: {},
+    iconSet: quasarIconSet,
+})
+
+myApp.mount('#app') // Mounts to 'app' id in index.html
diff --git a/vite.config.js b/vite.config.js
@@ -1,8 +1,23 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+
+const path = require('path')
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  base: '/', 
-  plugins: [vue()]
+  base: '/',
+  resolve: {
+    alias: {
+      '@' : path.resolve(__dirname, './src')
+    }
+  },
+  plugins: [
+    vue({
+      template: { transformAssetUrls }
+    }),
+
+    quasar({
+      sassVariables: 'src/css/quasar-variables.scss'
+    })
+  ]
 })