🔲 Minimalist Neumorphism 🔳

Fork

This is a fork version from the jekyll theme Neumorphism most of the documentation and code are from here.

Table of Contents

• About The Project
  • Built With
  • Features
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Personalize and Customize
    • _config.yml
    • Github Metadata Plugin
    • _data/*.yml
    • Particles.js
• Contributing
• License
• Acknowledgements

About The Project

Compared to the basic project this one is minimalist and is more in a modern aesthetic

This is a personal website built with Jekyll and hosted on Github Pages, which is based on the new Neumorphism design trend and was developed with a mobile-first approach. 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 then refer to personalize and customize.

Built With

Features

• Mobile-First Responsive Design
• Animated preloader animation
• Landing Page with animated background with particles.js, a Typing Carousel and animated social icons
• Dark Neumorphism Design on main content
• Animations On Scroll
• Filterable Skills word cloud
• Github's API automatically populating the Open Source Projects section
• Gulp dev workflow with BrowserSync, Autoprefixer and JS & SCSS minifying.
• Google Analytics

Getting Started

To get a local copy up and running follow these simple steps.

The commands and instructions I provide are for Linux - please look up the specific commands for your OS on your own.

if you are on MacOS check the Neumorphism documentation.

Prerequisites

• Update apt

sudo apt update

• NodeJS

sudo apt install nodejs

• Install npm

sudo apt install npm

• Jekyll

sudo apt-get install ruby-full build-essential zlib1g-dev

gem install jekyll bundler

For more information, refer to this.

• Yarn

npm install -g yarn

• Install scss to change the scss files

npm install -g scss

Installation

Recommended way: If you want to contribute to this theme or open issues due to problems implementing this on your own, I would recommend forking the Neumorphism repository directly. This makes it easier for me to solve open issues and questions or check pull requests.

• Two ways :

  • Fork the repository (using the Fork button at the top) and then clone the repository

  • Create your own repository (using the green Use this template button at the top) and then clone the repository

# Replace {YOUR_USERNAME}, {YOUR_REPOSITORY} with the actual values
git clone https://github.com/{YOUR_USERNAME}/{YOUR_REPOSITORY}.git

2: Change directory into minimalist-neumorphism

cd minimalist-neumorphism

3: Install dependencies

yarn
bundle update
bundle install
bundle config set --local path 'vendor/bundle'
sudo chown -R $USER /usr/local/bin
bundle add webrick

Usage

• Run and develop locally with live server at http://localhost:4000
• In two different terminals :

sass --watch _sass/main.scss assets/css/main.min.css
bundle exec jekyll serve

• After committing and pushing, see the Settings page of your repository to see where your site is published at via Github Pages.

Personalize and Customize

_config.yml

Edit _config.yml to personalize your site. For documentation, refer to docs/config.md.

Github Metadata Plugin

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:

• Go to the Github Token site
• 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:

JEKYLL_GITHUB_TOKEN=0YOUR0GENERATED0TOKEN0

To complete the configuration for the Github Metadata plugin, you also need to change the value of repository inside _config.yml. After this, you should the Github Metadata plugin should work properly.

For optimal results, you should make sure, that every Github project, you want included on this portfolio, has added following informations on Github:

• Description
• Homepage link, if there is a live version of it
• Topics

Example:

_data/*.yml

Edit files inside _data to add information to the portfolio. For documentation, refer to docs/data.md.

Particles.js

Edit assets/particles.json to customize the landing page backgorund animation. For more information, refer to this.

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

Acknowledgements

• Font Awesome
• Normalize.css
• Based Preloader on Codrin Pavel's version
• Typing Carousel by Gregory Schier
• Social Button Animation by Stéphane Lyver
• Adapted Damian Jankowski's color palette for the neumorphism design
• Based Timeline on Krishna Babu's version