Add README, docs and screenshot

README.md

@@ -0,0 +1,184 @@
+# Neumorphism <!-- omit in toc -->
+
+> Neumorphism styled Jekyll theme for personal websites and portfolios and resumes.
+
+[![Open Issues](https://badgen.net/github/open-issues/longpdo/neumorphism)](https://github.com/longpdo/neumorphism/issues)
+[![License](https://badgen.net/github/license/longpdo/neumorphism)](LICENSE)
+
+[View Demo](https://longpdo.github.io/neumorphism/) · [Report Bug](https://github.com/longpdo/neumorphism/issues) · [Request Feature](https://github.com/longpdo/neumorphism/issues)
+
+<!-- TABLE OF CONTENTS -->
+## Table of Contents <!-- omit in toc -->
+
+* [About The Project](#about-the-project)
+  * [Built With](#built-with)
+  * [Features](#features)
+* [Getting Started](#getting-started)
+  * [Prerequisites](#prerequisites)
+  * [Installation](#installation)
+* [Usage](#usage)
+  * [Personalize and Customize](#personalize-and-customize)
+* [Contributing](#contributing)
+* [License](#license)
+* [Acknowledgements](#acknowledgements)
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+[![Project Screenshot][product-screenshot]](https://neumorphism/cv/)
+
+This is a personal website built with Jekyll, which is based on the new Neumorphism design trend. This can be used by developers, who want to showcase their resume and portfolio If you want to use this for your own website, fork this repository and refer to [personalize and customize](#personalize-and-customize).
+
+### Built With
+
+* [Jekyll](https://jekyllrb.com/)
+
+### Features
+
+* Gulp dev workflow with [BrowserSync](https://browsersync.io/), [Autoprefixer](https://autoprefixer.github.io/) and SASS & JS minifying.
+* Animated preloader animation
+* Animated landing page background with [particles.js](https://vincentgarreau.com/particles.js/)
+* Typing Carousel on the landing page
+* [Animations On Scroll](https://michalsnik.github.io/aos/)
+* Filterable skills word cloud
+* [Github's API](https://developer.github.com/v3/) automatically populating the Open Source Projects section
+* [Font Awesome](https://fontawesome.com/)
+* [Normalize.css](https://necolas.github.io/normalize.css/)
+* [Google Analytics](https://analytics.google.com/)
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+To get a local copy up and running follow these simple steps.
+
+### Prerequisites
+
+* [NodeJS](https://nodejs.org/en/)
+
+```sh
+brew install node
+```
+
+If you need to switch between Node versions regurlarly, I would recommended to install Node via [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm/blob/master/README.md#manual-install).
+
+* [Jekyll](https://jekyllrb.com/)
+
+```sh
+gem install bundler jekyll
+```
+
+For more information, refer to [this](https://jekyllrb.com/docs/installation/).
+
+* [Yarn](https://yarnpkg.com/)
+
+```sh
+npm install -g yarn
+```
+
+### Installation
+
+1: Clone the repository
+
+```sh
+git clone https://github.com/longpdo/neumorphism.git
+```
+
+2: Change directory into neumorphism
+
+```sh
+cd neumorphism
+```
+
+3: Install dependencies
+
+```sh
+yarn
+```
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+* Run and develop locally
+
+```sh
+gulp
+```
+
+* Build production
+
+```sh
+gulp build
+```
+
+* Usual Development workflow
+
+```sh
+# Develop with live server at http://localhost:4000
+gulp
+
+# Build production to minify JS and SASS assets
+gulp build
+
+# After committing your changes, push to upstream
+git push
+
+# See the Settings page of your repository to see where your site is published at
+```
+
+### Personalize and Customize
+
+1: Edit `_config.yml` to personalize your site. For documentation, refer to `docs/config.md`.
+
+1.1: If you want to automatically have your Github repositories pulled for the *Open Source Projects* section, then you also need to authenticate yourself for the Github Metadata plugin to work.
+
+You need to generate a new personal access token on GitHub:
+
+* Open [this](https://github.com/settings/tokens/new)
+* Select the scope public_repository, and add a description.
+* Confirm and save the settings. Copy the token you see on the page.
+* Create a `.env` file inside your repository and add your generated `JEKYLL_GITHUB_TOKEN`:
+
+```text
+JEKYLL_GITHUB_TOKEN=0YOUR0GENERATED0TOKEN0
+```
+
+2: Edit files inside `_data` to add information to the portfolio. For documentation, refer to `docs/data.md`.
+
+3: Edit `assets/particles.json` to customize the landing page backgorund animation. For more information, refer to [this](https://github.com/VincentGarreau/particles.js/#options).
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<!-- LICENSE -->
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<!-- ACKNOWLEDGEMENTS -->
+
+## Acknowledgements
+
+* Based Preloader on [Codrin Pavel's](https://codepen.io/zerospree/pen/aCjAz) version
+* Typing Carousel by [Gregory Schier](https://codepen.io/gschier/pen/jkivt)
+* Social Button Animation by [Stéphane Lyver](https://codepen.io/wouwi/pen/Lwrmi)
+* Adapted [Damian Jankowski's](https://codepen.io/dolaron/pen/rNadmOE) color palette for the neumorphism design
+* Based Timeline on [Krishna Babu's](https://codepen.io/krishnab/pen/OPwqbW) version
+
+https://github.com/jekyll/github-metadata/blob/master/docs/authentication.md
+
+<!-- MARKDOWN LINKS & IMAGES -->
+
+[product-screenshot]: docs/screenshot.gif

_config.yml

@@ -1,55 +1,108 @@
-# Site settings
+### VALUES YOU SHOULD CHANGE ###
+
+# GENERAL SITE SETTINGS
+# title: This will be displayed as the website's name in your browser tab.
 title: Neumorphism
+# description: This will be meta HTML tag content. This can be ignored.
 description: Personal website powered by Jekyll
-baseurl: "/neumorphism" # the subpath of your site, e.g. /blog
-# url: "localhost:3000" # the base hostname & protocol for your site e.g. https://example.com/
+# baseurl: The subpath of your site
+# > set this to "", if you renamed the repository to <user>.github.io
+baseurl: "/neumorphism"
 
-# Landing Page
+# LANDING PAGE
+# username: This will displayed on the landing page as your name.
 username: Neumorphism
+# typing_text: This will be typed before 'scroll down for more'.
+# > set this to your job title, e.g. Fullstack Developer
 typing_text: Jekyll Theme
+# email: Your E-Mail address for the email button.
 email: email@example.com
+# For every social button you want to display, set your username or userid
+# If you do not use one of the following websites, then leave it empty
+# > twitter_username:
 github_username: longpdo
 codepen_username: exampleUser
 dev_username: exampleUser
 linkedin_username: exampleUser
 twitter_username: exampleUser
 
-# About Me Section
+# ABOUT ME SECTION
+# show_aboutme_card:
+# > setting this to true, will display the About Me section
+# > setting this to false, will omit the About Me section
 show_aboutme_card: true
+# about_me_title: The will be displayed as the title in the About Me section
 about_me_title: About Me
+# about_me_description: This will be displayed under the title.
 about_me_description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
-# Skills Section
+# SKILLS SECTION
+# show_skills_card:
+# > setting this to true, will display the Skills section
+# > setting this to false, will omit the Skills section
 show_skills_card: true
+# about_me_title: The will be displayed as the title in the Skills section
 skills_title: Skills
 
-# Timeline Section
+# TIMELINE SECTION
+# show_timeline_card:
+# > setting this to true, will display the Timeline section
+# > setting this to false, will omit the Timeline section
 show_timeline_card: true
+# timeline_title: The will be displayed as the title in the Timeline section
 timeline_title: Education & Experience
+# cv_download_link: The link where you host your cv.
+# > e.g. you share your cv on your dropbox, then add the dropbox link here
 cv_download_link: https://example.com/
 
-# Projects Section
+# PROJECTS SECTION
+# show_projects_card:
+# > setting this to true, will display the Projects section
+# > setting this to false, will omit the Projects section
 show_projects_card: true
+# show_projects:
+# > setting this to true, will display your listed projects in _data/projects.yml
+# > setting this to false, will omit your listed projects
 show_projects: true
+# projects_title: The will be displayed as the title of your projects
 projects_title: Projects
+# show_os_projects:
+# > setting this to true, will display your public projects on github
+# > setting this to false, will omit your public projects on github
 show_os_projects: true
+# os_projects_title: The will be displayed as the title of your open source projects
 os_projects_title: Open Source Projects
 
-# Github-Metadata
+# GITHUB-METADATA
+# Set this to your forked repository
+# > e.g. <user>/<user>.github.io
 repository: longpdo/neumorphism
 projects:
-  # pushed or stars
+  # sortby:
+  # > set this to pushed, if you want to sort your github repositories by time.
+  # > set this to stars, if you want to sort your github repositories by stars.
   sort_by: pushed
   exclude:
+    # archived:
+    # > setting this to true, will exclude archived repositories
+    # > setting this to false, will also display archived repositories
     archived: true
+    # forks:
+    # > setting this to true, will exclude forked repositories
+    # > setting this to false, will also display forked repositories
     forks: true
+    # projects: A list of the repository names you want to exclude from the listing.
     projects:
-    # - repo-name
+    # - repo1-to-be-excluded
+    # - repo2-to-be-excluded
 
-# Google-analytics
+# GOOGLE-ANALYTICS
+# Set the id, if you want to track your website with Google Analytics
 google-analytics:
   id: ""
 
+### END OF VALUES YOU SHOULD CHANGE ###
+
 plugins:
   - "jekyll-github-metadata"
 

_data/projects.yml

@@ -1,3 +1,18 @@
+# > name: Name of your project
+# > descr: Description of your project
+# > demo: Link to your project
+# > tags: List of technologies you used in your projects
+#
+# Example of a project
+# - name: project X
+#   descr: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"
+#   demo: https://example.com/
+#   tags:
+#     - tag: MongoDB
+#     - tag: Express
+#     - tag: AngularJS
+#     - tag: Node
+
 - name: project X
   descr: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"
   demo: https://example.com/
@@ -8,17 +23,11 @@
     - tag: Node
 
 - name: project Y
-  descr: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"
-  demo: https://example.com/
-  tags:
-    - tag: MongoDB
-    - tag: Express
-    - tag: React
-    - tag: Node
-
-- name: project Z
   descr: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"
   demo: https://example.com/
   tags:
     - tag: Python
     - tag: Django
+
+- name: project Z
+  descr: "You can also set a project without demo link and no tags"

_data/skills-frameworks.yml

@@ -1,3 +1,10 @@
+# > name: Name of your framework
+# > weight: Describes how good you know the framework - values from 1 up to 5
+#
+# Example of a framework
+# - name: Framework
+#   weight: 5
+
 - name: Angular
   weight: 5
 

_data/skills-languages.yml

@@ -1,3 +1,10 @@
+# > name: Name of your programming language
+# > weight: Describes how good you know the language - values from 1 up to 5
+#
+# Example of a Language
+# - name: Language
+#   weight: 5
+
 - name: TypeScript
   weight: 5
 

_data/skills-tools.yml

@@ -1,3 +1,10 @@
+# > name: Name of your Dev Tool
+# > weight: Describes how good you know the tool - values from 1 up to 5
+#
+# Example of a Dev Tool
+# - name: Git
+#   weight: 5
+
 - name: Git
   weight: 5