/ddongule-simple-portfolio

πŸͺœ Portfolio for Developers! Make your own portfolio Simple and Fast!

Primary LanguageSCSSMIT LicenseMIT

logo

license license
✨ Make your own portfolio! Easy and Fast. ✨

πŸ‡°πŸ‡· ν•œκ΅­μ–΄λ‘œ 보기 πŸ‡°πŸ‡·

πŸ’« ddongule-simple-portfolio

🌟 This is a simple-portfolio template for Developers. You can customize this template to make your own portfolio. You don't have to understand the code. Just edit db.json and some assets(images, markdowns) then it's all done!

πŸ’› See Example! πŸ‘‰ (ddongule's portfolio)

🌿 Features

  • πŸ”₯ One Page Layout
  • πŸ”₯ Responsive Web
  • πŸ”₯ Dark/Light Theme
  • πŸ”₯ Language Support (Korean/English)

πŸͺœ How To Use

1. Clone this repository

$ git clone https://github.com/ddongule/ddongule-simple-portfolio

2. Go into the repository

$ cd ddongule-simple-portfolio

3. Install Dependencies and Start Development Server

  • Using NPM

    $ npm install
    
    $ npm start
    
  • Using Yarn

      $ yarn
    
      $ yarn start
    

4. 🌎 Start Developing! Let's Go!

πŸš€ Quick Start

If you do not want to use any of the items below, feel free to delete it from db.json! It will work fine!

  • example) You can choose sections that you want to use! Just delete it from db.json

    • src/db.json

        {
          "aboutMe": {
            "name": "그루밍",
            "nickName": "nickName!",
            "profileImg": "../assets/images/me.gif",
            "email": "mnk918p@gmail.com",
            "githubUrl": "https://github.com/ddongule",
            "blogUrl": "https://mingule.tistory.com/",
            "linkedInUrl": "https://www.linkedin.com/"
          },
      
          "timestamp": [
            {
              "title": "μš°μ•„ν•œ νš½μ œλ“€",
              "when": "21.12 ~ ",
              "organizer": "μš°μ•„ν•œ νš½μ œλ“€",
              "tags": ["company"]
            }
          ]
        }
      

πŸ‡°πŸ‡·πŸ‡ΊπŸ‡Έ 0. Select Default Language!

Default Language : English

πŸ”₯ You can Select whether to use English or Korean

example-image

  • Go to /src/db.json

    πŸ‡ΊπŸ‡Έ [Default] Set Default Language as English

        "meta": {
          ...
          "defaultLanguage": "English"
          ...
        }
    

    πŸ‡°πŸ‡· Set Default: Korean

    If you want to use Korean as your default language, just copy and paste the code below the line.

        "meta": {
          ...
          "defaultLanguage": "Korean"
          ...
        }
    

πŸ‘‰ 1. Main Title Section.

example-image

  • Go to /src/db.json

        "aboutMe": {
          ...
          "nickName": "type your own title!"
          ...
        }
    

πŸ‘‰ 2. About Me Section.

example-image

  • Change Main Image
  1. Put your image to /public/assets/images

    • jpg, gif, png
  2. Go to /src/db.json

      "aboutMe": {
        ...
        "profileImg": "../assets/images/yourImageFileName"
        ...
      }
    
  • Change Introduction Text

  • πŸ‡ΊπŸ‡Έ Go to /src/assets/static/markdown/aboutMySelf.english.md

    • (+) To use the Korean version, you should write aboutMySelf.korean.md too.

    Write With Markdown! Then You'll See..

    example-image

    The Result will be like this!

    example-image
    1. h1, h2, h3

        # h1
      
        ## h2
      
        ### h3
      
    2. Bold text with Highlight

      • yellow

          **Hi, my name is ddongule**
        
      • red

          +R+Hi, my name is ddongule+R+
        
      • blue

          +B+Hi, my name is ddongule+B+
        
      • green

          +G+Hi, my name is ddongule+G+
        
    3. Enter

        <br />
      
    4. Code

        `React.js`
        `HTML/CSS(SASS)`
        `Javascript`
      
    5. CheckList (Black & White)

        & Check List(Black & White)
      
    6. CheckList (HighLight)

        - Check List(Black & White)
      
    7. Ordered List

        1. Ordered List
        2. Ordered List
        3. Ordered List
        4. Ordered List
      
    8. Link

        [TextToShow](https://www.your.link)
      

πŸ‘‰ 3. Skill Sets Section.

example-image

Write down your Professional Skill Sets here!

✨ Customize your own SkillSets Section!

  • Go to /src/db.json

    "skillSets": [
      {
        "category": "Front End Skills",
        "skills": [
          { "skill": "Javascript", "level": "5" },
          ...
        ]
      },
      ...
    ]

πŸ‘‰ 4. Projects Section.

example-image

Write down the Projects you have made!

✨ Customize your own Projects Section!

  • Go to /src/db.json

    "projects": [
      {
        "imgUrl": "/assets/images/exmaple.png",
        "githubUrl": "https://github.com/ddongule",
        "projectUrl": "www.ddongule.com",
        "title": "ddongule-simple-portfolio",
        "term": "21.02.02 v1.3.0",
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
        "attribution": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
        "tags": [] // Even if there are no tags to write, you should leave the empty array as is.
      },
      ...
    ]

πŸ‘‰ 5. Timestamp Section.

example-image

Write down your Timestamps you have made!

✨ Customize your own Timestamp Section!

  • Go to /src/db.json

    "timestamp": [
      {
        "title": "Woowa Sisters",
        "when": "21.12 ~ ",
        "organizer": "Woowa Sisters",
        "tags": ["company"] // Even if there are no tags to write, you should leave the empty array as is.
      },
      ...
    ]

πŸ‘‰ 6. Experiences Section.

example-image

Write down your Experiences that you have!

✨ Customize your own Experiences Section!

  • Go to /src/db.json

    "experiences": [
      {
        "imgUrl": "/assets/images/exmaple.png",
        "title": "[Software Engineer] Woowa Sisters Co.",
        "term": "21.02 - ν˜„μž¬ 진행 쀑",
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
        "experienceUrl": "https://woowacourse.github.io/"
      },
      ...
    ]

πŸ‘‰ 7. Education Section.

example-image

Write down your Educations!

✨ Customize your own Education Section!

  • Go to /src/db.json

    "educations": [
      {
        "title": "Woowa University",
        "term": "2013.03 - 2017.03",
        "description": "[Graduated] Computer Science and Engineering"
      },
      ...
    ]

🐞 Bug Reporting

How to Contribute?

  1. Fork this repository
  2. Create your own branch: git checkout -b new-feature
  3. Add and Commit: git commit -am 'feat: add new feature
  4. Push to your branch: git push origin new-feature
  5. Submit a Pull Request!🌟

License