├── .gitignore
├── netlify.toml
├── src
    ├── favicon.png
    ├── data
    │   ├── Hero.yml
    │   ├── Contact.yml
    │   ├── SocialMedia.yml
    │   ├── Portfolio.yml
    │   └── About.yml
    ├── assets
    │   ├── images
    │   │   └── gridsome.png
    │   └── css
    │   │   └── style.sass
    ├── layouts
    │   └── Default.vue
    ├── main.js
    ├── pages
    │   └── Index.vue
    ├── components
    │   ├── Footer.vue
    │   ├── About.vue
    │   ├── Header.vue
    │   ├── Hero.vue
    │   ├── Blog.vue
    │   ├── Portfolio.vue
    │   └── Contact.vue
    └── templates
    │   └── BlogPost.vue
├── blog
    ├── 2018-11-10-poor-sick-man.md
    ├── 2016-09-14-god-zilla.md
    ├── 2018-11-10-wrath-of-the-dragon-god.md
    └── 2017-08-14-justice-league.md
├── static
    ├── images
    │   ├── galina-n-200668-unsplash.jpg
    │   ├── malte-wingen-381988-unsplash.jpg
    │   ├── mitchell-griest-687949-unsplash.jpg
    │   ├── ruslan-bardash-351288-unsplash.jpg
    │   ├── Behance.svg
    │   ├── Twitter.svg
    │   ├── Instagram.svg
    │   ├── RSS.svg
    │   └── GitHub.svg
    └── admin
    │   ├── index.html
    │   └── config.yml
├── package.json
├── gridsome.config.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | src/.temp
4 | node_modules
5 | dist
6 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist"
3 |   command = "gridsome build"


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mittalyashu/gridsome-starter-netlifycms/HEAD/src/favicon.png


--------------------------------------------------------------------------------
/src/data/Hero.yml:
--------------------------------------------------------------------------------
1 | title: Gridsome Starter NetlifyCMS
2 | description: I think you will love this starter kit.
3 | 


--------------------------------------------------------------------------------
/src/data/Contact.yml:
--------------------------------------------------------------------------------
1 | title: Contact
2 | description: You can catch me on social media or drop a message by filling the form.
3 | 


--------------------------------------------------------------------------------
/src/assets/images/gridsome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mittalyashu/gridsome-starter-netlifycms/HEAD/src/assets/images/gridsome.png


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <div class="container">
4 |       <slot/>
5 |     </div>
6 |   </div>
7 | </template>


--------------------------------------------------------------------------------
/blog/2018-11-10-poor-sick-man.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Poor Sick man
3 | date: 2018-11-10 20:08:08 -0700
4 | slug: poor-sick-man
5 | ---
6 | 
7 | Just simple second.


--------------------------------------------------------------------------------
/static/images/galina-n-200668-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mittalyashu/gridsome-starter-netlifycms/HEAD/static/images/galina-n-200668-unsplash.jpg


--------------------------------------------------------------------------------
/static/images/malte-wingen-381988-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mittalyashu/gridsome-starter-netlifycms/HEAD/static/images/malte-wingen-381988-unsplash.jpg


--------------------------------------------------------------------------------
/static/images/mitchell-griest-687949-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mittalyashu/gridsome-starter-netlifycms/HEAD/static/images/mitchell-griest-687949-unsplash.jpg


--------------------------------------------------------------------------------
/static/images/ruslan-bardash-351288-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mittalyashu/gridsome-starter-netlifycms/HEAD/static/images/ruslan-bardash-351288-unsplash.jpg


--------------------------------------------------------------------------------
/blog/2016-09-14-god-zilla.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: God zilla
3 | date: 2016-09-14T15:34:11.331Z
4 | slug: god-zilla
5 | ---
6 | The god zilla is a word and that's all I know.
7 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import DefaultLayout from '~/layouts/Default.vue'
2 | require('~/assets/css/style.sass')
3 | 
4 | export default function (Vue) {
5 |   Vue.component('Layout', DefaultLayout)
6 | }


--------------------------------------------------------------------------------
/src/data/SocialMedia.yml:
--------------------------------------------------------------------------------
 1 | title: Social Media Icons
 2 | items:
 3 |   - name: Twitter
 4 |     url: 'https://example.com'
 5 |   - name: RSS
 6 |     url: 'https://example.com'
 7 |   - name: Behance
 8 |     url: 'https://example.com'
 9 |   - name: GitHub
10 |     url: 'https://example.com'
11 | 


--------------------------------------------------------------------------------
/src/data/Portfolio.yml:
--------------------------------------------------------------------------------
 1 | title: Portfolio
 2 | items:
 3 |   - image: /static/images/ruslan-bardash-351288-unsplash.jpg
 4 |     title: Stool
 5 |   - image: /static/images/galina-n-200668-unsplash.jpg
 6 |     title: Plants
 7 |   - image: /static/images/mitchell-griest-687949-unsplash.jpg
 8 |     title: Bags
 9 |   - image: /static/images/malte-wingen-381988-unsplash.jpg
10 |     title: Headphone
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "gridsome-starter-netlifycms",
 3 | 	"scripts": {
 4 | 		"build": "gridsome build",
 5 | 		"develop": "gridsome develop",
 6 | 		"explore": "gridsome explore"
 7 | 	},
 8 | 	"dependencies": {
 9 | 		"@gridsome/source-filesystem": "^0.6.0",
10 | 		"@gridsome/transformer-remark": "^0.3.3",
11 | 		"gridsome": "^0.7.1",
12 | 		"node-sass": "^4.11.0",
13 | 		"sass-loader": "^8.0.0"
14 | 	},
15 | 	"license": "MIT"
16 | }
17 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	siteName: 'Gridsome Starter NetlifyCMS',
 3 | 	siteUrl: 'https://www.gridsome.org',
 4 | 	siteDescription: 'Gridsome is a blazing-fast static site generator...',
 5 | 	titleTemplate: `%s - Gridsome`,
 6 | 	
 7 | 	plugins: [
 8 | 		{
 9 | 			use: '@gridsome/source-filesystem',
10 | 			options: {
11 | 				path: 'blog/*.md',
12 | 				typeName: 'BlogPost',
13 | 				route: '/blog/:slug'
14 | 			}
15 | 		}
16 | 	]
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Gridsome Starter NetlifyCMS
 2 | 
 3 | Now modify your website directly from NetlifyCMS, no need to mess around with coding. 😅
 4 | 
 5 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/mittalyashu/gridsome-starter-netlifycms)
 6 | 
 7 | ## Donate
 8 | 
 9 | I've put a lot of time and effort into making **Gridsome Starter NetlifyCMS** project. If you love it, you can Become a Patron. I promise it will be a good investment 😉.
10 | 
11 | [![Become a Patron](https://i.imgur.com/wYOr44L.png)](https://www.patreon.com/bePatron?u=8494594)
12 | 


--------------------------------------------------------------------------------
/blog/2018-11-10-wrath-of-the-dragon-god.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Wrath of the dragon god
 3 | date: 2018-11-10 20:08:08 -0700
 4 | slug: wrath-of-the-dragon-god
 5 | ---
 6 | 
 7 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.liquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
 8 | 
 9 | Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
10 | 
11 | Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.


--------------------------------------------------------------------------------
/src/assets/css/style.sass:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Nunito:400,700')
 2 |   
 3 | *
 4 |   padding: 0
 5 |   margin: 0
 6 |   box-sizing: border-box
 7 | 
 8 | body
 9 |   font-family: 'Nunito', sans-serif
10 |   line-height: 1.5
11 |   font-size: 16px
12 | 
13 | a
14 |   text-decoration: none
15 |   color: #4DBA87
16 |   cursor: pointer
17 | 
18 | ul
19 |   list-style: none
20 | 
21 | h6
22 |   font-size: 1rem
23 | 
24 | .container
25 |   padding-right: 15px
26 |   padding-left: 15px
27 |   margin-right: auto
28 |   margin-left: auto
29 | 
30 | @media (min-width:768px)
31 |   .container
32 |     width: 750px
33 | 
34 | @media (min-width:992px)
35 |   .container
36 |     width: 970px
37 | 
38 | @media (min-width:1200px)
39 |   .container
40 |     width: 1170px


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <Header/>
 4 |     <Hero/>
 5 |     <Portfolio/>
 6 |     <About/>
 7 |     <Blog/>
 8 |     <Contact/>
 9 |     <Footer/>
10 |   </Layout>
11 | </template>
12 | 
13 | <script>
14 |   import Header from '~/components/Header.vue';
15 |   import Hero from '~/components/Hero.vue';
16 |   import Portfolio from '~/components/Portfolio.vue';
17 |   import About from '~/components/About.vue';
18 |   import Blog from '~/components/Blog.vue';
19 |   import Contact from '~/components/Contact.vue';
20 |   import Footer from '~/components/Footer.vue';
21 |   
22 |   export default {
23 |     components: { 
24 |       Header,
25 |       Hero,
26 |       Portfolio,
27 |       About,
28 |       Blog,
29 |       Contact,
30 |       Footer
31 |     },
32 |   }
33 | </script>


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer>
 3 |     <span>Copyright © 2018 Gridsome</span>
 4 |     <ul>
 5 |       <li>
 6 | 				<a href="#about">About</a>
 7 | 			</li>
 8 |       <li>
 9 | 				<a href="#contact">Contact</a>
10 | 			</li>
11 |     </ul>
12 |   </footer>
13 | </template>
14 | 
15 | <style lang="sass" scoped>
16 | 	footer
17 | 		padding: 60px 0
18 | 		display: flex
19 | 		font-size: 0.9rem
20 | 
21 | 		span
22 | 			color: black
23 | 			margin-right: auto
24 | 			font-weight: 600
25 | 
26 | 		ul
27 | 			display: flex
28 | 			margin-top: 1rem
29 | 
30 | 			a
31 | 				color: #aeaeae
32 | 
33 | 	footer, ul
34 | 		flex-direction: column
35 | 
36 | 	@media (min-width: 576px)
37 | 		footer, ul
38 | 			flex-direction: row
39 | 		
40 | 		ul
41 | 			li:last-child
42 | 				margin-left: 20px
43 | </style>


--------------------------------------------------------------------------------
/blog/2017-08-14-justice-league.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Justice League
 3 | date: 2017-08-14 20:08:08 -0700
 4 | slug: justice-league
 5 | ---
 6 | 
 7 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 8 | 
 9 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
10 | 
11 | Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
12 | 
13 | Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
14 | 
15 | Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.


--------------------------------------------------------------------------------
/src/components/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul id="about">
 3 |     <li v-for="item in About.items" :key="item.title">
 4 |       <h3>{{ item.title }}</h3>
 5 |       <p>
 6 |         {{ item.description }}
 7 |       </p>
 8 |     </li>
 9 |   </ul>
10 | </template>
11 | 
12 | <script>
13 |   import About from '~/data/About.yml'
14 | 
15 | 	export default {
16 | 		computed: {
17 | 			About () {
18 | 				return About
19 | 			}
20 | 		}
21 | 	} 
22 | </script>
23 | 
24 | 
25 | <style lang="sass" scoped>
26 |   #about
27 |     margin: 30px 0
28 | 
29 |     li
30 |       margin-top: 15px
31 | 
32 |       h3
33 |         margin-bottom: 5px
34 |       
35 |       p
36 |         font-size: 15px
37 |         line-height: 1.8
38 | 
39 |   @media (min-width: 576px)
40 |     #about
41 |       display: grid
42 |       grid-template-columns: repeat(2, auto)
43 |       grid-gap: 2em
44 | 
45 |       li
46 |         margin-top: 0
47 | </style>


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <ul>
 4 |       <li>
 5 |         <a href="/#work">Work</a>
 6 |       </li>
 7 |       <li>
 8 |         <a href="/#about">About</a>
 9 |       </li>
10 |       <li class="Header__Profile__Image">
11 |         <g-link to="/">
12 |           <g-image src="~/assets/images/gridsome.png"/>
13 |         </g-link>
14 |       </li>
15 |       <li style="text-align: right">
16 |         <a href="/#blog">Blogs</a>
17 |       </li>
18 |       <li style="text-align: right">
19 |         <a href="/#contact">Contact</a>
20 |       </li>
21 |     </ul>
22 |   </header>
23 | </template>
24 | 
25 | <style lang="sass" scoped>
26 |   header
27 |     padding: 50px 0
28 | 
29 |     ul
30 |       display: flex
31 |       flex-direction: row
32 |       align-items: center
33 |       text-transform: uppercase
34 | 
35 |       li
36 |         flex: 1 1 0
37 |         color: #4DBA87
38 |         font-size: 0.75rem
39 |         font-weight: 700
40 | 
41 |   .Header__Profile__Image
42 |     text-align: center
43 | 
44 |     img
45 |       width: 50px
46 |       border-radius: 50px
47 | </style>


--------------------------------------------------------------------------------
/static/admin/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>GitHub Authentication Example</title>
 6 |   <!--- This example uses jQuery: -->
 7 |   <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
 8 | 
 9 |   <!-- Make sure to include Nelify's authentiation library -->
10 |   <!-- Also available via npm as netlify-auth-providers -->
11 |   <script src="https://unpkg.com/netlify-auth-providers"></script>
12 | 
13 |   <script>
14 |     $(function () {
15 |       $("#login").on("click", function (e) {
16 |         e.preventDefault();
17 |         var authenticator = new netlify.default({});
18 |         authenticator.authenticate({ provider: "github", scope: "user" }, function (err, data) {
19 |           if (err) {
20 |             return $("#output").text("Error Authenticating with GitHub: " + err);
21 |           }
22 |           $("#output").text("Authenticated with GitHub. Access Token: " + data.token);
23 |         });
24 |       });
25 |     });
26 |   </script>
27 | </head>
28 | 
29 | <body>
30 |   <h1>GitHub Auth Demo:</h1>
31 |   <p><a href="#" id="login">Authenticate</a></p>
32 |   <p id="output"></p>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/src/data/About.yml:
--------------------------------------------------------------------------------
 1 | title: About
 2 | items:
 3 |   - description: >-
 4 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 5 |       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 6 |       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 7 |       commodo consequat.
 8 |     title: JavaScript
 9 |   - description: >-
10 |       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
11 |       dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
12 |       proident, sunt in culpa qui officia deserunt mollit anim id est laborum
13 |     title: Ruby on Rails
14 |   - description: >-
15 |       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
16 |       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
17 |       inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
18 |     title: Branding
19 |   - description: >-
20 |       Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
21 |       nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
22 |       nulla pariatur?
23 |     title: UI/UX
24 | 


--------------------------------------------------------------------------------
/src/components/Hero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Hero__Content">
 3 | 		<h1>{{ Hero.title }}</h1>
 4 | 		<p>{{ Hero.description }}</p>
 5 |     <ul class="Hero__Content__Icons">
 6 |       <li v-for="item in SocialMedia.items" :key="item.name">
 7 |         <a :href="item.link">
 8 |           <g-image immediate="true" :alt="item.name" :src="'/images/' + item.name + '.svg'" />
 9 |         </a>
10 |       </li>
11 |     </ul>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | 	console.log(Hero.title)
17 | 	import Hero from '~/data/Hero.yml'
18 | 	import SocialMedia from '~/data/SocialMedia.yml'
19 | 
20 | 	export default {
21 | 		computed: {
22 | 			Hero () {
23 | 				return Hero
24 | 			},
25 | 			SocialMedia () {
26 | 				return SocialMedia
27 | 			}
28 | 		}
29 | 	} 
30 | </script>
31 | 
32 | <style lang="sass" scoped>
33 | .Hero__Content
34 | 	text-align: center
35 | 	margin: 30px 0
36 | 
37 | 	.Hero__Content__Icons
38 | 		margin-top: 30px
39 | 		display: flex
40 | 		justify-content: center
41 | 
42 | 		li
43 | 			padding: 0 10px
44 | 			display: flex
45 | 
46 | 			a
47 | 				display: flex
48 | 
49 | 				img
50 | 					width: 18px
51 | 					height: 18px
52 | </style>


--------------------------------------------------------------------------------
/static/images/Behance.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#4DBA87" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 458.443 458.443"><path d="M194.019 206.642c7.935-12.351 12.466-27.086 12.204-42.884-.702-42.275-35.884-75.87-78.166-75.87H10.012C4.483 87.888 0 92.371 0 97.9v259.595c0 5.529 4.483 10.012 10.012 10.012h131.861c48.941 0 89.482-39.226 89.682-88.167.123-29.994-14.751-56.586-37.536-72.698zM51.787 139.675h77.278c13.995 0 25.382 11.386 25.382 25.382 0 13.995-11.386 25.382-25.382 25.382H51.787v-50.764zm91.236 176.045H51.787v-73.494H143.022c20.262 0 36.747 16.485 36.747 36.747s-16.484 36.747-36.746 36.747zM458.443 260.931c0-60.447-47.642-109.623-106.203-109.623s-106.203 49.177-106.203 109.623S293.68 370.555 352.24 370.555c35.534 0 68.552-18.216 88.324-48.729a110.651 110.651 0 0 0 6.691-11.876c1.442-2.974-.746-6.435-4.052-6.443l-52.206-.13c-1.155-.003-2.25.469-3.078 1.274-9.858 9.585-21.944 14.116-35.679 14.116-25.945 0-47.694-19.405-53.108-45.274H448.05c5.74 0 10.393-4.653 10.393-10.393v-2.169zM352.24 203.095c19.002 0 35.75 10.413 45.486 26.145h-90.971c9.735-15.732 26.484-26.145 45.485-26.145zM396.37 138.44h-94.197a7.958 7.958 0 0 1-7.958-7.958v-23.631a7.958 7.958 0 0 1 7.958-7.958h94.197a7.958 7.958 0 0 1 7.958 7.958v23.631a7.957 7.957 0 0 1-7.958 7.958z"/></svg>


--------------------------------------------------------------------------------
/src/components/Blog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul id="blog">
 3 |     <li v-for="{ node } in $static.allBlogPost.edges" :key="node.id">
 4 |       <g-link :to="node.path">
 5 |         <h6 v-html="node.title"/>
 6 |       </g-link>
 7 |       <span v-html="node.date"/>
 8 |     </li>
 9 |   </ul>
10 | </template>
11 | 
12 | <static-query>
13 |   query Blog {
14 |     allBlogPost(sortBy: "DESC") {
15 |       edges {
16 |         node {
17 |           id
18 |           title
19 |           date (format: "YYYY")
20 |           path
21 |         }
22 |       }
23 |     }
24 |   }
25 | </static-query>
26 | 
27 | <style lang="sass" scoped>
28 |   #blog
29 |     padding: 30px 0
30 | 
31 |     li
32 |       display: flex
33 |       margin-bottom: 10px
34 | 
35 |       &:last-child
36 |         margin-bottom: 0
37 | 
38 |       a
39 |         margin-right: auto
40 | 
41 |       span
42 |         display: flex
43 |         align-items: center
44 |         color: #cdcdcd
45 |         font-size: 14px
46 | 
47 |   @media (min-width: 576px)
48 |     #blog
49 |       padding: 50px 0
50 |       display: grid
51 |       grid-template-columns: repeat(2, auto)
52 |       grid-gap: 2em
53 | 
54 |       li
55 |         margin-bottom: 0
56 | </style>
57 | 


--------------------------------------------------------------------------------
/static/images/Twitter.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#4DBA87" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410.155 410.155"><path d="M403.632 74.18a162.414 162.414 0 0 1-28.28 9.537 88.177 88.177 0 0 0 23.275-37.067c1.295-4.051-3.105-7.554-6.763-5.385a163.188 163.188 0 0 1-43.235 17.862 11.02 11.02 0 0 1-2.702.336c-2.766 0-5.455-1.027-7.57-2.891-16.156-14.239-36.935-22.081-58.508-22.081-9.335 0-18.76 1.455-28.014 4.325-28.672 8.893-50.795 32.544-57.736 61.724-2.604 10.945-3.309 21.9-2.097 32.56a3.166 3.166 0 0 1-.797 2.481 3.278 3.278 0 0 1-2.753 1.091c-62.762-5.831-119.358-36.068-159.363-85.14-2.04-2.503-5.952-2.196-7.578.593-7.834 13.44-11.974 28.812-11.974 44.454 0 23.972 9.631 46.563 26.36 63.032a79.24 79.24 0 0 1-20.169-7.808c-3.06-1.7-6.825.485-6.868 3.985-.438 35.612 20.412 67.3 51.646 81.569a79.567 79.567 0 0 1-16.786-1.399c-3.446-.658-6.341 2.611-5.271 5.952 10.138 31.651 37.39 54.981 70.002 60.278-27.066 18.169-58.585 27.753-91.39 27.753l-10.227-.006c-3.151 0-5.816 2.054-6.619 5.106-.791 3.006.666 6.177 3.353 7.74 36.966 21.513 79.131 32.883 121.955 32.883 37.485 0 72.549-7.439 104.219-22.109 29.033-13.449 54.689-32.674 76.255-57.141 20.09-22.792 35.8-49.103 46.692-78.201 10.383-27.737 15.871-57.333 15.871-85.589v-1.346c-.001-4.537 2.051-8.806 5.631-11.712a174.776 174.776 0 0 0 35.16-38.591c2.573-3.849-1.485-8.673-5.719-6.795z"/></svg>


--------------------------------------------------------------------------------
/static/images/Instagram.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#4DBA87" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.536 438.536"><path d="M421.981 16.562C410.941 5.519 397.711 0 382.298 0H56.248C40.83 0 27.604 5.521 16.561 16.562 5.52 27.6.001 40.828.001 56.243V382.29c0 15.413 5.518 28.644 16.56 39.683 11.043 11.04 24.272 16.563 39.687 16.563h326.046c15.41 0 28.644-5.523 39.684-16.563 11.043-11.039 16.557-24.27 16.557-39.683V56.243c-.001-15.418-5.514-28.639-16.554-39.681zM157.462 158.025c17.224-16.652 37.924-24.982 62.097-24.982 24.36 0 45.153 8.33 62.381 24.982 17.228 16.655 25.837 36.785 25.837 60.386 0 23.598-8.609 43.729-25.837 60.379-17.228 16.659-38.014 24.988-62.381 24.988-24.172 0-44.87-8.336-62.097-24.988-17.228-16.652-25.841-36.781-25.841-60.379 0-23.601 8.613-43.73 25.841-60.386zm231.403 212.564c0 4.945-1.718 9.083-5.141 12.416-3.433 3.33-7.519 4.996-12.282 4.996h-305.2c-4.948 0-9.091-1.666-12.419-4.996-3.333-3.326-4.998-7.471-4.998-12.416V185.575H89.08c-3.805 11.993-5.708 24.462-5.708 37.402 0 36.553 13.322 67.715 39.969 93.511 26.65 25.786 58.721 38.685 96.217 38.685 24.744 0 47.583-5.903 68.527-17.703 20.937-11.807 37.486-27.839 49.676-48.112 12.183-20.272 18.274-42.4 18.274-66.38 0-12.94-1.91-25.406-5.715-37.402h38.547V370.59h-.002zm0-254.963c0 5.52-1.903 10.184-5.716 13.99-3.805 3.809-8.466 5.711-13.989 5.711h-49.676c-5.517 0-10.185-1.903-13.99-5.711-3.806-3.806-5.708-8.47-5.708-13.99V68.522c0-5.33 1.902-9.945 5.708-13.848 3.806-3.901 8.474-5.854 13.99-5.854h49.676c5.523 0 10.185 1.952 13.989 5.854 3.812 3.903 5.716 8.518 5.716 13.848v47.104z"/></svg>


--------------------------------------------------------------------------------
/static/images/RSS.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#4DBA87" xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 402.041 402.04"><path d="M54.816 292.382c-15.229 0-28.169 5.331-38.831 15.988C5.33 319.026 0 331.969 0 347.197c0 15.232 5.325 28.172 15.985 38.828 10.662 10.657 23.606 15.988 38.831 15.988 15.227 0 28.168-5.331 38.828-15.988 10.656-10.656 15.986-23.596 15.986-38.828 0-15.229-5.33-28.171-15.986-38.827-10.657-10.657-23.598-15.988-38.828-15.988zM181.01 221.002c-21.51-21.698-46.158-38.97-73.948-51.816-27.79-12.85-56.914-20.511-87.366-22.985h-1.425c-4.949 0-9.042 1.619-12.275 4.854C1.997 154.477 0 158.953 0 164.472v38.543c0 4.757 1.569 8.85 4.708 12.279 3.14 3.429 7.089 5.332 11.848 5.708 43.586 4.189 80.845 21.752 111.773 52.678 30.93 30.926 48.49 68.187 52.677 111.771.382 4.764 2.284 8.712 5.712 11.847 3.427 3.148 7.517 4.72 12.275 4.72h38.545c5.517 0 9.989-1.995 13.415-5.996 3.621-3.812 5.236-8.381 4.863-13.709-2.478-30.447-10.14-59.573-22.987-87.361-12.846-27.792-30.121-52.438-51.819-73.95z"/><path d="M367.728 239.701c-20.365-45.585-48.345-86.078-83.936-121.482-35.405-35.594-75.896-63.572-121.485-83.939C116.723 13.917 68.996 2.494 19.126.02h-.855c-4.949 0-9.136 1.713-12.563 5.14C1.903 8.583 0 12.964 0 18.294v40.825c0 4.76 1.667 8.897 4.996 12.419 3.33 3.523 7.373 5.376 12.132 5.57 40.924 2.478 79.799 12.188 116.63 29.127 36.83 16.94 68.806 38.972 95.93 66.09 27.118 27.123 49.149 59.101 66.089 95.931 16.94 36.836 26.557 75.705 28.839 116.627.195 4.764 2.046 8.809 5.564 12.139 3.524 3.329 7.762 4.999 12.71 4.999h40.823c5.331 0 9.701-1.902 13.134-5.715 3.809-3.806 5.517-8.274 5.144-13.415-2.471-49.874-13.898-97.6-34.263-143.19z"/></svg>


--------------------------------------------------------------------------------
/src/components/Portfolio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul id="work" class="Portfolio">
 3 |     <li v-for="item in Portfolio.items" class="Portfolio__Content__Card" :style="item.image | truncate(8)" :key="item.title">
 4 |       <h2>{{ item.title }}</h2>
 5 |     </li>
 6 |   </ul>
 7 | </template>
 8 | 
 9 | <script>
10 | 	import Portfolio from '~/data/Portfolio.yml'
11 | 
12 | 	export default {
13 | 		computed: {
14 | 			Portfolio () {
15 | 				return Portfolio
16 | 			}
17 |     },
18 |     filters: {
19 |       truncate: function(text, length) {
20 |         return "background-image: url(" + text.substring(length) + ")"
21 |       }
22 |     }
23 |   } 
24 | </script>
25 | 
26 | 
27 | <style lang="sass" scoped>
28 |   .Portfolio
29 |     padding: 30px 0
30 |     
31 |   .Portfolio__Content__Card
32 |     background-position: center
33 |     background-size: cover
34 |     background-repeat: no-repeat
35 |     height: 300px
36 |     border-radius: 5px
37 |     display: flex
38 |     align-items: flex-end
39 |     margin-bottom: 1em
40 |     position: relative
41 | 
42 |     &::before
43 |       content: ""
44 |       background: linear-gradient(to top, #000, rgba(225,255, 255, 0))
45 |       opacity: 0.45
46 |       border-radius: 5px
47 |       position: absolute
48 |       top: 0
49 |       right: 0
50 |       left: 0
51 |       bottom: 0
52 |       z-index: 0
53 | 
54 |     h2
55 |       position: relative
56 |       font-weight: 600
57 |       color: white
58 |       padding-bottom: 20px
59 |       padding-left: 20px
60 | 
61 |   @media (min-width: 576px)
62 |     .Portfolio
63 |       display: grid
64 |       grid-template-columns: repeat(2, auto)
65 |       grid-gap: 2em
66 | 
67 |     .Portfolio__Content__Card
68 |       margin: 0
69 | </style>


--------------------------------------------------------------------------------
/src/templates/BlogPost.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <Header/>
 4 |     <div class="article">
 5 |       <div class="meta">
 6 |         <h1>{{ $page.blogPost.title }}</h1>
 7 |         <span>{{ $page.blogPost.date }}</span>
 8 |       </div>
 9 |       <div class="article__content" v-html="$page.blogPost.content" />
10 |     </div>
11 |     <Footer/>
12 |   </Layout>
13 | </template>
14 | 
15 | <script>
16 |   import Header from '~/components/Header.vue';
17 |   import Footer from '~/components/Footer.vue';
18 | 
19 |   export default {
20 |     components: {
21 |       Header,
22 |       Footer
23 |     },
24 |     metaInfo () {
25 |       return {
26 |         title: this.$page.blogPost.title
27 |       }
28 |     }
29 |   }
30 | </script>
31 | 
32 | <page-query>
33 |   query BlogPost ($path: String!) {
34 |     blogPost (path: $path) {
35 |       title
36 |       date (format: "DD MMMM YYYY")
37 |       content
38 |     }
39 |   }
40 | </page-query>
41 | 
42 | <style lang="sass">
43 |   .article
44 |     margin-top: 15px
45 |     
46 |     .meta
47 |       text-align: center
48 | 
49 |       span
50 |         font-size: 14px
51 |         color: darken(#cdcdcd, 15%)
52 | 
53 |   .article__content
54 |     max-width: 700px
55 |     margin: 0 auto
56 |   
57 |   .article__content h1
58 |     font-size: 40px
59 |   
60 |   .article__content a
61 |     color: #4dba87
62 |     text-decoration: underline
63 |   
64 |   .article__content a:hover
65 |     text-decoration: none
66 |   
67 |   .article__content span
68 |     font-size: 80%
69 |     margin-bottom: 20px
70 |   
71 |   .article__content ol, .article__content ul
72 |     list-style-position: outside
73 |   
74 |   .article__content ul
75 |     list-style: disc
76 |     padding-left: 20px
77 |   
78 |   .article__content p:first-child
79 |     margin-top: 15px
80 |   
81 |   .article__content p
82 |     margin-top: 0
83 |     margin-bottom: 10px
84 |     line-height: 1.5
85 |   
86 | </style>


--------------------------------------------------------------------------------
/static/images/GitHub.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#4DBA87" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.549 438.549"><path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"/></svg>


--------------------------------------------------------------------------------
/static/admin/config.yml:
--------------------------------------------------------------------------------
 1 | backend:
 2 |   # Choose the backend you prefer (GitHub, GitLab, BitBucket)
 3 |   # Reference: https://www.netlifycms.org/docs/authentication-backends/
 4 |   name: github
 5 |   branch: master
 6 |   repo: mittalyashu/gridsome-starter-netlifycms
 7 | 
 8 | media_folder: "static/images"
 9 | public_folder: "static/images"
10 | 
11 | collections:
12 |   - name: "blogs"
13 |     label: "Blogs"
14 |     folder: "blog"
15 |     create: true
16 |     slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
17 |     fields:
18 |       - { label: "title", name: "title", widget: "string" }
19 |       - { label: "date", name: "date", widget: "date" }
20 |       - { label: "slug", name: "slug", widget: "string" }
21 |       - { label: "body", name: "body", widget: "markdown" }
22 | 
23 |   - name: "data"
24 |     label: "Data"
25 |     files:
26 |       - name: "about"
27 |         label: "About"
28 |         file: "src/data/About.yml"
29 |         fields:
30 |           - { label: "Title", name: "title", widget: "string", default: "About" }
31 |           - name: "items"
32 |             label: "Items"
33 |             widget: "list"
34 |             fields:
35 |               - { label: "Title", name: "title", widget: "string" }
36 |               - { label: "Description", name: "description", widget: "text" }
37 | 
38 |       - name: "contact"
39 |         label: "Contact"
40 |         file: "src/data/Contact.yml"
41 |         fields:
42 |           - { label: "Title", name: "title", widget: "string", default: "Contact" }
43 |           - { label: "Description", name: "description", widget: "text" }
44 | 
45 |       - name: "hero"
46 |         label: "Hero"
47 |         file: "src/data/Hero.yml"
48 |         fields:
49 |           - { label: "Title", name: "title", widget: "string" }
50 |           - { label: "Description", name: "description", widget: "text" }
51 | 
52 |       - name: "portfolio"
53 |         label: "Portfolio"
54 |         file: "src/data/Portfolio.yml"
55 |         fields:
56 |           - { label: "Title", name: "title", widget: "string", default: "Portfolio" }
57 |           - name: "items"
58 |             label: "Work"
59 |             widget: "list"
60 |             fields:
61 |               - { label: "Title", name: "title", widget: "string" }
62 |               - { label: "Image", name: "image", widget: "image" }
63 | 
64 |       - name: "socialmedia"
65 |         label: "Social Media"
66 |         file: "src/data/SocialMedia.yml"
67 |         fields:
68 |           - { label: "Title", name: "title", widget: "string", default: "Social Media" }
69 |           - name: "items"
70 |             label: "Social Media"
71 |             widget: "list"
72 |             fields:
73 |               - { label: "Name", name: "name", widget: "string" }
74 |               - { label: "URL", name: "url", widget: "string" }


--------------------------------------------------------------------------------
/src/components/Contact.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="contact">
  3 | 		<h2>{{ Contact.title }}</h2>
  4 | 		<div class="Contact__Content">
  5 | 			<!-- Content -->
  6 | 			<div class="Contact__Info">
  7 | 				<p>{{ Contact.description }} </p>
  8 | 				<ul class="Contact__SocialMedia__Icons">
  9 | 					<li v-for="item in SocialMedia.items" :key="item.name">
 10 | 						<a :href="item.link">
 11 | 							<g-image immediate="true" :alt="item.name" :src="'/images/' + item.name + '.svg'" />
 12 | 						</a>
 13 | 					</li>
 14 | 				</ul>
 15 | 			</div>
 16 | 			<!-- Form -->
 17 | 			<div class="Contact__Form">
 18 | 				<form action="/thank-you">
 19 | 					<label for="name">Name</label>
 20 | 					<input type="name" placeholder="Incognito">
 21 | 					
 22 | 					<label for="email">Email</label>
 23 | 					<input type="email" placeholder="incognito@email.com">
 24 | 					
 25 | 					<label for="message">Message</label>
 26 | 					<textarea type="message" placeholder="Your message..."/>
 27 | 					<button type="submit">Submit</button>
 28 | 				</form>
 29 | 			</div>
 30 | 		</div>
 31 | 	</div>
 32 | </template>
 33 | 
 34 | <script>
 35 | 	import Contact from '~/data/Contact.yml'
 36 | 	import SocialMedia from '~/data/SocialMedia.yml'
 37 | 
 38 | 	export default {
 39 | 		computed: {
 40 | 			Contact () {
 41 | 				return Contact
 42 | 			},
 43 | 			SocialMedia () {
 44 | 				return SocialMedia
 45 | 			}
 46 | 		}
 47 | 	}  
 48 | </script>
 49 | 
 50 | <style lang="sass" scoped>
 51 | 	#contact
 52 | 		padding: 30px 0
 53 | 
 54 | 		h2
 55 | 			margin-bottom: 15px
 56 | 
 57 | 		.Contact__Info
 58 | 			margin-right: 2rem
 59 | 			margin-bottom: 2rem
 60 | 
 61 | 		.Contact__Form
 62 | 
 63 | 			form
 64 | 				flex-direction: column
 65 | 				display: flex
 66 | 
 67 | 				*
 68 | 					font:
 69 | 						family: 'Nunito', sans-serif
 70 | 						size: 16px
 71 | 
 72 | 				label
 73 | 					font:
 74 | 						size: 12px
 75 | 						weight: 700
 76 | 					margin-bottom: 20px
 77 | 					text-transform: uppercase
 78 | 
 79 | 				input
 80 | 					margin-bottom: 20px
 81 | 
 82 | 				input, textarea
 83 | 					border: none
 84 | 					border-bottom: 1px solid #CFCFCF
 85 | 					outline: none
 86 | 					padding-bottom: 10px
 87 | 					color: #CFCFCF
 88 | 
 89 | 				textarea
 90 | 					height: 60px
 91 | 					resize: none
 92 | 
 93 | 				button
 94 | 					margin-top: 30px
 95 | 					padding: 15px
 96 | 					width: 100%
 97 | 					border: none
 98 | 					border-radius: 50px
 99 | 					cursour: pointer
100 | 					font-size: 16px
101 | 					font-weight: 700
102 | 					text-transform: uppercase
103 | 					background-color: #CFCFCF
104 | 					color: white
105 | 					transition: 0.2s
106 | 
107 | 					&:hover
108 | 						background-color: #4DBA87
109 | 					
110 | 	.Contact__SocialMedia__Icons
111 | 		display: flex
112 | 		flex-direction: row
113 | 		margin-top: 20px
114 | 
115 | 		li
116 | 			padding-right: 15px
117 | 
118 | 			img
119 | 				width: 15px
120 | 				height: 15px
121 | 
122 | 	@media (min-width: 576px)
123 | 		.Contact__Content
124 | 			display: flex
125 | 			flex-direction: row
126 | 
127 | 		.Contact__Info
128 | 			width: 25%
129 | 
130 | 		.Contact__Form
131 | 			width: 70%
132 | </style>
133 | 
134 | 


--------------------------------------------------------------------------------