Skip to content

๐Ÿ‡This is a jekyll Grape-Theme. It is good for a portfolio as well as a blog!

License

Notifications You must be signed in to change notification settings

naye0ng/Grape-Theme

Folders and files

NameName
Last commit message
Last commit date
Jul 16, 2019
Jan 31, 2020
May 5, 2020
Apr 27, 2020
May 5, 2020
Sep 29, 2019
Jun 4, 2019
Jun 29, 2019
Nov 28, 2019
Jul 11, 2019
Jun 4, 2019
Apr 28, 2020
Jul 11, 2019
Jun 7, 2019
Jun 8, 2019
Jun 15, 2019
Jun 15, 2019

Repository files navigation

Grape-Theme

home

๋ธ”๋กœ๊ทธ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€๋„ ์ง€์›ํ•˜๋Š” Grape-Theme๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•˜์„ธ์š”.

Welcome to Grape Theme! It is good for a portfolio as well as a blog.
Customize Grape-Theme and use it for free.

Demo

Installation

  1. Fork and clone the Grape Theme repo

    git clone https://github.com/naye0ng/Grape-Theme.git
    
  2. Install Jekyll

    gem install jekyll
    
  3. Install the theme's dependencies

    bundle install
    
  4. Update _config.yml and projects.yml with your own settings.

  5. Run the Jekyll server

    bundle exec jekyll serve
    

Customizing

Grape-Theme์—์„œ๋Š” ์ž๋ž‘ํ•  ๋งŒํ•œ ๋‘ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํ™ˆ ํ™”๋ฉด์˜ ํ”„๋กœํ•„ ์„น์…˜๊ณผ ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€์˜ ํ”„๋กœ์ ํŠธ, ์ƒ์„ธ ํ”„๋กœํ•„ ๊ธฐ๋Šฅ์ด ๊ทธ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ์ด ๋ชจ๋“  ๊ธฐ๋Šฅ๋“ค์€ _config.yml ์™€ projects.yml ํŒŒ์ผ์„ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค.

Grape-Theme has two great features: the profile section and the project section of the portfolio page. Just by changing _config.yml and projects.yml , you can use all of these features.

Blog Settings

๊ธฐ๋ณธ์ ์ธ ๋ธ”๋กœ๊ทธ ์„ค์ •์€ config.yml ์—์„œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

The blog configuration is available in config.yml.

Site configuration

baseurl: "{subpath}"
url : "https://{username}.github.io"

theme_settings :
  title : {blog title}

Profile Settings

๊ฐ„๋‹จํ•œ ํ”„๋กœํ•„ ์ •๋ณด๋Š” ํ™ˆ ํ™”๋ฉด์—์„œ ์ถœ๋ ฅ๋˜๋ฉฐ, experience ๋ฐ skills ๋ถ€๋ถ„์€ ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€์—์„œ ํ•จ๊ป˜ ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค.

Profile is displayed on the index page, and also experience and skills are displayed on the portfolio page.

profile :
  image : assets/img/{prorile image}
    username : {username}
    description : 
    experience :
      - start :
        end : 
        experience : {company name}, {title}
     skills : 
      - skill : 
        value : 85  # Percent value

Pagination

ํ•œ ํŽ˜์ด์ง€์—์„œ ๋ณด์—ฌ์งˆ ํฌ์ŠคํŒ… ๊ฐœ์ˆ˜๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

Defines the number of posts to be shown on one page.

paginate: 5

Disqus

Disqus shortname์„ ์„ค์ •ํ•˜๊ณ , ํฌ์ŠคํŒ… ์†์„ฑ์— comments : true ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ธ”๋กœ๊ทธ ๊ธ€์—์„œ ๋Œ“๊ธ€์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

you can use the comments by following document and adding a comments : true

disqus_shortname :

Portfolio Settings

home

ํ”„๋กœ์ ํŠธ ์„ธํŒ…์€ _data/projects.yml์—์„œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

The Project configuration is available in _data/projects.yml.

ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€์—์„œ๋Š” ํ”„๋กœ์ ํŠธ ๋ชฉ๋ก๊ณผ ์ƒ์„ธ๋ณด๊ธฐ๋ฅผ ๋ชจ๋‹ฌ๋กœ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ƒ์„ธ๋ณด๊ธฐ๋Š” ์„ ํƒ์ ์ด๋ฉฐ, ์ƒ์„ธ๊ฐ’์ด modal : False์ธ ๊ฒฝ์šฐ ๋ชจ๋‹ฌ ๋ฒ„ํŠผ์€ ์ƒ์„ฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

The portfolio page provides projects and detailed views by modal. If modal : False is selected, modal will not be displayed on site.

  • print :

    • print : True ๋ฅผ ์„ ํƒํ•œ๋‹ค๋ฉด, ๋ธ”๋กœ๊ทธ์˜ ํ™ˆ ํ™”๋ฉด์—์„œ๋„ ํ”„๋กœ์ ํŠธ์˜ ์ •๋ณด๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.
    • If print : True is selected, it will be displayed on landing page

    print project

  • modal

    • modal : True ๋ฅผ ์„ ํƒํ•œ๋‹ค๋ฉด ๋ชจ๋‹ฌ ๋ฒ„ํŠผ์ด ํ™œ์„ฑ์™€ ๋ฉ๋‹ˆ๋‹ค.

    • If modal : True is selected, modal will be displayed on the Portfolio page

      home

print : True
modal : True  

๋‹น์‹ ์˜ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๋งํฌ์™€ ์ƒ์„ธ ์„ค๋ช…์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Add details(link, description) about your projects

url : https://github.com/naye0ng/Grape-Theme # Full URL
image : "portfolio.png" # path: assets/project/
date : 2019.06.09 - 2019.07.11
title : 
summary : 
description :  
# modal contents
contents :
  - title :
    image :      	    
    description : 

Colors

๋ธ”๋กœ๊ทธ์˜ ์ปฌ๋Ÿฌ๋“ค์€ _sass/base/_variable.scss ์—์„œ ํ•œ๋ฒˆ์— ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

You can change colors at once. colors are in _sass/base/_variable.scss

Posts in Grape theme

์ด ๋ธ”๋กœ๊ทธ์˜ ๋ชจ๋“  ํฌ์ŠคํŒ… ์Šคํƒ€์ผ์€ _sass/base/_utility.scss ์— ์ •์˜๋˜์–ด ์žˆ์œผ๋ฉฐ Demo page์™€ Demo page์—์„œ ์—ฌ๋Ÿฌ ํƒœ๊ทธ๋“ค์˜ ์ถœ๋ ฅ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

You can confirm how to draw tags at here and here

Create a new post

  1. Create a .md inside _posts folder

    2019-07-11-grape-theme.md
    

    ํ•œ๊ธ€๋กœ ํŒŒ์ผ ์ด๋ฆ„์„ ๋งŒ๋“œ๋Š” ๊ฒฝ์šฐ, ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์„ ๋ถ™์˜€์„๋•Œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋˜๋กœ๋ก ์˜์–ด๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”:D

  2. Write the Front Matter and content in the file.

    ---
    layout: post
    title: title
    subtitle : subtitle
    tags: [tag1, tag2]
    author: 
    comments : 
    ---
    

License

The theme is available as open source under the terms of the MIT License.