Portfolio Template

This is a Jekyll website template designed for Prep Fellows.

Project Setup

Follow the steps below to setup the portfolio on your local machine according to the operating system you are using.

Windows

• Step 1: Install Ruby

You can skip this step if you have Ruby installed on your system. Make sure it is the latest stable version.

Open the link below to install Ruby on your system.

https://rubyinstaller.org/

• Step 2: Install the Bundler

You can skip this if you have the bundler installed on your system. Make sure it is the latest stable version.

Run the following command on Powershell.

gem install bundler

• Step 3: Install the dependencies

bundle install --path vendor/bundle

Note: The Gemfile.lock may cause issues with the installation of dependencies. If you face this issue, try deleting the Gemfile.lock file and repeat the command above.

• Step 4: Start the server

bundle exec jekyll serve

MacOS

Pre-requisites:

• rvm

Note: MacOs comes with pre-installed ruby NEVER use the pre-installed ruby for the project work, here's why.

Follow the steps below to install a separate ruby and setup the entire project locally.

• Step 1: Installing ruby using rvm

rvm install ruby

• Step 2: Make the ruby installed using rvm the default ruby

rvm --default use ruby

• Step 3: Install bundler

gem install bundler

• Step 4: Install dependencies

bundle install

Note: Make sure you don't have a whitespace in the current directory path, or it might lead to this error

• Step 5: Start the server

bundle exec jekyll serve

Linux

• Step 1: Install Ruby

You can skip this step if you have Ruby installed on your system. Make sure it is the latest stable version.

Run the following commands on the terminal.

sudo apt-get update
sudo apt-get install ruby ruby-dev

• Step 2: Install the Bundler

You can skip this if you have the bundler installed on your system. Make sure it is the latest stable version.

Run the following command on the terminal.

sudo gem install bundler

• Step 3: Install the dependencies

bundle install --path vendor/bundle

• Step 4: Start the server

bundle exec jekyll serve

Docker Development Environment

!!! Having a running Docker Daemon is a must. !!!
You can go ahead and get your Docker Engine from the official Docker Website

Setup

$ git clone https://github.com/MLH-Fellowship/prep-portfolio-22.OCT.PREP.1.git
$ cd prep-portfolio-22.OCT.PREP.1/
$ docker-compose up

The project will now be live at localhost:4000

Since the repository gets mounted on the container, you can go ahead and start your development journey on the same repository. Simply make your changes, save them, refresh your browser to see the updated changes.

Make your own!

1. Use the Template button.
2. Update _config.yml to contain your information.
   1. Change url to the URL you'll be hosting it at
   2. Make sure it has the /
3. Use something like Netlify or GitHub Pages to deploy (note, this only works on username.github.io, not username.github.io/repo-name)

Add your portfolio

Head to _data and fill out either projects.yml, experience.yml and education.yml.

Project example.

- title: Online Shopping Application
  event: MLH Prep - Batch 4.5
  date: Fall 2021

Experience example.

- role: MLH Prep Fellow
  company: MLH Fellowship
  dates: Summer 2021
  logo: fellowship.svg

Education example.

- course: Prep Fellow
  institute: MLH Fellowship
  dates: Fall 2021
  logo: fellowship.svg

Add project posts

1. Make a new .md file inside of projects.
2. Add the header to your markdown file (see below) and change the title to the name of your blog post.
3. Write your project page! Can be a README from GitHub or your Devpost page.
4. Add the page-name field to your projects.yml (see below).

Top of post markdown file post.

---
title: Project
layout: page
---

projects.yml with the page-name field.

- title: Online Shopping Application
  event: MLH Prep - Batch 4.5
  date: Summer 2021
  page-name: project

Add blog posts

1. Make a new .md file inside the _posts folder with naming convention YYYY-MM-DD-blog-post-name.md where date is represented in YYYY-MM-DD format followed by your blog title.
2. • Add the front matter at the top of your markdown file (see below) and a square image for your thumbnail in \assets\img\blogs folder..
   • Change the title to the name of your blog post, the author to your name and the img_name in front matter with your file name.
3. Write your blog page and format it with markdown syntax!

Front matter for blog post markdown file post.

---
title: Your blog title
layout: page
author: Your name
img_name: image-name.jpg
---