diff --git a/README.md b/README.md new file mode 100755 index 000000000..35058aa5e --- /dev/null +++ b/README.md @@ -0,0 +1,184 @@ +# Neumorphism + +> 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 + +* [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 + +[![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 + +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 + +* 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 + +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 + +Distributed under the MIT License. See `LICENSE` for more information. + + + +## 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 + + + +[product-screenshot]: docs/screenshot.gif diff --git a/_config.yml b/_config.yml index f47091fad..87cb8ec91 100755 --- a/_config.yml +++ b/_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 .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. /.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" diff --git a/_data/projects.yml b/_data/projects.yml index 76c6b9a66..7bf519783 100755 --- a/_data/projects.yml +++ b/_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" diff --git a/_data/skills-frameworks.yml b/_data/skills-frameworks.yml index 476a3b5d0..aef31384d 100755 --- a/_data/skills-frameworks.yml +++ b/_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 diff --git a/_data/skills-languages.yml b/_data/skills-languages.yml index 995e74652..06dca4f86 100644 --- a/_data/skills-languages.yml +++ b/_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 diff --git a/_data/skills-tools.yml b/_data/skills-tools.yml index 7116f0b18..fc798ed11 100644 --- a/_data/skills-tools.yml +++ b/_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 diff --git a/_data/timeline.yml b/_data/timeline.yml index eedba04d0..769e75a12 100755 --- a/_data/timeline.yml +++ b/_data/timeline.yml @@ -1,3 +1,22 @@ +# > title: Name of your timeline entry, university or work place +# > title-url: Link to your timeline entry, university or work place +# > date: Time span +# > subtitle: The description under the title +# > tags: List of tags you want to associate with the entry +# > timeline-side: The side on which you want to display the entry: left or right + +# Example of a timeline entry +# - title: airbnb +# title-url: https://example.com/ +# date: Sep 2019 - Present +# subtitle: Fullstack Developer +# tags: +# - tag: React +# - tag: Javascript +# - tag: Ruby +# - tag: Rails +# timeline-side: right + - title: airbnb title-url: https://example.com/ date: Sep 2019 - Present diff --git a/docs/config.md b/docs/config.md new file mode 100644 index 000000000..e04c40b87 --- /dev/null +++ b/docs/config.md @@ -0,0 +1,85 @@ +# Documentation for _config.yml + +## General Site Settings + +* `title`: This will be displayed as the website's name in your browser tab. +* `description`: This will be meta HTML tag content. This can be ignored. +* `baseurl`: The subpath of your site + * set this to **""**, if you renamed the repository to `.github.io` + +## Landing Page + +* `username`: This will displayed on the landing page as your name. + +* `typing_text`: This will be text, which will be typed before *scroll down for more*. + * set this to your job title, e.g. **Fullstack Developer** +* `email`: Your E-Mail address for the email button. +* Social Link buttons: + * For every social button you want to display, set your username or userid + * Usernames or ids can usually be taken from your profile links + * If you do not use one of the following websites, then leave it empty + * e.g. since I don't blog on dev.to or have Twitter my configs are like this: + * `github_username`: **longpdo** + * `codepen_username`: **longpdo** + * `dev_username`: + * `linkedin_username`: **longpdo** + * `twitter_username`: + +## 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 +* `about_me_title`: The will be displayed as the title in the About Me section +* `about_me_description`: This will be displayed under the title. + +## Skills Section + +* `show_skills_card`: + * setting this to **true**, will display the Skills section + * setting this to **false**, will omit the Skills section +* `about_me_title`: The will be displayed as the title in the Skills section + +## Timeline Section + +* `show_timeline_card`: + * setting this to **true**, will display the Timeline section + * setting this to **false**, will omit the Timeline section +* `timeline_title`: The will be displayed as the title in the Timeline section +* `cv_download_link`: The link where you host your cv. + +## 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`: + * setting this to **true**, will display your listed projects in _data/projects.yml + * setting this to **false**, will omit your listed projects +* `projects_title`: The will be displayed as the title of your 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 +* `os_projects_title`: The will be displayed as the title of your open source projects + +## Github Metadata + +* `repository`: + * Set this to your forked repository + * e.g. `/.github.io` +* `projects`: + * `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. + * `exclude`: + * `archived`: + * setting this to **true**, will exclude archived repositories + * setting this to **false**, will also display archived repositories + * `forks`: + * setting this to **true**, will exclude forked repositories + * setting this to **false**, will also display forked repositories + * `projects`: A list of the repository names you want to exclude from the listing. + +## Google Analytics + +* `id`: Set the id, if you want to track your website with Google Analytics diff --git a/docs/data.md b/docs/data.md new file mode 100644 index 000000000..566b1c6ac --- /dev/null +++ b/docs/data.md @@ -0,0 +1,81 @@ +# Documentation for _data/*.yml files + +## projects.yml + +* `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: + +```yml +- 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 +``` + +## skills-frameworks.yml + +* `name`: Name of your framework +* `weight`: Describes how good you know the framework - values from 1 up to 5 + +Example of a framework: + +```yml +- name: Jekyll + weight: 3 +``` + +## skills-languages.yml + +* `name`: Name of your programming language +* `weight`: Describes how good you know the language - values from 1 up to 5 + +Example of a language: + +```yml +- name: CSS + weight: 3 +``` + +## skills-tools.yml + +* `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: + +```yml +- name: Git + weight: 3 +``` + +## timeline.yml + +* `title`: Name of your timeline entry, university or work place +* `title-url`: Link to your timeline entry, university or work place +* `date`: Time span +* `subtitle`: The description under the title +* `tags`: List of tags you want to associate with the entry +* `timeline-side`: The side on which you want to display the entry - left or right + +Example of a timeline entry: + +```yml +- title: airbnb + title-url: https://example.com/ + date: Sep 2019 - Present + subtitle: Fullstack Developer + tags: + - tag: React + - tag: Javascript + - tag: Ruby + - tag: Rails + timeline-side: right +``` diff --git a/docs/screenshot.gif b/docs/screenshot.gif new file mode 100644 index 000000000..2f61a733d Binary files /dev/null and b/docs/screenshot.gif differ