ayush
/
ayushm-com
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init scss; create header; create homepage

Browse Source
master
Ayush Mukherjee 4 years ago
parent 4c7fb596df
commit cf653aad2b
16 changed files with 210 additions and 93 deletions
Show Stats Download Patch File Download Diff File

3
public/index.html
Unescape Escape View File

@ -5,7 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>Ayush Mukherjee</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
</head>
<body>
<noscript>

37
src/App.vue
Unescape Escape View File

@ -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
}
}
</style>
</script>
<style lang="scss">
@import 'scss/main';
</style>

BIN
src/assets/illustration.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 224 KiB

19
src/components/Header.vue
Unescape Escape View File

@ -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>

58
src/components/HelloWorld.vue
Unescape Escape View File

@ -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>

3
src/scss/_main.scss
Unescape Escape View File

@ -0,0 +1,3 @@
@import 'base/index',
'components/index',
'pages/index';

30
src/scss/base/_base.scss
Unescape Escape View File

@ -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;
}

2
src/scss/base/_index.scss
Unescape Escape View File

@ -0,0 +1,2 @@
@import 'variables',
'base';

22
src/scss/base/_variables.scss
Unescape Escape View File

@ -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;

23
src/scss/components/_btn.scss
Unescape Escape View File

@ -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%);
}
}

53
src/scss/components/_header.scss
Unescape Escape View File

@ -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;
}
}
}
}

2
src/scss/components/_index.scss
Unescape Escape View File

@ -0,0 +1,2 @@
@import 'header',
'btn';

20
src/scss/pages/_home.scss
Unescape Escape View File

@ -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;
}
}

1
src/scss/pages/_index.scss
Unescape Escape View File

@ -0,0 +1 @@
@import 'home';

30
src/views/Home.vue
Unescape Escape View File

@ -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>
<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>

Write Preview
Loading…
Cancel
Save