Jekport

"Jekport" is a Jekyll portfolio. More specifically, it's a Jekyll theme for personal websites, portfolios, and resumes.

View Demo · Request Feature

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
    • Favicons
• Contributing
• License
• Acknowledgements

About The Project

This is a personal website built with Jekyll and optimized for hosting on Github Pages. This can be used by professionals, 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

• Jekyll

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.

Prerequisites

• NodeJS

  • If you need to switch between Node versions regurlarly, I would recommend to install Node via Node Version Manager.

• Ruby WITH DevKit

  • For more information, refer to this.

• Jekyll

  • For more information, refer to this.

gem install bundler jekyll

• Yarn

npm install -g yarn

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 repository directly. This makes it easier for me to solve open issues and questions or check pull requests.

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

# Replace {YOUR_USERNAME} with your actual username
git clone https://github.com/{YOUR_USERNAME}/jekport.git

or

1.2: 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 jekport

cd jekport

3: Install dependencies

yarn
bundle install

Usage

• Run and develop locally with live server at http://localhost:4000:

  bundle exec jekyll serve
  

• You can also pass the --livereload option to serve to automatically refresh the page with each change you make to the source files:

bundle exec jekyll serve --livereload 

• Once you're ready to comit and push your changes, first run

  bundle exec jekyll build
  

• After committing and pushing your changes, 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.
• Expand the Personal access tokens tab.
  • You can select either the Fine-grained tokens or Tokens (classic) option.
  • For this guide, I'm going to use the Tokens (classic) option.
• Select Tokens (classic) and then Generate new token (classic).
• Enter the token settings. My recommended settings are as follows:
  • Note: JEKYLL_GITHUB_TOKEN
  • Expiration: Setting an expiration date on personal access tokens is highly recommended as this helps keep your information secure. GitHub will send you an email when it's time to renew a token that's about to expire. Tokens that have expired can be regenerated, giving you a duplicate token with the same properties as the original.
  • Select scopes: Under repo, enable public_repo.
  • Select Generate Token and copy the token.
• Save your token as an environment variable value and/or as a repository secret.
  • For local development (off of GitHub), you can save your token as an environment variable value.
    • This is a simple, general solution and by no means the best or most secure one.
    • Create a .env file inside your local repository and add the variable JEKYLL_GITHUB_TOKEN and token. It should look like this: JEKYLL_GITHUB_TOKEN=0YOUR0GENERATED0TOKEN0
    • Confirm that the .env file is included, and uncommented, in the .gitignore file.
  • For use on GitHub, you'll want to save your token as a repository secret.
    • Go to your repo's settings, then scroll down to the Security section.
    • Expand Secrets and variables, select Actions, and then select New repository secret.
    • Enter the variable name (e.g. JEKYLL_GITHUB_TOKEN) in the name field and the token in the secret field. Select Add secret.

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 information on Github:

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

_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.

Favicons

The favicons files are stored in assets/favicon. To update the favicon images:

• Go to the Real Favicon Generator and Select your favorite image.
• Scroll to the bottom and select Generate your Favicons and HTML code.
• Under the HTML5 tab, select option 1: Download your package: Favicon Package.
• Unzip the folder and copy every file except browserconfig.xml, mstile-150x150.png and safari-pinned-tab.html to the assets/favicon folder/directory.
  • If prompted, select to replace the existing files in the destination.

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, as described in Installation.
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

• Fork of Long Do's Neumorphism project
• 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