init scss; create header; create homepage
Ayush Mukherjee
4 years ago
parent
4c7fb596df
commit
cf653aad2b
@ -1,32 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="nav">
|
<Header></Header>
|
||||||
<router-link to="/">Home</router-link> |
|
<router-view></router-view>
|
||||||
<router-link to="/about">About</router-link>
|
|
||||||
</div>
|
|
||||||
<router-view/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<script>
|
||||||
#app {
|
import Header from '@/components/Header'
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
|
||||||
padding: 30px;
|
|
||||||
|
|
||||||
a {
|
export default {
|
||||||
font-weight: bold;
|
name: 'App',
|
||||||
color: #2c3e50;
|
components: {
|
||||||
|
Header
|
||||||
&.router-link-exact-active {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import 'scss/main';
|
||||||
</style>
|
</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>
|
<template>
|
||||||
<div class="home">
|
<div class="container">
|
||||||
<img alt="Vue logo" src="../assets/logo.png">
|
<main>
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home'
|
||||||
components: {
|
|
||||||
HelloWorld
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue