init scss; create header; create homepage
Ayush Mukherjee
4 years ago
parent
4c7fb596df
commit
cf653aad2b
@ -1,32 +1,21 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
<Header></Header>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
<script>
|
||||
import Header from '@/components/Header'
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Header
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'scss/main';
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 224 KiB |
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="brand">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="Ayush M. Logo" width="60px" height="60px">
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>Ayush</span>
|
||||
<span>Mukherjee.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<router-link class="active" to="#work">work</router-link>
|
||||
<router-link to="#about">about</router-link>
|
||||
<router-link to="#skills">skills</router-link>
|
||||
<router-link to="#contact">contact</router-link>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
@import 'base/index',
|
||||
'components/index',
|
||||
'pages/index';
|
||||
@ -0,0 +1,30 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: $font-regular;
|
||||
font-weight: $font-normal;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
letter-spacing: 0.005em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 120px;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import 'variables',
|
||||
'base';
|
||||
@ -0,0 +1,22 @@
|
||||
// background and text colors
|
||||
$bg: #F6FAFF;
|
||||
$fg: #05102E;
|
||||
|
||||
// theme colors
|
||||
$primary: #224AB7;
|
||||
$secondary: #FC7DA7;
|
||||
$tertiary: #94C3FF;
|
||||
$quaternary: #D1E5FF;
|
||||
|
||||
// fonts
|
||||
$font: 'Montserrat', sans-serif;
|
||||
$font-normal: 500;
|
||||
$font-bold: 700;
|
||||
|
||||
// font sizes
|
||||
$font-brand: 16pt;
|
||||
$font-nav: 12pt;
|
||||
$font-section: 50pt;
|
||||
$font-section-sub: 16pt;
|
||||
$font-heading: 30pt;
|
||||
$font-regular: 16pt;
|
||||
@ -0,0 +1,23 @@
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: $primary;
|
||||
color: $bg;
|
||||
text-decoration: none;
|
||||
padding: 23px 50px;
|
||||
margin-right: 40px;
|
||||
border-radius: 5px;
|
||||
transition: 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: lighten($primary, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: $fg;
|
||||
background: $secondary;
|
||||
|
||||
&:hover {
|
||||
background: darken($secondary, 10%);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
header {
|
||||
padding: 60px 120px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 210px;
|
||||
font-size: $font-brand;
|
||||
|
||||
.logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: $font-nav;
|
||||
|
||||
a,
|
||||
a:active,
|
||||
a:visited {
|
||||
display: inline-block;
|
||||
color: $fg;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
padding-right: 80px;
|
||||
transition: 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $tertiary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import 'header',
|
||||
'btn';
|
||||
@ -0,0 +1,20 @@
|
||||
main {
|
||||
position: relative;
|
||||
padding: 60px 120px;
|
||||
|
||||
.tag {
|
||||
font-size: $font-heading;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.para {
|
||||
max-width: 600px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 120px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
@import 'home';
|
||||
@ -1,18 +1,28 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div class="container">
|
||||
<main>
|
||||
<div class="tag">
|
||||
I design and build
|
||||
<br>
|
||||
interfaces for Humans.
|
||||
</div>
|
||||
<div class="para">
|
||||
<p>I make robust, easy to use systems and applications centered around humans. I believe simplicity is the way forward for modern systems and apps.</p>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<a href="#work" class="btn">See my work</a>
|
||||
<a href="#contact" class="btn btn-secondary">Discuss a project</a>
|
||||
</div>
|
||||
<div class="illustration">
|
||||
<img src="@/assets/illustration.png" alt="Illustration">
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
name: 'Home'
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue