added hero section, support for external links in navbar
Nichlas W. Andersen
committed Aug 10, 2018
commit 6432922fbf64e357dc14d77895575022b3580108
Showing 7
changed files with
61 additions
and 12 deletions
portfolio/.vuepress/components/Hero.vue
+30
-0
| @@ | @@ -0,0 +1,30 @@ |
| + | <template> |
| + | <h1 class="title"> |
| + | <slot></slot> |
| + | </h1> |
| + | </template> |
| + | |
| + | <script> |
| + | export default { |
| + | } |
| + | </script> |
| + | |
| + | <style scoped> |
| + | .title { |
| + | text-align: center; |
| + | font-size: calc(21px + (48 - 14) * ((100vw - 300px) / (1600 - 300))); |
| + | font-weight: 300; |
| + | line-height: 1.25; |
| + | letter-spacing: 0.1rem; |
| + | width: 800px; |
| + | max-width: 100%; |
| + | margin: 18vw auto 7vw auto; |
| + | } |
| + | |
| + | @media screen and (min-width: 600px) { |
| + | .title { |
| + | margin: 12vw auto 7vw auto; |
| + | } |
| + | } |
| + | |
| + | </style> |
portfolio/.vuepress/components/Navbar.vue
+17
-3
| @@ | @@ -14,13 +14,16 @@ |
| <router-link | |
| v-for="nav in navLinks" | |
| :key="nav.text" | |
| - | v-if="nav.position === 'left'" |
| + | v-if="nav.position === 'left' && !nav.external" |
| tag="li" | |
| :to="nav.link" | |
| active-class="active" | |
| v-text="nav.text" | |
| exact | |
| /> | |
| + | <li v-for="nav in navLinks" v-if="nav.position === 'left' && nav.external"> |
| + | <a :href="nav.link" target="_blank">{{ nav.text }}</a> |
| + | </li> |
| </ul> | |
| </nav> | |
| @@ | @@ -39,13 +42,16 @@ |
| <router-link | |
| v-for="nav in navLinks" | |
| :key="nav.text" | |
| - | v-if="nav.position === 'right'" |
| + | v-if="nav.position === 'right' && !nav.external" |
| tag="li" | |
| :to="nav.link" | |
| active-class="active" | |
| v-text="nav.text" | |
| exact | |
| /> | |
| + | <li v-for="nav in navLinks" v-if="nav.position === 'right' && nav.external"> |
| + | <a :href="nav.link" target="_blank">{{ nav.text }}</a> |
| + | </li> |
| </ul> | |
| </nav> | |
| @@ | @@ -67,7 +73,7 @@ |
| computed: { | |
| navLinks() { | |
| return this.$site.themeConfig.nav | |
| - | } |
| + | }, |
| } | |
| } | |
| </script> | |
| @@ | @@ -118,4 +124,12 @@ |
| border-bottom: 1px solid #000; | |
| } | |
| + | a { |
| + | text-decoration: none; |
| + | color: inherit; |
| + | } |
| + | |
| + | a:active { color: inherit; } |
| + | a:visited { color: inherit; } |
| + | |
| </style> | |
portfolio/.vuepress/config.js
+5
-4
| @@ | @@ -3,11 +3,12 @@ module.exports = { |
| description: "creative agency", | |
| base: "/", | |
| themeConfig: { | |
| + | logo: "/upload/logo.svg", |
| nav: [ | |
| - | { text: "Works", link: "/", position: "left" }, |
| - | { text: "Instagram", link: "/instagram/", position: "left" }, |
| - | { text: "Say hi!", link: "/about/", position: "right" }, |
| - | { text: 'Journal', link: '/journal/', position: 'right' }, |
| + | { text: "Works", link: "/", position: "left", external: false }, |
| + | { text: "Instagram", link: "https://www.instagram.com/its.nwa/", position: "left", external: true }, |
| + | { text: "Say hi!", link: "mailto:sayhi@mydomain.com", position: "right", external: true }, |
| + | { text: 'Journal', link: '/journal/', position: 'right', external: false }, |
| ] | |
| }, | |
| markdown: { | |
portfolio/.vuepress/theme/Layout.vue
+1
-5
| @@ | @@ -1,7 +1,7 @@ |
| <template> | |
| <div class="wrapper"> | |
| - | <Navbar logo="/upload/logo.svg" :sticky="$route.path === '/'" /> |
| + | <Navbar :logo="$site.themeConfig.logo" :sticky="$route.path === '/'" /> |
| <div class="container"> | |
| @@ | @@ -38,14 +38,10 @@ |
| const worksRoute = '/works/' | |
| const path = this.$route.path | |
| if (path.includes('works') && path.length >= (worksRoute.length + 1)) { | |
| - | console.log(`Current route is ${path}, and is indeed a single project.`) |
| return true | |
| } | |
| }, | |
| }, | |
| - | mounted() { |
| - | console.log(this.$site) |
| - | } |
| } | |
| </script> | |
portfolio/index.md
+4
-0
| @@ | @@ -1,4 +1,8 @@ |
| --- | |
| works_index: true | |
| + | hero_text: |
| + | We're Acme, we work for brands. |
| + | But most importantly, we work for fun. |
| --- | |
| + | <Hero>{{ $page.frontmatter.hero_text }}</Hero> |
| <WorksList /> | |
portfolio/works/project-1.md
+2
-0
| @@ | @@ -9,3 +9,5 @@ categories: |
| description: subtitle | |
| --- | |
| + | |
| + | Project content |
portfolio/works/project-3.md
+2
-0
| @@ | @@ -9,3 +9,5 @@ categories: |
| description: subtitle | |
| --- | |
| + | |
| + | Project content |