├── .gitignore
├── LICENSE
├── README.md
├── docs
    ├── .vuepress
    │   ├── components
    │   │   ├── Homepage.vue
    │   │   ├── MContent.vue
    │   │   ├── MarkdownCard.vue
    │   │   ├── Projects.vue
    │   │   └── styles
    │   │   │   └── config.styl
    │   ├── config.js
    │   ├── override.styl
    │   ├── public
    │   │   ├── icons
    │   │   │   ├── email.svg
    │   │   │   ├── facebook.svg
    │   │   │   ├── github.svg
    │   │   │   ├── instagram.svg
    │   │   │   ├── linkedin.svg
    │   │   │   ├── twitter.svg
    │   │   │   └── youtube.svg
    │   │   ├── kraken.jpg
    │   │   ├── profile.jpg
    │   │   └── projects
    │   │   │   └── 1.png
    │   └── style.styl
    ├── README.md
    ├── article
    │   └── README.md
    ├── guide
    │   ├── README.md
    │   ├── advanced.md
    │   ├── customize.md
    │   └── getting-started.md
    └── projects
    │   ├── README.md
    │   └── old.md
├── images
    ├── 01.jpg
    └── 02.jpg
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | *.log
 4 | .temp
 5 | vuepress
 6 | TODOs.md
 7 | dist
 8 | deploy
 9 | package-lock.json
10 | yarn.lock
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Fing
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Nice HomePage     
 2 | 
 3 | ### DEMO is [here](https://nordicgiant2.github.io/vue-nice-homepage-page/)
 4 | 
 5 | ![img](https://github.com/nordicgiant2/vue-nice-homepage/blob/master/images/01.jpg?raw=true)
 6 | 
 7 | ## About [`particles-bg-vue`](https://github.com/lindelof/particles-bg-vue) library
 8 | #### This project uses the react particle background component library [https://github.com/lindelof/particles-bg-vue](https://github.com/lindelof/particles-bg-vue). It's very simple. Anyone can be a Musketeer with it.
 9 | 
10 | ![img](https://github.com/lindelof/particles-bg-vue/raw/master/images/02.jpg?raw=true)
11 | 
12 | ## Description
13 | This project forks from [https://github.com/mtobeiyf/vuepress-homepage](https://github.com/mtobeiyf/vuepress-homepage), I made some modifications and adjustments, thanks to the [author](https://github.com/mtobeiyf).
14 | 
15 | <h2>
16 |   <a href="https://vuepress-homepage.netlify.com/guide/" target="_blank" title="Getting Started">
17 |     Getting Started
18 |   </a>
19 | </h2>
20 | 
21 | Check the full documentation here :point_right: [Guide](https://vuepress-homepage.netlify.com/guide/)
22 | 
23 | Make sure you have [Node.js](https://nodejs.org) and [yarn](https://yarnpkg.com) installed.
24 | 
25 | ```bash
26 | # Clone the repo
27 | $ git clone https://github.com/mtobeiyf/vuepress-homepage.git
28 | $ cd vuepress-homepage
29 | 
30 | # Install dependencies
31 | $ yarn  # or npm install
32 | 
33 | # Run
34 | $ yarn dev  # or npm run dev
35 | ```
36 | 
37 | Check your site at `http://127.0.0.1:8080/`
38 | 
39 | ## Features
40 | 
41 | - Markdown and emoji supported :smiley:
42 | - Elegant and minimalistic
43 | - Customizable and mobile-friendly
44 | - Multi-language support
45 | - Powered by [VuePress](https://vuepress.vuejs.org/) and [Vue.js](https://vuejs.org/)
46 | 
47 | It's **static**, which means once generated, your site could be deployed anywhere, like [Netlify](https://www.netlify.com/) or [GitHub Pages]()
48 | 
49 | ## License
50 | 
51 | Released under the [MIT License](https://opensource.org/licenses/MIT).


--------------------------------------------------------------------------------
/docs/.vuepress/components/Homepage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <component v-if="particlesBgComp" :is="particlesBgComp" v-bind="bgProps"></component>
  4 |     <div class="wrapper">
  5 |       <div class="avatar">
  6 |         <img :src="$withBase(data.avatar)" alt="">
  7 |       </div>
  8 |       <div class="card">
  9 |         <div class="bio">
 10 |           <div class="head">
 11 |             <span>
 12 |               {{data.head}}
 13 |             </span>
 14 |           </div>
 15 |           <div class="info">
 16 |             <span>
 17 |               {{data.info}}
 18 |             </span>
 19 |           </div>
 20 |           <div class="description">
 21 |             <Content/>
 22 |           </div>
 23 |         </div>
 24 | 
 25 |         <div class="interests">
 26 |           {{data.interests}}
 27 |         </div>
 28 | 
 29 |         <div class="actions">
 30 |           <div v-for="item in data.actions">
 31 |             <a :href="item.link" class="button"
 32 |                 :target="item.link.startsWith('/')?'':'_blank'">
 33 |               {{item.text}}
 34 |             </a>
 35 |           </div>
 36 |         </div>
 37 |       </div>
 38 | 
 39 |       <div class="footer" v-if="data.footer">
 40 |        
 41 |       </div>
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | export default {
 48 |   data() {
 49 |     return {
 50 |       particlesBgComp: null
 51 |     }
 52 |   },
 53 |   computed: {
 54 |     bgProps() {
 55 |       if (this.particlesBgComp) {
 56 |         return { bg: true, type: "random" }
 57 |       }
 58 |     },
 59 |     data() {
 60 |       return this.$page.frontmatter;
 61 |     }
 62 |   },
 63 |   mounted() {
 64 |     import('particles-bg-vue').then(module => {
 65 |       this.particlesBgComp = module.ParticlesBg
 66 |     })
 67 |   }
 68 | };
 69 | </script>
 70 | 
 71 | <style lang="stylus">
 72 | @import './styles/config.styl'
 73 | 
 74 | body
 75 |   .home
 76 |     max-width 100%
 77 |     min-height calc(100vh - 6rem)
 78 |     display flex
 79 |     padding 2.4rem 2rem 0
 80 |   @media (max-width: $MQMobileNarrow)
 81 |     .home
 82 |       padding-left 0
 83 |       padding-right 0
 84 |       padding 1rem 0.5rem
 85 | .wrapper
 86 |   width 100%
 87 |   display: flex
 88 |   flex-direction column
 89 |   // justify-content: center
 90 |   align-items center
 91 |   .avatar 
 92 |     position relative
 93 |     z-index 1
 94 |     img
 95 |       display block
 96 |       width 100%
 97 |       height auto
 98 |       max-width 150px
 99 |       border-radius 500rem
100 |   .card
101 |     max-width: 600px
102 |     width 100%
103 |     position relative
104 |     top -75px
105 |     padding-top 75px
106 |     margin-left auto 
107 |     margin-right auto 
108 |     background #f1f1f1
109 |     box-shadow 0 0 12px rgba(0,0,0,0.2);
110 |     border-radius 20px
111 |     text-align center 
112 |     .bio
113 |       padding 1em
114 |       .head
115 |         font-weight 700
116 |         font-size 1.3em
117 |       .info
118 |         padding-top 0.5rem
119 |         font-size 1em
120 |         color rgba(0,0,0,.4)
121 |       .description
122 |         text-align justify
123 |         p
124 |           padding 0.8em 0.5em 0
125 |           line-height normal
126 |           -webkit-margin-before 0em
127 |           -webkit-margin-after 0em
128 |           a
129 |             font-weight normal
130 |     .interests
131 |       padding 1em 1.5em
132 |       font-size: 18px
133 |       font-weight: 700
134 |       text-align: left
135 |       color: #20312a
136 |       text-decoration: underline
137 |       
138 |     .socials
139 |       
140 |       display flex
141 |       flex-direction: row
142 |       // align-items: center
143 |       justify-content: center
144 |       flex-wrap wrap 
145 |       img 
146 |         width 32px
147 |         margin 1em
148 |         cursor pointer
149 |     .actions
150 |       display flex
151 |       flex-direction: row
152 |       justify-content: center
153 |       flex-wrap wrap
154 |       // padding 1em
155 |       .button
156 |         background-color $btnBgColor
157 |         border none
158 |         border-radius 20px
159 |         color white
160 |         padding 0.5em 1em
161 |         margin 1em 0.5em
162 |         font-size 1rem
163 |         font-family inherit
164 |         font-weight 400
165 |         text-align center
166 |         text-decoration none
167 |         display inline-block
168 |         -webkit-transition-duration 0.4s /* Safari */
169 |         transition-duration 0.4s
170 |         cursor pointer
171 |         &:hover
172 |           background-color $btnHvColor
173 |   .footer
174 |       padding 1rem
175 |       // border-top 1px solid lighten(#bdc3c7, 50%)
176 |       font-weight 200
177 |       font-size 1rem
178 |       text-align center
179 |       color lighten($footColor, 25%)
180 |       margin-top auto
181 | 
182 | </style>
183 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/MContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 | import markdownIt from "markdown-it";
 8 | import emoji from "markdown-it-emoji";
 9 | 
10 | export default {
11 |   props: {
12 |     content: {
13 |       default: "",
14 |       type: String
15 |     },
16 |     inline: {
17 |       default: false,
18 |       type: Boolean
19 |     }
20 |   },
21 | 
22 |   mounted() {
23 |     var md = new markdownIt().use(emoji);
24 |     var result;
25 |     if (this.inline) {
26 |       result = md.renderInline(this.content);
27 |     } else {
28 |       result = md.render(this.content);
29 |     }
30 |     this.$el.innerHTML = result;
31 |   }
32 | };
33 | </script>
34 | 
35 | <style>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/MarkdownCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="md-card">
 3 |     <div v-if="image" class="card-image">
 4 |       <img :src="$withBase(image)" alt="">
 5 |     </div>
 6 |     <div class="card-content">
 7 |       <slot></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: ['image']
15 | };
16 | </script>
17 | 
18 | <style lang="stylus">
19 | @import './styles/config.styl';
20 | 
21 | .md-card
22 |   background-color $frontColor
23 |   border 1px solid #eee
24 |   border-radius 0.5rem
25 |   box-shadow 0 5px 15px -5px rgba(0,0,0,.1)
26 |   padding 0.5rem
27 |   margin-top 1em
28 |   min-height 150px
29 |   display flex
30 |   flex-direction row
31 |   align-items: stretch
32 |   .card-image
33 |     display flex
34 |     align-items center
35 |     padding 0.5rem
36 |     img 
37 |       max-width 150px
38 |       max-height 150px
39 |       height 150px
40 |       border: 1px solid #eee;
41 |       border-radius 0.2rem
42 |       object-fit cover
43 |   .card-content
44 |     padding 0.5rem
45 |     flex-grow 1
46 |     p
47 |       line-height normal
48 |       -webkit-margin-before 0em
49 |       -webkit-margin-after 0.5em
50 |     blockquote 
51 |       font-size 1rem
52 | 
53 | @media (max-width: $MQMobileNarrow)
54 |   .md-card
55 |     display flex
56 |     flex-direction column
57 |     margin 1rem -0.5rem
58 |     padding 0.5rem
59 |     box-sizing border-box
60 |     .card-image
61 |       flex-grow 1
62 |       align-items: stretch
63 |       img 
64 |         width 100%
65 |         max-width 400px
66 |     .card-content
67 |       pre
68 |         margin 0
69 |         border-radius 6px
70 | 
71 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/Projects.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="projects">
  3 |     <div class="wrapper">
  4 |       <Content/>
  5 |       <div class="project" v-for="project in data.projects">
  6 |         <div v-if="project.image" class="project-image">
  7 |           <img :src="$withBase(project.image)" alt="">
  8 |         </div>
  9 |         <div class="project-content">
 10 |           <div v-for="row in project.rows" >
 11 |             <m-content :content="row.content"></m-content>
 12 |           </div>
 13 |         </div>
 14 |       </div>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import MContent from "./MContent.vue";
 21 | 
 22 | export default {
 23 |   components: {
 24 |     MContent
 25 |   },
 26 |   computed: {
 27 |     data() {
 28 |       return this.$page.frontmatter;
 29 |     }
 30 |   }
 31 | };
 32 | </script>
 33 | 
 34 | <style lang="stylus">
 35 | @import './styles/config.styl'
 36 | 
 37 | .projects
 38 |   max-width 100%
 39 |   background-color $projBgColor
 40 |   min-height calc(100vh - 3.6rem)
 41 |   .wrapper
 42 |     padding 2em 2em
 43 |     display flex
 44 |     flex-direction column
 45 |     align-items center
 46 |     box-sizing border-box
 47 |     .content
 48 |       max-width 740px
 49 |       margin-left auto 
 50 |       margin-right auto
 51 |       width 100%
 52 |     .project
 53 |       background-color $frontColor   
 54 |       border 1px solid #eee
 55 |       border-radius 0.5rem
 56 |       box-shadow 0 5px 15px -5px rgba(0,0,0,.1)
 57 |       padding 0.5rem
 58 |       margin-top 1em
 59 |       max-width 740px
 60 |       width 100%
 61 |       min-height 150px
 62 |       margin-left auto 
 63 |       margin-right auto
 64 |       display flex
 65 |       flex-direction row
 66 |       align-items: stretch
 67 |       // justify-content: center
 68 |       .project-image
 69 |         display flex
 70 |         align-items center
 71 |         padding 0.5rem
 72 |         img 
 73 |           max-width 150px
 74 |           max-height 150px
 75 |           height 150px
 76 |           border: 1px solid #eee;
 77 |           border-radius 0.2rem
 78 |           object-fit cover
 79 |       .project-content
 80 |         padding 0.5rem
 81 |         flex-grow 1
 82 |         p
 83 |           line-height 1.5
 84 |           -webkit-margin-before 0em
 85 |           -webkit-margin-after 0.5em
 86 |         blockquote 
 87 |           font-size 1rem
 88 | 
 89 | @media (max-width: $MQMobileNarrow)
 90 |   .projects
 91 |     .wrapper
 92 |       padding 1rem 1rem
 93 |       .project
 94 |         display flex
 95 |         flex-direction column
 96 |         padding 0.5rem
 97 |         width 100%
 98 |         box-sizing border-box
 99 |         .project-image
100 |           flex-grow 1
101 |           align-items: stretch
102 |           img 
103 |             width 100%
104 |             max-width 400px
105 | 
106 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/components/styles/config.styl:
--------------------------------------------------------------------------------
 1 | // layout
 2 | $navbarHeight = 3.6rem
 3 | $sidebarWidth = 20rem
 4 | $contentWidth = 740px
 5 | 
 6 | // responsive breakpoints
 7 | $MQNarrow = 959px
 8 | $MQMobile = 719px
 9 | $MQMobileNarrow = 419px
10 | 
11 | // my colors
12 | // $bgColor = #ecf0f1
13 | $homeBgColor = #e6ecf0
14 | $frontColor = #ffffff
15 | $btnBgColor = #1d3d26
16 | $btnHvColor = #34495e
17 | $footColor = #7f8c8d
18 | $projBgColor = #fafbfc


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: "Hello Kraken",
 3 |   description: "The description of the site.",
 4 |   head: [["link", { rel: "icon", href: `/logo.png` }]],
 5 |   dest: "./dist",
 6 |   base: "/vue-nice-homepage-page/",
 7 |   themeConfig: {
 8 |     nav: [
 9 |       { text: "Home", link: "/" },
10 |       { text: "Projects", link: "/projects/" },
11 |       { text: "Guide", link: "/guide/" },
12 |       { text: "GitHub", link: "https://github.com/nordicgiant2/vue-nice-homepage" }
13 |     ],
14 |     sidebar: {
15 |       '/guide/': genSidebarConfig('Guide')
16 |     },
17 |     lastUpdated: 'Last Updated'
18 |   },
19 | 
20 |   markdown: {
21 |     anchor: { permalink: false },
22 |     config: md => {
23 |       md.use(require("markdown-it-katex"));
24 |     }
25 |   }
26 | };
27 | 
28 | function genSidebarConfig (title) {
29 |   return [
30 |     {
31 |       title,
32 |       collapsable: false,
33 |       children: [
34 |         '',
35 |         'getting-started',
36 |         'customize',
37 |         'advanced',
38 |       ]
39 |     }
40 |   ]
41 | }
42 | 
43 | 


--------------------------------------------------------------------------------
/docs/.vuepress/override.styl:
--------------------------------------------------------------------------------
1 | // colors
2 | $accentColor = #1d3d26
3 | $borderColor = #eaecef


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/email.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <g>
 6 | 	<polygon style="fill:#F2F2F2;" points="484.973,122.808 452.288,451.017 59.712,451.017 33.379,129.16 256,253.802 	"/>
 7 | 	<polygon style="fill:#F2F2F2;" points="473.886,60.983 256,265.659 38.114,60.983 256,60.983 	"/>
 8 | </g>
 9 | <path style="fill:#F14336;" d="M59.712,155.493v295.524H24.139C10.812,451.017,0,440.206,0,426.878V111.967l39,1.063L59.712,155.493
10 | 	z"/>
11 | <path style="fill:#D32E2A;" d="M512,111.967v314.912c0,13.327-10.812,24.139-24.152,24.139h-35.56V155.493l19.692-46.525
12 | 	L512,111.967z"/>
13 | <path style="fill:#F14336;" d="M512,85.122v26.845l-59.712,43.526L256,298.561L59.712,155.493L0,111.967V85.122
14 | 	c0-13.327,10.812-24.139,24.139-24.139h13.975L256,219.792L473.886,60.983h13.962C501.188,60.983,512,71.794,512,85.122z"/>
15 | <polygon style="fill:#D32E2A;" points="59.712,155.493 0,146.235 0,111.967 "/>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | </svg>
47 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/facebook.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 408.788 408.788" style="enable-background:new 0 0 408.788 408.788;" xml:space="preserve">
 5 | <path style="fill:#475993;" d="M353.701,0H55.087C24.665,0,0.002,24.662,0.002,55.085v298.616c0,30.423,24.662,55.085,55.085,55.085
 6 | 	h147.275l0.251-146.078h-37.951c-4.932,0-8.935-3.988-8.954-8.92l-0.182-47.087c-0.019-4.959,3.996-8.989,8.955-8.989h37.882
 7 | 	v-45.498c0-52.8,32.247-81.55,79.348-81.55h38.65c4.945,0,8.955,4.009,8.955,8.955v39.704c0,4.944-4.007,8.952-8.95,8.955
 8 | 	l-23.719,0.011c-25.615,0-30.575,12.172-30.575,30.035v39.389h56.285c5.363,0,9.524,4.683,8.892,10.009l-5.581,47.087
 9 | 	c-0.534,4.506-4.355,7.901-8.892,7.901h-50.453l-0.251,146.078h87.631c30.422,0,55.084-24.662,55.084-55.084V55.085
10 | 	C408.786,24.662,384.124,0,353.701,0z"/>
11 | <g>
12 | </g>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | </svg>
42 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/github.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
 6 | 	 xml:space="preserve">
 7 | <g>
 8 | 	<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
 9 | 		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
10 | 		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
11 | 		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
12 | 		c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
13 | 		c-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
14 | 		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
15 | 		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
16 | 		c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
17 | 		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
18 | 		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
19 | 		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
20 | 		c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
21 | 		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
22 | 		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
23 | 		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
24 | 		c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
25 | 		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
26 | 		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
27 | 		C438.536,184.851,428.728,148.168,409.132,114.573z"/>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | </svg>
60 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/instagram.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 551.034 551.034" style="enable-background:new 0 0 551.034 551.034;" xml:space="preserve">
 5 | <g>
 6 | 	
 7 | 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="275.517" y1="4.57" x2="275.517" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
 8 | 		<stop  offset="0" style="stop-color:#E09B3D"/>
 9 | 		<stop  offset="0.3" style="stop-color:#C74C4D"/>
10 | 		<stop  offset="0.6" style="stop-color:#C21975"/>
11 | 		<stop  offset="1" style="stop-color:#7024C4"/>
12 | 	</linearGradient>
13 | 	<path style="fill:url(#SVGID_1_);" d="M386.878,0H164.156C73.64,0,0,73.64,0,164.156v222.722
14 | 		c0,90.516,73.64,164.156,164.156,164.156h222.722c90.516,0,164.156-73.64,164.156-164.156V164.156
15 | 		C551.033,73.64,477.393,0,386.878,0z M495.6,386.878c0,60.045-48.677,108.722-108.722,108.722H164.156
16 | 		c-60.045,0-108.722-48.677-108.722-108.722V164.156c0-60.046,48.677-108.722,108.722-108.722h222.722
17 | 		c60.045,0,108.722,48.676,108.722,108.722L495.6,386.878L495.6,386.878z"/>
18 | 	
19 | 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="275.517" y1="4.57" x2="275.517" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
20 | 		<stop  offset="0" style="stop-color:#E09B3D"/>
21 | 		<stop  offset="0.3" style="stop-color:#C74C4D"/>
22 | 		<stop  offset="0.6" style="stop-color:#C21975"/>
23 | 		<stop  offset="1" style="stop-color:#7024C4"/>
24 | 	</linearGradient>
25 | 	<path style="fill:url(#SVGID_2_);" d="M275.517,133C196.933,133,133,196.933,133,275.516s63.933,142.517,142.517,142.517
26 | 		S418.034,354.1,418.034,275.516S354.101,133,275.517,133z M275.517,362.6c-48.095,0-87.083-38.988-87.083-87.083
27 | 		s38.989-87.083,87.083-87.083c48.095,0,87.083,38.988,87.083,87.083C362.6,323.611,323.611,362.6,275.517,362.6z"/>
28 | 	
29 | 		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="418.31" y1="4.57" x2="418.31" y2="549.72" gradientTransform="matrix(1 0 0 -1 0 554)">
30 | 		<stop  offset="0" style="stop-color:#E09B3D"/>
31 | 		<stop  offset="0.3" style="stop-color:#C74C4D"/>
32 | 		<stop  offset="0.6" style="stop-color:#C21975"/>
33 | 		<stop  offset="1" style="stop-color:#7024C4"/>
34 | 	</linearGradient>
35 | 	<circle style="fill:url(#SVGID_3_);" cx="418.31" cy="134.07" r="34.15"/>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | <g>
62 | </g>
63 | <g>
64 | </g>
65 | <g>
66 | </g>
67 | </svg>
68 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/linkedin.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 382 382" style="enable-background:new 0 0 382 382;" xml:space="preserve">
 5 | <path style="fill:#0077B7;" d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889
 6 | 	C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056
 7 | 	H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806
 8 | 	c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1
 9 | 	s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73
10 | 	c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079
11 | 	c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426
12 | 	c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472
13 | 	L341.91,330.654L341.91,330.654z"/>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | </svg>
45 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/twitter.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <path style="fill:#03A9F4;" d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016
 6 | 	c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992
 7 | 	c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056
 8 | 	c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152
 9 | 	c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792
10 | 	c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44
11 | 	C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568
12 | 	C480.224,136.96,497.728,118.496,512,97.248z"/>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | </svg>
44 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/icons/youtube.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 461.001 461.001" style="enable-background:new 0 0 461.001 461.001;" xml:space="preserve">
 5 | <path style="fill:#F61C0D;" d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
 6 | 	c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
 7 | 	C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
 8 | 	c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"/>
 9 | <g>
10 | </g>
11 | <g>
12 | </g>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/docs/.vuepress/public/kraken.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nordicgiant2/vue-nice-homepage/3ce43056f67f114a72bf550b8358899c4c8e3829/docs/.vuepress/public/kraken.jpg


--------------------------------------------------------------------------------
/docs/.vuepress/public/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nordicgiant2/vue-nice-homepage/3ce43056f67f114a72bf550b8358899c4c8e3829/docs/.vuepress/public/profile.jpg


--------------------------------------------------------------------------------
/docs/.vuepress/public/projects/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nordicgiant2/vue-nice-homepage/3ce43056f67f114a72bf550b8358899c4c8e3829/docs/.vuepress/public/projects/1.png


--------------------------------------------------------------------------------
/docs/.vuepress/style.styl:
--------------------------------------------------------------------------------
1 | // disable the search box
2 | .search-box
3 |   display none
4 | 
5 | // disable outbound link icon
6 | .icon.outbound
7 |   display none


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: Homepage
 3 | description: 'The biography and information about me.'
 4 | avatar: /profile.jpg
 5 | face: /kraken.jpg
 6 | head: 'Hello Kraken'
 7 | info: 'The kraken is a legendary'
 8 | interests: 'The address of this project is here. If you are interested, please star. Thank you very much.'
 9 | socials:
10 | - title: github
11 |   link: https://github.com/nordicgiant2/vue-nice-homepage
12 | - title: linkedin
13 |   link: https://www.linkedin.com
14 | - title: instagram
15 |   link: https://www.instagram.com
16 | - title: email
17 |   link: 'mailto:harry[at]gmail.com'
18 | actions:
19 | - text: Projects
20 |   link: /projects/
21 | - text: Github
22 |   link: https://github.com/nordicgiant2/vue-nice-homepage
23 | ---
24 | 
25 | The kraken is a legendary cephalopod-like sea monster of giant size in Scandinavian folklore. According to the Norse sagas, the kraken dwells off the coasts of Norway and Greenland and terrorizes nearby sailors. Authors over the years have postulated that the legend may have originated from sightings of giant squids that may grow to 13–15 meters in length. :dizzy:
26 | 


--------------------------------------------------------------------------------
/docs/article/README.md:
--------------------------------------------------------------------------------
  1 | # Markdown Demo
  2 | 
  3 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
  4 | 
  5 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"/>
  6 | 
  7 | ## Inline Math
  8 | 
  9 | $J \left( \theta_0, \theta_1 \right) = \frac{1}{2m}\sum\limits_{i=1}^m \left( h_{\theta}(x^{(i)})-y^{(i)} \right)^{2}$
 10 | 
 11 | + Create a list by starting a line with `+`, `-`, or `*`
 12 | + Sub-lists are made by indenting 2 spaces:
 13 |   - Marker character change forces new list start:
 14 |     * Ac tristique libero volutpat at
 15 |     + Facilisis in pretium nisl aliquet
 16 |     - Nulla volutpat aliquam velit
 17 | + Very easy!
 18 | 
 19 | ``` js
 20 | var foo = function (bar) {
 21 |   return bar++;
 22 | };
 23 | 
 24 | console.log(foo(5));
 25 | ```
 26 | 
 27 | 
 28 | # h1 Heading 8-)
 29 | ## h2 Heading
 30 | ### h3 Heading
 31 | #### h4 Heading
 32 | ##### h5 Heading
 33 | ###### h6 Heading
 34 | 
 35 | 
 36 | ## Horizontal Rules
 37 | 
 38 | ___
 39 | 
 40 | ---
 41 | 
 42 | ***
 43 | 
 44 | 
 45 | ## Typographic replacements
 46 | 
 47 | Enable typographer option to see result.
 48 | 
 49 | (c) (C) (r) (R) (tm) (TM) (p) (P) +-
 50 | 
 51 | test.. test... test..... test?..... test!....
 52 | 
 53 | !!!!!! ???? ,,  -- ---
 54 | 
 55 | "Smartypants, double quotes" and 'single quotes'
 56 | 
 57 | 
 58 | ## Emphasis
 59 | 
 60 | **This is bold text**
 61 | 
 62 | __This is bold text__
 63 | 
 64 | *This is italic text*
 65 | 
 66 | _This is italic text_
 67 | 
 68 | ~~Strikethrough~~
 69 | 
 70 | 
 71 | ## Blockquotes
 72 | 
 73 | 
 74 | > Blockquotes can also be nested...
 75 | >> ...by using additional greater-than signs right next to each other...
 76 | > > > ...or with spaces between arrows.
 77 | 
 78 | 
 79 | ## Lists
 80 | 
 81 | Unordered
 82 | 
 83 | + Create a list by starting a line with `+`, `-`, or `*`
 84 | + Sub-lists are made by indenting 2 spaces:
 85 |   - Marker character change forces new list start:
 86 |     * Ac tristique libero volutpat at
 87 |     + Facilisis in pretium nisl aliquet
 88 |     - Nulla volutpat aliquam velit
 89 | + Very easy!
 90 | 
 91 | Ordered
 92 | 
 93 | 1. Lorem ipsum dolor sit amet
 94 | 2. Consectetur adipiscing elit
 95 | 3. Integer molestie lorem at massa
 96 | 
 97 | 
 98 | 1. You can use sequential numbers...
 99 | 1. ...or keep all the numbers as `1.`
100 | 
101 | Start numbering with offset:
102 | 
103 | 57. foo
104 | 1. bar
105 | 
106 | 
107 | ## Code
108 | 
109 | Inline `code`
110 | 
111 | Indented code
112 | 
113 |     // Some comments
114 |     line 1 of code
115 |     line 2 of code
116 |     line 3 of code
117 | 
118 | 
119 | Block code "fences"
120 | 
121 | ```
122 | Sample text here...
123 | ```
124 | 
125 | Syntax highlighting
126 | 
127 | ``` js
128 | var foo = function (bar) {
129 |   return bar++;
130 | };
131 | 
132 | console.log(foo(5));
133 | ```
134 | 
135 | ## Tables
136 | 
137 | | Option | Description |
138 | | ------ | ----------- |
139 | | data   | path to data files to supply the data that will be passed into templates. |
140 | | engine | engine to be used for processing templates. Handlebars is the default. |
141 | | ext    | extension to be used for dest files. |
142 | 
143 | Right aligned columns
144 | 
145 | | Option | Description |
146 | | ------:| -----------:|
147 | | data   | path to data files to supply the data that will be passed into templates. |
148 | | engine | engine to be used for processing templates. Handlebars is the default. |
149 | | ext    | extension to be used for dest files. |
150 | 
151 | 
152 | ## Links
153 | 
154 | [link text](http://dev.nodeca.com)
155 | 
156 | [link with title](http://nodeca.github.io/pica/demo/ "title text!")
157 | 
158 | Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
159 | 
160 | 
161 | ## Images
162 | 
163 | ![Minion](https://octodex.github.com/images/minion.png)
164 | ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
165 | 
166 | Like links, Images also have a footnote style syntax
167 | 
168 | ![Alt text][id]
169 | 
170 | With a reference later in the document defining the URL location:
171 | 
172 | [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
173 | 


--------------------------------------------------------------------------------
/docs/guide/README.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | This is a skeleton built for generating static site for yourself, especially helpful and friendly to students, teachers, developers, researchers and so on.
 4 | 
 5 | It's suitable for building your personal homepage with:
 6 | - About me :raising_hand:
 7 | - Projects, publications, portfolio :books:
 8 | - Biography, timeline, resume(CV) :page_with_curl: 
 9 | 
10 | ## Features
11 | - Markdown and emoji supported :smiley:
12 | - Elegant and minimalistic
13 | - Customizable and mobile-friendly
14 | - Multi-language support
15 | - Powered by [VuePress](https://vuepress.vuejs.org/) and [Vue.js](https://vuejs.org/)
16 | 
17 | Now, let's try it :point_right:


--------------------------------------------------------------------------------
/docs/guide/advanced.md:
--------------------------------------------------------------------------------
 1 | # Advanced
 2 | 
 3 | If my template can't meet your requirement, you can further create your own template.
 4 | 
 5 | ## Vue and VuePress
 6 | 
 7 | Before you start building your own template, you should gather some knowledge.
 8 | 
 9 | - [Vue.js](https://vuejs.org/)
10 | - [VuePress](https://vuepress.vuejs.org/)
11 | 
12 | Actually, you don't have to learn the whole Vue.js. Html and CSS are more essential.
13 | 
14 | By looking at the `.vue` files I provided, you should understand how the `.vue` file works.
15 | 
16 | Read [VuePress Guide](https://vuepress.vuejs.org/guide/) and understand how VuePress is capable of.
17 | 
18 | ## Components
19 | 
20 | The components, which are the templates used in this site, are separate `.vue` files under `.vuepress/components` directory.
21 | 
22 | For example, the `MarkdownCard.vue` is a widget used in the projects page. The `Homepage.vue` is a layout that could be further customized.
23 | 
24 | For more information, check VuePress doc on [Custom Layout for Specific Pages](https://vuepress.vuejs.org/default-theme-config/#custom-layout-for-specific-pages).
25 | 
26 | 
27 | ## Override Styles
28 | 
29 | You can override styles with `.vuepress/override.styl`. Adding simple CSS rules to control how the elements appear on your site.
30 | 
31 | Check [Simple CSS Override](https://vuepress.vuejs.org/default-theme-config/#simple-css-override) for more help.
32 | 
33 | ## Beyond
34 | 
35 | You need to know more about Vue and Javascript. :smile:
36 | 
37 | Learn and create! :muscle:
38 | 


--------------------------------------------------------------------------------
/docs/guide/customize.md:
--------------------------------------------------------------------------------
 1 | # Customize
 2 | 
 3 | We'll take this repo as an example to show you how to make this site as you like.
 4 | 
 5 | Don't forget to refer to official [VuePress Guide](https://vuepress.vuejs.org/guide/) to find out more.
 6 | 
 7 | ## Structure
 8 | 
 9 | Now, we care about the **docs** directory which includes:
10 | 
11 | ```
12 | docs
13 | ├── guide
14 | ├── projects
15 | ├── README.md
16 | └── .vuepress
17 |     ├── components
18 |     │   ├── Homepage.vue
19 |     │   ├── MContent.vue
20 |     │   ├── Projects.vue
21 |     │   └── styles
22 |     │       └── config.styl
23 |     ├── config.js
24 |     ├── override.styl
25 |     └── public
26 |         ├── icons
27 |         ├── profile.jpg
28 |         └── projects
29 | ```
30 | 
31 | ### The documents
32 | 
33 | The entry page is `README.md`, followed by sub-pages under the directories `guide` and `projects`.
34 | 
35 | You can modify, delete and create your own directory and `README.md` files according to your needs.
36 | 
37 | You should have basic idea of [Markdown](https://guides.github.com/features/mastering-markdown/) and YAML Front Matter.
38 | 
39 | ### config.js
40 | 
41 | The config files of this site are all placed under `.vuepress` directory. The only two you need to concern is `config.js` and `public` folder.
42 | 
43 | ### public
44 | 
45 | You need to place your images under `docs/.vuepress/public` directory, so that you can access them using `/profile.jpg` in the yaml section of the `README.md` file.
46 | 
47 | ## Modification
48 | 
49 | ### Title
50 | 
51 | The title of the site and the navbar is in the `docs/.vuepress/config.js`
52 | 
53 | ### Navbar links
54 | 
55 | Still in the `config.js`, under the `themeConfig` key.
56 | 
57 | ### Homepage
58 | 
59 | If you don't like the homepage, simply modify the `docs/README.md` file to switch to another layout or just Markdown page.
60 | 
61 | ### Sidebar
62 | 
63 | There are two different types of sidebars: routing between multiple Markdown files and TOC of a single page.
64 | 
65 | This **Guide** contains separate files under `docs/guide`. To enable sidebar, you have to manually set this in the `config.js`.
66 | 
67 | ## Pages
68 | 
69 | ### Homepage
70 | 
71 | As you can see in the `docs/README.md`, most of the contents are written in the YAML front matter. Just modify the corresponding section and you should get yours.
72 | 
73 | ### Projects
74 | 
75 | Actually, it's a pure Markdown file. You can use the inline widget `<MarkdownCard>` to show your project, publication or portfolio. Check the example at `docs/projects/README.md`.
76 | 
77 | You can even add some more sections with Markdown to make this page a resume for you.
78 | 
79 | ### Customize Page
80 | 
81 | Adding a page is simple, create `docs/Foo/README.md` and you can access it with link `/Foo/` in the context.
82 | 
83 | To automatically generate the sidebar of the current page, add `sidebar: auto` in the front matter section.
84 | 
85 | You can even tune the styles with `<style>` tag. Check [here](https://vuepress.vuejs.org/guide/using-vue.html#using-pre-processors) for more information.


--------------------------------------------------------------------------------
/docs/guide/getting-started.md:
--------------------------------------------------------------------------------
 1 | # Getting Started
 2 | 
 3 | Since this is a template built upon [VuePress](https://vuepress.vuejs.org/), everything is wrapped up and it takes only 10 minutes to start.
 4 | 
 5 | **As esasy as 1, 2, 3**
 6 | 
 7 | ## Prerequisites
 8 | 
 9 | ### Get the repo
10 | 
11 | Download on GitHub: `Clone or download` -> `Download ZIP`
12 | 
13 | or clone it
14 | 
15 | ```bash
16 | $ git clone https://github.com/nordicgiant2/vue-nice-homepage
17 | ```
18 | 
19 | ### Prepararation
20 | - You should have [Node.js](https://nodejs.org)**>=8.0.0** installed at first.
21 | - [Yarn](https://yarnpkg.com) is also needed for package management.
22 | 
23 | You can check by running commands: `node --version`, `npm --version` and `yarn --version`
24 | 
25 | ## Configure and run
26 | 
27 | ```bash
28 | # Get into the directory
29 | $ cd vuepress-homepage 
30 | 
31 | # Install dependencies
32 | $ yarn # or npm install
33 | 
34 | # Run under developing
35 | $ yarn run dev # or npm run dev
36 | ```
37 | 
38 | Now open your favorite browser and go to `127.0.0.1:8080`, the demo is all set :sunglasses:
39 | 
40 | ![](https://user-images.githubusercontent.com/5097752/39126631-798faf4a-4735-11e8-993d-6f314d4f2b55.png)
41 | 
42 | ## Deploy
43 | 
44 | To generate your homepage as a static site, run:
45 | 
46 | ```bash
47 | $ yarn run build
48 | ``` 
49 | 
50 | This will build your site under the `dist` directory. Now you can deploy the files under `dist` directory to any web hosts provider or your own server. If you got stuck, feel free to open an issue or search it on google.
51 | 
52 | There are several available free online hosts for you:
53 | 
54 | - [GitHub Pages](https://pages.github.com/)
55 | - [Netlify](https://www.netlify.com/)
56 | 
57 | For more available instructions, have a look at the [Deploying](https://vuepress.vuejs.org/guide/deploy.html#deploying) section.
58 | 
59 | ### GitHub Pages
60 | 
61 | Create a repository, clone it to your local machine. And copy files in `dist` to your local repository folder. 
62 | 
63 | Push it to GitHub with [GitHub Desktop](https://pages.github.com/) or command line and done.
64 | 
65 | ### Netlify
66 | 
67 | Simply rename and drag and drop your `dist` directory to Netlify, follow the instruction and your site will all set up. Check the guide [here](https://vuepress.vuejs.org/guide/deploy.html#netlify).
68 | 
69 | Also, you can create your own repository and copy all the files except `.git` there. Therefore, your build command would be `yarn build` and your public directory be `dist`. Fast and easy.


--------------------------------------------------------------------------------
/docs/projects/README.md:
--------------------------------------------------------------------------------
 1 | # Work
 2 | 
 3 | Here are some works of mine :books:
 4 | 
 5 | ## Projects
 6 | 
 7 | <MarkdownCard image="/profile.jpg">
 8 | 
 9 |   Harry P., Hermione G., *et al*
10 |   
11 |   **The Making of Hello Kraken's Wand**
12 |   
13 |   Harry's wand was broken in 1997, but was repaired by him after the 1998 Battle of Hogwarts. Usually the repair of a wand is impossible, but with the use of the Elder Wand it was achievable.
14 |   
15 |   [[PDF](https://www.google.com)] [[arXiv](https://arxiv.org)]
16 | 
17 | </MarkdownCard>
18 | 
19 | ## Publications
20 | 
21 | <MarkdownCard>
22 | 
23 |   **Hello Kraken and the Deathly Hallows**
24 |   
25 |   In the epilogue of Deathly Hallows, which is set 19 years after Voldemort's death, Harry and Ginny are a couple and have three children: James Sirius Potter, who has already been at Hogwarts for at least one year, Albus Severus Potter, who is starting his first year there, and Lily Luna Potter, who is two years away from her first year at the school.
26 | 
27 |   [[Link](https://www.google.com)]
28 | 
29 | </MarkdownCard>


--------------------------------------------------------------------------------
/docs/projects/old.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: Projects
 3 | sidebar: false
 4 | 
 5 | projects:
 6 | - image: /projects/1.png
 7 |   rows:
 8 |   - content: 'Harry P., Hermione G., *et al*'
 9 |   - content: "**The Making of Hello Kraken's Wand**"
10 |   - content: "Harry's wand was broken in 1997, but was repaired by him after the 1998 Battle of Hogwarts. Usually the repair of a wand is impossible, but with the use of the Elder Wand it was achievable."
11 |   - content: '[[PDF](https://www.google.com)] [[arXiv](https://arxiv.org)]'
12 | - rows:
13 |   - content: '**Hello Kraken and the Deathly Hallows**'
14 |   - content: "In the epilogue of Deathly Hallows, which is set 19 years after Voldemort's death, Harry and Ginny are a couple and have three children: James Sirius Potter, who has already been at Hogwarts for at least one year, Albus Severus Potter, who is starting his first year there, and Lily Luna Potter, who is two years away from her first year at the school."
15 |   - content: '[[Link](https://www.google.com)]'
16 | ---
17 | 
18 | ## Projects & Publications
19 | 
20 | Harry has some cool projects :sunglasses:


--------------------------------------------------------------------------------
/images/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nordicgiant2/vue-nice-homepage/3ce43056f67f114a72bf550b8358899c4c8e3829/images/01.jpg


--------------------------------------------------------------------------------
/images/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nordicgiant2/vue-nice-homepage/3ce43056f67f114a72bf550b8358899c4c8e3829/images/02.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-nice-homepage",
 3 |   "version": "0.0.1",
 4 |   "homepage": ".",
 5 |   "description": "Generate your homepage with VuePress",
 6 |   "author": "nono <nonos@gmail.com>",
 7 |   "repository": "https://github.com/nordicgiant2/vue-nice-homepage.git",
 8 |   "scripts": {
 9 |     "clean": "rimraf dist/*",
10 |     "dev": "vuepress dev docs",
11 |     "build": "vuepress build docs"
12 |   },
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "vuepress": "^0.14.5"
16 |   },
17 |   "dependencies": {
18 |     "markdown-it": "^8.4.1",
19 |     "markdown-it-emoji": "^1.4.0",
20 |     "markdown-it-katex": "^2.0.3",
21 |     "particles-bg-vue": "^1.2.1",
22 |     "prettier": "^2.2.1"
23 |   }
24 | }
25 | 


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