diff --git a/Gemfile b/Gemfile index 454c78a..47a6a5d 100644 --- a/Gemfile +++ b/Gemfile @@ -8,3 +8,7 @@ group :jekyll_plugins do gem 'jemoji' gem 'unicode_utils' end +# group :bootstrap do +# gem 'bootstrap' +# gem 'material-sass' +# end diff --git a/_config.yml b/_config.yml index 24d221d..727bc02 100644 --- a/_config.yml +++ b/_config.yml @@ -97,7 +97,7 @@ kramdown: span: line_numbers: false block: - line_numbers: true + line_numbers: false start_line: 1 # Includes & excludes @@ -106,10 +106,12 @@ exclude: [vendor] # Plug-ins plugins: - - jekyll-email-protect - - jekyll-paginate-v2 - - jekyll/scholar - - jemoji + - jekyll-email-protect + - jekyll-paginate-v2 + - jekyll/scholar + - jemoji + # - bootstrap + # - material-sass # ----------------------------------------------------------------------------- # Jekyll Scholar diff --git a/_pages/projects.md b/_pages/projects.md index 9ef8ae9..9d3b1a8 100644 --- a/_pages/projects.md +++ b/_pages/projects.md @@ -6,44 +6,42 @@ description: A growing collection of your cool projects. nav: true --- -{% for project in site.projects %} +
-{% if project.redirect %} -
-
- + {% assign sorted_projects = site.projects | sort: "importance" %} + {% for project in sorted_projects %} +
+ {% if project.redirect %} + + {% else %} + + {% endif %} +
{% if project.img %} - - {% else %} -
- {% endif %} - -

{{ project.title }}

-
-

{{ project.description }}

- - -
-
-{% else %} - -
-
- - {% if project.img %} - - {% else %} -
- {% endif %} - -

{{ project.title }}

-
-

{{ project.description }}

- - -
-
- -{% endif %} - + project thumbnail + {% endif %} +
+

{{ project.title }}

+

{{ project.description }}

+
+ {% if project.github %} +
+
+ +
+ {% if project.github_stars %} + + + + + {% endif %} +
+ {% endif %} +
+
+
+ +
{% endfor %} + +
diff --git a/_projects/1_project.markdown b/_projects/1_project.markdown index 8bc4074..9d3351d 100644 --- a/_projects/1_project.markdown +++ b/_projects/1_project.markdown @@ -6,7 +6,9 @@ img: /assets/img/12.jpg importance: 1 --- -Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. +Every project has a beautiful feature showcase page. +It's easy to include images in a flexible 3-column grid format. +Make your photos 1/3, 2/3, or full width. To give your project a background in the portfolio page, just add the img tag to the front matter like so: @@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to img: /assets/img/12.jpg --- - -
- - - +
+
+ +
+
+ +
+
+ +
-
+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-
- +
+
+ +
-
+
This image can also have a caption. It's like magic.
-You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. +You can also put regular text between your rows of images. +Say you wanted to write a little bit about your project before you posted the rest of the images. +You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images. -
- - +
+
+ +
+
+ +
-
+
You can also have artistically styled 2/3 + 1/3 images, like these.
-

+The code is simple. +Just wrap your images with `
` and place them inside `
` (read more about the Bootstrap Grid system). +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. +Here's the code for the last row of images above: - -The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: - -
- - +```html +
+
+ +
+
+ +
+``` diff --git a/_projects/2_project.markdown b/_projects/2_project.markdown index 57a86df..4e9d4cd 100644 --- a/_projects/2_project.markdown +++ b/_projects/2_project.markdown @@ -2,11 +2,13 @@ layout: page title: Project 2 description: a project with a background image -img: /assets/img/2.jpg +img: /assets/img/3.jpg importance: 2 --- -Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. +Every project has a beautiful feature showcase page. +It's easy to include images in a flexible 3-column grid format. +Make your photos 1/3, 2/3, or full width. To give your project a background in the portfolio page, just add the img tag to the front matter like so: @@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to img: /assets/img/12.jpg --- - -
- - - +
+
+ +
+
+ +
+
+ +
-
+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-
- +
+
+ +
-
+
This image can also have a caption. It's like magic.
-You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. +You can also put regular text between your rows of images. +Say you wanted to write a little bit about your project before you posted the rest of the images. +You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images. -
- - +
+
+ +
+
+ +
-
+
You can also have artistically styled 2/3 + 1/3 images, like these.
-

+The code is simple. +Just wrap your images with `
` and place them inside `
` (read more about the Bootstrap Grid system). +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. +Here's the code for the last row of images above: - -The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: - -
- - +```html +
+
+ +
+
+ +
+``` diff --git a/_projects/3_project.markdown b/_projects/3_project.markdown index 238788f..c280f9b 100644 --- a/_projects/3_project.markdown +++ b/_projects/3_project.markdown @@ -2,12 +2,14 @@ layout: page title: Project 3 description: a project that redirects to another website -img: +img: /assets/img/7.jpg redirect: https://unsplash.com importance: 3 --- -Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. +Every project has a beautiful feature showcase page. +It's easy to include images in a flexible 3-column grid format. +Make your photos 1/3, 2/3, or full width. To give your project a background in the portfolio page, just add the img tag to the front matter like so: @@ -18,40 +20,59 @@ To give your project a background in the portfolio page, just add the img tag to img: /assets/img/12.jpg --- - -
- - - +
+
+ +
+
+ +
+
+ +
-
+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-
- +
+
+ +
-
+
This image can also have a caption. It's like magic.
-You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. +You can also put regular text between your rows of images. +Say you wanted to write a little bit about your project before you posted the rest of the images. +You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images. -
- - +
+
+ +
+
+ +
-
+
You can also have artistically styled 2/3 + 1/3 images, like these.
-

+The code is simple. +Just wrap your images with `
` and place them inside `
` (read more about the Bootstrap Grid system). +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. +Here's the code for the last row of images above: - -The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: - -
- - +```html +
+
+ +
+
+ +
+``` diff --git a/_projects/4_project.markdown b/_projects/4_project.markdown index 114308a..6690efd 100644 --- a/_projects/4_project.markdown +++ b/_projects/4_project.markdown @@ -6,7 +6,9 @@ img: importance: 3 --- -Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. +Every project has a beautiful feature showcase page. +It's easy to include images in a flexible 3-column grid format. +Make your photos 1/3, 2/3, or full width. To give your project a background in the portfolio page, just add the img tag to the front matter like so: @@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to img: /assets/img/12.jpg --- - -
- - - +
+
+ +
+
+ +
+
+ +
-
+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-
- +
+
+ +
-
+
This image can also have a caption. It's like magic.
-You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. +You can also put regular text between your rows of images. +Say you wanted to write a little bit about your project before you posted the rest of the images. +You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images. -
- - +
+
+ +
+
+ +
-
+
You can also have artistically styled 2/3 + 1/3 images, like these.
-

+The code is simple. +Just wrap your images with `
` and place them inside `
` (read more about the Bootstrap Grid system). +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. +Here's the code for the last row of images above: - -The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: - -
- - +```html +
+
+ +
+
+ +
+``` diff --git a/_projects/5_project.markdown b/_projects/5_project.markdown index cd8a689..ea93dcb 100644 --- a/_projects/5_project.markdown +++ b/_projects/5_project.markdown @@ -6,7 +6,9 @@ img: /assets/img/1.jpg importance: 3 --- -Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. +Every project has a beautiful feature showcase page. +It's easy to include images in a flexible 3-column grid format. +Make your photos 1/3, 2/3, or full width. To give your project a background in the portfolio page, just add the img tag to the front matter like so: @@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to img: /assets/img/12.jpg --- - -
- - - +
+
+ +
+
+ +
+
+ +
-
+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-
- +
+
+ +
-
+
This image can also have a caption. It's like magic.
-You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. +You can also put regular text between your rows of images. +Say you wanted to write a little bit about your project before you posted the rest of the images. +You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images. -
- - +
+
+ +
+
+ +
-
+
You can also have artistically styled 2/3 + 1/3 images, like these.
-

+The code is simple. +Just wrap your images with `
` and place them inside `
` (read more about the Bootstrap Grid system). +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. +Here's the code for the last row of images above: - -The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: - -
- - +```html +
+
+ +
+
+ +
+``` diff --git a/_projects/6_project.markdown b/_projects/6_project.markdown index 7fc6d02..21e5119 100644 --- a/_projects/6_project.markdown +++ b/_projects/6_project.markdown @@ -6,7 +6,9 @@ img: importance: 4 --- -Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. +Every project has a beautiful feature showcase page. +It's easy to include images in a flexible 3-column grid format. +Make your photos 1/3, 2/3, or full width. To give your project a background in the portfolio page, just add the img tag to the front matter like so: @@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to img: /assets/img/12.jpg --- - -
- - - +
+
+ +
+
+ +
+
+ +
-
+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-
- +
+
+ +
-
+
This image can also have a caption. It's like magic.
-You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. +You can also put regular text between your rows of images. +Say you wanted to write a little bit about your project before you posted the rest of the images. +You describe how you toiled, sweated, *bled* for your project, and then... you reveal it's glory in the next row of images. -
- - +
+
+ +
+
+ +
-
+
You can also have artistically styled 2/3 + 1/3 images, like these.
-

+The code is simple. +Just wrap your images with `
` and place them inside `
` (read more about the Bootstrap Grid system). +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. +Here's the code for the last row of images above: - -The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: - -
- - +```html +
+
+ +
+
+ +
+``` diff --git a/_sass/_base.scss b/_sass/_base.scss index bf77ed7..b8a7fcb 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -23,6 +23,15 @@ a, table.table a { text-align: center; } +// Caption + +.caption { + font-size: 0.875rem; + margin-top: 0.75rem; + margin-bottom: 1.5rem; + text-align: center; +} + // Profile diff --git a/assets/css/main.scss b/assets/css/main.scss index 85bdff6..45adc33 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -3,7 +3,7 @@ --- @charset "utf-8"; - +// @import "material"; @import "variables",