Grape-Theme

Grape-Theme

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

Grape-Theme

λΈ”λ‘œκ·ΈλΏλ§Œ μ•„λ‹ˆλΌ 포트폴리였 νŽ˜μ΄μ§€λ„ μ§€μ›ν•˜λŠ” 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

ν”„λ‘œμ νŠΈ μ„ΈνŒ…μ€ _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

  • modal

    • modal : True λ₯Ό μ„ νƒν•œλ‹€λ©΄ λͺ¨λ‹¬ λ²„νŠΌμ΄ ν™œμ„±μ™€ λ©λ‹ˆλ‹€.

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

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.