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

Latest commit

ย 

History

59 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

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.